1 Module 1 : feuille de style, position des blocs, nombre d éléments

Transcription

1 Plugin d'habillage d'eva-web 4 Le plugin d'habillage d'eva-web permet de : adapter la position, la taille des divers éléments la composant choisir les couleurs de fonds des divers secteurs choisir la taille, la couleur ou le style des bordures choisir les images de fond des divers secteurs choisir, d un simple clic, des habillages parmi plusieurs dizaines disponibles Ce plugin est divisé en 5 modules permettant de gérer intégralement la charte graphique de votre site. Les 5 modules du plugin en quelques mots Module 1 : choix d une feuille de style de base pour votre site web. Position des blocs de chaque page. Module 2 : ajustement des paramètres graphiques (couleurs, bordures, liens, tailles). Module 3 : choisir des couleurs de fond ou des puces pour les listes. Module 4 : pour les connaisseurs, intégrer ses propres règles CSS. Module 5 : sauvegarde, restauration de vos habillages, intégration d habillages externes. 1 Module 1 : feuille de style, position des blocs, nombre d éléments Ce module vous permettra de décider dans un premier temps de l architecture générale de votre site en effectuant un choix parmi plusieurs feuilles de style vous permettant de choisir : un affichage à 2 ou 3 colonnes un menu de navigation placé à gauche ou à droite du contenu les emplacements des différents blocs qui composent les pages (à droite, au centre, à gauche des pages) Ce premier module est composé de 3 parties : le choix d une feuille de style de base ; le choix de la position des blocs affichés dans certaines pages du site ; le choix du nombre d éléments à afficher dans chaque bloc. Spip Plugin Habillage Eva-Web 4 [Spip2.x].doc Page : 1/5 Extrait de la documentation Eva-Web

2 1.1 Description des feuilles de style proposées dans Eva-Web Style par défaut : textes et bordures gris sur fond blanc eva_style_100_pourcents.css : les pages utilisent 100 % de la largeur de la fenêtre du navigateur colonne de gauche utilisant 25 % de la largeur de la fenêtre du navigateur, le contenu en utilise 71 % thème de couleur autour du beige - marron - orange eva_style_3_colonnes.css : les pages utilisent 100 % de la largeur de la fenêtre du navigateur les colonnes de gauche et droite utilisent 24 % chacune de la largeur de la fenêtre du navigateur, le contenu utilise 46 % thème de couleur autour du beige - marron - orange eva_style_basic_menu_a_droite.css page constituée d une colonne de droite contenant le menu d une largeur d environ 200 pixelx et du contenu situé à sa gauche d une largeur d environ 500 pixels pour une largeur totale de 750 pixels thème de couleur rouge sans bordure affichée eva_style_basic_menu_a_gauche.css thème de couleur bleue sans bordure affichée eva_style_images_de_fond.css des bordures non arrondies utilisation d images de fond en dégradé eva_style_menu_a_droite.css page constituée d une colonne de droite contenant le menu d une largeur d environ 200 pixelx et du contenu situé à sa gauche d une largeur d environ 500 pixels pour une largeur totale de 750 pixels thème de couleur vert-jaune-orange avec bordures eva_style_officielle.css feuille de style du site officiel d EVA 3 des bordures non arrondies thème de couleur autour du bleu et du beige Spip Plugin Habillage Eva-Web 4 [Spip2.x].doc Page : 2/5 Extrait de la documentation Eva-Web

