Squelette ViaSPIP 3.2 (plugin pour SPIP 3.2) ============================================ (anciennement squelette JYG Web jusqu'à la version 2.1.9a) Auteur : Jean-Yves GIRAUD - 2008-2018 - Site JYG Web -> http://jygiraud.free.fr/ Licence : GNU/GPL Pour utiliser ce squelette sur votre site : - Dézippez le fichier téléchargé dans le répertoire "plugins" de votre site (au besoin créez le répertoire "plugins" à la racine du site, car il n'existe pas par défaut). - Allez dans l'espace privé de votre site pour activer le plugin ViaSPIP 3.2 (Configuration, Gestion des plugins). - Vous pouvez également activer en supplément un plugin de thème (au choix). - Le formulaire de la page contact utilise l'adresse e-mail du webmestre du site pour l'envoi du mail. Elle doit donc être renseignée (Configuration, Adresse e-mail du webmestre). - Nouveauté pour la version 3.2 : vous pouvez désormais agir sur certains paramètres du squelette. Ils sont disponibles dans l'administration via le menu "Squelettes", puis "Squelette ViaSPIP 3.2" : - Affichage des boutons de partage sur les réseaux sociaux (Facebook, Twitter, Google+) -> non par défaut - Largeur maxi de la page en pixels -> 1325 par défaut (doit être supérieure à 1003) - Position de la colonne secondaire -> à droite par défaut - Largeur de la colonne secondaire en pourcentage -> 29 par défaut (doit être comprise entre 20 et 40) - Liens externes ouvrant dans un nouvel onglet -> non par défaut C'est tout ! ---------------------------------------------------------------------------------------------------------------- Pour personnaliser, afin d'assurer un maximum de compatibilité en cas de mise à jour du plugin principal, il est fortement recommandé de se créer un thème personnalisé. Le squelette ViaSPIP 3.2 utilise le principe de la surcharge, il est lui-même basé sur le squelette de la dist officielle (répertoire "squelettes-dist"). Il surcharge les fichiers utiles (article.html, rubrique.html, etc...) et uniquement ceux-ci. Les autres, par défaut, sont pris dans le squelette de la dist officielle. Le plugin principal de ViaSPIP 3.2 doit toujours activé, dans tous les cas. En activant en supplément un plugin de thème, on continue avec ce principe de la surcharge. Pour ces plugins de thème, en principe, on se contente de jouer sur les styles avec le fichier "css/perso.css" pour personnaliser l'apparence du site (couleurs, polices, disposition des blocs, etc...). Mais on pourrait très bien imaginer d'y déposer des fichiers de squelette personnalisés qui viendraient surcharger ceux du plugin ViaSPIP 3.2 de base. Ainsi, il est fortement recommandé de ne rien modifier au squelette de base et de reporter ses personnalisations dans le répertoire d'un plugin de thème. Si on veut par exemple modifier le fichier "sommaire.html", il est préférable de recopier celui du plugin principal dans le répertoire de son plugin de thème personnalisé, et de personnaliser ce dernier. Ainsi, si le plugin de base change de version, on pourra conserver son plugin de thème personnalisé sans le modifier, sauf exception pour petites adaptations nécessaires. Pour créer un thème personnalisé : -------------------------------- - Recopier un répertoire de thème (le standard ou un autre) et le renommer, par ex. "viaspip_3.2.xx_theme_mon_site" (attention : pas d'espaces et de préférence, pas de caractères accentués ou spéciaux). Il faut noter que le thème standard a les mêmes styles que le plugin principal, il fait apparaître plus nettement les différents blocs et il peut servir de base pour la conception d'un nouveau thème, mais on peut en préférer un autre parmi ceux proposés avec le squelette ViaSPIP 3.2. - Dans ce nouveau répertoire, ouvrir le fichier "paquet.xml" avec un éditeur de texte brut (par exemple "notepad++" qui est un éditeur gratuit avec coloration syntaxique) et modifier les valeurs suivantes : - obligatoirement l'attribut "prefix" (ligne 2) -> par exemple "viaspip3_theme_mon_site" (attention : pas d'espaces, pas de caractères accentués ou spéciaux) - obligatoirement le contenu de la balise (ligne 11) -> par exemple "Thème "Mon site" pour ViaSPIP 3.2" (attention aux caractères accentués pour cette balise, par exemple : è pour è, et é pour é) - éventuellement le contenu de la balise (ligne 12) - Dans le nouveau répertoire "css/img" du plugin de thème personnalisé, remplacer si on le souhaite l'image du bandeau (fichier "banner.jpg") en respectant la taille originale (1200px X 120px). Le squelette ViaSPIP 3.2 de base est fluide, c'est à dire qu'il adapte sa largeur d'affichage à la résolution de l'écran de l'internaute. Sa largeur peut donc varier, avec une largeur minimum de 1003px (pour un écran ayant une résolution de 1024px, en tenant compte de la largeur de l'ascenseur sur le bord droit du navigateur). De ce fait, il est souhaitable de créer une image de bandeau ayant du contenu sur la gauche et qui "s'évanouit" sur la droite, pour réserver de la place libre à droite pour l'affichage du logo. On peut faire cela avec un logiciel simple de traitement d'image, comme par exemple "paint.net". Celui-ci pourra aussi être utile pour travailler sur les codes couleurs (à voir plus loin avec la personnalisation des couleurs du thème). - Concernant le logo par défaut, inutile de remplacer celui du plugin. Le squelette ViaSPIP 3.2 utilise en priorité le logo du site qu'il suffit de télécharger (option configuration, identité du site). Si aucun logo n'a été téléchargé pour le site, c'est celui du plugin de thème qui est utilisé par défaut. - Si on souhaite personnaliser les styles pour le nouveau thème, tout va se jouer dans le fichier "perso.css" présent dans le répertoire "css" du plugin. L'ouvrir avec un éditeur de texte pour effectuer des modifications. On peut jouer sur les éléments suivants : - les polices : dans le haut du fichier, on a des lignes en commentaires pour les "web safe fonts" qui sont les polices reconnues par tous les navigateurs sur tous les systèmes, donc recommandées. Si on souhaite modifier la police principale du thème, il suffit donc de "décommenter" l'une des lignes (enlever /* en début et */ en fin de ligne). On peut aussi utiliser des polices open source de "Google fonts", qui peuvent alourdir un peu le chargement des pages, mais qui ont un intérêt esthétique indéniable. Mon conseil est d'utiliser une police standard pour l'ensemble, et de réserver l'usage d'une police plus "exotique" pour les titres, menus et le pied de page). Voir des exemples dans les thèmes proposés qui en utilisent. On peut aussi se rendre sur le site "Google fonts" pour en choisir d'autres. Attention, elles ne sont pas toujours confortables pour la lecture de textes longs, il faut faire des essais... - les couleurs : le reste des styles du fichier "perso.css" concerne les couleurs exprimées sous forme de codes. C'est là qu'on retrouve le logiciel "paint.net" pour nous aider à déterminer les codes des couleurs que l'on souhaite. C'est dans cette phase que l'on peut passer un peu plus de temps à créer une belle harmonie de couleurs pour le site... selon ses goûts...