Mise en pages

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 zônes 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.

Vous pouvez télécharger les fichiers à mettre dans votre répertoire squelettes afin d’obtenir les effets décrits dans ces fiches.
Cette documentation s’appuie sur SPIP VERSION 3

Fiche N°0 - Un peu de méthode !

Squelettes par défaut de SPIP, squelettes tous faits... quelle méthodologie employer pour que votre site ait exactement la mise en pages que vous souhaitez ?

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

Comment modifier la couleur de fond, ajouter une image de fond, et faire apparaître les pages sur fond noir.

Fiche N°3 - Mettre un bandeau en haut des pages

Comment mettre un bandeau en haut de chaque page ?

Fiche N°4 - Agir sur le nombre ou l’ordre d’affichage des articles

Modifier le nombre d’articles affichés, l’ordre d’affichage, etc. Bref jouer avec les boucles

Fiche N° 5 - Ecrire des squelettes spécifiques à certaines rubriques

Ecrire des squelettes spécifiques à certaines rubriques ou certains articles.

Fiche n° 5bis - Permettre aux rédacteurs 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 webmestre est de préparer les mises en page (...)

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"

Utiliser des polices de caractères originales.

Fiche N°9 - Un accordéon en sommaire

Afficher les articles en accordéon sur la page du sommaire.

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° 11 - Un diaporama sous SPIP

Insérer un diaporama dans une page

Fiche n°12 - La gestion des images

Comment illustrer vos articles avec des images : petite histoire des balises emb, img, doc etc...

Fiche N°13 - Comment insérer des vidéos dans vos articles

Deux manières, chacune ayant ses avantages et ses inconvénients, pour insérer des vidéos dans vos articles

Fiche N°14 - Les menus sur les petits écrans

Objectif - Replier le menu de la page pour gagner de la place à l’affichage sur de petits écrans et accéder directement aux infos recherchées ! Avec les petits écrans, il faut gérer au mieux l’espace et garder des tailles de polices lisibles. De façon habituelle le menu occupe seul toute la largeur de (...)

Fiche n°15 : Retour rapide en haut de page

Objectif – Revenir rapidement en haut de page sans avoir à scroller… Lorsque les informations en cours d’affichage dépassent largement la hauteur de l’écran, il est plutôt fastidieux de scroller manuellement pour revenir tout en haut, là où se trouvent les dispositifs de navigation du site. Comment (...)

Fiche N°16 - Les media queries pour des sites web responsives !

Vous voulez modifier la mise en page d’un site en fonction du périphérique de consultation ? Les Media Queries, (ou requêtes de media) introduites dans vos fichiers CSS sont là pour vous permettre de le faire.

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 auto-adaptable ? Utiliser un conteneur avec la déclaration CSS3 "display : flex ;" (les contenus sont alors (...)