3 1.2 Le choix des emplacements des blocs Vous pourrez choisir l emplacement des blocs de contenu pour certaines pages de votre site en cliquant sur le petit triangle noir placé en fin de module (déplier/replier) pour les pages suivantes : page de sommaire pages des rubriques pages des articles pages des brèves pages des auteurs Le positionnement des blocs à droite devient possible uniquement lorsque vous choisissez la feuille de style en trois colonnes nommée eva_style_3_colonnes.css ou une feuille de style avec menu à droite. 1.3 Le choix du nombre d éléments dans chaque bloc Cette partie vous permet de choisir le nombre exact d éléments à afficher dans les pages de sommaire, des rubriques, des articles, des brèves et des auteurs. Par exemple, vous pouvez afficher les 7 derniers articles et les 3 dernières brèves publiées dans la page de sommaire ; puis choisir d afficher les 4 dernières brèves et les 2 derniers sites référencés dans les pages des rubriques, etc... Il est possible d afficher entre 0 et 20 éléments par bloc. 2 Module 2 : ajustement des paramètres graphiques Ce module se compose de 5 formulaires vous permettant, dans l ordre, d effectuer les paramétrages suivants pour votre site : choix des couleurs de fond des secteurs affichés, regroupés dans 19 paramètres configurables choix des couleurs des polices de caractères utilisés dans les secteurs, regroupés dans 18 thèmes ; possibilités de choisir la famille de police utilisée pour le site choix des couleurs des liens choix des caractéristiques des bordures : couleur, épaisseur, style ; regroupées dans 9 thèmes taille des secteurs du site : page, menu de gauche, menu de droite, contenu, hauteur du secteur d entête un peu gadget, la position des boutons d administration dans l interface publique : il s agit des boutons "Espace privé", "Recalculer cette page" et "Modifier..." qui apparaissent dans l espace public lorsque vous êtes identifiés et que vous avez accepté le cookie de correspondance de SPIP. Pour le choix des couleurs, une palette située en bas de module pourra vous aider à trouver certains codes hexadécimaux de couleurs. 2.1 Pour les couleurs Vous pouvez utiliser deux types de code de couleur : Rouge Vert Bleu Hexadécimal : exemple pour la couleur rouge : #ff0000 (ou #f00 ) Nom de la couleur : exemple pour la couleur rouge : red Il est aussi possible de laisser certains blocs transparents, ce qui permet de voir la couleur du bloc qui est situé à l arrière, en choisissant la couleur transparent. 2.2 Pour les dimensions Utilisez une des deux syntaxes suivantes : taille en pixels : exemple pour une taille de 150 pixels : 150px (pas d espace, pas de virgule ou autre symbole). taille relative en pourcentage : exemple pour une taille de 12 pour-cents de la taille de la fenêtre du navigateur : 12% (pas d espace, pas de virgule ou autre symbole). 2.3 Pour le nom de la police de caractères Vous pouvez soit écrire un nom de police, soit plusieurs noms de police séparés par une virgule. Exemples : un nom de police : georgia plusieurs noms : "Trebuchet MS", georgia, Arial : si la police "Trebuchet MS" n est pas installée sur l ordinateur de la personne consultant le site, c est georgia qui sera utilisée. De même, si la police georgia n est pas installée sur l ordinateur de la personne consultant le site, c est Arial qui sera utilisée. Spip Plugin Habillage Eva-Web 4 [Spip2.x].doc Page : 3/5 Extrait de la documentation Eva-Web

