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 !
Écrire commentaire
Di Silvestro Kevin (mardi, 02 février 2016 22:22)
Bonjour,
Je n'arrive pas à enlever la barre pour insérer un titre qui se trouve en dessous du logo en haut du site.
comment dois-je faire ?
Meilleures salutations
Amaranthe (dimanche, 06 mars 2016 18:45)
Bonjour Kevin,
Si vous laissez la zone "Titre du site" vide, elle n'apparaitra pas quand vous visitez votre site en "mode visiteur". Et l'espace occupé par cette barre sera réduit.
Michel (samedi, 27 août 2016 18:58)
J'utilise le design Berlin.
Le code pour cacher la date du blog est inopérant. Suffit-il de le copier dans le head au niveau de chaque article, ou y a-t-il une autre manipulation à faire. Merci de votre réponse.
Amaranthe (jeudi, 01 septembre 2016 14:01)
Bonjour Michel,
Le <head> se modifie une seule fois, via les paramètres de votre site Jimdo. Vérifiez d'avoir bien copié l'entièreté du code. Bonne chance !
Steve (mardi, 04 avril 2017 18:11)
Bonjour Sylvie
Merci pour ces super infos - moi aussi je voudrai faire disparaître la date et le code mais ..... je n'arrive pas à trouver les codes... help :-)
merci d'avance
Steve
Myriam (mercredi, 18 juillet 2018 19:13)
Merci beaucoup, car grâce à vous, j'ai trouvé le bon code pour ôter le fil d'Ariane ! :-)
Amaranthe (lundi, 10 septembre 2018 12:01)
Merci Myriam pour ce feed-back qui fait plaisir :-)