Modifier (un peu) le CSS d'un template Jimdo

[Équipe Jimdo]

[Tutoriel originellement proposé par filmsdelover.com sur notre ancien forum]

Bonjour !

Dans ce tutoriel, on va s'intéresser à la modification du CSS d'un template jimdo en utilisant Firebug, un plugin bien sympa du navigateur Firefox.

Ce qu'il faut savoir avant de commencer :
- Qu'est-ce que le CSS ? Il s'agit d'une feuille de style qui régit tous les paramètres graphiques de votre site (couleur des polices, taille des polices, des menus, des marges etc.). Vous modifiez cette feuille de style sur un site Jimdo en changeant par exemple la taille de vos polices dans la partie "Style" par exemple. Cependant, toutes les modifications possibles ne sont pas accessibles directement.
- Il existe un onglet CSS dans la partie "Design" de votre site mais le problème est qu'il n'est pas utilisé quand vous avez un template Jimdo.

Toute modification du CSS via cet onglet avec un template Jimdo entrainera une perturbation totale de votre site qui reviendra à sa forme originale. Donc, à moins de s'y connaître, on n'ajoute rien là !
- Funnycat a réalisé un très bon tuto pour pouvoir modifier complètement le CSS d'un template Jimdo. Cela vous permet de prendre un template Jimdo et de le passer en design personnel, pour pouvoir ainsi régler tous les petits détails. Il s'adresse à ceux qui ont un peu plus de connaissances en matière de développement/CSS/HTML et il se trouve ici : http://funnycat.jimdo.com/astuces-jimdo/changer-le-css-d-un-template/

But du tutoriel :
- Apprendre, avec Firebug, à effectuer des petites modifications de style sans passer par l'onglet "CSS" et en ajoutant simplement un petit bout de code dans le "Head".
- Pour ce tutoriel, je vais utiliser le site d'un Jimdonaute qui a demandé une chose bien spécifique : augmenter la taille des polices de son menu. Mais le principe est le même pour toutes les petites modifications que vous pourriez vouloir mettre en oeuvre. Donc cherchez, tentez, essayez !

Difficulté : Novice qui veut tenter de comprendre comment marche Jimdo de l'intérieur - Moyen

Outils nécessaires :
- Firefox, l'un des meilleurs navigateurs internet au monde. Pour le télécharger, c'est ici : http://www.mozilla-europe.org/fr/firefox/ Si vous utilisez Internet Explorer, ce tuto n'est pas pour vous, désolé !
- Le plug-in "Firebug" téléchargeable ici : https://addons.mozilla.org/fr/firefox/addon/1843 Les plug-ins sont des petits modules ajoutés à Firefox pour des buts spécifiques. Ici, son but est de nous montrer sur la page à quelle partie du CSS se rapporte un élément de votre site.

Marche à suivre :
1. Prêt ? Allez, on y va ! Tout d'abord, on commence par vérifier que Firebug est bien installé sur votre Firefox. Si oui, vous devriez avoir une petite bête dans le coin bas droit de votre navigateur.


2. Allez sur votre site sans vous identifier, comme si vous étiez un visiteur lambda. Ici, j'utilise comme exemple le site de Cdezimages : http://cdezimages.jimdo.com/

Son problème est la taille de la police du menu principal qu'il juge trop petite. On va donc y remédier.

3. Faites un clic droit sur la page et cherchez "Inspecter un élément".


4.Une fenêtre s'ouvre en bas de votre écran avec d'un côté le code HTML de la page et de l'autre la feuille de style.

Tout ceci paraît très barbare mais on va y aller pas à pas.

5. Cliquez sur "Inspecter un élément" dans la barre du module.


6. Puis dirigez-vous vers l'élément que vous souhaitez modifier. Dans le cas de ce tuto, on va modifier la taille de la police du menu. Donc je me dirige vers "Accueil". Des carrés bleus vous montrent ce que vous êtes en train d'étudier. Ne prenez que l'élément que vous désirez modifier. Donc dans mon cas, je ne prends que "Accueil" et je clique dessus. Si tout a été bien fait, "Accueil" doit être entouré d'un petit carré bleu comme indiqué ci-dessous.

Les CSS en charge d'"Accueil" sont les mêmes pour toute la barre de menu donc c'est très pratique.
Ce qui nous intéresse n'est pas la partie HTML de Firebug, mais celle "Style" (ou CSS) en bas à droite.


7. Analysons un peu ce que Firebug nous apprend :

ul.mainNav1 li a : est "l'adresse" régissant la mise en forme des éléments du menu. Très important ! A noter parce que c'est essentiel pour mettre en oeuvre les modifs.
font-size: 12px : est ce qui va m'intéresser tout particulièrement. Il s'agit de la hauteur de la police du menu, donc 12 pixels.
line-height: 100% : est la hauteur de la ligne. C'est un peu comme la police mais cela peut-être utile si vous voulez des marges en haut et en bas. On le laisse tranquille dans mon exemple.
text-align: center : est l'alignement du texte. Ici, il est centré mais on peut le mettre aligné à gauche (left) ou à droite (right).
text-decoration: none : est utile si vous voulez mettre votre menu en gras (bold). Ici, "none" veut dire qu'il n'y a aucune altération.

8. La particularité très intéressante de Firebug est qu'il vous permet de faire des tests de changement de CSS juste pour essayer. Changez par exemple le "12" de la font-size en "15" ou "29" et vous verrez les changements se produire en direct.

Une fois que le changement effectué vous convient, on va passer à la partie un peu plus pratique pour changer effectivement ce qui ne va pas.

9. On l'a vu au début, tout changement via l'onglet "CSS" de "Style" est déconseillé pour ceux utilisant un template Jimdo. Pour mettre les changements en pratique, on va passer par le bien connu "Modifier le head" qui se trouve dans l'onglet "Paramètres" de votre barre d'édition Jimdo. Connectez-vous donc à votre site et allez-y.

10. Les codes HTML pour changer les CSS ont tous la même forme qui est la suivante :

Code:

<style type="text/css">
/*<![CDATA[*/
Adresse de l'élement CSS
{truc à changer}
/*]]>*/
</style>

Pour mon exemple, je vais donc ajouter le code suivant :

Code:

<style type="text/css">
/*<![CDATA[*/
ul.mainNav1 li a
{font-size: 14px !important;}
/*]]>*/
</style>

Attention à bien respecter les espaces, les points-virgules, les croches etc. Le "!important" est là pour montrer aux navigateurs que c'est une donnée importante et qu'ils doivent en prendre compte.

11. Sauvegardez et en théorie, votre site devrait avoir été modifié.

Voilà, c'est la méthode utilisée pour modifier les CSS d'un élément de votre site. D'autres petites choses peuvent être modifiées de la sorte donc n'hésitez pas à faire des tests. Via Firebug, vous pouvez tester ce que vous voulez et voir en direct les modifications que cela apporte à votre site. Ce serait dommage de s'en priver.

Si vous avez des questions, n'hésitez pas !

[FredVig]

Bien, mais… Les choses ont évolué depuis cet indispensable post de Filmdelover.
Firebug fait double emploi avec l'outil de développement intégré à Firefox et Chrome. il est de plus un peu lent. A la place, faites simplement un clic droit sur l'élément à inspecter, prenez "examinez l'élément" (Chrome : "procédez à l'inspection de l'élément"), vous aurez accès aux mêmes fonctions, et davantage.
regardez l'inspecteur et l'éditeur de style. Vous pouvez apporter des modifications temporelles à votre site, avant de les reporter dans votre interface Jimdo 'modifier le head" ou "design perso". L'outil de visualisation 3D permet de visualiser mieux la superposition des éléments, enfin, divers outils permettent de contrôler le fonctionnement de vos codes javascripts.
Cerise sur le gâteau, l'outil de chrome permet de visualiser le site en émulant les navigateurs de différents mobiles, cela donne une première idée de la consultation sur ces portables.
Ces "modifications" n'affectent que la page chargée chez vous en mémoire cache. Dès que vous la rechargez, elles disparaissent. C'est donc un outil de diagnostic sans aucun risque.