Dans le dossier racine de votre Web vous trouverez un fichier nommé style.css et sur chaque page un lien qui s'y relie comme suit : <LINK REL=STYLESHEET TYPE="text/css" HREF="style.css">. Ce lien peut-être modifié à l'aide de votre éditeur Web.

Éditer les propriétés des hyperliens avec CSS

Après avoir ouvert le fichier style.css, vous devriez voir les lignes suivantes:

A:link {
color: #3366FF;
text-decoration: none;
}

A:visited {
color: #3366FF;
text-decoration: none;
}

A:active {
color: #3366FF;
text-decoration: none;
}

A:hover {
color: #FF9966;
text-decoration: none;
}

Les paramètres sont très clairs, n'importe quel valeur hex suffira à spécifier la couleur et si vous avez besoin d'un soulignement lorsque le curseur passe sur un lien, changer "none" pour "underline". Prendre note que certains navigateurs, entre autres Netscape 4.x ignoreront l'option "hover".

Éditer les propriétés de police avec CSS

Les genres de police et la taille sont aussi spécifiés dans le fichier css, voici un exemple:

TD {
font-size: 12px;
font-family : Verdana,Arial;
}

P {
font-size: 12px;
font-family : Verdana,Arial;
}

Cela signifie que le texte qui se retrouve entre les balises <TD> ou <P> sera en Verdana, grandeur 12 - si la police Verdana n'est pas installée sur l'ordinateur du visiteur alors elle sera converti en Arial. Si vous voulez changer la couleur du texte par défaut, ajouter une ligne comme suit pour obtenir du texte en rouge :

TD {
font-size: 12px;
font-family : Verdana,Arial;
color: #CC0000;
}

P {
font-size: 12px;
font-family : Verdana,Arial;
color: #CC0000;
}

Éditer les propriétés de barre horizontale avec CSS

Cette ligne de code vous donnera un barre horizontale bleue de un pixel de hauteur:

HR {
color : #3366FF;
height : 1px;
}

Les navigateurs Netscape ignoreront cette propriété.

Utilisation des classes CSS

Les classes CSS vous permettent de varier vos styles sur une page, par exemple en donnant à une section du texte plus petit ou différentes propriétés de lien - ceci peut-être très pratique lorsque, par exemple, vous avez un arrière-plan pâle et un autre foncés et que vos liens doivent s'afficher correctement sur les deux. Voici un exemple d'utilisation de classe pour les propriétés hyperliens :

A.dark:link {
color: #FFFFFF;
text-decoration: none;
}

A.dark:visited {
color: #FFFFFF;
text-decoration: none;
}

A.dark:active {
color: #FFFFFF;
text-decoration: none;
}

A.dark:hover {
color: #FF9966;
text-decoration: none;
}

Ceci vous donnera des liens blancs avec un changement à orange lorsque la souris passe au dessus. Pour l'appliquer à des liens individuels vous devrez ajouter la classe comme suit:

<a class="dark" href="mylink.html">link text</a>

Pour changer le format du texte ou la couleur entre les balises <TD> ou <P> vous pouvez utiliser l'exemple suivant:

TD.smaller {
font-size: 11px;
font-family : Verdana;
color : #CC0000;
}

P.smaller {
font-size: 11px;
font-family : Verdana;
color : #CC0000;
}

Ceci vous donnera un texte rouge de 11 pixels lorsque vous ajouterez une classe comme ceci pour un paragraphe:

<p class="smaller">

...ou pour une cellule

<td class="smaller">

Éditer l'affichage de la catégorie

Depuis la version 4.1.0, il est possible d'afficher les catégories sur plusieurs colonnes plutôt qu'une liste verticale. Comme les utilisateurs voudront aligner le texte et les images dans différents formats, nous avons ajouté les classes CSS pour simplifier les modifications.

La première chose que vous voudrez faire sera de configurer le format de la catégorie de la meilleure façon pour votre site, ceci implique d'ajouter les paramètres à vos fichiers vsadmin/includes.asp ou vsadmin/icludes.php, dépendamment de votre version.

La prochaine étape est d'ouvrir votre fichier CSS, vous le trouverez dans la racine de votre magasin et il est habituellement nommé style.css ou stylesheet.css

Copier et coller ces lignes au fichier CSS:

P.catname {
text-align: center;
margin-top: 0px;
margin-bottom: 4px;
vertical-align:top;
text-align: center;
}

P.catdesc {
margin-top: 0px;
margin-bottom: 4px;
vertical-align:top;
}

IMG.catimage {
border:1px;
border-thickness: 1px;
border-color: #000;
border-style: solid;
vertical-align:top;
}

TD.catimage {
vertical-align:top;
}

TD.catname {
vertical-align:top;
text-align: center;
}

TD.catnavigation {
vertical-align:middle;
text-align: left;
}

Explication des classes :

