SharePoint 2013 : Personnalisation graphique

Introduction

Cet article s’adresse aux personnes souhaitant réaliser une personnalisation graphique modérée de SharePoint 2013, pour une maquette, un projet avec peu de budget consacré à la charte graphique ou encore un choix de rester au plus près du standard.
Il ne nécessite pas de compétence technique particulière, seulement d’être familier avec le paramétrage d’un site SharePoint. Il conviendra donc aux débutants et à ceux qui souhaitent rapidement retrouver leurs marques.

Quelles personnalisations

Pour tenir les objectifs cités (compétences non techniques, délai court et respect du standard), j’ai opté pour le choix, structurant, de ne pas modifier la Page Maître.

Pour information, la personnalisation des Pages Maîtres est déconseillée, notamment pour les raisons suivantes :

  • Risque vis-à-vis des mises à jour Microsoft ultérieures
  • Problème d’association avec les « Composed looks » (apparences composées)
    Lorsqu’un « Composed look » fait référence à une Master Page personnalisée, il est susceptible de ne pas être proposé par la page « Change the look » car la Master Page n’est pas jugée valide. Cela peut arriver même si la Master Page s’applique bien et que l’on a ajouté le .preview correspondant (requis selon www.eliostruyf.com/how-to-create-a-master-page-that-is-available-for-the-composed-looks/).
    De plus, si la Master Page est personnalisée après avoir appliqué le « Composed look » qui y fait référence, on peut avoir un comportement qui semble correcte à la navigation mais qui pose problème au niveau de la page « Change the look » (modifier l’apparence), par exemple : Elle reste bloquée lorsque l’on souhaite changer de look. Il faut alors corriger / rétablir la Master Page.

Si toutefois, il est nécessaire de créer une Page Maître personnalisée, voir : « Convertir un fichier HTML en page maître dans SharePoint 2013 » et « Comment créer un fichier d’aperçu de page maître dans SharePoint 2013« .

À défaut de Page Maître personnalisée, les choix de personnalisation restants sont basés sur les 4 éléments qui peuvent composer une apparence (« look ») :

  • Sélection d’une Page Maître standard
    « Seattle » (appliquée par défaut) ou « Oslo » (qui n’a pas de navigation gauche).
  • Palette de couleurs (Color Palette)
    Fichier .spcolor qui associe une couleur pour chaque style nommé fonctionnellement (variable qui, techniquement, couvre plusieurs classes CSS).
  • Jeu de polices (Font Scheme)
    Fichier .spfont qui définit une police pour chaque style nommé fonctionnellement (titre, en-tête, corps, navigation, etc.).
  • Image de fond
    Il est possible d’utiliser une image de fond, comme le fait par exemple l’apparence standard « Monstre marin » (« Sea Monster »).

En fin d’article, nous verrons comment ajouter une feuille de style CSS personnalisée pour aller plus loin (facultatif).

Comment effectuer les personnalisations

Recommandation liée au navigateur

Si vous utilisez IE (en l’occurrence la version 11), je vous conseille d’ajouter le site SharePoint concerné en affichage de compatibilité, afin d’éviter des problèmes tel que l’impossibilité d’éditer une page et ses Web Parts.

Rappel sur « Modifier l’apparence » (choix d’une composition et modification d’un élément)

La page « Modifier l’apparence » ou « Change the look » (accessible via « Paramètres du site » > « Modifier l’apparence » ou l’URL /_layouts/15/designgallery.aspx) propose d’abord plusieurs apparences composées (chacune prédéfinit un choix pour les 4 éléments cités ci-dessus).

blog ai3 SP_Modifier_apparence_1 SharePoint 2013 : Personnalisation graphique

En sélectionnant une de ces compositions prédéfinies (ex: « Monstre marin ») ou en conservant la composition globale actuelle (« Actuel » ou « Current »), il est ensuite possible d’affiner chacun des 4 éléments. Par exemple, la liste déroulante « Couleurs » permet de choisir parmi les Palettes de couleurs existantes (initialisées avec 32 palettes standards).

blog ai3 SP_Modifier_apparence_2 SharePoint 2013 : Personnalisation graphique

 

Créer une Palette de couleurs (Color Palette)

Pour éviter d’écrire du XML, je vous recommande vivement l’outil « SharePoint Color Palette Tool ».

blog ai3 SP_Color_Palette_Tool SharePoint 2013 : Personnalisation graphique

L’outil s’ouvre sur la Palette de couleurs par défaut (équivalente au fichier SharePointPersonality.spfont).

Effectuez les modifications puis enregistrez sous un nouveau fichier (extension .spcolor).

