Personnalisation des templates pour LogiVert 6

Transcription

1 Manuel Personnalisation des templates pour LogiVert 6 Copyrights (c) LogiVert BV Site web :

2 PRESENTATION... 3 INTRODUCTION... 3 LES 4 NIVEAUX... 3 NIVEAU1 CONFIGURATION DE TEMPLATE... 4 QUOI... 4 REGLAGE DES MODELES STANDARD... 4 Général... 5 Afficher les suggestions de recherche... 5 Afficher vos coordonnées... 5 Sélection des langues textuelle... 5 MENUS... 6 Menu supérieur... 6 Menu latéral... 7 Nombre de pages supplémentaires... 7 MEDIA SOCIAUX... 8 AddThis... 8 Facebook... 9 PERSONNALISER LES TEXTES DU MODELE... 9 NIVEAU 2 BLOC-LIBRES ET WIDGETS BLOCS-LIBRES PAGES SUPPLEMENTAIRES BLOCS LIBRES- GROUPES D'ARTICLES WIDGETS NIVEAU 3 IMAGES QUOI COMMENT FONCTION DES IMAGES Etape1: Etape2: Adapter une image Etape 3: Adapter les boutons Etape 4: Sauvegardez vos modifications en lieu sûr NIVEAU 4 CSS QUOI COMMENT Personnalisation CSS SAUVEGARDER LES MODIFICATIONS MISES A JOUR DE CE MANUEL... 18

3 Présentation Introduction LogiVert offre une série de templates de base. Ces templates offrent différentes présentations et couleurs. Malgré tout, il se peut que vous souhaitiez les personnaliser à votre image. Ces templates répondent aux derniers standards en matière de sites Web. Les techniques utilisées sont le XHTML et CSS. Ces techniques sont très répandues auprès des développeurs car ils sont à la fois simples d'utilisation et très puissants. XHTML et CSS rendent une séparation possible entre la "structure technique" et le l'agencement. XHTML pour la structure et CSS pour l'agencement. Les fichiers XHTML comprennent également les scripts PHP ( et Smarty ( Ce manuel ne tient pas compte de ses scripts qui servent uniquement à l'exécution du logiciel de boutique en ligne. Les fichiers XHTML forment, à l'aide du principe des "boxes" les différentes pages du site définitif. Ces "boxes", nous les appellerons blocs. La structure est déterminée dans un fichier (layout.html). Cette structure sera, dépendamment du type de page (Accueil, Panier, Info produit,...) complétée par des blocs. Ces blocs sont par exemple : les groupes d'articles, L'inscription à la Newsletter, la sélection de langues ou le détail des articles. Les 4 niveaux Il y a 4 niveaux d'opération pour les templates. Le premier niveau pour l'utilisateur sans expérience avec la conception de sites web. Chaque niveau requiert plus de connaissances techniques. Les 4 niveaux: Niveau 1 Personnalisation des modèles standards à l'aide des propriétés Niveau 2 - Personnalisation du Template à l'aide des blocs Niveau 3 Personnalisation des images d'arrière-fond, bannières et en-têtes Niveau 4 Personnalisation du fichier CSS pour les modifications graphiques Nous parcourrons, dans ce manuel, les différentes étapes pour personnaliser un Template existant à votre image.

4 Niveau1 Configuration de Template Quoi Il est possible d'adapter les modèles dans le back-office de LogiVert. Les fonctionnalités dans l'application LogiVert vous permet, en effet, d'influencer le comportement du modèle choisi. Réglage des modèles standard Selon que vous créez un nouveau projet (1) ou adaptez un projet existant (2) en sélectionnant "Template" ou Démarrer > Propriétés > 2/6 > Sélectionner, vous afficherez la fenêtre de sélection des modèles. Dans la fenêtre de sélection des modèles, s'affichent les modèles standards. Vous sélectionnerez modèle et couleur qui vous correspondent. Après avoir fait votre choix, cliquez sur le bouton OK. Le bouton Mise en forme du modèle vous permettra d'adapter la configuration du modèle choisi. Le bouton Textes du modèle vous permet de personnaliser les textes qui apparaîtront sur votre boutique en ligne.

5 Général Structure de l'url Vous déterminerez si vous souhaitez des URL standard ou dynamique URL dynamique URL statique Afficher les suggestions de recherche En utilisant le champ de recherche, ce champ suggérera des articles correspondant aux lettres saisies. Afficher vos coordonnées Complétez les champs et cochez le champ pour afficher vos coordonnées en pied de page Sélection des langues textuelle

