4.3. Habillages

Main menu → Create → Skins

If you see the menu item Skins under Main menu → Create, you can create skins yourself, edit them, and use other people’s skins on your portfolio pages and your profile page.

Note

Si vous ne voyez pas l’article de menu Habillage, veuille contacter votre administrateur du site. Il y a deux raisons possibles à cause desquelles vous n’avez pas accès aux habillages :

  1. La fonction d’habillage des pages n’a pas été activée pour le site. Un administrateur du serveur doit activer l’habillage pour le site.

  2. If skins are enabled for the site in general, your Mahara institution may not allow the use of skins. Your institution administrator can change that in the institution settings.

Your Skins overview page

Aperçu de votre page d”habillages

  1. Cliquez sur le bouton Créer un habillage pour paramétrer un nouveau style d’habillage de page

  2. Click the More options button to see the following additional options:

    • Import: Click this option to import skins that others have shared online.

    • Export: Click this option to export all your personal skins.

  3. In the drop-down menu, decide which skins you want to display and click the Filter button:

    • Tous les habillages : Tous les styles d’habillage de page auxquels vous avez accès

    • Habillages globaux : Seuls les styles d’habillage de page définis par l’administrateur de votre site

    • Mes habillages : Les styles d’habillage de page que vous avez vous-mêmes définis

    • Habillages publics : Les styles d’habillage de page définis par d’autres utilisateurs et partagés par eux sur le site

  4. Cliquez sur l’icône Afficher les infos de l’habillage pour afficher les métadonnées dans une fenêtre surgissante, cela concerne :

    • Title

    • Propriétaire

    • Description

    • Date de création

    • Date de modification

    Note

    Vous ne voyez les boutons Modifier, Exporter et Supprimer, seulement si vous avez les droits suffisants pour effectuer ces tâches sur l’habillage.

  5. When a skin doesn’t have any options, it is a site skin that is available to everybody.

  6. Click the Like button to mark someone else’s skin as one that you want to use on your own pages. The icon will change to a filled in heart . Clicking the button again will allow you to remove the skin from your list of favourite skins.

    Note

    You can only like another person’s skin, but not site skins. You can always select a site skin for a page, but only select other people’s skins when you liked them.

  7. Cliquez sur le bouton Modifier pour modifier les paramètres de cet habillage.

  8. Click the Export button to export only this skin.

  9. Cliquez sur le bouton Supprimer cet habillage pour supprimer seulement l’habillage sélectionné.

4.3.1. Créer un habillage

You can create skins:

  • in your personal portfolio area

  • on the site level

Depending on the settings of your skin, it will be available only to you or also to others.

In the following, the individual skin settings will be described. A skin is applied on top of the theme that is currently used for a page. You do not have to change all settings for a skin but can pick and choose which elements you want to overwrite in the theme.

4.3.1.1. Général

General settings for your skin

Préférences générales pour votre habillage

  1. After you click the Create skin button, make sure you are on the General tab.

  2. Titre de l’habillage : Donnez un titre à votre style d’habillage de page. Ce titre apparaîtra sur la page d’aperçu des Habillages.

  3. Skin description: Describe your skin here and add any details that will help you in the future to remember why you created the skin, what is special about it etc. You can expand the text box if you need to enter a long description by dragging its bottom right corner.

  4. Skin access: Decide here who shall have access to your skin:

    • This is a private skin: Only you can use this skin on pages. This is the default option.

    • This is a public skin: Others can see your skin and use it as well.

  5. Click the Save button to accept your changes or click Cancel to abort your changes. You are taken back to the skins overview page.

    Note

    You can click on any other tab and continue creating or editing your skin and click the Save button only once you are done.

4.3.1.2. Page

You can change as few or as many of the settings as you like. If you only want to create a different header area to personalise your page’s header where you can see the page (and collection) title, you do not have to change any other settings but the header ones.

Choose the background or header for your skin

