|
Agrandir
cette image |
La version 4.8.0 a vu apparaître le panel de contrôle personnalisable grâce aux feuilles de style CSS. Le design lui-même est construit sur une base 100% CSS conforme au XHTML transitoire, et le code fonctionne de manière continue en arrière-plan.
En-dehors de l’accélération des temps de téléchargements, la section d'administration, qui est personnalisable, permet de manière simple les changements de couleurs et d’images.
Vous trouverez ci-dessous quelques instructions pour vous aider à modifier, changer et personnaliser.
|
La feuille de style
La feuille de style qui contrôle la mise en page et les couleurs se situe dans le dossier vsadmin est se nomme adminstyle.css. Vous pourrez y trouver les commentaires que nous avons ajoutés aux fichiers de manière à ce que vous puissiez voir comment les
différentes sections sont paramétrées.
Avant que vous n’opériez quel que changement que ce soit, nous vous recommandons fortement de faire une copie de sauvegarde de la feuille de style adminstyle.css pour que vous puissiez toujours revenir au fichier original. Nous vous recommandons également de ne faire aucune modification si vous n’avez pas de compétences pour éditer une feuille css.
- Modifier l’arrière-plan (background)
La couleur principale d’arrière-plan est définie en bleu clair #E6E9F5 et peut être modifiée ici :
background: #E6E9F5;
Le corps de page principal est en blanc et bien qu‘il soit préférable de le maintenir ainsi, vous pouvez le changer en-dessous de #main :
background: #FFF;
La section du header est définie comme suit #BFC9E0 :
background:#BFC9E0;
Une image d‘arrière-plan (fond) est associée au header pour lui donner cet effet arrondi en haut :
background-image: url('adminimages/newtoptopbg.jpg');
- Modifier les contours de tableaux
Les tableaux sont par défaut entourés d‘un contour en pointillés (dotted) :
border: 1px dotted #194C7F;
Les autres options sont :
dashed (tirets), solid (ligne 1px), double (ligne 2px) -
plus d'options
- Autres modifications CSS
La plupart des autres modifications possibles sont liées aux changements de couleurs (des zones textes, des cellules), au texte et aux liens. Ces modifications devraient s’avérer relativement intuitives.
- Note
Nous vous suggérons fortement de ne pas modifier les emplacements absolus des diffèrent éléments et n’oubliez pas de
prévisualiser la section d'administration dans divers navigateurs avec
différentes résolutions d’écran.
Modifier les images
Les images associées au panel de contrôle se trouvent dans le dossier adminimages et nous vous suggérons de préserver leur taille.
- Logo :
adminimages/ecommerce_templates.gif" width="278"
height="53"
- Titres du menu de gauche :
adminimages/administration.jpg" width="150" height="31"
adminimages/product_admin.jpg" width="150" height="31"
adminimages/shipping_admin.jpg" width="150" height="31"
adminimages/extras.jpg" width="150" height="31"
- Ligne horizontale séparant les différents éléments du menu :
adminimages/hr.gif
Notes
Vous devriez à présent posséder les détails fondamentaux pour personnaliser votre panel de contrôle, mais n’oubliez pas de prévisualiser la section d'administration dans divers navigateurs avec différentes résolutions d’écran.
Il est fortement recommandé de faire une sauvegarde de tous les fichiers d’origine avant de commencer. Cependant, si vous commettiez une erreur irréversible, procurez-vous la dernière mise à jour et remplacez la feuille de style et les images à partir de l’original. |
