SharePoint 2013: Personaliser le Theme Colors en mode Edit Page

Une demande classique du département communication est la mise en place de Template Documentaire. Ainsi, avec Office, on peut avoir un set de modèle de documents utilisables pour chacune des applications (Word, Excel, PowerPoint, …).

La question qui vient rapidement est relatif à SharePoint et la création d’un thème par défaut respectant les couleurs et styles de l’entreprise.

Theme SharePoint 201X

Depuis 2010, il est possible de créer un thème SharePoint utilisable dans vos Sites avec la personalisation des deux fichiers de base:

xxx.spcolor: que l’on trouve dans les sites avec les fichiers “Palettexxxx.spcolor”
yyy.spfont: que l’on trouve dans les sites avec les fichiers “fontscheme0xx.spfont”

Il est ensuite possible de créer un “Composed Look” qui sera utilisable visuellement dans le site SharePoint, et de très nombreux articles traîtent de ce point, par exemple:

Cette notion de “Composed Look” permet ensuite aux utilisateurs de trouver ce nouveau thème dans la liste proposée avec un aperçu comme on peut le voir ici:

Cas particulier du Theme Colors en Edit Page

La question ultime de ce département vient lorsque celui-ci demande d’accorder la présentation des couleurs en mode “Edit Page” avec ce qui est défini pour un document Word ou PowerPoint.

Ceci est possible toujours en prenant le fichier SPCOLOR et allant dans les blocs suivants et les remplacant par le jeu de couleur transmis par la communication.

Ce tableau présente 10 cases de largeurs et seule la première ligne est modifiable, les autres étant dépendantes de cette première. Donc le fichier XML xxxx.SPCOLOR doit être édité pour rechercher les clé suivantes:

----- BOX 1 --------------------------------------------------
    <s:color name="BackgroundOverlay" value="XXXXXXX" />
----- BOX 2 --------------------------------------------------
    <s:color name="BodyText" value="XXXXXXX" />
----- BOX 3 --------------------------------------------------
    <s:color name="SubtleEmphasisText" value="XXXXXXX" />
----- BOX 4 --------------------------------------------------
    <s:color name="SubtleEmphasisBackground" value="XXXXXXX" />
------BOX 5 TO 10 ---------------------------------------------
    <s:color name="ContentAccent1" value="XXXXXXX" />
    <s:color name="ContentAccent2" value="XXXXXXX" />
    <s:color name="ContentAccent3" value="XXXXXXX" />
    <s:color name="ContentAccent4" value="XXXXXXX" />
    <s:color name="ContentAccent5" value="XXXXXXX" />
    <s:color name="ContentAccent6" value="XXXXXXX" />
----------------------------------------------------------------

Il vous faut simplement appliquer ce nouveau fichier et vous obtiendrez votre propre résultat qui ravira le département demandeur.

AVANT	APRES

Conclusion

Cette solution permet d’être simple d’usage et facilement gérable en ne s’écartant pas des standards de Microsoft ce qui vous garantit des mises à jour plus soft.

Links:

Fabrice Romelard [MBA Risk Management]

Rechercher dans ce blog