Portail 74 site web sous SPIP

Vous êtes ici : Accueil > Documentation > Personnaliser l’aspect du site

Personnaliser l’aspect du site

Couleurs & fonds, mise en page, accueil

  • Publié : 22 août 2017
  • Mis à jour : 5 juillet 2023

Ce plugin permet de personnaliser l’aspect de votre site, ainsi que quelques fonctionnalités.

Rendez-vous dans l’interface d’administration : Squelettes > Portail 74.

Ce plugin se découpe en quatre onglets :

  1. Gestion des thèmes
  2. Sections de la page d’accueil
  3. Couleurs et fonds
  4. Gestion des images
  5. Compléments

Gestion des thèmes

Vous pouvez, ici, sauvegarder un thème qui contiendra toute la personnalisation de votre site réalisée.

Par exemple, lorsque vous voulez changer la personnalisation de vote site, faites une sauvegarde du profil actuel, afin de pouvoir éventuellement le restaurer plus tard.
Vous pouvez donc créer plusieurs profils et les alterner à tout moment. Comme, par exemple, faire un style par saison : Automne, Hivers, Printemps, Été.

Cet onglet et découpé en 2 sections :

  • Sélectionner un thème : permet d’appliquer un thème par défaut, ou enregistré précédemment (et supprimer les thèmes personnalisés).
  • Sauvegarder le thème actuel : permet d’enregistrer les personnalisations faites dans un thème personnalisé.

Sections de la page d’accueil

Cette page permet de configurer les différentes sections de la page d’accueil :

  • définir l’ordre dans lequel elle apparaissent ;
  • les activer ou non ;

Personnalisation > Sections de la page d'accueil

Remarque : en cas de problème suite à la restauration d’une ancienne sauvegarde de thème par exemple (pas totalement compatibles) cliquez sur "Réinitialiser".

Couleurs et fonds

Cette section vous permet de changer les couleurs et images de fonds des éléments des pages de votre site.
Vous y trouverez aussi certains éléments de configuration, comme par exemple pour le menu : choisir s’il doit être déroulant ou se dépliera à chaque clique. S’il peut afficher toute l’arborescence ou seulement les 2 premiers niveaux. Enfin si le menu affiche uniquement les rubriques ou également les articles.

 Pour les couleurs, il vous faut renseigner le code hexadécimal, soit en utilisant la palette qui apparaît lorsque vous cliquez dans un champs, soit en collant ce code que vous pouvez obtenir dans d’autres outils (logiciels de traitement d’images par exemple), n’oubliez pas le # au début dans ce cas.

Personnalisation > Couleurs

 Pour les images de fond, au survol du champ, un aperçu de l’image apparaît, en cliquant dans le champ vous pouvez sélectionner une autre image de fond. Enfin, après avoir changé l’image vous choisirez les paramètres de l’image de fond dans son éléments, soit son alignement et la façon dont elle sera répétée ou non.

Personnalisation > images de fond

Remarques : pour ajouter vos propres images utilisez le dernier onglet : Gestion des images.

Diaporama dans le bandeau (entête) de page

Il est possible de mettre en place un diaporama dans le bandeau (entête) de page, soit un fondu enchaîné de plusieurs images de fond.
Pour cela il suffit d’ajouter plusieurs images de fond dans la section : Entête de page > Fond de l’entête > Image de fond, et diaporama (si plusieurs images)

Personnalisation > Couleurs > Entête de page

Gestion des images

Ce dernier onglet liste l’ensemble des images disponible et vous permet également d’ajouter ou supprimer vos images personnalisées (en bas).

Attention : le nom du fichier que vous ajouter à cette liste, ne doit pas contenir d’espaces ou de caractères spéciaux :

  • non : bandeau entête.jpg
  • oui : bandeau_entete.jpg

Vos Images personnalisées

Gabarits

Voici un gabarit pour permettre d’avoir les proportions permettant de faire des images de fond personnalisées.

Portail 74 > gabarit

Le fond essentiel est celui de l’entête. Ce fond peut-être simplement décoratif (texture, photo ...) ; mais peut également contenir le nom du site, un logo, etc. Car on peut masquer le titre et le logo du site, s’ils sont représenté dans cette image de fond.

Dimensions :

  • Hauteur 140 pixels
  • Largeur 1170 pixels

Compléments

Entête

Exemple d’image d fond pour l’entête ayan une bande de la hauteur du menu.

Pour faire ceci :

Icones

À télécharger et ajouter aux articles.

icone calendrier icone diplome icone fax icone mail icone personne icone personnes icone plus icone telephone