PRTICE.INFO

Accueil > Sites web sous SPIP > Guides pour l’administrateur > Personnalisation de l’apparence avec la feuille de styles

Personnalisation de l’apparence avec la feuille de styles

vendredi 12 mars 2010

L’objectif : personnaliser complètement l’apparence du site en modifiant uniquement la feuille de style.

Qu’est-ce que la feuille de styles ?

C’est un simple fichier texte, dont le nom comporte une extension .CSS (Cascading Style Sheets : feuilles de styles en cascade). Ce document permet en fait de définir les paramètre de tous les éléments qui composent la page web : les couleurs, taille, police, emplacement des images... C’est en fait assez magique, puisque si l’on supprime ce fichier, votre site retrouve immédiatement l’apparence par défaut de ScolaSPIP.

Dans le cas de ScolaSPIP, il existe plusieurs feuilles de style qui sont appelées en cascade, au fur et à mesure du chargement de la page. La dernière feuille de style a priorité sur les autres et c’est la seule que vous devez modifier.
Ce fichier s’appelle perso-dist.css et se trouve dans le dossier plugins/auto/scolaspip/ (le sous-dossier auto étant facultatif.
L’avantage de personnaliser son site uniquement avec une feuille de style réside dans le fait que vous ne serez pas obligé de réitérer ce travail si vous mettez à jour SPIP ou ScolaSPIP.

Pour personnaliser l’apparence de votre site, vous pouvez faire appel à vos connaissances en CSS ou recopier tout bêtement les lignes ci-après, avec un simple copier-coller.

- Première étape OBLIGATOIRE : créer la feuille de style

Pour cela, renommez le fichier plugins/auto/scolaspip/perso-dist.css en perso.css

Vous découvrirez dans la suite de cet article différentes lignes à ajouter dans votre feuille de style, qui ont des effets sur l’apparence de votre site.

- Définir la largeur du site permet de choisir la largeur totale en pixels du site. Elle est par défaut de 960 pixels. Il est également possible de définir une taille proportionnelle à la taille de l’écran, en utilisant comme unité les pourcentages (par exemple "width : 90%").

/* Définit la largeur du site en pixels */
#page {width: 990px;}
/*---------------------------------------------- */

- Espacer le site en haut et bas permet de définir une marge de 10 pixels en haut et en bas du site de manière à ce qu’il ne soit plus "collé" en haut et en bas de la page.

/* Définition d une marge en haut et en bas*/
#page {margin-top: 10px; margin-bottom: 10px;}
/*---------------------------------------------- */

- Descendre l’image du bandeau supérieur pour ne pas empiéter sur le menu horizontal.

Si vous avez placé une image un peu foncée dans le bandeau supérieur, elle risque de masquer en partie le menu horizontal situé en haut du site. Avec la ligne suivante, vous décalez l’image de 25 pixels vers le bas.

/*Descendre l'image du bandeau supérieur */
#entete {padding-top:25px;}
/*---------------------------------------------- */

- Définir un cadre fin autour du site.

Les lignes suivantes affichent un cadre tout autour du site, mais également autour du cadre de navigation de gauche. Vous pouvez modifier la couleur et la largeur (en pixels).

/* Définition du cadre noir de un pixel de large tout autour de la page */
#page {border-color: black; border-style: solid; border-width: 1px;}
/*---------------------------------------------- */

/* Définition du cadre noir de un pixel de large autour du cadre contenant le menu de navigation */
#navigation {border-color: black ; border-style: solid; border-width: 0px 1px 1px 0px;}
/*---------------------------------------------- */

/* Définition du cadre noir de un pixel de large sous le bandeau supérieur */
#entete {border-color : black ; border-style : solid ; border-width : 0px 0px 1px 0px ;}
/*---------------------------------------------- */

- Définir des angles arrondis dans les quatre coins de la page.

Ces lignes définissent un cadre noir, avec les coins arrondis, mais cela ne fonctionne que sous Mozilla Firefox, Google Chrome et Safari.

/*Arrondir les 4 angles du site */
#page {-moz-border-radius:10px ; -webkit-border-radius:10px; }
/* ---------------------------------------------- */

/* Arrondir les 2 angles supérieurs du bandeau supérieur */
/*Cela semble inutile, mais évite des problèmes d affichage */
#entete {-moz-border-radius:10px 10px 0px 0px;  -webkit-border-radius:10px 10px 0px 0px; }
/*---------------------------------------------- */

- Afficher la liste des articles sur une plus grande largeur, lorsqu’on n’utilise pas les brèves. Lorsque vous cliquez sur une rubrique, les articles qui la composent apparaissent avec leur résumé. Si vous désactivez l’utilisation des brèves, vous aurez une large bande vide sur la droite de la page. Cette ligne ajoutée à la feuille de style élargira l’affichage des articles à 90% de la largeur disponible.

/* Agrandit la largeur d affichage des articles dans les rubriques */       
.page_rubrique  #contenu .articles, .page_rubrique  #contenu .sites {width:90%;}       
/*---------------------------------------------- */

- Masquer le logo de l’académie de Versailles situé dans le bandeau supérieur (sa présence est obligatoire sur les sites des établissements de l’académie de Versailles)

/* Masque le logo de l'académie de Versailles */
#entete .logo-versailles {visibility: hidden ;}       
/*---------------------------------------------- */

- Masquer la barre du menu horizontal qui commence par "Aller à".

/*  Masque le menu horizontal */
#menuhorizontal  {display: none;}
/*---------------------------------------------- */

- Masquer des liens du menu horizontal. Certains liens sont affichés par défaut, tels que "Contenu", "Sommaire", "Recherche", "Agenda", "Liens". A vous de conserver uniquement les lignes correspondant aux liens que vous souhaitez masquer.

/*  Masquer des éléments du menu horizontal */
ul#menuhorizontal  > li:first-child +li{display:none;} /* Masque Contenu*/
ul#menuhorizontal  > li:first-child +li+li{display:none;} /* Masque Sommaire*/
ul#menuhorizontal  > li:first-child +li+li+li{display:none;}  /* Masque Recherche */
ul#menuhorizontal  > li:first-child +li+li+li+li{display:none;}  /* Masque Agenda*/
ul#menuhorizontal  > li:first-child +li+li+li+li+li{display:none;}  /* Masque Liens*/
/*---------------------------------------------- */

- Masquer les sous-sous rubriques (rubriques de 3ème niveau). Cette ligne permet de n’afficher dans le menu de navigation que les rubriques de premier de deuxième niveau.

/*  Masquer les sous-sous rubriques */
#navigation dd ul.ss-rubrique li.ss-ss-rubrique ul.ss-rubrique li.ss-ss-rubrique {display : none; }
/*---------------------------------------------- */

- Masquer le bouton "Sommaire +" en tête du menu de gauche. Ce bouton permet d’ouvrir simultanément toutes les sous-rubriques du menu.

/*  Masquer le bouton Sommaire + en haut du menu */
#montre_ou_masque_tout {display: none;}
/*---------------------------------------------- */

- Déplier tous les menus automatiquement. Cette ligne vous permet d’"ouvrir" automatiquement toutes les sous-rubriques du menu, évitant ainsi aux utilisateurs d’avoir à cliquer pour afficher le contenu des sous-rubriques.

/*  Déplier automatiquement tous les menus */
#navigation .dd{display: inline;}
#navigation .ddon {display: inline;}
/*---------------------------------------------- */

- Masquer les "+" permettant d’ouvrir les menus. Si vous choisissez de déplier automatiquement les menus (voir ci-dessus), le "+" situé devant chaque rubrique contenant des sous-rubriques n’a plus aucune utilité. En ajoutant ces deux lignes à votre feuille de style, vous masquez ces "+" et ajustez la position des rubriques vides.

/*  Masquer les "+" du menu permettant d afficher les sous-rubriques */
#navigation #menu img.imageplus  {display:none;}
/*  On corrige le décalage des rubriques vides dans le menu */
#navigation #menu .rubrique_vide {margin-left:-20px;}
/*------------------------------------------ */

- Masquer les images affichées dans le pied de page. La partie basse du site comporte différents logos du CRDP de Versailles, de la mission TICE et de SPIP. Avec cette ligne, vous masquerez ces trois images. Petit inconvénient : on se retrouve avec quatre "|" parasites.
Pour les établissements de l’académie de Versailles, il est fortement recommandé de conserver ces logos.

/*  Masquer les 3 images du pied de page (CRDP, Mission Tice et SPIP) */
#pied .pied img.format_png {display:none;}
/*---------------------------------------------- */

- Afficher une image dans le pied de page, après les images CRDP, Tice et SPIP. Bien évidemment, vous n’oublierez de remplacer l’url donnée par celle qui vous intéresse !

/*  Afficher une image dans le pied de page */
.pied:after {content:url(http://i.creativecommons.org/l/by-nc-sa/2.0/fr/88x31.png);}
/*---------------------------------------------- */

- Masquer la date de rédaction des articles, permet de ne plus afficher la date de rédaction (ou de dernière modification) affichée par défaut en haut de chaque article. Cela conserve cependant le nom de l’auteur, par exemple "par Pierre Dupont" (que l’on peut masquer dans les options de ScolaSpip).

/*  Masquer la date de rédaction des articles */
.published {display:none}
/*---------------------------------------------- */

| Plan du site | Mentions légales | Suivre la vie du site RSS 2.0 | Haut de page | SPIP | ScolaSPIP
PRTICE.Info (PRTICE.info)
Directeur de publication : Julien Delmas