Choose the background or header for your skin

  1. Click the Page tab to change header and page background colours or images.

  2. Header background colour: Untick the “Theme default” checkbox to choose a background colour for your page header. You can click into the field that shows the colour code and select a colour from the colour palette. Alternatively, you can enter the hexadecimal colour code manually if you know it.

  3. Header background image: You can display an image in the header area. Click the Add a file button to choose an image from your files area.

    Note

    For best results, crop your image to be 1,832px wide and 232px high. If you do not crop your image, a random part of it will be shown.

    The header background image overwrites the header background colour.

  4. Page background colour: Untick the “Theme default” checkbox to choose a colour for your page background that surrounds the content area. You can click into the field that shows the colour code and select a colour from the colour palette. Alternatively, you can enter the hexadecimal colour code manually if you know it.

  5. Page background image: You can display an image as background. Click the Add a file button to choose an image from your files area.

  6. Répétition de l’image : Décidez ici si vous désirez que l’image d’arrière-plan s’affiche une seule fois ou soit répétée autant de fois qu’il est nécessaire pour couvrir l’arrière-plan. Cette option est utile lorsque vous utilisez une toute petite image comme un motif que vous répétez à l’infini sur la page. Si vous choisissez de ne pas répéter l’image, celle-ci sera affichée qu’une seule fois à la position indiquée plus bas. Vos options sont donc :

    • Ne pas répéter : Aucune répétition du motif n’est faite sur la page. Cette option devrait être choisie si vous utilisez une grande image pour l’arrière-plan ou que celle-ci est plus grande que votre page.

    • Répéter horizontalement : Votre image sera répétée seulement sur l’axe horizontal. Cette option est utile sur des pages très larges, mais courtes.

    • Répéter verticalement : Votre image sera répétée seulement sur l’axe vertical. Cette option est utile sur des pages étroites, mais longues.

    • Répétez dans les deux directions : Votre image sera répétée à la fois sur l’axe horizontal et vertical. Cette option est celle qui donne le plus de flexibilité pour la création des vos pages.

  7. Origine de l’image : Vous décidez avec cette option si l’image d’arrière-plan est fixe ou défile en même temps que vous vous déplacez dans la page en utilisant les ascenseurs.

    • Fixe : Si vous choisissez cette option, votre image d’arrière-plan restera positionnée en fonction de l’option de positionnement. Seul le contenu de la page défilera en utilisant les ascenseurs.

    • Défilement : Si vous choisissez cette option, votre image d’arrière-plan se défilera en même temps que le contenu de la page lorsque les ascenseurs sont utilisés.

  8. Position de l’image d’arrière-plan : Choisissez l’emplacement de l’image. Cliquez sur l’une des positions proposées.

  9. Cliquez sur le bouton Enregistrer pour valider vos modifications, ou cliquez sur le lien Annuler pour ne rien changer.

4.3.1.3. Text

You can change certain text properties and distinguish between the header area and the rest of the page.

Change text properties

Change text properties

  1. Click the Text tab to make changes to the text settings for your skin.

  2. Heading font: Choose the font for your page (and collection) heading in the header area. The default setting is to choose your theme’s font. That way you can change the header background but can leave the font the same. You can choose from any of the installed fonts, including all theme fonts.

  3. Header text colour: Change the text colour used for any text in the page header area.

    Voir aussi

    You can check the colour contrast between your selected text colour and the background you have chosen by using the WebAIM Contrast Checker.

  4. Block header font: Choose the font for all the block headings on the page to which the skin is applied. The default setting is to choose your theme’s font. You can choose from any of the installed fonts, including all theme fonts.

  5. Block header text colour: Select the colour for the block header. The default setting is to choose your theme’s colour.

  6. Text font: Choose the font for all other text. You can choose from any of the installed fonts, including all theme fonts.

  7. Taille de police : Choisissez la taille de votre police. Les valeurs sont exprimées en proportion et non en valeurs fixes (pts ou pixels). La taille des en-têtes sera modifiée proportionnellement à votre choix de taille de police.

  8. Text colour: Decide on the colour for text that appears on the page. The default setting is to choose your theme’s colour.

  9. Emphasized text colour: Choose the colour of your block titles and other emphasized text. The default setting is to choose your theme’s colour.

  10. Normal link colour: Choose the colour in which links shall be displayed. The default setting is to choose your theme’s colour.

  11. Underline normal link: Change the switcher to “Yes” if you want your links to be underlined per default.

  12. Hover link colour: Choose the colour of your links when you hover over them.

  13. Underline hover link: Change the switcher to “Yes” if you want your hover links to be underlined.

  14. Cliquez sur le bouton Enregistrer pour valider vos modifications, ou cliquez sur le lien Annuler pour ne rien changer.

Note

Vous pouvez cliquer dans la rubrique puis sélectionner une couleur depuis le sélecteur de couleur, ou entrer le code hexadécimal de la couleur voulue.

If you do not want to use a custom colour but retain the theme colour, tick the checkbox Theme default.

4.3.1.4. Paramètres avancés

Add custom CSS

Ajouter un CSS personnalisé

  1. Click the Advanced tab to add custom CSS.

  2. Custom CSS: If you know how to change CSS, you can change other styles for your skin here and overwrite further elements on a page.

  3. Cliquez sur le bouton Enregistrer pour valider vos modifications, ou cliquez sur le lien Annuler pour ne rien changer.

4.3.2. Choisissez un habillage

Main menu → Create → Pages and collections → Edit a page

When the Skins feature is turned on, you see the Skins panel in the page settings.

Select a skin for a page

