Mettre des images pour les groupes

Shay Altanir a écrit:

Modifier les groupes sur l’index !
Ici nous allons voir comment remplacer les groupes sur l’index par des images, (Ex :http://www.elegance-temptation.com/)ou juste retirer les crochets assez moches et donc de mettre les descriptions des groupes en infobulles (un cadre qui apparaît avec les infos au passage de la souris. Ex : http://www.sos-rpg.com/)

Tout d’abord il y a une étape commune au deux étapes, allez dans affichage → template → général → index_body, trouvez cette balise et supprimez là :

Code:: {GROUP_LEGEND}

Ensuite il va falloir remettre à la main tous les groupes que vous avez, (A la place de la balise que vous venez de supprimer) le code à mettre pour pouvoir remplacer par une image est celui-ci :

Code:: <a href="LIEN DU GROUPE"><img src="LIEN DE LIMAGE"/></a>

Copier et remplissez le code autant de fois que vous avez un groupe.

Pour supprimer simplement les crochets copier et remplissez autant de fois que vous avez de groupe; ce code :

Code:: <a href="LIEN DU GROUPE 1"><span style="color: CODE DE TA COULEUR;">NOM DU GROUPE </span></a>

Pour mettre une infobulle sur une image il suffit d'utiliser ce code:

Code:: <div class="infobulle"><img src="LIEN DE LIMAGE"/><span> Texte dans l'infobulle<br/>
<a href="LIEN DU GROUPE">Nom du groupe</a> </span></div>

Pour mettre du texte coloré celui-ci :

Code:: <div class="infobulle"><span style="color: CODE DE TA COULEUR;">NOM DU GROUPE </span></a><span> Texte dans l'infobulle <a href="LIEN DU GROUPE 1">Lien du groupe</a></span></div>

Il suffit ensuite de mettre dans le CSS (Affichage → couleur → feuille de style CSS)

Code:: div.infobulle { position: relative;float:left; }

div.infobulle span { display: none; /* ceci masque l'infobulle */}

div.infobulle:hover { background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
}

div.infobulle:hover span {
display:block;
position:absolute;
top:2em; left:2em;
border: 2px solid #A90000;
text-align: justify;
font-weight:none;
/*mettre ici les décorations de l'infobulle*/}

Pour plus d'information sur les infobulles et ses possibilités, je vous invite à lire ce tutoriel : http://www.elegance-temptation.com/t3546-facile-faire-une-infobulle#107435

Si vous avez des questions n'hésitez pas! ♥

» Mettre en page son forum
» Mettre une texture en fond de forum
» Mettre une image dans les fond de table