La présentation la plus prisée des tags est sans conteste ce qu'on appelle le "nuage". Les tags sont les uns à la suite des autres et la taille de leurs caractères varie en fonction de la fréquence d'utilisation du tag. Vous en voulez ? Voyons comment faire.

Où ?

On retrouve les tags en trois endroits : dans le menu du blog, dans la page les regroupant tous et dans les informations du billet. Nous ne parlerons pas ici des tags mentionnés dans les informations du billet car leur présentation en nuage demanderait des modifications dans les fichiers html. D'autant que sauf maquette particulière cela risquerait d'être particulièrement inesthétique !

Quoi ?

Dans le menu comme dans la page de tous les tags :

  • un lien est posé sur chaque tag conduisant vers la liste des billets dotés de ce tag ;
  • tous les tags sont dans une liste ;
  • chaque tag est un item de cette liste.

Structure de la liste dans le menu

<div class="tags">
   <h2>Tags</h2>
   <ul>
       <li><a href="lien_vers_page_correspondante" class="tag20">nom du tag A</a></li>
       <li><a href="lien_vers_page_correspondante" class="tag10">nom du tag B</a></li>
       <li><a href="lien_vers_page_correspondante" class="tag90">nom du tag C</a></li>
   </ul>
</div>

Structure de la liste dans la page de tous les tags

<div class="content-inner">
   <ul class="tags">
       <li><a href="lien_vers_page_correspondante" class="tag50">nom du tag A</a></li>
       <li><a href="lien_vers_page_correspondante" class="tag10">nom du tag B</a></li>
       <li><a href="lien_vers_page_correspondante" class="tag20">nom du tag C</a></li>
   </ul>
</div>

Comment ?

Pitite parenthèse : Vous aurez noté (je l'espère !) deux choses : la class posée sur la div englobant la liste des tags dans le menu et celle posée sur la liste des tags regroupés dans la page est la même : class="tags". A une petite nuance près (et zioup on en profite pour une petite leçon de css au passage...) :

* dans le sidebar, la liste est à l'intérieur d'un bloc de class tags
* dans la page des tags, la liste est elle-même de class tags

Autrement dit, dans le sidebar le marqueur sera .tags ul { } tandis que dans la page le marqueur sera ul.tags { }}}

Cette parenthèse refermée, on voit bien qu'en donnant des règles à .tags elles seront communes à ces deux listes. De la même manière les class marquant la fréquence du tag (onze niveaux : class="tag0", class="tag10", class="tag20", class="tag30", class="tag40", class="tag50", class="tag60", class="tag70", class="tag80", class="tag90", class="tag100") sont communes aux deux listes.

Si vous voulez donner un style différent aux deux listes, précisez le marqueur avec son parent, par exemple pour le menu utilisez #sidebar .tags et/ou pour la page des tags le marqueur .dc-tags .tags

Oui, bon, tu la craches ta valda ?

Voué, mais c'est mieux si on explique avant et que vous comprenez suffisamment pour adapter à vos besoins.

Sur la page des tags on voudrait bien que la taille de base soit plus importante :

.dc-tags ul.tags { font-size : 1.5em; }

On enlève les puces sur la liste des tags de la page tags :

.dc-tags ul.tags { list-style-type : none; }

On enlève les puces sur la liste des tags du menu :

.sidebar .tags ul { list-style-type : none; }

Ces deux règles peuvent être regroupées :

.dc-tags ul.tags, .sidebar .tags ul { list-style-type : none; }

On part de zéro pour les marges intérieures et extérieures des listes et des items qui les composent :

.dc-tags ul.tags, .sidebar .tags ul, .dc-tags ul.tags li , .sidebar .tags ul  li { margin:0; padding:0; }

On supprime le retour à la ligne pour chaque item :

.dc-tags ul.tags li, .sidebar .tags ul li { display : inline; }

On varie la hauteur des caractères en fonction de la fréquence :

.tag0 { font-size: 85%; }
.tag10 { font-size: 90%; }
.tag20 { font-size: 95%; }
.tag30 { font-size: 100%; }
.tag40 { font-size: 105%; }
.tag50 { font-size: 110%; }
.tag60 { font-size: 115%; }
.tag70 { font-size: 120%; }
.tag80 { font-size: 125%; }
.tag90 { font-size: 130%; }
.tag100 { font-size: 135%; }

Dans le menu (et uniquement lui) on voudrait bien placer une icône à gauche de chaque tag (l'image sera placée dans le rep images du thème et je la nomme ici tag.png).

#sidebar .tags ul li a { padding-left:16px; background: transparent url(images/tag.png) no-repeat; }

Ah zut ! l'item suivant vient se coller à l'item précédent, réservons une marge à droite de chaque lien :

.tags ul li a, ul.tags li a { padding-right : 12px; }

Servez-vous ci-dessus des ingrédients qui vous plaisent ou mettez tout ça ensemble :

.dc-tags ul.tags { 
       font-size : 1.5em; 
       }
 .dc-tags ul.tags, .sidebar .tags ul { 
       list-style-type : none;
       margin : 0;
       padding : 0;
       }
 .dc-tags ul.tags li , .sidebar .tags ul  li { 
       margin:0; 
       padding:0;
       display : inline; 
       }
 .tag0 { font-size: 85%; }
 .tag10 { font-size: 90%; }
 .tag20 { font-size: 95%; }
 .tag30 { font-size: 100%; }
 .tag40 { font-size: 105%; }
 .tag50 { font-size: 110%; }
 .tag60 { font-size: 115%; }
 .tag70 { font-size: 120%; }
 .tag80 { font-size: 125%; }
 .tag90 { font-size: 130%; }
 .tag100 { font-size: 135%; }

 .tags ul li a, ul.tags li a { padding-right : 12px; }
 #sidebar .tags ul li a { padding-left:16px; background: transparent url(images/tag.png) no-repeat; }

Pfiou, ayé terminé ! Enfin... pour moi, parce que vous il vous reste à l'adapter à ce que vous aimez !