6 Cochez ce champ pour remplacer les drapeaux par les initiales de la langue Menus LogiVert distingue différents menus Menu supérieur Configurer le comportement du menu supérieur. Par défaut : les sous-groupes sont affichés dans un sous-menu déroulant

7 Sous-menus étendus: sur focus, les sous-menus sont affichés, en largeur sous le groupe principal Sous-menu paginé : affiche les sous-groupe sur toute la largeur disponible Aucun: pas de sous groupes affichés Menu latéral Choisissez la position du menu latéral. Lorsque vous sélectionnez Ne pas afficher le menu latéral sur la page d'accueil, le niveau 1 des groupes sera affiché dans le menu principal. Décochez cette option pour afficher les groupes de produit dans le menu latéral sur la page d'accueil. Nombre de pages supplémentaires Déterminez combien de pages supplémentaires peuvent être affichées respectivement.

8 Media sociaux AddThis Affiche le bouton de partage de votre boutique. Le PubID est généré après enregistrement auprès de AddThis ( Vous copierez le PubID dans le code.

9 Facebook Cette option génère le bouton J'aime de Facebook sur les pages d'articles ou le détail des articles. Les réactions sont affichées dans le détail de l'article. Personnaliser les textes du modèle Vous modifierez les textes standards apparaissant sur votre site en sélectionnant le bouton Textes du modèle. Si vous ne remplacez pas le texte standard par un texte personnalisé, le texte standard sera affiché dans votre boutique, vous n'êtes pas obligés de personnaliser tous les textes. Si votre boutique est multilingue, vous adapterez, si nécessaire, les autres langues. L'utilisation de la personnalisation des template vous permet d'adapter votre site à votre style. LogiVert permet en outre d'ajouter des blocs.

10 Niveau 2 Bloc-libres et widgets Les blocs-libres sont des éléments qui peuvent être affichés sur vos pages web. Ces blocs s'afficheront dans les menus latéraux au-dessus ou en-dessous des éléments standards (Groupes de produits, panier, enregistrement,...). Vous pouvez par exemple y inclure des logos de partenaires ou des widgets. 1. Blocs libres pages supplémentaires 2. Blocs-libres groupes d'articles Blocs-libres Pages supplémentaires Lorsque vous créez un bloc-libre pour les pages supplémentaires, ce bloc sera affiché lorsque le visiteur sélectionne une page supplémentaire. Vous agrémenterez ces blocs de textes, liens, images, code html ou widgets.

11 Blocs libres- Groupes d'articles Lorsque vous créez un bloc-libre pour les groupes d'articles, ce bloc sera affiché lorsque le visiteur sélectionne un groupe d'articles. Vous agrémenterez ces blocs de textes, liens, images, code html ou widgets. Widgets Un widget peut être résumé comme suit:" Un objet graphique simple ou élément qui est simple, clair et souvent largement utilisé qui peut être activé ou désactivé par un utilisateur, pour agrémenter une interface d'utilisateur existante". Ainsi, LogiVert vous permet d'intégrer, par exemple, un media social. Vous pouvez insérer des widgets dans les blocs-libres ou dans les pages supplémentaires.

12 Niveau 3 Images Quoi Dans le sous-répertoire Images du template se trouvent les images du template. Ces images composent le fond, les bannières et les boutons. La plupart des arrière-plans sont déterminés par ces arrière-plans. Ceci n'est pas valable pour tous les cas de figure. Certaines couleurs d'arrière-plan sont déterminées dans le fichier CSS. Vous lirez plus à ce sujet dans le chapitre suivant. La modification des images ne peut pas être utilisée pour un changement universel des couleurs des templates. Il est dès lors conseillé de choisir un modèle de base qui correspond en grande lignes à vos besoins. Les images présentes peuvent toutes être adaptées. La seule chose avec laquelle vous devez tenir compte sont les dimensions des images, celles-ci doivent être identique en taille et en poids. D'un point de vue graphique, il est recommandé de conserver une palette de couleurs et de styles assortis, mais vous êtes, bien sûr, libres de faire comme il vous plaît. Comment Les images sont au format png-jpeg ou gif. Ces formats sont compatibles avec tous les logiciels de création d'images courants. Vous pourrez donc modifier les images des bannières ou y ajouter du texte.

13 Fonction des images Si vous souhaitez connaître la fonction et position d'une image, vous exécuterez un exemple de publication. Etape1: Les seuls programmes nécessaire est l'explorateur Windows, LogiVert 6 et un éditeur d'images. Sélectionnez le répertoire d'images : Pour Windows XP : C:\Documents\utilisateurs\Documents\logivert\lv6\admins\votre_projet\layout6\images Pour Windows Vista et 7 : C:\utilisateurs\public\documents\logivert\lv6\admins\votre_boutique\layout6\images Etape2: Adapter une image Vous choisirez par exemple de modifier la bannière. Vous modifierez celle-ci avec votre éditeur d'images. Vous pouvez également décider de créer votre propre bannière. Notez que la nouvelle image doit impérativement avoir les mêmes dimensions que l'image originale. Enregistrez la nouvelle image en remplaçant l'image existante. Une alerte vous préviendra que l'image existe déjà, choisissez de l'écraser.

14 Etape 3: Adapter les boutons Répétez l'étape 2 en choisissant une image représentant le bouton. Internet propose un vaste choix de boutons que vous pourriez utiliser dans votre projet. Choisissez plutôt une image png qui permet un fond transparent. Etape 4: Sauvegardez vos modifications en lieu sûr Comme vous avez modifié des images dans un Template standard, vous créerez un répertoire séparé. Vous copierez les fichiers modifiés dans ce répertoire. Pour Windows XP: C:\Documents and Settings\All Users\Documents\logivert\lv6\admins\votre_projet\Layout_backup Pour Windows Vista et 7: C:\Users\Public\Documents\logivert\lv6\admins\votre_projet\Layout_backup

15 Niveau 4 CSS Quoi Plus de 90% de l'agencement du template est déterminé par le fichier CSS. L'emplacement et l'affichage des images sont déterminés par ce fichier. Le fichier se trouve dans le répertoire images et se nomme _cataloge.css Extrat de la description de CSS selon Wikipedia (source L'un des objectifs majeurs des CSS est de permettre la mise en forme hors des documents. Il est par exemple possible de ne décrire que la structure d'un document en HTML, et de décrire toute la présentation dans une feuille de style CSS séparée. Les styles sont appliqués au dernier moment, dans le navigateur web des visiteurs qui consultent le document. Cette séparation fournit un certain nombre de bénéfices, permettant d'améliorer l'accessibilité, de changer plus facilement de présentation, et de réduire la complexité de l'architecture d'un document. Ainsi, les avantages des feuilles de style sont multiples : La structure du document et la présentation peuvent être gérées dans des fichiers séparés. La conception d'un document se fait dans un premier temps sans se soucier de la présentation, ce qui permet d'être plus efficace. Dans le cas d'un site web, la présentation est uniformisée : les documents (pages HTML) font référence aux mêmes feuilles de styles. Cette caractéristique permet de plus une remise en forme rapide de l'aspect visuel. Un même document peut donner le choix entre plusieurs feuilles de style, par exemple une pour l'impression et une pour la lecture à l'écran. Certains navigateurs web permettent au visiteur de choisir un style parmi plusieurs.

16 Le code HTML est considérablement réduit en taille et en complexité, puisqu'il ne contient plus de balises ni d'attributs de présentation. Comment La modification de ce fichier requiert quelque connaissance en la matière. Vous pouvez acquérir des connaissances par vous-même ou par exemple sur le site Un fichier CSS est un fichier texte dans lequel des lignes de code sont déterminées. Vous pouvez ouvrir un fichier CSS avec Bloc-notes ou Notepad++ Personnalisation CSS Pour ne pas avoir à modifier les codes CSS à chaque mise à jour, LogiVert s'est pourvu d'un fichier 0_customized.css. Vous pouvez enregistrer vos modifications. Vous pouvez utiliser les fonctionnalités du navigateur pour "inspecter des éléments" et copier les codes CSS.

17 Les navigateurs Firefox et Chrome permettent, avec un clic droit sur l'élément, d'afficher un menu permettant, entre autres, d'inspecter l'élément sélectionné. Lorsque vous aurez copié les éléments du code CSS, vous pouvez les copier dans le fichier 0_customized.css Cette façon de travailler vous permettra de ne pas devoir modifier le fichier CSS original.

18 Sauvegarder les modifications Etant donné que vous avez effectué des modifications dans les fichiers de base du template, vous créerez un nouveau répertoire dans le répertoire de votre projet. Pour Windows XP: C:\Documents and Settings\All Users\Documents\logivert\lv6\admins\votre_projet\Layout_backup Pour Windows Vista et 7: C:\Users\Public\Documents\logivert\lv6\admins\votre_projet\Layout_backup Mises à jour de ce manuel Ce manuel sera mis à jour et étoffé avec des astuces et des exemples pratiques. Vérifiez régulièrement notre page de téléchargement.