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

de Inès de la Ruffie, 19.01.12



Les éditeurs d’ePages vous permettent de modifier l’apparence de votre boutique en ligne selon vos besoins. Quelques connaissances en matière de conception de pages vous suffisent pour vous en servir et créer votre boutique idéale. Malgré tout, le système impose certaines restrictions, c´est pourquoi, pour aller plus loin, nous vous proposons d´utiliser le langage CSS. Vous pouvez l´insérer dans le code source de votre site web, et ainsi  contourner nombre de ces restrictions. Le blog ePages s’appuie sur quelques exemples pour illustrer les possibilités qui s’offrent à vous, comment déterminer le code le mieux adapté et savoir où l’insérer. Notez cependant que vous êtes responsable de toute utilisation du langage CSS.

Présentation du langage CSS

Si vous comptez exploiter le langage CSS régulièrement, nous vous recommandons de consulter quelques tutoriels gratuits en ligne. Pour vos premiers pas, référez-vous par exemple à la page web http://fr.html.net/tutorials/css

Ce billet vous présente brièvement le langage CSS. Celui-ci s’appuie sur des balises pour vous permettre de modifier l’apparence du contenu de votre site web. CSS est l’abréviation de Cascading Style Sheets (feuilles de style en cascade).

Ce n’est pas un moyen d’ajouter du contenu sur un site web ou de modifier les fonctionnalités de votre boutique en ligne.

Le langage CSS ne demande pas de configuration particulière. Pour en tirer parti, vous devez tout d’abord préciser ce qui est à modifier à l’aide du sélecteur. Celui-ci précise entre accolades l’effet à appliquer sur l’élément sélectionné. Une commande se compose de deux données : une propriété et une valeur.

Dans notre exemple, nous allons modifier la couleur de fond d’un site web pour que l’arrière-plan soit rouge. La couleur est exprimée sous forme de valeur hexadécimale. De plus amples informations sur ces valeurs sont disponibles sur le site www.colorpicker.com/ :

Pour attribuer une autre propriété à un élément, il suffit de préciser la propriété entre le point-virgule et la deuxième accolade.

Reprenons notre exemple. Si nous souhaitons que la nouvelle couleur de fond soit rouge et que la police soit bleu foncé.

body {
color: 0800FF;
background-color: #FF0000;
}

En temps normal, l’instruction complète se tape sur une même ligne, mais nous avons placé ici les éléments sur des lignes distinctes pour simplifier la lecture. L’important est que les éléments apparaissent entre les accolades. Les navigateurs ne tiennent pas compte des sauts de ligne. Il est cependant important qu’un point-virgule vienne se placer à la fin de chaque entrée car ils servent de séparateurs d’arguments.

 

Définir le sélecteur le mieux adapté à votre boutique

Maintenant que nous avons vu la structure, comment déterminer le sélecteur le mieux adapté pour, par exemple, masquer manuellement un élément donné de notre boutique ?

Nous allons utiliser pour cela un plug-in de Firefox : Firebug. 

Cliquez sur le lien suivant pour l’installer : https://addons.mozilla.org/fr/firefox/addon/firebug/ 

Firebug permet d’effectuer des recherches dans l’intégralité de la vitrine d’une boutique affichée dans le navigateur et, entre autres, de définir le sélecteur le plus approprié à un élément particulier.

Voyons la procédure à suivre dans un exemple.

Dans les boutiques ePages, l’aide à la navigation (à savoir le chemin qui mène à un produit) s’affiche au-dessus du produit en question. Celle-ci est séparée de l’image du produit au moyen d’une ligne. Nous allons à présent tenter de masquer ce trait.

Pour ce faire, nous devons ouvrir la vitrine de notre boutique dans Firefox et sélectionner un produit pour lequel nous cherchons à connaître les détails. Au-dessus des détails du produit se trouve une aide à la navigation et une ligne de séparation.

Nous allons utiliser Firebug pour examiner la page. Pour cela, cliquez sur le symbole correspondant dans la barre de menu supérieure du navigateur ou effectuez un clic-droit et sélectionnez « Inspect element with Firebug ».

ou

Firebug s’ouvre alors dans la moitié inférieure du navigateur. Si nous voulons étudier de plus près des éléments précis, nous devons d’abord les sélectionner. Cliquez sur le symbole suivant dans la barre de menu de Firebug.

