[Mise à jour 1/1/2015] Cet article n'est plus utile dans la nouvelle interface de Jimdo. En effet, avec les nouveaux designs mis en ligne depuis l'été 2014, vous pouvez modifier individuellement la couleur de chaque élément de votre site : bandeaux, polices, menus, fonds,...
La problématique
Mon client trouvait que le template F4243 de Jimdo était particulièrement lisible et adapté à son contenu. Malheureusement, 3 éléments "clochaient" dans la mise en page, et la version standard du template ne permettait pas de les modifier.
Comment faire pour :
- modifier la couleur des liens du menu (lien actif et lien survolé par la souris)
- modifier la couleur rose du footer
La solution
La solution proposée par un tutoriel sur le forum de Jimdo est de "hacker" la feuille de style (CSS) du template par l'ajout d'un code dans le <head>, modifiable via les paramètres du site.
Note : Les codes <style> ci-dessous peuvent être fusionnés. Je les ai séparés pour mieux expliquer à quoi ils servent.
Pour modifier la couleur du bandeau du bas (div "footer")
<style type="text/css">
/*<![CDATA[*/
#footer, #footer a, #footer p .top {
background-color: #74013E !important;
}
/*]]>*/
</style>
Pour modifier la couleur des menus actifs (current) et survolés par la sourise (hover)
<style type="text/css">
/*<![CDATA[*/
#mainNav3 li a.current,
#mainNav1 li a:hover,
#mainNav2 li a:hover,
#mainNav2 li a:hover,
#mainNav1 li a.current,
#mainNav1 li a.parent {color:#74013E !important;}
/*]]>*/
</style>
Pour enlever le soulignement des liens
<style type="text/css">
/*<![CDATA[*/
a:link {
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
a:visited {
text-decoration: none;
}
/*]]>*/
</style>
Pour changer la couleur des puces (en fuschia)
#cc-tp-content ul {
list-style: none;
}
#cc-tp-content li:before {
content: "• ";
color: #FF3366;
}
Le template Jimdo après modification
Partagez cet article !
Cet article vous a été utile ? N'hésitez pas à le partager !
Écrire commentaire