Avertissement à propos des caches

Lors des changements de réglages de SPIPr-Dane-Config, différents niveaux de caches peuvent entrer en jeux et vous empêchent de voir les effets des réglages effectués.

Il est souvent utile :

• de cliquer 2 fois sur « Recalculer » la page
• de vider le cache de son navigateur (ou cliquer sur MAJ + le bouton actualiser du navigateur) afin de bien actualiser toutes les requêtes

Présentation des options

Rendez vous sur la page de configuration du thème (menu « Squelettes » / « Configurer le thème »).

Import / Export

Dans la colonne de gauche, un premier cadre vous propose d’exporter ou d’importer une configuration. Ce cadre n’est présent que si le plugin Import-Export est activé.

Un deuxième cadre propose un lien « Afficher la configuration » qui vous permet de voir si une configuration existe déjà. Si tel est le cas, cliquez sur « Exporter la configuration », cette sauvegarde vous permettra de revenir au point de départ en cas de soucis.

Personnalisation de base

Couleurs de base

Les couleurs de base sont répercutées sur tout le site. La couleur la plus utilisée est la couleur N°2. Modifiez les couleurs et rendez-vous sur l’espace public. Recalculez la page et constatez les modifications.

Pour choisir les couleurs et si vous disposez d’un logo, d’une image ou d’une photo représentative de votre établissement, vous pouvez utiliser un générateur de palette en ligne comme Coolors ou Adobe Color CC et générer une palette à partir de cette image.

Il est conseillé de sélectionner des couleurs complémentaires (pour les couleurs 1 et 2) pas trop claires pour une bonne lisibilité du texte sur fond blanc.

Police de caractères

Différentes polices sont proposées. Si vous choisissez Personnelle en bas de la liste déroulante, vous pourrez alors saisir le nom d’une police Google que vous trouverez sur le site Google Web Fonts
La police Marianne (proposée par défaut) est conseillée.

Comme pour les couleurs, la police de caractère de base s’applique à tout le site.

Attention à ne pas choisir une police trop exotique. Pensez à la lisibilité et à la facilité de lecture pour tous les publics (l’accessibilité des sites Web est nécessaire pour tous).

Personnalisation de l’entête

Couleur d’arrière-plan de l’entête

Choisir une couleur en harmonie avec la palette choisie des couleurs de base. Vous pouvez saisir la valeur transparent (valeur par défaut).

Image d’arrière-plan de l’entête

N’oubliez pas qu’en fonction des différents support utilisés (écran pc, tablette, smartphone, ...), la taille de votre image variera sensiblement.

Pour afficher une image d’arrière plan dans l’entête, préparez préalablement votre image.
Si cette image ou photo doit occuper toute la surface de l’entête, pensez à l’affichage sur smartphones et tablettes. Sur un écran pc, une image horizontale d’un ratio d’environ 5/1 à 6/1 conviendra.

Lorsque l’image choisie est prête à l’emploi, cliquez sur « Oui » dans le champ « Afficher une image d’arrière-plan », puis cliquez sur « Voir les images disponibles »

Si aucune image n’est disponible ou satisfaisante, vous pouvez en ajouter dans l’onglet dédié.cliquez sur « Téléverser ou supprimer une image ». Importez votre image.

Cliquez sur « Choisir », le champ « Url de l’image d’arrière plan » est automatiquement complété.

Complétez ensuite les différents champs :

• Position de l’image d’arrière-plan : Dans l’ordre position verticale, position horizontale. Les valeurs les plus usuelles sont « top », « left », et « center »
• Répétition de l’image d’arrière-plan : Pour l’entête, et dans le cas d’une photo, on choisira sans répétition (valeur par défaut)
• Fixer l’image d’arrière-plan : Pour l’entête, laisser la valeur par défaut (Non)
• Dimensions de l’image d’arrière-plan : Le choix est ici important. Vous pouvez saisir au choix, l’une des valeurs suivantes :
  • cover : forcera à couvrir toute la surface sans déformer l’image, quitte à la rogner.
  • contain : forcera l’image à ne pas dépasser de l’élément sans la déformer, avec le risque que l’image ne couvre pas toute la surface.
  • auto : affiche l’image à sa taille réelle.
  • X% Y% ou Xpx Ypx : redimensionne l’image aux dimensions choisies.
• Largeur de l’arrière-plan : L’image et la couleur d’arrière-plan peuvent occuper la largeur de la page (largeur des contenus) ou occuper toute la largeur de l’écran. Attention, dans ce cas, cette taille n’est pas maîtrisable.

Entête

Vous pouvez choisir une police de caractères différente de celle choisie comme police de base et modifier sa taille et sa couleur.

Logos du site

Vous pouvez choisir d’afficher ou non le logo du site (s’il existe) et modifier sa taille et sa position (à droite ou à gauche de l’entête), ainsi que la position du logo académique (toujours présent).

Personnalisation de la barre de navigation

Par défaut, la barre de navigation utilise la couleur de base N°2 comme couleur d’arrière-plan. Au survol d’un lien, sa couleur d’arrière-plan est la couleur N°1.
Sont personnalisables : la couleur d’arrière-plan de la barre de navigation (couleur de base N°1 ou N°2) ainsi que la couleur des liens (blanc ou noir). Vous pouvez également inverser la couleur des liens au survol (en fonction des couleurs de base N° 1 et 2)

Personnalisation de la page.

Comme pour l’entête, vous pouvez modifier la couleur d’arrière-plan de la page et ajouter une image d’arrière-plan. Procédez de la même façon que pour l’entête en préparant votre image.

Personnalisation du pied de page.

Là aussi, vous pouvez ajouter une image et/ou modifier la couleur d’arrière-plan .
Procédez de la même façon que pour l’entête.

Pour finir

Vous pouvez personnaliser les blocs affichés pour les différentes pages de votre site. Pour cela utiliser SPIPr-Dane-Noisettes (via « Squelettes » / « Gérer les noisettes ») après avoir activé le plugin.