Quelques astuces :

  • Le bouton « Recolor » (tout en haut) vous permet de modifier massivement la couleur dominante (ainsi que ses déclinaisons et complémentaires) selon la couleur choisie (carré à gauche du bouton).
  • Par défaut, les styles nommés sont regroupés par familles de couleurs (« Color Buckets »), sauf le dernier (« Bucket – 25 ») qui contient des styles très hétérogènes en termes de couleurs.
  • Le menu « Group by » (en dessous de « Recolor ») permet de basculer vers les regroupements par « UI Groups » et par « UI Type ». À essayer selon les préférences…
  • Affichez votre site et utilisez « Outils de développement » (F12), avec l’outil « Sélectionner l’élément » (premier bouton de l’onglet « Explorateur DOM »), pour repérer le style (et donc la couleur) actuellement appliqué à un élément que vous souhaitez changer. Voir capture ci-dessous…
  • Une fois vos modifications effectuées, repérez l’aperçu qui résume votre palette en 3 couleurs (« Preview Slot 1 », « … 2 », « … 3 »), car pour l’appliquer la liste des Palettes n’indique pas de noms mais uniquement ces aperçus en 3 couleurs, proposés par ordre alphabétique du nom de fichier.

blog ai3 SP_F12 SharePoint 2013 : Personnalisation graphique

Le fichier .spcolor est à déposer dans la « Galerie Thèmes » (accessible via « Paramètres du site » > « Thèmes » ou l’URL /_catalogs/theme/), plus précisément dans le sous-répertoire « 15 » (dans le cas de SharePoint 2013). Il pourra ensuite être appliqué depuis la page « Modifier l’apparence ».

Les mises à jour des fichiers de la « Galerie Thèmes » ne prennent effet qu’en repassant par la page « Modifier l’apparence » (conservez le thème courant avant de réappliquer la Palette de couleurs ou le Jeu de polices).

Note : Sur un environnement Office 365 (testé en janvier 2016), la Collection de sites racine peut avoir un comportement différent, avec des difficultés à ajouter un fichier à la « Galerie Thèmes » : « Désolé… Nous n’avons pas pu télécharger vos fichiers. Le téléchargement est peut-être trop volumineux ou le serveur fait face à un trafic réseau important. »

Voir aussi l’article MSDN « Palettes de couleurs et polices dans SharePoint 2013 » (ou en V.O.).

Créer un Jeu de polices (Font Scheme)

Il s’agît là encore d’un fichier XML, qui peut être plus ou moins long. En voici une version minimaliste, où vous n’aurez qu’à remplacer « NOM_DU_JEU_DE_POLICES » (n’a pas d’impact visible) et les occurrences de « Verdana » (qui vont deux par deux*) par la police de votre choix.

* Note : Chaque balise s:fontSlot définit la police pour :
– Les langues utilisant un alphabet latin (balise s:latin)
– Les « Complex Script » (balise s:cs, dont la valeur est habituellement la même que pour s:latin)
– Les langues de l’Est Asiatique (balise s:ea, dont la valeur peut être vide)
– D’autres langues… Leurs balises étant facultatives, elles sont absentes de cette version minimaliste.


<?xml version="1.0" encoding="utf-8"?>
<s:fontScheme name="NOM_DU_JEU_DE_POLICES" previewSlot1="title" previewSlot2="body" xmlns:s="http://schemas.microsoft.com/sharepoint/">
<s:fontSlots>
<s:fontSlot name="title">
<s:latin typeface="Verdana" />
<s:cs typeface="Verdana" />
<s:ea typeface="" />
</s:fontSlot>
<s:fontSlot name="navigation">
<s:latin typeface="Verdana" />
<s:cs typeface="Verdana" />
<s:ea typeface="" />
</s:fontSlot>
<s:fontSlot name="small-heading">
<s:latin typeface="Verdana" />
<s:cs typeface="Verdana" />
<s:ea typeface="" />
</s:fontSlot>
<s:fontSlot name="heading">
<s:latin typeface="Verdana" />
<s:cs typeface="Verdana" />
<s:ea typeface="" />
</s:fontSlot>
<s:fontSlot name="large-heading">
<s:latin typeface="Verdana" />
<s:cs typeface="Verdana" />
<s:ea typeface="" />
</s:fontSlot>
<s:fontSlot name="body">
<s:latin typeface="Verdana" />
<s:cs typeface="Verdana" />
<s:ea typeface="" />
</s:fontSlot>
<s:fontSlot name="large-body">
<s:latin typeface="Verdana" />
<s:cs typeface="Verdana" />
<s:ea typeface="" />
</s:fontSlot>
</s:fontSlots>
</s:fontScheme>

Enregistrez votre fichier avec une extension .spfont et déposez-le dans la « Galerie Thèmes ».