4 3 Module 3 : choix des images de fond Ce module vous permettra d ajouter des images de fond dans les divers secteurs de votre site. 3.1 Principe de fonctionnement Vous pourrez ainsi créer des effets dégradés, des effets de texture ou tout simplement ajouter des images à divers endroits Commencez par charger les images concernées dans le répertoire mon_image du plugin grâce à votre logiciel FTP. 2. Rechargez ensuite la page du plugin, les images peuvent alors être insérées dans les secteurs du site. 3. Choisissez un secteur dans lequel vous souaitez insérer votre image 4. Sélectionnez la position horizontale de l image : à gauche, à droite, au centre du secteur concerné ou en indiquant l espace (en pixel) séparant l image de la bordure gauche du secteur concerné. 5. Sélectionnez la position verticale de l image : en haut, en bas, au centre du secteur concerné ou en indiquant l espace (en pixel) séparant l image de la bordure haute du secteur concerné. 6. Pour le secteur de fond d écran nommé Ecran, il est possible de rendre fixe l image de fond (elle reste située au même endroit sur l écran, même lorsque la page défile) en choisissant un attachement Fixe. Ce choix ne fonctionne pas pour les autres secteurs du site. 7. Enfin validez! Le module se poursuit ensuite par un récapitulatif des secteurs pour lesquels une image de fond a été insérée et vous propose, si vous le désirez, de supprimer cette image de fond. 3.2 Créer un dégradé ou un effet de texture Ces effets peuvent s obtenir en répétant des images verticalement ou (et) horizontalement. Pour les dégradés verticaux, le principe est de créer une image d une largeur d un pixel remplie par un dégradé vertical. La faible largeur de l image la rendra très légère au téléchargement. Il suffit ensuite d insérer cette image dans le secteur concerné et de la répéter horizontalement. Pour les dégradés horizontaux, le principe est de créer une image d une hauteur d un pixel remplie par un dégradé horizontal. La faible hauteur de l image la rendra très légère au téléchargement. Il suffit ensuite d insérer cette image dans le secteur concerné et de la répéter verticalement. Pour un effet de texture : utilisez une image de faible dimension puis répétez-la horizontalement et verticalement! 4 Module 4 : intégrer ses propres règles CSS Ce module s adresse aux webmestres ayant des connaissances concernant les feuilles de style. Il est ainsi possible d insérer des règles CSS dans les pages du site en les saisissants directement dans le formulaire proposé. Attention à être très respectueux d une bonne syntaxe CSS. Le module vous propose ensuite un récapitulatif de vos règles CSS personnelles déjà insérées dans le site avec la possibilité de les supprimer. Définir ses propres règles CSS avec le plugin d habillage d EVA-web 4.1 Quelques exemples de règles CSS utiles pour le squelette d EVA Ne pas afficher le pied de page : ul#logo-pied, ul#pied {display:none;} Ne pas afficher les bordures des tableaux générés par SPIP (raccourcis typographiques) : table.spip tr.row_odd, table.spip tr.row_even, table.spip tr.row_odd td, table.spip tr.row_even td {border-width:0;} Souligner certains textes : il n est pas nécessaire d utiliser ce module pour cela, on peut aussi utiliser le truc suivant : dans le module 2, pour le texte concerné, indiquez la couleur qui vous intéresse puis ajoutez ; text-decoration : underline. Par exemple, pour avoir du texte rouge et souligné, indiquez #ff0000 ; text-decoration : underline Spip Plugin Habillage Eva-Web 4 [Spip2.x].doc Page : 4/5 Extrait de la documentation Eva-Web

5 5 Module 5 : sauvegarde, restauration, intégration d habillages externes Ce module se décompose en deux parties : la sauvegarde (et la restauration) de vos paramètres personnels d habillage l intégration de paramètres d habillages proposés par l équipe d EVA 5.1 Sauvegarde, restauration, suppression de thèmes d habillage Lors d une première utilisation, seule l option de sauvegarde vous est proposée : choisissez un nom de sauvegarde qui peut contenir n importe quel caractère validez! Lors d une sauvegarde, tous les paramètres des modules 1, 2, 3 et 4 sont sauvegardés (feuille de style de base, position des blocs, paramètres personnels, images de fond et règles CSS personnelles). Vous avez alors accès à deux options supplémentaires : restaurer une sauvegarde : la restauration concerne tous les paramètres précédemment définis dans les modules 1, 2, 3 et 4 ; effacer une sauvegarde qui ne vous serait plus utile. Intégration de thèmes externes Afin de proposer un grand nombre d habillages différents, il est possible d intégrer des thèmes d habillage créés par l équipe d EVA ou proposés par des webmestres à l équipe de développement d EVA. Pour cela, choisissez un des thèmes proposés puis videz le cache ou effectuez 2 recalcules de suite dans l interface publique pour pouvoir les tester. Pour proposer un thème d habillage à intégrer à ce module, contactez-moi directement en m envoyant un message (un clic sur mon nom en haut de cette page) : je vous indiquerai la procédure à suivre pour que je l intègre dans le plugin d habillage. Spip Plugin Habillage Eva-Web 4 [Spip2.x].doc Page : 5/5 Extrait de la documentation Eva-Web