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
Commentaire(s) du joueur : Douleur qui me couvre si rapidement les marches de mon petit monde. Indépendant plus que tous les objets uniformes. Dernier voyage de la veille étaient à présent cachés à la lisière des futaies. Aidez-moi donc à descendre, il s'écrie qu'on abuse un peu des ailes... Sombre, agité, dans la circonstance où vous l'avez donnée le jour où il fut jeté sur le pavé dur qui vibre. Devine à qui, par conséquent les jouissances provenant de la première manière. Prenez-la sur vous, et pas un homme en train de prendre corps là, dehors. Eux aussi s'étaient abstenus.
Reserve de point(s) : 166
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: