Faire ses premiers pas en CSS

Non ! Sur e-monsite, pour gérer le design de votre site, vous n'avez ni besoin maîtriser le CSS, ni besoin de faire des modifications dans une feuille de style.

Pour gérer l'apparence de votre site très simplement, vous pouvez donc appliquer un thème et le personnaliser en modifiant des paramètres via des formulaires. Pour cela, rendez-vous dans votre manager dans Configuration > Apparence > Personnaliser.

En fonction du thème que vous appliquez, vous pouvez modifier un nombre variable de paramètres (plus de 230 paramètres modifiables pour le thème Unlimeted et le thème Responsive).

Il n'est donc pas possible de tout modifier avec les formulaires mais sachez que tout est faisable en CSS ! Si vous souhaitez modifier une partie de votre site qui n'apparaît pas dans les paramètres de personnalisation du design, vous pouvez le faire en CSS.

Il faut donc vous former à l'utilisation de ce langage. La meilleure façon d'apprendre, c'est de vous documenter puis de mettre en pratique (en utilisant des inspecteurs de code).

L'inspecteur de code est un outil gratuit qui va vous permettre d'analyser le contenu HTML et CSS d'une page. Que ce soit sur Chrome, sur Internet explorer, Safari ou sur Firefox, il y a un inspecteur de code installé par défaut. Pour l'utiliser:

• Sur Internet Explorer : dans les options de votre navigateur, cliquez sur Outils > Outils de développement, ou appuyez directement sur la touche F12 de votre clavier
• Sur Chrome (ou Safari) : faites un clic droit sur la page et cliquez sur Inspecter l'élément
• Sur Firefox :  faites un clic droit puis sélectionnez Examiner l'élément. Sous Firefox, nous vous recommandons l'utilisation de Firebug, un module complémentaire que vous pouvez ajouter gratuitement : ajouter Firebug

 Que ce soit avec l'outil par défaut ou un module complémentaire, une barre horizontale apparaît sur le bas de votre navigateur. Et maintenant ? Comment faire ?

L'inspecteur de code permet de voir quelles sont les différentes classes CSS appliquées sur chaque élément dans la page. Découvrons ensemble l'utilisation de cet outil à travers un exemple concret : centrer le titre des pages (la mise en pratique qui suit a été réalisé sous Firefox à l'aide de Firebug).

• Examinez l'élément avec Firebug (1)
• Survolez la zone dans laquelle se trouve l'élément que vous souhaitez personnaliser (en l'occurrence le titre de la page) (2)
• Repérez le sélecteur. Dans notre exemple, il s'agit de .main_title { (3)

Vous pouvez modifier le CSS existant ou ajouter une nouvelle propriété. Dans notre exemple, il s'agit de disposer le texte à un autre endroit (au centre). La propriété n'existant pas, il faut la créer : 

• Cliquez sur le sélecteur puis faites un clic droit et choisissez Nouvelle propriété.
• Ecrivez text-align:center;
• Le texte est maintenant centré sur votre navigateur (vous seul pouvez le voir, si vous actualisez la page, la feuille de style se recharge et la modification disparaît).

Ajouter le code depuis votre manager

Vous devez maintenant copier coller le code dans votre manager dans une zone CSS supplémentaire.

Ajoutez .main_title { text-align: center;} dans Configuration > Apparence > Personnaliser, tout en bas dans "Zone CSS supplémentaire"