Astuces - Comment mettre un style aux catégories du menu
Comment gérer individuellement le style des noms des catégories, dans le menu vertical ?
Dans les nouveautés sur Blog4ever, nous avons la possibilité de gérer le style des modules séparément, voir les articles à ce sujet :
- Essai du CSS sur les menus des modules
- Repérage en couleurs des menus modules
- Décoration Noël images placées sur titres modules
Mais ce qui serait intéressant c'est de pouvoir, dans le menu vertical, pouvoir différencier les catégories ou avoir des séries en couleurs, avec des images, pour attirer l'attention des visiteurs.
- Code mis en direct avec le nom de la catégorie
Exemples
<font color="red">Nom de la catégorie</font>
Mettre le texte en bleu
<font color="#3333ff">Nom de la catégorie</font>Spécifier une une police de caractères
<font face="Comic sans MS">Nom de la catégorie</font>
Spécifier une taille de caractère
<font size=3>Nom de la catégorie</font>
Insérer à gauche une image pour une nouvelle catégorie
<img src="https:// adresse de l'image" border="0" /> Nom de la catégorie
Insérer à droite une image pour une nouvelle catégorie
Nom de la catégorie <img src="https:// adresse de l'image" border="0" />
Mais aussi : texte en jaune sur fond vert
<span style="color:yellow; background:#99FF00">Nom Catégorie</span>
- Créer une class en CSS pour pouvoir réduire le code en direct
Une class est une règle pouvant être utilisée plusieurs fois dans une page, donc en prenant l'exemple de l'image "New", l'adresse étant parfois très longue, vous gagnerai en place et la liste des catégories dans votre gestion sera moins décalée.
Le principe est de créer cette class dans votre feuille de style ou dans les bordures, ensuite le code direct sera :
<span class="categorie_new">Nom de la catégorie</span>
.categorie_new
{ background : transparent;
background-image : url(http://adresse de l'image);
background-repeat : no-repeat;
padding-left : 25px;
width: 170px;
display : inline;
}
<span class="categorie_plus">Nom de la catégorie</span>
Le CSS :
.categorie_plus
{ background : #006600;
background-image: url(http://);
background-repeat: repeat-y;
width :170px;
margin : auto;
padding : auto 5px;
text-align : center;
font-family : comic sana Ms;
font-size : 14pt;
color : #FFFF66;
border: 3px ridge #FFFFFF;
display:inline;
}
Vous pouvez créer autant de classes que vous souhaitez, ainsi dans le module "Articles", vous pouvez avoir plusieurs catégories "rouge", "jaune", "verte", etc... ou une image sigle qui permettra un repérage des catégories nouvelles ou mises à jour, plusieurs sigles peuvent donc localiser certaines catégories.
Suite de cette astuce Bulle sur nom des catégories.