Si nous plaçons à présent le curseur sur un élément de notre site web, celui-ci s’encadre en bleu. Le contenu de la fenêtre de Firebug affiche alors le code source de l’élément en question.

Dans la fenêtre inférieure gauche se trouve le code, tandis que les commandes CSS servant à modifier l’apparence de l’élément sont affichées à droite. Nous pouvons ainsi tester différentes configurations des commandes CSS déjà utilisées. Par exemple, pour modifier la taille de l’élément, il suffit d’attribuer une autre valeur à la propriété « height ».

Cela permet d’obtenir un aperçu avant de procéder à un changement, sans modifier le code source. Firebug est de ce fait un outil idéal pour l’expérimentation sur les feuilles de styles.

Nous pouvons aussi tester des nouveaux styles. Pour cela, effectuez un clic-droit dans la fenêtre de droite, puis ajoutez une nouvelle propriété.

Pour masquer la ligne de séparation, nous devons saisir une nouvelle propriété dans la fenêtre de droite, à savoir « visibility : hidden ».

La ligne pointillée située en dessous de l’aide à la navigation devient alors invisible. Vous retrouverez la commande CSS, ainsi que d’autres instructions, dans le tutoriel mentionné au début de ce post.

 

Modifier le code source

Pour appliquer un changement permanent à notre boutique, la commande doit être insérée à un endroit spécifique dans le code source.

Cela requiert :

-le chemin d’accès exact de l’élément à modifier ;

-la commande permettant de masquer l’élément en question.

Nous disposons déjà de cette dernière ; il ne manque que le chemin d’accès. Là encore, utilisons le  sélecteur de Firebug.

Sélectionnez la ligne pointillée. La partie correspondante du code apparaît à nouveau dans la fenêtre inférieure gauche et le chemin d’accès à l’élément en CSS s’affiche dans la barre de menu de Firebug. Effectuez un clic-droit sur le chemin et sélectionnez « Copier le chemin du CSS ».

Le chemin suivant est alors conservé dans le fichier cache de l’ordinateur :

html.mozilla body.epages div.Layout1 div.Middle div.ContentArea div.ContentAreaInner div.ContentAreaWrapper hr.Separator

Si vous regardez attentivement le chemin, vous remarquerez que les informations se précisent progressivement à chaque point de séparation. Le dernier élément « hr.Separator » correspond à la ligne pointillée. En utilisant le chemin d’accès complet, nous nous assurons de modifier uniquement l’élément voulu et aucun autre qui serait situé ailleurs sur le site web et porterait également la mention « hr.Separator ».

 

 

Nous disposons enfin de tous les éléments nécessaires. Revenez à l’interface d’administration et, dans le menu « Réglages / Paramètres généraux » cliquez sur l’onglet « Paramètres avancés » saisissez l’intégralité des renseignements à apporter dans le code source de la page.

Le code doit maintenant se présenter comme suit :

<style type= »text/css »>

body.epages div.Layout1 div.Middle div.ContentArea div.ContentAreaInner div.ContentAreaWrapper div.Separator

visibility: hidden !important; 

}

</style>

 

 

Grâce à <style type= »text/css »>, nous indiquons vouloir apporter des modifications au code CSS ; pour conclure le code, ajoutez la balise </style>. Entre les balises ouvrante et fermante se trouve l’élément à modifier (chemin d’accès avant div.Separator) suivi de la modification à réaliser entre accolades (visibility: hidden !important).

Après avoir saisi le code, cliquez sur « Enregistrer » et actualisez le cache de page de la boutique. Si vous parcourez à présent la vitrine de la boutique, vous remarquerez que la ligne pointillée n’apparaît plus.

 

Si vous vous sentez limité par les éditeurs de la boutique, suivez la procédure ci-dessus pour effectuer des modifications simples et rapides. Dans la seconde partie de ce post dédié au langage CSS, que nous publierons sur le blog prochainement, nous approfondirons le sujet pour apporter des modifications plus poussées.

L’utilisation du langage CSS est la meilleure solution si vous souhaitez aller au-delà des paramètres qu’offre la version standard de votre boutique. Il est cependant important de noter que vous êtes entièrement responsable de toute utilisation du langage CSS. Vous risquez en effet de désactiver ou de masquer par erreur des fonctionnalités importantes de la boutique. Si votre boutique se comporte soudainement de façon étrange, vérifiez si le problème ne provient pas du code que vous venez de saisir ; pour ce faire, supprimez la modification du code source de votre site web.

 

 

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 *