Lorsque l’éditeur ne suffit pas : utiliser le langage CSS pour modifier le style de votre boutique – Partie 2

de Inès de la Ruffie, 30.01.12



Dans la première partie de cet article consacré à notre tour d’horizon du langage CSS, nous avons étudié comment manipuler différents éléments de votre boutique et déterminer le code le mieux adapté à la situation. Les modifications présentées s’appliquaient à l’intégralité de la boutique. Dans cette deuxième partie, nous allons voir comment utiliser le langage CSS pour apporter des modifications limitées à des pages précises.

 

Lorsque vous avez trouvé le code qui convient (voir la première partie de cet article), vous pouvez modifier pratiquement n’importe quel élément de votre boutique via le menu « Réglages -> Paramètres généraux -> Paramètres avancés ». Cependant, de telles modifications s’appliquent à l’intégralité de la boutique.

Par exemple, si vous masquez la barre de menu de gauche à l’aide du langage CSS, celle-ci est masquée dans toute votre boutique, indépendamment de la page consultée. Comment faire si vous désirez masquer la barre de menu uniquement sur votre page d’accueil, par exemple pour laisser plus de place à une image occupant beaucoup d’espace ?

Masquer la barre de menu uniquement sur la page d’accueil

Pour masquer le menu de barre latérale sur la page d’accueil uniquement, sans étendre ce changement aux autres pages de votre boutique en ligne, vous devez suivre quelques étapes simples au sein de l’administration de votre boutique en ligne.

Pour commencer, ouvrez le menu « Contenu/Catégories », puis sélectionnez « Vue des données techniques ».Dans l’onglet « Général », nous nous intéressons ensuite au champ « Description longue ».

Css barre latérale 1

Css barre latérale

C’est à cet endroit que vous allez insérer le code. Passez en mode HTML avant de coller le code suivant:

<style type= »text/css »>

.NavBarLeft {display:none;}

div.Middle div.ContentArea div.ContentAreaInner div.ContentAreaWrapper div.CategoryList{margin:0; padding:0 !important;}

.ContentArea, .ContentArea div, .ContentArea table, .ContentArea td, .ExtractedContentAreaElement{margin:0 !important;}

div.Middle div.ContentArea {padding-right:0 !important;} </style>

 

Cliquez sur Enregistrer pour sauvegarder les modifications. Grâce à ce code, la barre latérale gauche disparait de la page d’accueil.

Vous pouvez suivre la même procédure pour masquer la barre latérale de droite Droite dans le menu en entrant le code:

<style type= »text/css »>

.NavBarRight {display:none;}

div.Middle div.ContentArea div.ContentAreaInner div.ContentAreaWrapper div.CategoryList{margin:0; padding:0 !important;}

.ContentArea, .ContentArea div, .ContentArea table, .ContentArea td, .ExtractedContentAreaElement{margin:0 !important;}

div.Middle div.ContentArea {padding-right:0 !important;} </style>

 

C’est tout? Non, la manipulation n’est pas encore terminée! Le changement ci-dessus peut ne pas affecter seulement la page d’accueil, mais peut être reconnu par la solution comme un changement général, et donc s’appliquer à toutes les pages de votre boutique en ligne.

Que devez-vous faire alors? À ce stade, vous devrez indiquer au logiciel, par l’insertion d’un nouveau code,que vous souhaitez appliquer ce changement uniquement à la page d’accueil, de manière à garder la barre latérale dans le reste de votre boutique.

Pour cela, rendez-vous dans la section d’administration, sélectionnez le menu « Réglages » puis « Paramètres généraux ».
Parmi les options disponibles, sélectionnez « Général » puis « Paramètres avancés ».

Vous verrez maintenant une zone appelée « zone HTML Head » dans lequel vous pouvez entrer le code qui vous permettra de compléter le changement initial, c’est-à supprimer la barre de menu uniquement sur la page d’accueil.

Css HTML Head

 

Le code à insérer est le suivant:

<style type= »text/css »>

div.NavBarLeft {display:visible !important;}

</style>

Cliquez sur « Enregistrer », actualisez le cache et cliquez sur le bouton d’aperçu pour vérifier que le changement a été appliqué avec succès.

 

Bonne vente en ligne!

A propos de l‘auteur


est responsable Channel Marketing pour l´Europe du Sud. Passionnée par l´eCommerce et le concept d´expérience client, elle aime partager les nouvelles tendances, les conseils et les expériences du marché et des utilisateurs ePages.

Post similaire


Commentaires


Partagez votre opinion


*Champ obligatoire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *