Manuel Personnalisation des templates pour LogiVert 6

Transcription

Manuel
Personnalisation des templates pour LogiVert 6
Copyrights
(c)2013 + LogiVert BV
Site web : www.logivert.com
Manuel de personnalisation des templates pour LogiVert 6
Copyright 2013 – LogiVert BV
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................................................................................................... 10
BLOCS-LIBRES – PAGES SUPPLEMENTAIRES....................................................................................................... 10
BLOCS LIBRES- GROUPES D'ARTICLES ............................................................................................................... 11
WIDGETS ........................................................................................................................................................... 11
NIVEAU 3 – IMAGES ........................................................................................................................................ 12
QUOI.................................................................................................................................................................. 12
COMMENT ......................................................................................................................................................... 12
FONCTION DES IMAGES ...................................................................................................................................... 13
Etape1: ......................................................................................................................................................... 13
Etape2: Adapter une image ......................................................................................................................... 13
Etape 3: Adapter les boutons ....................................................................................................................... 14
Etape 4: Sauvegardez vos modifications en lieu sûr .................................................................................... 14
NIVEAU 4 – CSS ................................................................................................................................................. 15
QUOI.................................................................................................................................................................. 15
COMMENT ......................................................................................................................................................... 16
Personnalisation CSS .................................................................................................................................... 16
SAUVEGARDER LES MODIFICATIONS ..................................................................................................... 18
MISES A JOUR DE CE MANUEL ................................................................................................................... 18
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 (www.php.net) et Smarty (www.smarty.net). 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.
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.
Général
Structure de l'URL
Vous déterminerez si vous souhaitez des URL standard ou dynamique
URL dynamique
http://www.logivert.nl/index.php?action=article&aid=x&group_id=x&lang=NL
URL statique
http://www.logivert.nl/nl/artikelgroep/artikel/pagina.html
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
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
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.
Media sociaux
AddThis
Affiche le bouton de partage de votre boutique. Le PubID est généré après enregistrement
auprès de AddThis (www.addthis.com). Vous copierez le PubID dans le code.
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.
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.
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.
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.
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.
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
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 http://fr.wikipedia.org/wiki)
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.
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
http://www.w3schools.com/.
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.
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.
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.

Manuel Personnalisation des templates pour LogiVert 6

Transcription

Documents pareils

Entraînement à l`ASSR 2016 - Cité Scolaire Bertran-de-Born

32 479 66 40 60 [email protected]

Joomla! - Editions ENI

gabarits Web.indd

Oeuvres complètes

Formation Dreamweaver

Le "sur-mesure" de masse - LOMAG

dreamweaver perfectionnement

CV - Undergraphic, création de site Internet à Amboise (37)

Sujet EP2 BEP CSS

Green Grass Template - Ministério da Educação