L'identifiant du nuage est 'tag-cloud' et les mots-clés sont des liens de classe t1 (pour les plus "petits") à t10 ("grands").

Les propriétés par défaut dans la feuille de styles de base :

#tag-cloud {
    font-size: 19px;
    text-align: center;
}
#tag-cloud a.t1, #tag-cloud a.t1:hover {
    font-size: 60%;
}
#tag-cloud a.t2, #tag-cloud a.t2:hover {
    font-size: 65%;
    font-weight: bold;
}
#tag-cloud a.t3, #tag-cloud a.t3:hover {
    font-size: 75%;
}
#tag-cloud a.t4, #tag-cloud a.t4:hover {
    font-size: 80%;
    font-weight: bold;
}
#tag-cloud a.t5, #tag-cloud a.t5:hover {
    font-size: 90%;
}
#tag-cloud a.t6, #tag-cloud a.t6:hover {
    font-size: 95%;
    font-weight: bold;
}
#tag-cloud a.t7, #tag-cloud a.t7:hover {
    font-size: 100%;
}
#tag-cloud a.t8, #tag-cloud a.t8:hover {
    font-size: 105%;
    font-weight: bold;
}
#tag-cloud a.t9, #tag-cloud a.t9:hover {
    font-size: 110%;
}
#tag-cloud a.t10, #tag-cloud a.t10:hover {
    font-size: 115%;
    font-weight: bold;
}



Les propriétés par défauts seront "écrasées" par votre nouvelle feuille de style.
Donc en CSS  pour changer (par exemple) les couleurs, il faudra rajouter les lignes #tag-cloud a.tX ainsi que leurs nouvelles propriétés:
Attention: N'oubliez pas les accolades {} et les points-virgules, ils sont vitales (on ne le répètera jamais assez)

#tag-cloud a.t1 { color:red; }
#tag-cloud a.t1:hover { color:blue; }


jusqu'à

#tag-cloud a.t10 { color:yellow; }
#tag-cloud a.t10:hover { color:green; }

Cet article vous a été proposé par LateLament entertainment

Publié par virage-a-droite.V2 le 25 novembre 2008 à 13:35

Classé dans CSS | 1 commentaire

Tags : CSS, mots clés, V3, aide, tag-cloud, feuille de style

Bon nombre d’entre vous sur le forum se sont posés la question suivante :

« Comment faire pour que les modules n’apparaissent pas systématiquement pour chaque habillage ? ».

 

La réponse est SIMPLE. Je vais essayer de faire au plus bref.

 

Le nom des id est différents selon les modules.

Pour trouver le nom de vos modules il vous suffit d’aller dans le code source de votre page.


Onglet Affichage > Source pour Internet Explorer

Affichage > Code source de la page pour Mozilla Firefox

 

Ainsi le module Tagboard portera le nom de « module-tagboard ».

En CSS il donnera :

 

#module-tagboard {

}

 

Vous la voulez dans l’habillage 1 mais pas dans l’habillage 2.

Dans la CSS de l’habillage 2 il vous suffira de mettre la chose suivante :

 

#module-tagboard {

display :none ;

}

 

Ainsi vous aurez bien la tagboard dans l’habillage mais pas dans le 2.

 

Vous la voulez plus grande dans un habillage et pas dans l’autre ? C’est le même principe, la propriété change.

Cela marche donc avec tous les modules existants. Je vous laisse donc imaginer les différentes possibilités. Notamment pour vos lecteurs MP3, n'oubliez pas que vous pouvez créer différents modules, du moins pour les premium. Donc différents lecteurs MP3 qu'il vous suffira de masquer (pour 3 habillages, 3 lecteurs MP3 différents vous masquerez deux lecteurs). Une couleur différente pour un module par rapport autres modules du même habillage ? C'est aussi possible.

Publié par pandorarts le 11 novembre 2008 à 23:02

Classé dans CSS | 2 commentaires

Tags : Modules, V3

Requis : Premium, CSS. Ne fonctionne pas sous Internet Explorer (<=7)

Pour modifier les propriétés d'un élément lorsqu'il "reçoit le focus", par exemple lorsque vous avez cliqué sur un champ de saisie de texte avec la souris, on utilise la pseudo-classe dynamique :focus.

Sur Cowblog, trois types de pages utilisent des champs de saisie :

  • les pages "articles" (tagboard et recherche sur le blog)
  • la page "article avec commentaires" ou le popup de commentaires
  • la page "Lui écrire"

On peut définir les propriétés de tous les champs de saisie d'un blog en utilisant les classes :

  • textarea : texte du tag, des critères de recherche sur le blog, pseudonyme, mot de passe, adresse du blog, question anti-spam, email des commentaires
  • commentarea : texte du commentaire et du message ("Lui écrire")

Pour mieux comprendre, collez à la fin de votre feuille CSS :

et cliquez sur les différents champs de saisie du blog.

On peut vouloir attribuer des propriétés différentes selon les "parties".

Il est même possible de définir distinctement les champs de saisie du formulaire de commentaire :

Démo

Rien ne vous empêche de définir d'autres propriétés pour ces champs (taille, couleur du texte, etc.) ou d'utiliser des images en fond.

Publié par Sakatruc le 11 mai 2008 à 15:39

Classé dans CSS | 4 commentaires

Tags :

Par BTD

On me demande souvent comment enlever la liste déroulante de navigation rapide à partir du css en gardant tout de même le reste du module-pagination.

Rien de plus simple. Il vous suffit d'insérer ces lignes à la fin de votre feuille css :

#blog-page {
display: none;
}

EDIT: réactualisé pour la V3.

Publié par Sakatruc le 13 janvier 2008 à 13:44

Classé dans CSS | 4 commentaires

Tags : module pagination, menu déroulant, navigation rapide, V3, CSS

Suite de l'article « Plusieurs codes html ».

Bien que le code html libre soit global, c'est à dire qu'il n'est pas actuellement possible d'en saisir un différent pour chaque habillage, on peut tout à fait découper notre code html libre, de façon à le différencier en fonction des habillages.

Il suffit de créer des blocs de code html libre (un bloc par feuille de styles) et d'attribuer à ces blocs un identifiant ou une classe.

Imaginons trois habillages, donc trois "code html libre" et trois feuilles de styles css.

Dans le code html libre :

<div id="freecode1">Code html libre habillage 1</div>
<div id="freecode2">Code html libre habillage 2</div>
<div id="freecode3">Code html libre habillage 3</div>

Dans chaque feuille de styles css, il suffit d'empêcher l'affichage (display:none) des codes html des autres habillages et éventuellement de définir les propriétés du code html libre de la feuille en cours (dans l'exemple, on met un fond noir pour le bloc utilisé dans l'habillage) :

Feuille de l'habillage 1 :

#freecode1 { background-color:#000; }
#freecode2 { display:none; }
#freecode3 { display:none; }

Feuille de l'habillage 2 :

#freecode1 { display:none; }
#freecode2 { background-color:#000; }
#freecode3 { display:none; }

Feuille de l'habillage 3 :

#freecode1 { display:none; }
#freecode2 { display:none; }
#freecode3 { background-color:#000; }

Publié par Sakatruc le 21 décembre 2007 à 3:56

Classé dans CSS | 2 commentaires

Tags :

Créer un podcast