Styler les catégories du blog

Avant de vous lancer, merci de lire le mode d'emploi ci-dessous !

Mode d'emploi des codes

Où insérer les codes ?

Les codes fournis doivent être insérés dans la fenêtre de saisie qui apparaît quand on clique, en mode "Admin", sur Paramètres > Insérer dans le header.

Modifier le header en admin

Il faut ensuite appuyer sur le bouton d'enregistrement situé sous la fenêtre de saisie pour que les codes soient enregistrés.

Pour voir les effets du code appliqués à votre site, il faut repasser en mode "Visiteur" pour rafraîchir la page.

Peut-on utiliser plusieurs codes ?

Oui, les codes peuvent être combinés, à condition que vous soyez cohérents dans votre choix : ainsi, si vous combinez le code qui empêche l'affichage du trackback des liens avec celui qui permet d'en changer la couleur, il y aura assurément un problème d'incompatibilité !

Que faire en premier ?

Peu importe le nombre de codes que vous comptez insérer ; vous devez commencer par noter ces deux déclarations dans la fenêtre de saisie. Vos codes seront copiés-collés entre ces deux éléments :

<style type="text/css">

/* C'est ici que vous insérez le(s) code(s) */

</style>

Il ne vous reste plus qu'à choisir les codes dont vous avez besoin et à les copier-coller entre ces deux balises.

Flèche vers le haut

Ne pas afficher les catégories des billets sous le titre

A la base, le blog affiche les catégories des billets :

Capture billet avec tags

