En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour vous proposer des contenus et services adaptés. Politique de confidentialité.

1804.png

Exemple avec la skin 1804

Les 6 images correspondent à 6 boîtes positionnées dans Config Accueil (ce sont les boîtes de l'éditorial).

1804a.png1804b.png

C'est dans le fichier styleplus.css que ces boîtes sont configurées :


#EditoBoxes {
	max-width: 1540px; /*largeur maximun de l'éditorial*/
	margin: auto;
}
/*hauteur des boîtes*/
#EditoBoxes .row.E0row0 .tbl, #EditoBoxes .row.E0row0 .tblover, #EditoBoxes .row.E0row1 .tbl, #EditoBoxes .row.E0row1 .tblover {
	margin: 0;
	height: 322px;
	padding-right: 50px;
	padding-left: 50px;
}
/*couleur des liens sur l'image*/
#EditoBoxes .row.E0row0 .tbl a, #EditoBoxes .row.E0row0 .tbl p, #EditoBoxes .row.E0row1 .tbl a, #EditoBoxes .row.E0row1 .tbl p {
	color: transparent;
}
/*couleur des liens survolés*/
#EditoBoxes .row.E0row0 .tblover a, #EditoBoxes .row.E0row0 .tblover p, #EditoBoxes .row.E0row1 .tblover a, #EditoBoxes .row.E0row1 .tblover p {
	color: #fff;
	line-height: 322px; /*hauteur de la ligne*/
}
#EditoBoxes h5 a { /*taille des liens*/
	font-size: 28px;
}
#EditoBoxes .row .col { /*alignement vertical*/
	vertical-align: middle;
}
.col.col0.wcol0E00 .tbl { /* ligne 0 - colonne 0 - fillette*/
	background: url(img/fillette.png) no-repeat 50% 50%;
}
.col.col0.wcol0E00 .tblover { /* ligne 0 - colonne 0 - fillette - SURVOL*/
	background: #ffcc00; /*jaune*/
}
.col.col1.wcol1E00 .tbl { /* ligne 0 - colonne 1 - bebe*/
	background: url(img/bebe.png) no-repeat 50% 50%;
}
.col.col1.wcol1E00 .tblover { /* ligne 0 - colonne 1 - bebe - SURVOL*/
	background: #ee61a0; /*rose*/
}
.col.col2.wcol2E00 .tbl { /* ligne 0 - colonne 2 - garçon*/
	background: url(img/garcon.png) no-repeat 50% 50%;
}
.col.col2.wcol2E00 .tblover { /* ligne 0 - colonne 2 - garçon - SURVOL*/
	background: #1fbffd; /*bleu*/
}
.col.col0.wcol0E01 .tbl { /* ligne 1 - colonne 0 - homme*/
	background: url(img/homme.png) no-repeat 50% 50%;
}
.col.col0.wcol0E01 .tblover { /* ligne 1 - colonne 0 - homme - SURVOL*/
	background: #ff6a00; /*orange*/
}
.col.col1.wcol1E01 .tbl { /* ligne 1 - colonne 1 - nageurs*/
	background: url(img/nageurs.png) no-repeat 50% 50%;
}
.col.col1.wcol1E01 .tblover { /* ligne 1 - colonne 1 - nageurs - SURVOL*/
	background: #9929bd; /*violet*/
}
.col.col2.wcol2E01 .tbl { /* ligne 1 - colonne 2 - femme*/
	background: url(img/femme.png) no-repeat 50% 50%;
}
.col.col2.wcol2E01 .tblover { /* ligne 1 - colonne 2 - femme - SURVOL*/
	background: #62a27a; /*vert*/
}


Date de création : 18/09/2018 @ 19:37
Catégorie : Trucs et astuces -
Page lue 264 fois

Vous êtes ici :   Accueil » Skin 1804 - Boîtes survolées (image / texte)
 
 
Préférences

Se reconnecter :
Votre nom (ou pseudo) :
Votre mot de passe
<O>

Visites

 1566692 visiteurs

 9 visiteurs en ligne