![logo de la rubrique](IMG/logo/rubon103.png?1609752556)
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 !
![](local/cache-vignettes/L42xH42/rubon103-3fc7b.png?1722020886)
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
![](local/cache-vignettes/L42xH42/rubon103-3fc7b.png?1722020886)
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
![](local/cache-vignettes/L42xH42/rubon103-3fc7b.png?1722020886)
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
![](local/cache-vignettes/L42xH42/rubon103-3fc7b.png?1722020886)
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
![](local/cache-vignettes/L42xH42/rubon103-3fc7b.png?1722020886)
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
![](local/cache-vignettes/L42xH42/rubon103-3fc7b.png?1722020886)
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
![](local/cache-vignettes/L42xH42/rubon103-3fc7b.png?1722020886)
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"
![](local/cache-vignettes/L42xH42/rubon103-3fc7b.png?1722020886)
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
![](local/cache-vignettes/L42xH42/rubon103-3fc7b.png?1722020886)
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
![](local/cache-vignettes/L42xH42/rubon103-3fc7b.png?1722020886)
Comment créer une nouvelle balise qui permettra d’afficher un compteur de visites sur le sommaire
Fiche n°12 - La gestion des images
![](local/cache-vignettes/L42xH42/rubon103-3fc7b.png?1722020886)
Les différentes possibilités d’illustrer vos articles avec des images.
Fiche N°13 - Comment insérer des vidéos dans vos articles
![](local/cache-vignettes/L42xH42/rubon103-3fc7b.png?1722020886)
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
![](local/cache-vignettes/L42xH42/rubon103-3fc7b.png?1722020886)
Elaborer un menu dépliable pour les petits écrans afin de gagner de la place.
Fiche n°15 : Retour rapide en haut de page
![](local/cache-vignettes/L42xH42/rubon103-3fc7b.png?1722020886)
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 !
![](local/cache-vignettes/L42xH42/rubon103-3fc7b.png?1722020886)
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
![](local/cache-vignettes/L42xH42/rubon103-3fc7b.png?1722020886)
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 (…)