Des mises en pages personnalisées
Cette rubrique se présente sous la forme de fiches-cuisines expliquant comment modifier la mise en page d’un site sous SPIP, en partant de la présentation livrée avec SPIP. On appelle ça "modifier le squelette" de SPIP.
L’idée est de travailler sur les feuilles de style (qui permettent de jouer sur les couleurs, les polices, d’agir sur la disposition des zones de votre page), puis, seulement lorsque c’est vraiment indispensable, de modifier légèrement les squelettes livrés avec SPIP.
Ces fiches-cuisines peuvent être utilisées à deux niveaux :
- Vous pouvez appliquer "bêtement" la recette telle qu’elle est décrite
- Mais vous pouvez essayer de aussi comprendre ce qui se passe en lisant l’explication fournie : cela vous permettra d’aller plus loin dans l’écriture de vos squelettes, car si vous avez compris vous saurez un peu mieux ce que vous faites.
NOTE : Sauf mention contraire, tous ces articles ont été revus en 2024 et peuvent s’appliquer aux sites sous SPIP en version supérieure à 4.0.
Fiche N°0 - Un peu de méthode !
Quelle méthode employer pour obtenir la mise en pages souhaitée ? Modifier les squelettes par défaut de SPIP, ou partir de squelettes tous faits ?
Fiche N°1 - Créer l’environnement de travail
Comment démarrer ? Mettre en place un environnement de travail, afin de pouvoir simplement modifier les squelettes de son site
Fiche N°2 - Modifier la couleur de fond avec les css
Utiliser les CSS pour modifier la couleur de fond des pages ; ajouter une image de fond ; les effets du padding.
Fiche N°4 - Agir sur le nombre ou l’ordre d’affichage des articles
Se familiariser avec l’utilisation des boucles dans SPIP : modifier le nombre d’articles affichés, leur ordre d’affichage, etc.
Fiche n° 5 - Permettre de choisir un squelette particulier pour un article
Avec le plugin compositions, les rédacteurs peuvent lors de l’écriture d’un article ou lors de la création d’une rubrique, choisir une mise en pages parmi plusieurs possibilités. Le rôle du (…)
Fiche N°6 - Limiter la taille des images affichées
Comment faire en sorte que les images illustrant vos articles ne dépassent pas toutes une certaine taille ?
Fiche n° 7 - Habiller son site avec les modèles
Comment permettre aux rédacteurs d’insérer des petites icônes à l’intérieur du texte afin d’habiller celui-ci ?
Fiche N° 8 - Utiliser des "Webfonts"
Des polices de caractères originales pour son site Web et compatibles avec tous les navigateurs : installation et utilisations.
Fiche N°9 - Un accordéon en sommaire
Des blocs dépliables ’en accordéon’ dans un sommaire pour lister un ensemble d’informations et gagner de la place.
Fiche N°10 - Mettre un compteur de visites sur le sommaire
Comment créer une nouvelle balise qui permettra d’afficher un compteur de visites sur le sommaire
Fiche n°12 - La gestion des images
Les différentes possibilités d’illustrer vos articles avec des images.
Fiche N°13 - Comment insérer des vidéos dans vos articles
Des vidéos dans vos articles ? L’important est de considérer la durée d’une vidéo : environ 1mn de diffusion correspond à un fichier de 6Mo...
Fiche N°14 - Les menus sur les petits écrans
Elaborer un menu dépliable pour les petits écrans afin de gagner de la place.
Fiche n°15 : Retour rapide en haut de page
Pour les contenus qui dépassent la hauteur de l’écran, un retour rapide en haut de page sans avoir à scroller.
Fiche N°16 - Les media queries pour des sites web responsives !
Les Media Queries, (ou requêtes de media) présentes dans vos fichiers CSS adaptent la mise en page au périphérique de consultation.
Fiche N°17 : Affichage adaptatif d’une suite centrée de blocs d’informations
Comment afficher une suite de blocs d’informations de taille identique centrés quel que soit leur nombre. Vous voulez afficher côte à côte des blocs de taille identique de façon harmonieuse et (…)