SPIPr-Dane-Config - Doc utilisateur

Le plugin SPIPr-Dane-Config est une extension de SPIPr-Dane qui permet de personnaliser les couleurs, images d’arrière-plan et polices de caractères.

Avant de commencer

Plugins incompatibles

Certains plugins disponibles sur la plateforme mutualisée de l’académie de Caen sont incompatibles avec l’ensemble SPIPr-Dane, SPIPr-Dane-Config et SPIPr-Dane-Noisettes. Il ne doivent donc en aucun cas être activés.

Plugins incompatibles
NomVersionÉtat
Aveline Toutes Tous
MetaMutu Toutes Tous
Noizetier 2.xx Test
SPIPr-Dane 1.0.0 Stable
Zengarden Toutes Tous
Zpip-dist Toutes Tous
Zpip-vide Toutes Tous
Tizpip-Noisettes Toutes Tous

En phase de développement

Pour plus d’aisance, vérifier que la compression des css n’est pas activée. Rendez-vous sur la page « Configuration » / « Fonctions avancées » et désactivez la compression de css (et des js) si celle-ci est activée. Vous pouvez aussi, le temps de vos travaux, désactiver temporairement le cache, vous vous éviterez ainsi un clic sur « Recalculer la page » à chaque modification des paramètres de l’affichage public.

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.

Maintenant, au travail !

La simplicité est la sophistication suprême.

Léonard de Vinci

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 [1] 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

30 polices sont proposées. 10 polices sans serif, 10 polices serif, 8 polices manuscrites (cursive) et 2 polices plus adaptées dyslexie. 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

Après saisie ou choix de la police, un aperçu est proposé.

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, mais la même image sur un écran smartphone ne conviendra plus, une image verticale étant plus adaptée. Il est cependant possible d’utiliser une seule image qui satisfera aux divers affichages.

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 »

Ensuite, si aucune image n’est disponible ou satisfaisante, cliquez sur « Téléverser ou supprimer une image  ». Importez votre image. L’image choisie importée, 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.

Titre du site

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

N’oubliez pas de ré-activer la compression des css et des js si vous l’avez désactivée. Réactivez le cache si nécessaire.

Vous pouvez également 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.

Notes

[1il en existe beaucoup d’autres

Poser une question ou s'exprimer

modération a priori

Attention, votre message n’apparaîtra qu’après avoir été relu et approuvé.

Qui êtes-vous ?
Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom

Partager

Imprimer cette page (impression du contenu de la page)