| |
Formation 10 - Le site école Spip de la DSI
Bandeau
Formation 10 - Le site école Spip de la DSI
Le site école Spip de la DSI

Le site école d’information et d’aide à la gestion de votre site Spip dans l’académie Orléans-Tours dédié aux webmestres, administrateurs, rédacteurs

Personnalisation du squelette Escal
Article mis en ligne le 13 octobre 2021
dernière modification le 13 septembre 2023

par Admin_dsi

Le squelette Escal est un squelette développé par l’académie de Lyon.

Il est Responsive Web Design, c’est à dire qu’il est capable de s’adapter à la taille de l’écran du terminal utilisé par l’internaute. Il sera donc aisé de naviguer sur le site avec un ordinateur, une tablette et même un smartphone.

Il permet de mettre en forme facilement son site grâce à des réglages pertinents et faciles d’accès.

Il dispose d’options permettant une navigation plus simple et efficace.

Il est constamment mis à jour par les développeurs afin d’intégrer de nouvelles fonctionnalités et corriger d’éventuelles coquilles.

Le squelette Escal ne gère pas les brèves qui vont disparaître avec Spip 4 !

Voici dans les grandes lignes les principaux réglages disponibles du squelette Escal.


Pour faciliter vos essais de mise en forme de votre site, il est conseillé de sauvegarder vos paramètres Escal régulièrement en passant par "Maintenance / Exporter des données" dont le fonctionnement est décrit dans cet article.

Les menus de configuration d’Escal :


Généralités :

La mise en page :

Vous pouvez ici modifier la taille de la police, la mise en page (colonnes, positions) et largeurs

Le choix de la mise en page permet de sélectionner la position des colonnes et leurs largeurs.

Le choix entre une mise en page fluide (s’adapte à la largeur de l’écran), fixe ou mixte.


Pour une utilisation optimale sur mobile, préférez le mode fluide.

Les éléments de la page web

Il est possible d’afficher différents éléments sur les pages du site.
  1. Accessibilité
    Il est important de pouvoir laisser le choix aux internautes qui ont une déficience visuelle ou des problèmes de dyslexie de paramétrer le site pour qu’il s’adapte à leur problème.
    L’icône Accessibilité est là pour ça

    Le résultat sur le site est le suivant :
  2. Les mots-clés
  3. Le favicon
    Il est possible de changer le favicon (icône qui se trouve dans l’onglet du navigateur).
    Par défaut, il correspond à la Marianne.
    Il est conseillé de ne pas modifier ce paramètre afin de répondre correctement à la charte graphique nationale.
  4. Le bord latéral des pages
    Afficher une ombre colorée autour de la page du site est possible.
  5. La position de la barre d’outils
    Sélectionnez ici la position de la barre d’outils.
  6. Le formulaire de recherche
    Vous avez la possibilité de choisir la position du formulaire de recherche ou de ne pas l’afficher.

Les réglages du bandeau

  1. Les options de l’image du bandeau
    L’option 2 permet d’afficher le logo du site dans le bandeau.
    L’option 3 permet d’afficher une image dans le bandeau (plus pratique pour un bandeau vraiment personnalisé).
    L’image devra être placée dans le dossier squelettes/images/bandeau en passant par l’outil "Editer le squelette". Pour déplacer l’image dans le bon dossier, il faut "renommer" l’image qui a été uploadée et ajouter devant le nom du fichier images/bandeau/
  2. Les textes dans le bandeau
    Il est possible d’afficher le nom du site, le slogan ou le descriptif inscrits dans l’identité du site.

Utiliser les textes peut rendre l’affichage du bandeau sur mobile peu agréable.
Privilégiez une image avec les titres intégrés (comme pour notre site).
Le logiciel gratuit Photofiltre permet de réaliser facilement l’image du bandeau et d’y intégrer les textes nécessaires.

Le Menu horizontal

  1. Affichage
    Il est possible d’afficher les articles dans le déroulé des menus et il est également possible s’afficher le menu en permanence (même lorsqu’il doit sortir lors du scroll)
  2. Lien vers l’accueil
  3. Rubriques de 1er niveau
    Choisir entre nom, l’icône de la rubrique ou les deux.

Le Multilinguisme


Tout pour configurer le multilinguisme sur votre site.
  1. Dans l’espace privé

    Pour passer en mode multilinguisme, il vous faudra :
    - 1. activer le menu de langues sur les rubriques : ça se passe dans Configuration -> Multilinguisme (inutile d’activer le menu pour les articles !)
    - 2. activer aussi "seulement pour les rubriques situées à la racine"
    - 3. choisir les langues proposées aux rédacteurs : ça se passe sur la même page, juste en dessous, après réaffichage de la page.
    - 4. et il ne reste plus qu’à créer un nouveau secteur, lui attribuer une langue et ... le remplir. Inutile ensuite de choisir la langue pour les rubriques et les articles de ce secteur.
  2. Dans Escal

Le pied de page

  1. Les liens
    Activez et désactivez les liens visibles dans le pied de page
  2. Autres mentions
    Les liens du copyright et vers l’hébergeur
  3. Citations
    Les citations dans le pied.

Colonne principale

La page d’accueil

Sélection des blocs affichables en tête de page d’accueil et de la façon dont ils doivent s’afficher.
  1. Choix des blocs
  2. Les annonces
  3. Le bloc "A la une"
  4. Derniers articles
  5. Derniers articles bis
  6. Derniers articles ter
  7. Articles avec mots-clés

Les autres pages

Sélectionner ce qui doit apparaître sur une page "Rubrique" ou "Article". en plus du contenu, il est possible d’afficher le bloc annonces ou annonces défilantes.

Les blocs latéraux

Choix des blocs latéraux

Il est possible de choisir et paramétrer les blocs latéraux que vous voulez voir apparaître sur les différentes page du site.

Voici la liste des blocs qu’il est possible de faire apparaître (certains blocs ne sont pas disponibles sur toutes les pages !).

Un peu de style

Dans cette partie, vous allez découvrir les options disponibles pour changer le style du squelette Escal.

Les fonds et les textes

  1. Le fond du site
    Les images de fonds sont à uploader dans "Squelettes / Editer le squelette" et renommer le fichier afin de le placer dans le bon dossier en ajoutant devant le nom du fichier images/fonds (Attentions aux "s") !
    Il est possible de placer une marge ou tout simplement une couleur pour le fond du site (au delà des colonnes). Le fond n’apparaitra pas pour un site en pleine largeur !

  2. Les fonds et les textes des blocs
    Pour les couleurs, on peut indiquer :
  • une couleur en code hexadécimal → exemple : #0000FF (ne pas oublier le #)
  • une couleur nommée → exemple : grey
  • une couleur en code RGB → exemple : rgb(24,125,255)
  • une couleur en code RGB avec transparence → exemple : rgba(24,125,255,0.5)
  • ou toute autre code couleur : HSL, HSB, CMJN ...
    Pour choisir et harmoniser vos couleurs, vous pouvez vous aider des sites suivants :
  • Color Hunt
  • Paletton.com
  • PaletteDeCouleur.net

Les bords et les arrondis

  1. Les bords des blocs

  2. Les arrondis des blocs