Sakatruc

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.

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.

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; }