Dans les designs de Jimdo, il est possible, moyennant une petite manipulation dans le code, de cacher des zones telles que la date et la catégorie dans les articles de blog, un bandeau en haut de page ou encore le fil d'Ariane,... Suivez le guide !
La solution : "hacker" la feuille de style (CSS)
Pour effectuer des changements non-standards dans Jimdo, on va ajouter quelques lignes de code dans le <head>. Cette zone est accesssible via l'interface d'administration dans les
Propriétés du site. Ce code étant prioritaire par rapport à la feuille de style du site (CSS), il va modifier l'affichage du site.
Voici une petite compilation de mes modifications les plus fréquentes dans les designs de Jimdo.
Note : Les codes <style> ci-dessous peuvent être fusionnés. Je les ai séparés pour mieux expliquer à quoi ils servent.
Prérequis : ne pas avoir peur du code HTML !
Cette méthode nécessite une petite connaissance des CSS, au minimum pour retrouver la "classe" exacte de la zone à modifier.
Par exemple, dans Barcelona, le bandeau du haut a la classe .tpl-top-bar
Pour connaître le libellé d'une zone, on utilise la fonction "Inspecter l'élément" de Firefox (clic droit avec la souris sur la zone concernée).
Masquer le bandeau du haut (design Barcelona)
Dans un design comme "Barcelona", on souhaite supprimer le bandeau supérieur (classe .tpl-top-bar). On peut aussi rendre le bandeau supérieur transparent avec l'éditeur de styles, c'est plus facile, mais on perd quelques pixels en hauteur.
Voici le code à copier/coller dans le <head> du site pour cacher le bandeau rose :
<style type="text/css">
/*<![CDATA[*/
.tpl-top-bar {
display: none;
}
/*]]>*/
</style>
Cacher la date / la catégorie des articles dans le blog Jimdo
Si vous utilisez le blog pour annoncer les événements de votre agenda, l'affichage de la date de publication de vos articles peut perturber vos lecteurs. De même, si vous utilisez le module de blog pour publier des tutoriels, vous n'avez pas nécessairement besoin de mentionner la date où l'article a été publié.
Voici le code qui cache la date :
<style type="text/css">
/*<![CDATA[*/
.datetime {
display: none;
}
/*]]>*/
</style>
La catégorie est utile pour répartir les articles sur différentes pages du blog, mais il n'est pas nécessaire qu'elle apparaisse sous le titre des articles.
Voici le code qui cache la catégorie :
<style type="text/css">
/*<![CDATA[*/
.postmeta {
display: none;
}
/*]]>*/
</style>
Cacher le fil d'Ariane (ex : design Melbourne)
Lorsqu'un site n'a qu'un seul niveau de navigation, le "fil d'Ariane" (Vous êtes ici : Accueil > Page) est inutile, voire gênant pour la lisibilité de la page. On peut changer la couleur de la police en transparent et le faire disparaitre, mais si on souhaite gagner quelques pixels en hauteur, mieux vaut carrément masquer la zone.
Voici le code pour masquer le fil d'Ariane :
<style type="text/css">
/*<![CDATA[*/
.j-nav-variant-breadcrumb {
display: none;
}
/*]]>*/
</style>
Souligner les liens dans Jimdo
<style type="text/css">
/*<![CDATA[*/
.j-text a:link {
text-decoration: underline!important;
}
/*]]>*/
</style>
Tester les changements en mode "visiteur"
Le changement dans la CSS n'est pas visible immédiatement. Après avoir enregistré votre <head>, passez en mode "Affichage visiteur" et vérifiez que vos changements sont visibles.
Si ce n'est pas le cas, vérifiez votre code HTML (il manque parfois un ;) et contrôlez le nom de la classe / div que vous avez modifiée.
Partagez cet article !
Cet article vous a été utile ? N'hésitez pas à le partager !