L'Auteur du site

Passionné par le web, je suis un JimdoFriend et mets à disposition des tutoriels et astuces pour Jimdo gratuitement.

Rechercher

Sur Facebook

Réseaux sociaux

Retrouvez moi sur Twitter et Google+ également.

Newsletter

Styler les tags du blog

Pour insérer un code de ce tutoriel, il faut aller dans Menu, puis Paramètres, et enfin dans Modifier le head.

C'est nouveau chez Jimdo, les tags (les fameuses catégories qui permettent d'organiser ses articles de blog) s'affichent désormais à la suite des articles.

Sans plus attendre voici les codes qui vous permettrons d'embellir votre blog Jimdo. Vous pouvez choisir entre différents styles et les couleurs sont modifiables (en changeant le code couleur CSS).

 

Au sommaire

Des tags en couleur

La couleur de fond peut être modifiée en changeant le code couleur #00A1E9 par le code couleur CSS de votre choix : les codes couleurs

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

 

/* Les tags */
   
.j-blog-post--tag {

color: #ffffff;

background: #00A1E9; /* couleur de fond */

font-weight: bold;

padding: 8px;

}

/*]]>*/
</style>

Comme dit plus haut, dans Paramètres, il y a une rubrique Modifier le head, c'est là qu'il faut coller le code choisi.

 

Des tags arrondis

Le design de votre site Jimdo est plutôt arrondis, voici le style adapté :

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

 

/* Les tags */
   
.j-blog-post--tag {

color: #ffffff;

background: #00A1E9; /* couleur de fond */

font-weight: bold;

padding: 8px;

border-radius: 3px;

}

/*]]>*/
</style>

D'autres couleurs

Pour ceux qui ne sont vraiment pas à l'aise avec les codes, voici d'autres couleurs sans avoir à modifier quoi que ce soit.

Orange

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

 

/* Les tags */
   
.j-blog-post--tag {

color: #ffffff;

background: #FF7416; /* couleur de fond orange */

font-weight: bold;

padding: 8px;

border-radius: 3px;

}

/*]]>*/
</style>

Vert

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

 

/* Les tags */
   
.j-blog-post--tag {

color: #ffffff;

background: #71BA51; /* couleur de fond vert */

font-weight: bold;

padding: 8px;

border-radius: 3px;

}

/*]]>*/
</style>

Rouge

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

 

/* Les tags */
   
.j-blog-post--tag {

color: #ffffff;

background: #E01931; /* couleur de fond rouge */

font-weight: bold;

padding: 8px;

border-radius: 3px;

}

/*]]>*/
</style>

Gris

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

 

/* Les tags */
   
.j-blog-post--tag {

color: #ffffff;

background: #888888; /* couleur de fond grise */

font-weight: bold;

padding: 8px;

border-radius: 3px;

}

/*]]>*/
</style>

Bleu foncé

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

 

/* Les tags */
   
.j-blog-post--tag {

color: #ffffff;

background: #2c3e50; /* couleur de fond bleu foncé */

font-weight: bold;

padding: 8px;

border-radius: 3px;

}

/*]]>*/
</style>

Un style plus travaillé

Pour ceux qui veulent un style plus poussé, le code suivant devrait faire l'affaire. Celui-ci est largement inspiré d'un code libre de Wouter Beeftink (disponible sur codepen.io) :

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

 

/* Les tags style complexe */

 

.j-blog-post--tag {
  background: #eee;
  border-radius: 3px 0 0 3px;
  color: #666;
  display: inline-block;
  height: 26px;
  line-height: 26px;
  padding: 0 20px 0 23px;
  margin: 0 0px 0px 8px;
  position: relative;
}

.j-blog-post--tag::before {
  background: #fff;
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
  content: '';
  height: 6px;
  left: 10px;
  position: absolute;
  width: 6px;
  top: 10px;
}

.j-blog-post--tag::after {
  background: #fff;
  border-bottom: 13px solid transparent;
  border-left: 10px solid #eee;
  border-top: 13px solid transparent;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
}


/*]]>*/
</style>

Comment peaufiner en enlevant les virgules ?

Les petites virgules qui séparent chaque mots peuvent en effet être enlevées à l'aide du code suivant (ce code-ci peut être ajouté en complément d'un des codes précédents) :

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

 

/* Enlever les virgules entre les tags */

 

.j-blog-post--tag {visibility: visible;}

.j-blog-post--tags-wrapper {visibility: hidden;}

.j-blog-post--tags-label {visibility: visible;}


/*]]>*/
</style>

Écrire commentaire

Commentaires : 1
  • #1

    OptimaluS (vendredi, 29 septembre 2017 17:10)

    Merci pour ce tutoriel, j’apprécie ce partage.
    De nouveaux tutoriel sont prévu ?