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="http:// 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="http:// 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.
Commentaires
site/blog
le 24-05-2010 à 23:03:56
Je découvre cet article, il est bien passionnant mais j'avoue que je n'ai pas très bien compris. Dans quelle partie du CSS dois-je mettre le ".catégorie_plus" pour changer le style de mes catégories ? Et où dois-je mettre <span class="categorie_plus">Nom de la catégorie</span> ? Dans le titre de l'article ? En effet, j'aimerais entourer certaines catégories, entre autres : catégorie "Articles" mais laisser le module des catégorie photo sans cadre. De plus j'aimerais changer la couleur de l'écriture de la seule catégorie "lien/partenaires" pour mieux la voir. J'ai essayé, sans succès.En fait, cela veut dire que je n'ai pas compris...
site/blog
le 26-05-2010 à 15:17:54
site/blog
le 27-11-2010 à 20:51:36
Il me semble que ça se raproche de ce que je cherche.Il me faudrait en plus pouvoir mettre une image différente"en lien survol" tout en gardant le même fond pour qu'au survol mon bouton(nom de la catégorie) soit apuyé.Est-il possible de créer celà dans une class?
site/blog
28-11-2010 à 14:54:45
Il faut voir l'article sue les liens dans le menu :
diztest.blog4ever.com/blog/lire-article-205392-814758-menu_de_gauche_liens_apparence_boutons_en_css.html
Bonne pioche
le 29-11-2010 à 15:03:39
J'ai déjà lu cet article oui mais moi je voudrais une image différente pour chaque bouton là c'est la même partout.
site/blog
29-11-2010 à 15:30:24
Pour chaque bouton c'est dans le nom de la catégorie que tu peux mettre une image, même principe que dans l'article ci-dessus.
Il faut créer des classes et mettre dans les balises SPANs dans le nom des catégories.
.categorie_1{background-image: url(h ttp://);}
.categorie_2{background-image: url(h ttp://);}
etc ...
Je ne peux pas rentrer dans les détails ici, les commentaires ne sont pas prévu pour ça, tu peux poster sur le forum d'aide de Blog4ever.
Je ferai peut-être un tuto mais actuellemnt je suis surbooké.
Bonne continuation
le 29-11-2010 à 22:13:15
Bonne continuation à vous
site/blog
le 13-11-2011 à 10:25:51
J'ai besoin d un p'tit cou de pouce, il s agit de ma Barre du haut avec mes trois menus, je n arrive pas a lui faire un simple encadré bleu, ecriture bleu ect...et je souhaite aussi dans la partie du haut ou l'image du chien apparait sois d avantage agrandi afin qu il n est pas le museau coupé ( au moins ça)
je te remercie par avance de ton aide,
Merci pour tous ces tutos ect... c'est super :)
Bne jrnee
Goldwin76
le 13-11-2011 à 10:49:45
Pour l'image du haut, tu agrandis la hauteur de la partie Haut à 240px, actuellement à 180px.
Je ne comprends pas, c'est la barre ou les boutons que tu veux encadrer. les boutons ont une bordure il suffit de changer la couleur de la bordures des liens et pour la couleur du texte c'est pareil.
Si c'est pour la barre il faut mettre dans la partie barre une bordure.
Pourquoi ne postes-tu pas sur le forum d'aide de Blog4ever, ça serait plus facile de t'expliquer, les commentaires ne sont pas adaptés, ce n'est pas leur but.
Bon dimanche
site/blog
le 13-11-2011 à 17:35:28
tout d'abord merci pour ta reponse rapide et efficace, une chose de faite et dsl d avoir poster ici pour les boutons (de la barre) je vais de suite poster la ou tu me demande :)
Merci encore,
Bonne soiree
GOLDWIN76