Si on veut que les catégories des billets soient toujours présentes (et qu'on puisse continuer de "tagger" les billets), mais qu'elles soient invisibles :

Capture billets sans tags

... on copie-colle ce code :

/* Ne pas afficher les catégories des billets sous leur titre */

p.postmeta
{
visibility: hidden;
}
Flèche vers le haut

Styler les catégories des billets sous le titre

Par défaut, les catégories sous les billets ont la même couleur, la même police et la même taille de police que les autres textes de votre site :

Style de base des catégories

Mettre en italique

Pour afficher les catégories en italique :

Afficher les catégories en italique

... copier-coller ce code :

/* Style des catégories des billets */

p.postmeta {
font-style: italic;
}
Flèche vers le haut

Mettre en gras

Pour afficher les catégories en gras :

Afficher les catégories en gras

... copier-coller ce code :

/* Style des catégories des billets */

p.postmeta {
font-weight: bold;
}
Flèche vers le haut

Changer la couleur

Pour changer la couleur des catégories des billets :

Changer la couleur des catégories

... copier-coller ce code :

/* Style des catégories des billets */

p.postmeta {
color: #D0B7AE;  /* Pour changer la couleur, remplacer #0089DD par une autre valeur */
}

Cet outil vous aidera à choisir la couleur qui vous convient et vous donnera le code de la couleur à utiliser dans le code :

Flèche vers le haut

Changer la taille

Pour agrandir ou réduire la taille des catégories des billets :

Changer la taille des catégories

... copier-coller ce code :

/* Style des catégories des billets */

p.postmeta {
font-size: 10px;  /* Pour changer la taille, remplacer 10 par un chiffre plus petit ou plus grand */
}
Flèche vers le haut

Changer la police

Pour afficher les catégories des billets avec une autre police :

Changer la polices des catégories

... copier-coller ce code :

/* Style des catégories des billets */

p.postmeta {
font-family:  Impact, "Arial Black", sans-serif;  /* Pour changer la famille, en choisir une autre dans la liste des polices */
}

Voici la liste des types de polices disponibles :

  1. font-family: Times, "Times New Roman", "Liberation Serif", FreeSerif, serif;
  2. font-family: Georgia, "DejaVu Serif", Norasi, serif;
  3. font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
  4. font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  5. font-family: 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', 'Luxi Sans', sans-serif;
  6. font-family: Tahoma, Geneva, Kalimati, sans-serif;
  7. font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
  8. font-family: Impact, "Arial Black", sans-serif;
  9. font-family: Courier, "Courier New", FreeMono, "Liberation Mono", monospace;
  10. font-family: Monaco, "DejaVu Sans Mono", "Lucida Console", "Andale Mono", monospace;

Pour visualiser le rendu de ces polices, reportez-vous à cette page.

Flèche vers le haut

Combiner plusieurs changements

Si vous voulez combiner plusieurs des modifications précédentes (par exemple, à la fois réduire la taille, utiliser une autre police et changer la couleur des catégories) :

Combiner les modifications

... combinez les codes donnés ci-dessus comme ceci :

/* Style des catégories des billets */

p.postmeta {
font-family:  Monaco, "DejaVu Sans Mono", "Lucida Console", "Andale Mono", monospace;
color: #ccc;
font-size: 13px;
}
Flèche vers le haut

Ajouter une icône "tag" aux catégories

Voici quelques codes prêts à copier-coller qui permettent d'ajouter une petite icône "tag" devant la liste des catégories. Cette icône est purement ornementale...

Où insérer les codes ?

Les codes fournis doivent être insérés tels quels dans la fenêtre de saisie qui apparaît quand on clique, en mode "Admin", sur Paramètres > Insérer dans le header.

Modifier le header en admin

Il faut ensuite appuyer sur le bouton d'enregistrement situé sous la fenêtre de saisie pour que les codes soient enregistrés.

Pour voir les effets du code appliqués à votre site, il faut repasser en mode "Aperçu" pour rafraîchir la page.

Modèle n°1

Pour obtenir cette étiquette :

Modèle n°1

... copiez-collez ce code :

<style type="text/css">
/*<![CDATA[*/

.postmeta {
background: url('http://sd-1.archive-host.com/membres/images/3347790973941088/tag1.png') left center no-repeat !important;
}

p.postmeta {
padding-left: 30px !important;
vertical-align: middle !important;
}

/*]]>*/
</style>
Flèche vers le haut

Modèle n°2

Pour obtenir cette étiquette :

Modèle n°2

... copiez-collez ce code :

<style type="text/css">
/*<![CDATA[*/

.postmeta {
background: url('http://sd-1.archive-host.com/membres/images/3347790973941088/tag2.png') left center no-repeat !important;
}

p.postmeta {
padding-left: 25px !important;
vertical-align: middle !important;
}

/*]]>*/
</style>
Flèche vers le haut

Modèle n°3

Pour obtenir cette étiquette :

Modèle n°3

... copiez-collez ce code :

<style type="text/css">
/*<![CDATA[*/

.postmeta {
background: url('http://sd-1.archive-host.com/membres/images/3347790973941088/tag3.png') left center no-repeat !important;
}

p.postmeta {
padding-left: 25px !important;
vertical-align: middle !important;
}

/*]]>*/
</style>
Flèche vers le haut

Modèle n°4

Pour obtenir cette étiquette :

Modèle n°4

... copiez-collez ce code :

<style type="text/css">
/*<![CDATA[*/

.postmeta {
background: url('http://sd-1.archive-host.com/membres/images/3347790973941088/tag4.png') left center no-repeat !important;
}

p.postmeta {
padding-left: 25px !important;
vertical-align: middle !important;
}

/*]]>*/
</style>
Flèche vers le haut

Modèle n°5

Pour obtenir cette étiquette :

Modèle n°5

... copiez-collez ce code :

<style type="text/css">
/*<![CDATA[*/

.postmeta {
background: url('http://sd-1.archive-host.com/membres/images/3347790973941088/tag5.png') left center no-repeat !important;
}

p.postmeta {
padding-left: 25px !important;
vertical-align: middle !important;
}

/*]]>*/
</style>
Flèche vers le haut

Modèle n°6

Pour obtenir cette étiquette :

... copiez-collez ce code :

<style type="text/css">
/*<![CDATA[*/

.postmeta {
background: url('http://sd-1.archive-host.com/membres/images/3347790973941088/tag6.png') left center no-repeat !important;
}

p.postmeta {
padding-left: 25px !important;
vertical-align: middle !important;
}

/*]]>*/
</style>
Flèche vers le haut

Modèle n°7

Pour obtenir cette étiquette :

... copiez-collez ce code :

<style type="text/css">
/*<![CDATA[*/

.postmeta {
background: url('http://sd-1.archive-host.com/membres/images/3347790973941088/tag7.png') left center no-repeat !important;
}

p.postmeta {
padding-left: 25px !important;
vertical-align: middle !important;
}

/*]]>*/
</style>
Flèche vers le haut

Modèle n°8

Pour obtenir cette étiquette :

... copiez-collez ce code :

<style type="text/css">
/*<![CDATA[*/

.postmeta {
background: url('http://sd-1.archive-host.com/membres/images/3347790973941088/tag8.png') left center no-repeat !important;
}

p.postmeta {
padding-left: 30px !important;
vertical-align: middle !important;
}

/*]]>*/
</style>
Flèche vers le haut

Modèle n°9

Pour obtenir cette étiquette :

... copiez-collez ce code :

<style type="text/css">
/*<![CDATA[*/

.postmeta {
background: url('http://sd-1.archive-host.com/membres/images/3347790973941088/tag9.gif') left center no-repeat !important;
}

p.postmeta {
padding-left: 25px !important;
vertical-align: middle !important;
}

/*]]>*/
</style>
Flèche vers le haut

Modèle n°10

Pour obtenir cette étiquette :

... copiez-collez ce code :

<style type="text/css">
/*<![CDATA[*/

.postmeta {
background: url('http://sd-1.archive-host.com/membres/images/3347790973941088/tag10.gif') left center no-repeat !important;
}

p.postmeta {
padding-left: 40px !important;
vertical-align: middle !important;
}

/*]]>*/
</style>

Vos commentaires

Écrire commentaire

Commentaires : 6
  • #1

    machines2jeux (jeudi, 21 juillet 2011 10:15)

    très pratique, merci!

  • #2

    Dominique BRUYNEEL (mercredi, 05 septembre 2012 21:54)

    Effectivement, ça allège l'ensemble

    Encore merci

    bDom

  • #3

    aloeverasante (samedi, 02 mars 2013 11:16)

    MERCI ENCORE !!!!!!
    c'est vrai que cacher les mot clef des articles c'est plus joli!!

    Vous êtes un amour !!! ♥
    je cherche comment ajouter une liste des derniers articles ... je cherche
    a bientot et merci encore

  • #4

    Isabelle (samedi, 02 mars 2013 11:34)

    Merci ;)
    Pour la liste des derniers articles, pourquoi ne pas utiliser la fonction "Flux RSS" de Jimdo pour afficher les dernières publications de... votre propre flux RSS ? C'est ce que j'ai fait dans le pied de page de ce site : http://favoris.jimdo.com. Ajoutez l'élément "Flux RSS" et précisez l'URL du flux RSS de votre blog, validez et voilà ;)

  • #5

    Abdessamade BAYROUNE (mardi, 26 mars 2013 19:44)

    Merci realia

  • #6

    Rigaud (samedi, 27 juillet 2013 01:49)

    Sympa cette petite astuce!

Ruban