Le Pic
Projet Internet et Citoyenneté

Accueil > LES OUTILS > SPIP, la doc >

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 :

  1. Vous pouvez appliquer "bêtement" la recette telle qu’elle est décrite
  2. 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.

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°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

Se familiariser avec l’utilisation des boucles dans SPIP : modifier le nombre d’articles affichés, leur ordre d’affichage, etc.

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

Personnaliser certaines rubriques ou certains articles en leur appliquant des squelettes spécifiques.

Fiche n° 5bis - 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 webmestre (...)

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° 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

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 (...)