Rappel : La « Galerie Thèmes » est accessible via « Paramètres du site » > « Thèmes » ou l’URL /_catalogs/theme/), plus précisément dans le sous-répertoire « 15 » (dans le cas de SharePoint 2013). Passez par la page « Modifier l’apparence » pour appliquer le nouveau Jeu de polices ou le réappliquer pour prendre en compte sa mise à jour.

Utiliser une image de fond

Sur la page « Modifier l’apparence » (après le choix de la composition), la zone « Déposez une image ici » (et le bouton « Modifier » en dessous) permet de définir une image de fond.

Utilisez de préférence une image de 1024 x 768 au format JPG (les formats PNG et GIF sont acceptés mais limités à 150 Ko).

Note : Le fichier téléchargé est stocké dans la bibliothèque « Pièces jointes » (/SiteAssets/). Voir ci-dessous « Créer une apparence composée » pour utiliser un autre emplacement.

Choisir une Page Maître

Toujours sur la page « Modifier l’apparence » (après le choix de la composition), la liste déroulante « Mise en page du site » permet de modifier le choix de la Page Maître à appliquer.

Créer une apparence composée (facultatif)

Après avoir vu les différents éléments qui composent une apparence (« look »), intéressons-nous à la création d’une définition qui applique des choix prédéfinis pour l’ensemble de ces éléments (ce qui n’empêchera pas d’affiner ensuite pour appliquer d’autres choix à un ou plusieurs de ces éléments).

Pour cela, allez dans « Paramètres du site » > « Présentations composées » (« Composed looks », URL /_catalogs/design/) et créez un nouvel élément.

Note :

  • L’apparence composée ne sera pas proposée si le champ « URL de page maître » est vide (ou s’il indique une Page Maître personnalisée, comme précisé en début d’article). Indiquez « /_catalogs/masterpage/seattle.master » ou « /_catalogs/masterpage/oslo.master » (l’URL être relative et commencer par « /sites/ »).
  • Le champ « URL de thème » correspond à la Palette de couleurs.
  • Définir l’image via une apparence composée (champ « URL de l’image ») plutôt que à la volée via la page « Modifier l’apparence » permet de stocker l’image ailleurs que dans la bibliothèque « Pièces jointes » (/SiteAssets/).
  • Indiquez un « Ordre d’affichage » entre 1 et 9 pour proposer votre apparence composée après « Actuel » (0) et avant « Orange » (10).

 

Indiquer un fichier CSS (facultatif)

Un moyen simple d’indiquer un fichier .CSS à prendre en compte est de passer par le « Gestionnaire de conception » ou « Design Manager » (qui n’est pas toujours proposé*) :
« Paramètres du site » > « Gestionnaire de conception » > « 7. Publier et appliquer la conception » > « Affecter une page maître à votre site en fonction du canal de l’appareil ». On arrive alors sur la page « Paramètres de la page maître du site » (« Site Master Page Settings », URL /_layouts/15/ChangeSiteMasterPage.aspx).

Note : Le fichier CSS indiqué sera appliqué en complément des fichiers CSS natifs et non en remplacement. Il peut donc ne contenir que les personnalisations qui diffèrent du standard.

Je vous conseille de déposer le fichier CSS dans la bibliothèque « Style Library » à la racine de la collection de sites. En plus d’être un emplacement centralisé pour toute la collection de sites, elle assure un droit d’accès en lecture à ces ressources de styles.

Astuce : Désactivez temporairement l’option « Paramètres de contrôle de version » > « Exiger l’extraction des documents avant de pouvoir les modifier ? » en cas de modifications répétées.

* Le « Gestionnaire de conception » (Design Manager) est proposé sur un site de Publication ou un site où la fonctionnalité « Infrastructure de publication de SharePoint Server » est activée au niveau des « Fonctionnalités de la collection de sites ».
Attention : L’action « Enregistrer le site comme modèle » (<votre_site>/_layouts/15/savetmpl.aspx) est incompatible avec la fonctionnalité de publication (même après la désactivation de cette fonctionnalité).

2 thoughts on “SharePoint 2013 : Personnalisation graphique

  1. Bonjour,
    Merci pour ce rapport , mais en faite j’ai une petite question , le titre de la page est par défaut il est en haut a droit si je vais le déplacer au milieu comment je dois faire ?? Par ailleurs lorsque je crée un sous-site il y a la possibilité de faire une modification d’apparence seulement pour le sous-site ??
    Merci

  2. Merci de la redaction de ce support. Car je ne trouve qu’il n’existe pas beaucoup d’articles sur ce sujet et qui permet de rester standard dans l’approche d’utilisation de SP.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.