Ecommerce Templates Canada

Logiciel de commerce électronique
pour Dreamweaver, FrontPage et GoLive.
En version ASP et PHP.
Boutique »
Version ASP
Version PHP
Outils eCommerce
Votre panier
Aide et ressources »
Survol du logiciel
Aide pour la version ASP
Aide pour la version PHP
Recherche sur le site
Ressources
Forum de support
Questions et réponses
Mise à jour et correctifs
Clients/Exemples
Boutique de démonstration
Développeurs
Passerelles de paiement
Hébergement
Utilisation des feuilles de style en cascade (CSS)
Accueil > Aide Asp : Utilisation des feuilles de style en cascade (CSS)
Les gabarits eCommerce utilisent les feuilles de style CSS (Cascading Style Sheets) pour vous permettre de gérer facilement les propriétés des polices, des hyperliens et personnaliser votre gabarit.

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:

div.detailid The properties of the text "Product ID"
div.detailname The properties of the product name on the product detail page
div.detaildiscounts The properties of the discounts text for the product detail page
td.detailimage The alignment of the product image on the product detail page
img.prodimage The properties of the product image
div.detaildescription The properties of the text in the long product description
div.detailoptions The properties of the product options on the product detail page
div.detailprice The properties of the price on the product detail page
div.detailcurrency The properties of the alternative currencies on the product detail page

Page des produits

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

div.prodid The properties of the text "Product ID"
div.prodname The properties of the product name on the product page
div.proddiscounts The properties of the discounts text for the product page
td.prodimage The alignment of the product image on the product page
img.prodimage The properties of the product image
div.proddescription The properties of the text in the short product description
div.prodoptions The properties of the product options on the product page
div.prodprice The properties of the price on the product page
div.prodcurrency The properties of the alternative currencies on 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


ACCUEIL | PRODUITS | SUPPORT | EXEMPLES | CONTACTEZ-NOUS
 

Canada |  France | Espagne | Australie | Allemagne | Hollande | IrlandePortugal | Afrique du Sud | Grande-Bretagne
© Copyright 2002 - 2006 Logiciel de commerce électronique par Internet Business Solutions SL
Tous droits réservés