P.catname : Alignement du nom de la catégorie
P.catdesc : Alignement de la description de la catégorie
IMG.catimage : Propriétés de l'image de la catégorie
TD.catimage : Alignement de l'image de la catégorie
TD.catname : Alignement du nom de la catégorie
TD:catnavigation : Alignement de la navigation de la catégorie principale

Quelques exemples

L'utilisation des paramètres ci-haut affichera la page des catégories de la façon suivante:

Si vous voulez les titres et textes alignés à gauche et sans bordure d'image, le code devra être changé pour:

P.catname {
text-align: center;
margin-top: 0px;
margin-bottom: 4px;
vertical-align:top;
text-align: left;
}

P.catdesc {
margin-top: 0px;
margin-bottom: 4px;
vertical-align:top;
}

IMG.catimage {
border:0px;
border-thickness: 1px;
border-color: #000;
border-style: solid;
vertical-align:top;
}

TD.catimage {
vertical-align:top;
}

TD.catname {
vertical-align:top;
text-align: left;
}

TD.catnavigation {
vertical-align:middle;
text-align: left;
}

Ainsi la mise en page ressemblera à:

Pour disposer les éléments vers la droite, changer:

TD.catnavigation {
vertical-align:middle;
text-align: left;
}

pour:

TD.catnavigation {
vertical-align:middle;
text-align: right;
}

Nous recommandons de faire des tests avec ces paramètres jusqu'à ce que vous trouviez ceux qui conviennent à votre site.

Modifier la couleur du prix

Depuis la version 4.1.6 nous avons ajouté la possibilité de changer la couleur du prix à partir de la page de style. Vous avez besoin d'ajouter ce qui suit au fichier style.css, cet exemple affiche le prix en rouge:

SPAN.price {
COLOR: #FF0000;
}

Éditer les propriétés des options de produits

Depuis la version 4.2.0 il est possible de changer le format des options de produits à partir de la page de style. Vous devez ajouter ce qui suit au fichier style.css. L'exemple suivant afficherait le texte en rouge et avec la police Verdana 11px:

SELECT.prodoption {
font-size: 11px;
font-family : Verdana;
color : #FF0000;
}

Si vous utilisez la gestion des stocks avec les options de produits, disponible depuis la version 4.4.0, il est possible d'afficher les options qui ne sont plus en stock d'une couleur spécifique. L'exemple suivant affiche les options qui ne sont plus en stock de couleur grise. Simplement ajouter cette ligne au fichier style.css

OPTION.oostock {
color : #A0A0A0;}

Modifier les liens de navigation du haut de la page des produits

Depuis la version 4.6.0, il est possible de modifier l'affichage des liens de navigation du haut de la page des produits, par exemple : Accueil >> Produit, à partir de la feuille de style. Simplement ajouter le code suivant à votre fichier style.css, cet exemple affichera le texte en rouge avec la police Verdana 11px :

td.prodnavigation {
font-size: 11px;
font-family : Verdana;
color : #A0A0A0;
}

P.prodnavigation {
font-size: 11px;
font-family : Verdana;
color : #A0A0A0;
}

Modifier les tableaux

La version 4.7.0 permet de contrôler l'apparence des tableaux par la feuille de style pour les pages search / tracking / order status / checkout.

Les nouvelles classes sont:

TABLE.cobtbl pour le tableau.
TD.cobhl pour le "highlights" des cellules
TD.cobll pour le "lowlights" des cellules

Par exemple, ajouter le code suivant au fichier style.css file affichera un tableau semblable dans la page de recherche:

TABLE.cobtbl{
background-color: #FF0000;
}

TD.cobhl{
background-color: #FFC42B;
}

TD.cobll{
background-color: #FFF7B8;
color : #666666;

Modifier le numéro des pages

Depuis la version 4.7.0, il est possible de modifier le format du numéro des pages à partir de la feuille de style. Simplement ajouter le code suivant au fichier style.css, l'exemple suivant affichera les numéros des pages avec la police Verdana de taille 12:

P.pagenums {
font-size: 12px;
font-family : Verdana;
}

Modifier le format des devises

La version 4.7.0 permet également de modifier l'affichage des devises supplémentaires. Simplement ajouter le code suivant au fichier style.css, l'exemple suivant affichera les devises supplémentaires avec la police Verdana, taille 10 et de couleur grise:

SPAN.extracurr {
font-size: 10px;
font-family : Verdana;
color: 666666
}

 

Page de détail des produits

In version 4.9.0 we added some new classes which are specific to the product detail page:

Page des produits

In version 4.9.0 we added some new classes which are specific to the product page:

Encore plus de lecture ?

L'information présenté ici ne fait qu'effleurer le sujet des feuilles de style. Nous vous recommandons fortement l'utilisation de CSS. Pour de plus amples informations, veuillez visiter ces excellents sites (en anglais) :

www.w3schools.com
www.mako4css.com