Passionné par le web, je suis un JimdoFriend et mets à disposition des tutoriels et astuces pour Jimdo gratuitement.
Mes seuls sites sont zetuto.jimdo.com, netooby.com et netooby.jimdofree.com, le reste n'est qu'imposture.
Retrouvez moi également sur Twitter.
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).
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.
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>
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>
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>
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 !