Bandeau

Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon... et de qui veut.

/squelettes, perso.css et les autres
Article mis en ligne le 26 décembre 2016
dernière modification le 27 juillet 2020

par Jean Christophe Villeneuve

Le dossier /squelettes

Dans de très nombreux articles de ce site, vous avez lu ou lirez une référence à ce fameux dossier /squelettes. Mais à quoi sert-il ?

Ce dossier /squelettes va contenir toutes vos personnalisations, qu’elles concernent certaines images, une personnalisation CSS ou un fichier HTML. Il doit être créé via FTP à la racine du site, au même niveau que /config, /ecrire, /local, /plugins etc.

L’intérêt d’un tel dossier est double :

  • vos personnalisations ne sont pas écrasées par une mise à jour de SPIP ou d’Escal
  • une erreur qui fait planter le site est vite corrigée en renommant le fichier concerné ou, au pire, en renommant le dossier /squelettes lui-même

Mais on y met quoi dedans ?

Tour d’horizon de ce qu’il peut contenir :

/squelettes
Un fichier favicon.ico ou un autre fichier pour le favicon.

/squelettes/images
Un dossier avec des sous-dossiers :

  • /bandeau : un dossier pour stocker votre/vos images de bandeau
  • /fonds : un dossier pour votre/vos images de fonds

/squelettes/styles
Un dossier pour le fichier perso.css où vous mettrez toutes vos personnalisations CSS (voir ci-dessous).

/squelettes/modèles
Un dossier pour déposer vos fichiers modèles à utiliser dans une noisette latérale d’Escal par exemple.

/squelettes/inclusions
Un dossier pour copier les fichiers qui se trouvent dans /escal/inclusions et les modifier à votre guise.

Le fichier perso.css

C’est dans ce fichier que l’on met toutes les personnalisations de CSS.

2 conseils :

  • ne pas copier tout le contenu d’un fichier CSS d’Escal pour n’en modifier que 2 ou 3 lignes. Seuls les sélecteurs CSS avec uniquement les lignes modifiées suffisent.
  • ne pas hésiter à commenter les règles CSS que vous rajoutez pour vous y retrouver facilement plus tard.

Quelques exemples ...

Changer la couleur des boites déroulantes du menu horizontal simple

/* couleur des boites déroulantes du menu horizontal */
ul#menu ul, ul#menu ul a {
     background-color: #189E5F;
}

Ne pas afficher la version de spip et du squelette Escal dans le pied de page

/*  suppression de la version de spip et du squelette Escal dans le pied de page */
#credits{
     display: none;
}

Changer les textes encadrés dans les articles (couleur, largeur et bords)

/* textes encadrés dans les articles */
.texteencadre-spip {
     display: block;
     background-color: #A7A37E;
     width: 70%;
     margin: auto;
     border: none;   
}

Changer la couleur du titre de l’article en exergue

/* couleur du titre de l’article en exergue */
.laune .titre {
     color: red;
}

Modifier la taille du descriptif d’une rubrique

/* taille du descriptif d’une rubrique */
#descriptif-rubrique {
     font-size: 1.2rem;
}

Mettre le mot accueil du fil d’Ariane en gras

/* fil d’Ariane avec le mot accueil en gras */
.cadre-chemin > a {
     font-weight: bold;
}

Plan du site Contact Mentions légales Données personnelles et cookies Espace privé squelette RSS

2009-2025 © Escal - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 5.2.12