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 :

  1. Essai du CSS sur les menus des modules
  2. Repérage en couleurs des menus modules
  3. 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

Mettre le texte en rouge
<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>
 
               Le CSS :

.categorie_new
{
background : transparent;
background-image : url(http://adresse de l'image);
background-repeat : no-repeat;
padding-left : 25px;
width: 170px;
display : inline;
}



Pour l'exemple je crée une class avec de nombreuses propriétés, à vous de voir ce qui peut être utile pour retenir l'attention des visiteurs de votre blog.

<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.




 



31/01/2010
10 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 42 autres membres


Rechercher sur Diztest ? :

Recommander ce blog | Contact | Signaler un contenu | RSS | Espace de gestion

retour Accueil Page precedente Bas de page Plein ecran - Retour alt+F4 Haut de page Page suivante Envoyer un mail a PapyClic le webmaster de Test-DizPerso