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 !important;
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 !important;
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 !important;
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 !important;
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 !important;
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 !important;
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 !important;
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 !important;
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
OptimaluS (vendredi, 29 septembre 2017 17:10)
Merci pour ce tutoriel, j’apprécie ce partage.
De nouveaux tutoriel sont prévu ?
orthophile.jimdofree.com (mercredi, 20 février 2019 21:07)
Merci pour ce tuto !