Mettre des images pour les groupes
 :: Codage :: Tutoriel pour structure Voir le sujet précédent Voir le sujet suivant Aller en bas
avatar
Voir le profil de l'utilisateur
Fondateur, lézard overbooké et caféiné
Crédit avatar : Test1
Ses absences : -
Commentaire(s) du joueur : Je suis le fondateur et administrateur principal de ce forum mais je ne mord pas alors n’hésitez pas à me solliciter ! Smile
➔Mon compte joueur est : Ilclaste Sang-blanc
Reserve de point(s) : 163
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! ♥
Ven 24 Aoû - 19:02
Revenir en haut Aller en bas
Page 1 sur 1
Sauter vers: