Le contenu de cette page est destiné aux administrteurs/webmestres des sites hébergés sur les plateformes mutualisées de l’Académie de Caen

Configurer le thème Mutu

, par Webmestre DANE.

Présentation

Les thèmes de la série Mutu sont directement associés au plugin MetaMutu. C’est au moyen de ce plugin qu’est proposée la personnalisation. Si vous utilisez ce thème, il est important de vérifier que le plugin MetaMutu est bien activé.

Configuration


La page de configuration est composée principalement d’une barre d’onglets (A), au-dessous de laquelle sont affichés un ou plusieurs formulaires, en fonction de l’onglet choisi.

Important : Avant de modifier votre configuration, pensez à l’enregistrer. Vous disposez pour cela d’un lien (C) dans la colonne de gauche

Un lien (B) vous permet également de prévisualiser votre configuration (petits et grands écrans)

Base

Choisir une couleur de base.

C’est la couleur à partir de laquelle seront déclinées les couleurs des autres éléments configurables si vous ne les avez pas configurés autrement.

Choisir un modèle de présentation.

Vous devez en premier lieu sélectionner la page à configurer. La liste proposée reprend toutes les pages et compositions disponibles sur le site. Si vous créez une nouvelle composition, celle-ci apparaitra dans la liste et vous pourrez ainsi lui appliquer un modèle spécifique.

Sélectionnez la page par défaut, avant d’appliquer des configurations spécifiques à d’autres pages, puis cliquez sur « Choisir ».

9 modèles différents vous sont proposés. Choisissez celui qui vous conviens.

Largeur de la page : Fixe la largeur maxi de la page. *(ne fonctionne pas avec mutu-bootstrap)

Page

Couleur d’arrière-plan

Image d’arrière-plan

Pour ajouter une image d’arrière-plan, vous devez tout d’abord téléverser une image. Celle-ci sera enregistrée dans le répertoire squelettes/images.

Cliquez sur « Voir les images disponibles »

Sélectionnez l’image à téléverser sur votre machine et cliquez sur « Ajouter ». Pensez toujours au poids des images. Ceci influe considérablement sur le temps de chargement des pages.

Cliquez sur Choisir sous l’image choisie. Le nom du fichier image est automatiquement inséré dans le champ « Url de l’image d’arrière-plan » du formulaire « Image de l’arrière-plan »

Paramètre de l’image d’arrière-plan

Position de l’image d’arrière-plan : Les valeurs possibles sont les suivantes

ValeurDescription
left top

left center

left bottom

right top

right center

right bottom

center top

center center

center bottom

Si vous ne spécifiez qu’une seule valeur, l’autre valeur sera fixée à « center »
x% y% La première valeur est la position horizontale et la seconde la position verticale. Le coin supérieur gauche correspond aux valeurs 0% 0%, le coin inférieur droit aux valeurs 100% 100%. Si vous ne spécifiez qu’une seule valeur, l’autre valeur sera fixée à 50 % . La valeur par défaut est 0 % 0 %.
xpos ypos La première valeur est la position horizontale et la seconde la position verticale. Le coin supérieur gauche correspond aux valeurs 0 0. Les unités peuvent être des pixels (0px 0px) ou d’autres unités css [1]. Si vous ne spécifiez qu’une seule valeur, l’autre valeur sera fixée à 50%. Vous pouvez mélanger % et positions

Répétition de l’image d’arrière-plan : Quatre choix possibles : pas de répétition, répétition horizontale, répétition verticale, répétition horizontale et verticale.

Fixer l’image d’arrière-plan : Défilement ou Fixe. La position « fixe » (fixed) est généralement réservée à des cas particuliers.

Taille de l’image d’arrière-plan : Spécifie la taille de l’image dans l’arrière plan. Les possibilités sont les suivantes :

  • auto : Valeur par défaut. L’image est affichée à ses dimensions réelles.
  • dimensions : Définit la largeur et la hauteur de l’image de fond. La première valeur définit la largeur, la deuxième valeur définit la hauteur. Si une seule valeur est donnée, la seconde est réglé sur auto.
  • pourcentage : Définit la largeur et la hauteur de l’image d’arrière-plan en pour cent de l’élément parent. La première valeur définit la largeur, la deuxième valeur définit la hauteur. Si une seule valeur est donnée, la seconde est réglé sur auto.
  • cover : Force l\image à couvrir toute la surface sans la déformer. une partie de llimage peut donc être rognée.
  • contain : Redimensionne l’image de façon à couvrir toute la zone de contenu. L’image peut donc être déformée.
  • initial : Définit la propriété à sa valeur par défaut.
  • inherit : Hérite des propriétés de l’élément parent.

Paramètres supplémentaires

Afficher une ombre à la page : Afficher une ombre autour de la page. Si l’entête occupe toute la largeur de la page, l’ombre est appliquée uniquement au corps de celle-ci. Saisir dans l’ordre : Décalage horizontal (en px ou em), décalage vertical (en px ou em), flou (en px ou em), couleur (en hexa, rgb, rgba)

Afficher une marge à la page : Affiche une marge autour de la page. Le haut et le bas de la page sont donc décalés du bord de la fenêtre. Taille en pixels

Afficher des coins arrondis à la page : Vous pouvez arrondir les coins que vous désirez, sans les arrondir tous les quatre. Saisir dans l’ordre : coin supérieur gauche, coin supérieur droit, coin inférieur droit, coin inférieur gauche. Si vous ne saisissez qu’une seule valeur, elle sera appliquée aux quatre coins.

Entête

Couleur de l’arrière-plan

Couleur de fond : Comme pour la page, saisissez une couleur en hexadécimal (#000000 → noir, #ffffff → blanc). Une palette est affichée au focus sur le champ (clic dans le champ).

Masquer le dégradé de couleur d’arrière-plan : Vous pouvez masquer le dégradé. Le dégradé est vertical et part de la couleur saisie vers la même couleur éclaircie.

Image d’arrière-plan.

Vous retrouverez ici les même paramètre de configuration que pour l’arrière-plan de la page.

Hauteur

Spécifiez ici la hauteur de l’entête en pixels (par défaut : 200)

Largeur

Il est possible d’afficher l’entête sur toute la largeur de l’écran. Si vous choisissez cette option, le pied de page sera lui aussi affiché sur toute la largeur.

Titre

Police de caractères

Plusieurs polices de caractère vous sont proposées dans une liste déroulante. Les familles de police sont issues de Google Web Fonts.

Si vous sélectionnez ’Autre’ dans la liste déroulante, vous pourrez alors choisir une autre police que celles proposées. Il vous suffit de vous rendre sur la page de la police Google Web Font choisie, et de copier le nom de la police choisie dans le champ « Police personnelle »

Couleur de police

Choisissez à l’aide de la palette, la couleur de votre choix

Taille de la police

Le taille peut être saisie en différentes unités (px, pc, em, …)

Position

La position horizontale est définie par rapport au bord gauche de l’entête, la position verticale par rapport au bord supérieur. Les valeurs sont à saisir en pixels (px).

Dimensions

Les dimensions sont les dimensions du bloc contenant le titre. Les valeurs sont à saisir en pixels (px).

Barre de navigation

Couleur des liens

Choisissez la couleur au moyen de la palette ou saisissez directement celle-ci (en hexadécimal)

Couleur d’arrière-plan

Corps

A venir

Noisettes

A venir