Mmhh...
Dans ton template, tu as ceci :
- Code:
<td class="qeel_box_td qeel_box5" valign="top" align="center" width="50%">
<div id="groupe1" class="groupes">
<a href="http://la-petite-fermette.forumactif.org/g1-administrateurs">♛ Administrateurs</a>
</div>
<div id="groupe2" class="groupes">
<a href="http://la-petite-fermette.forumactif.org/g5-moderateurs">✔ Modérateurs</a>
</div>
<div id="groupe3" class="groupes">
<a href="http://la-petite-fermette.forumactif.org/g3-createurs-de-fiches-animales">✁ Créateurs de fiches animales</a>
</div>
<div id="groupe4" class="groupes">
<a href="http://la-petite-fermette.forumactif.org/g2-fermiers">✿ Fermiers</a>
</div>
<div class="qeel_infobulles">
Vous pouvez survoler les groupes afin de voir leur description ~
</div>
<div class="qeel_infobulles" id="qeel_infobulle1">
Description des administrateurs
</div>
<div class="qeel_infobulles" id="qeel_infobulle2">
Description des modérateurs
</div>
<div class="qeel_infobulles" id="qeel_infobulle3">
Description des créateurs de fiches animales
</div>
<div class="qeel_infobulles" id="qeel_infobulle4">
Description des fermiers
</div>
</td>
Disons que tu veux rajouter un cinquième groupe, eh bien il va falloir aller ajouter ceci juste après le quatrième (celui qui a un id "groupe4") :
- Code:
<div id="groupe5" class="groupes">
<a href="LIEN DU GROUPE">NOM DU CINQUIÈME GROUPE</a>
</div>
Et aussi rajouter la description du cinquième groupe juste après celle du quatrième groupe (bref, après l'infobulle avec l'id "infobulle4") :
- Code:
<div class="qeel_infobulles" id="qeel_infobulle5">
DESCRIPTION DU CINQUIÈME GROUPE
</div>
Pour ce qui est du CSS, on va devoir aller ajouter l'id de ton cinquième groupe, de l'infobulle de ce cinquième groupe et de l'apparition de l'infobulle. Du coup, partout où il y a les groupes 1 à 4, on va aller rajouter le cinquième groupe. On va commencer par retrouver cette partie :
- Code:
/*Bloc des groupes*/
.qeel_box5 {
text-align: center;
}
/*Groupes*/
.groupes {
height: 35px;
text-align: center;
text-shadow: 1px 1px 1px #3f4511;
}
/*Couleur du groupe 1*/
#groupe1 a, #groupe1 a:hover {
color: #6c0000;
}
/*Couleur du groupe 2*/
#groupe2 a, #groupe2 a:hover {
color: #0ba7b5;
}
/*Couleur du groupe 3*/
#groupe3 a, #groupe3 a:hover {
color: #fc79f3;
}
/*Couleur du groupe 4*/
#groupe4 a, #groupe4 a:hover {
color: #c7c0a3;
}
/*Description des groupes*/
.qeel_infobulles {
height: 122px;
overflow: auto;
background: #9a9e33;
border: 2px solid #3f4511;
border-radius: 10px;
text-shadow: none;
color: #0b1906;
padding: 5px;
transition: 0.5s;
-webkit-transition: 0.5s;
}
/*Description des groupes sans survol*/
#qeel_infobulle1, #qeel_infobulle2, #qeel_infobulle3, #qeel_infobulle4 {
position: relative;
z-index: 1;
margin-top: -136px;
opacity: 0;
filter: alpha(opacity=0);
transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
}
/*Apparition de la description des groupes*/
#groupe1:hover ~ #qeel_infobulle1, #groupe2:hover ~ #qeel_infobulle2, #groupe3:hover ~ #qeel_infobulle3, #groupe4:hover ~ #qeel_infobulle4 {
opacity: 1;
filter: alpha(opacity=100);
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
Tu va devoir commencer par rajouter la couleur du groupe comme ceci :
- Code:
/*Couleur du groupe 5*/
#groupe5 a, #groupe5 a:hover {
color: COULEUR;
}
Puis, là où il y a ceci :
#groupe1:hover ~ #qeel_infobulle1, #groupe2:hover ~ #qeel_infobulle2, #groupe3:hover ~ #qeel_infobulle3, #groupe4:hover ~ #qeel_infobulle4Tu va rajouter ton cinquième groupe pour que cela devienne :
#groupe1:hover ~ #qeel_infobulle1, #groupe2:hover ~ #qeel_infobulle2, #groupe3:hover ~ #qeel_infobulle3, #groupe4:hover ~ #qeel_infobulle4, #groupe5:hover ~ #qeel_infobulle5Même chose pour la partie où il est inscrit :
#qeel_infobulle1, #qeel_infobulle2, #qeel_infobulle3, #qeel_infobulle4Tu va pouvoir aller ton cinquième groupe pour que cela devienne :
#qeel_infobulle1, #qeel_infobulle2, #qeel_infobulle3, #qeel_infobulle4, #qeel_infobulle5Enfin, dernière des choses, on va aller rapetisser les infobulles. Pourquoi? Parce que le nouveau groupe prend 35px de hauteur et que cela va déformer le bloc si on ne fait rien ^^
Alors on va retrouver la *Description des groupes* et la *Description des groupes sans survol*. Au premier endroit, tu dois diminuer la hauteur (le height) de 35px et au deuxième endroit, tu dois diminuer le margin-top de 35px également.
Voilà!