Select a skin for a page

  1. Click the Settings button when you are in edit mode of a page.

  2. Open the Skin panel to see select a skin.

  3. If a skin is already selected, you can see it as well as its metadata.

  4. You can remove the selected skin from the page by clicking the No skin button.

  5. If you do not see a skin that you are looking for, click the Manage skins button. You will be taken to Main menu → Create → Skins where you can add or remove skins.

  6. My skins: Skins that you created are displayed in this area.

  7. Click the title of a skin or the preview image to select it.

  8. Favourite skins: Skins from other people that you liked are displayed here. If you do not see a skin, click the Manage skins button. You will be taken to Main menu → Create → Skins where you can favourite more skins. Click the title of a skin or the preview image to select it.

  9. Habillages globaux : Cette zone affiche les habillages créés par les administrateurs du site au niveau global du site. Cliquez sur leur titre pour ou sur leur aperçu pour les sélectionner.

  10. Once you have selected your skin, click the Save button to apply the skin to your page.

Note

The skin is only shown when you display your page. When you edit your page, you see the standard theme that is applied to the page.

4.3.3. Afficher une page avec l’habillage

La page est présentée telle qu’elle sera affichée avec l’habillage de page sélectionné.

Example of a skin on a page

Exemple d’un habillage sur une page

  1. Arrière-plan. Une couleur ou une image

  2. Police de titre et Couleur de la police de titre.

  3. Police de titre et Couleur du texte mis en évidence

  4. Police du texte et Couleur du texte

  5. Taille de la police.

  6. Couleur normale pour les liens et décision s’il faut les souligner ou non.

  7. L’en-tête n’est pas modifé. Vous pouvez toutefois le faire si vous utilisez les CSS avancés.

  8. Le bas de page n’est pas modifé non plus.

4.3.4. Quelles sont les différences entre les thèmes et les styles d’habillage des pages ?

Les thèmes

  • Sont présent dans Mahara, dans leur forme actuelle, depuis la version 1.2

  • Doivent être placés dans un dossier spécifique de votre installation Mahara, par un administrateur-système

  • Peuvent prendre le dessus sur tous les modèles définis pour chaque page, donnant un contrôle total aux créateurs de thèmes sur chaque élément qui est affiché dans Mahara.

  • Dépendent des réglages qui ont été faits au niveau du site puis de l’institution. Ces réglages permettent d’avoir :

    • un seul thème pour tout le site

    • un thème différent pour chaque institution

    • the possibility for people to choose their own theme for browsing the site

    • the possibility for authors to apply a particular theme to each portfolio page, the page themes

Habillages

  • Can be created, shared, exported and uploaded by people via Main menu → Create → Skins.

  • Are less powerful than themes. They can only change page colours, fonts and background images, and add extra CSS. Basically they add additional CSS to a page on top of a theme.

  • Can only be applied to personal portfolio pages. They don’t change the way any other part of Mahara is displayed.

Que se passe-t-il lorsqu’un conflit se produit entre les styles d’habillage et les thèmes ?

  • If portfolio authors apply a skin to one of their pages, it adds one additional CSS stylesheet to the page. This is in addition to the CSS from the theme.

  • Il est possible qu’un style d’habillage ne se marie pas exactement avec les tous les thèmes; ceci peut être particulièrement vrai lorsque le thème modifie sensiblement la manière dont les pages du portfolio sont affichées.

  • Si vous êtes un créateur de thème, la bonne nouvelle pour vous est que ce qui est créé par un utilisateur lorsqu’il utilise un style d’habillage est techniquement un modèle de page (skin/style.tpl). De cette manière vous pouvez alors agir sur celle-ci, en déterminant comment chaque élément du style d’habillage doit être traité, en surchargeant ce modèle de page.

4.3.5. Désactiver des habillages dans un thème

Si vous utilisez Mahara dans votre institution, vous désirez certainement éviter que quiconque puisse modifier la présentation avec un style d’habillage. C’est souvent le cas lorsque vous utilisez Mahara dans le cadre de validation formelle des travaux des membres, ou de la présentation de leurs portfolios. Toutefois, dans le même temps vous aimeriez permettre aux utilisateurs de modifier l’habillage et le thème dans une autre institution.

Themes are allowed to use skins per default. If you want to change that, you need to add the parameter $theme->skins = false; to the file themeconfig.php in your theme folder. Once done, people who use this theme will see the following message:

“Your Mahara site theme « Name of the theme » does not support page skins. This means the skin you select will have no effect on how you see this page, but it may affect the page’s appearance for others viewing the site with a different theme.”

Warning that skin cannot be applied

Alerte indiquant que l’habillage ne peut pas être appliqué

Note

This option works best when authors cannot choose the theme in which they want to browse the site. If they do, and choose a different theme from the institution theme, then they could see the skin applied to the page because then the underlying theme is their personal one which may allow skins.