Accueil > LES OUTILS > SPIP, la doc > Mise en pages
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°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°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
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 (...)
