CHANGER LA COULEURS DES TAGS ET CELLE DES LIENS DE FACON PONCTUELLE
Dernièrement j'ai fait un tuto pour changer la couleur des Tags, mais je
viens de m'apercevoir...(mieux vaut tard...) que ce n'était pas compatible avec
ce satané Internet Explorer !
Oui toujours le même...
Voici une autre méthode pour changer la couleur des liens de façon ponctuelle et aussi par la même occasion la couleur des Tags.
Cette fois c'est compatible sur les deux navigateurs...Firefox et Explorer.
Commençons par les Tags :
Collez le script suivant dans votre page d'accueil, la page des archives et aussi la page des messages entre la balise <head> et </head> (rien ne vous empêche de le mettre aussi dans votre profil ou encore les pages des albums photos...).
<style type="text/css">
<!--
a.type1 { color: #C4C4C4; }
a.type1:hover { color: #CC0000;}
a.type2 { color: #CC0000; }
a.type2:hover { color: #FF0000; }
-->
</style>
Ne validez pas tout de suite...
Repérez sur cette même page le bloc des Tags qui ressemble à ça :
<div class="title">LES TAGS</div>
<ul class="tagcloud">
<CBTags>
<a href="<$BlogTagURL$>" style="font-size:<$BlogTagFontSize$>;" title="<$BlogTagCount$> message(s)" rel="tag"><$BlogTagName$></a>
</CBTags>
</ul>
Pour attribuer aux tags la couleur qui se trouve dans le script plus haut, vous devez ajoutez le code suivant :
class="type1";
Dans cette ligne de codes, comme ceci :
<a href="<$BlogTagURL$>" class="type1"; style="font-size:<$BlogTagFontSize$>;" title="<$BlogTagCount$> message(s)" rel="tag">
Au final votre bloc des Tags sera comme ça :
<div class="title">LES TAGS</div>
<ul class="tagcloud">
<CBTags>
<a href="<$BlogTagURL$>" class="type1"; style="font-size:<$BlogTagFontSize$>;"
title="<$BlogTagCount$> message(s)"
rel="tag"><$BlogTagName$></a>
</CBTags>
</ul>
Voilà pour les tags...
Maintenant pour les liens dont vous voulez changer la couleur par ci par là...on va ajouter dans le code de notre lien ceci :
class="type2"
Si vous voulez mettre les même couleurs pour vos liens que pour vos Tags, vous devez ajouter le même code que pour vos tags : class="type1"
Voilà ce que ça donne :
<a class="type1" href="http://demolitetuto.canalblog.com/">Bienvenue dans le monde réel...</a>
<------ Bienvenue dans le monde réel ------>
Ce lien sera de la même couleur que mes tags.
<a class="type2" href="http://demolitetuto.canalblog.com/">Bienvenue dans le monde réel...</a>
<------ Bienvenue dans le monde réel ------>
Ce lien sera différent, il aura les couleurs du a.type2 dans script :
<style type="text/css">
<!--
a.type1 { color: #C4C4C4; }
a.type1:hover { color: #CC0000;}
a.type2 { color: #CC0000; }
a.type2:hover { color: #FF0000; }
-->
</style>
Il suffit donc d'ajouter à vos liens le code class="type1" pour qu'ils prennent les couleurs du a.type1.
Le hover correspond à la couleur du lien au passage de la souris.
Vous pouvez ajoutez au script des lignes comme ceci :
a.type3 { color: #ffffff; }
a.type3:hover { color: #000000; }
Pour donner à d'autres liens des couleurs encore différentes...sans oublier d'ajouter class="type3" dans le code de vos liens.
/http%3A%2F%2Fstorage.canalblog.com%2F44%2F05%2F251752%2F34715730_o.png)
/http%3A%2F%2Fstorage.canalblog.com%2F56%2F06%2F251752%2F29873287.gif)
/http%3A%2F%2Fstorage.canalblog.com%2F18%2F79%2F251752%2F28220165_p.gif)
/https%3A%2F%2Fassets.over-blog.com%2Ft%2Fcedistic%2Fcamera.png)