Affirmez votre style avec les thèmes SharePoint
Article d’origine publié le mardi 30 0ctobre 2012
Lionel Robinson est un responsable de programme dans l’équipe technique de SharePoint, spécialisé dans les expériences utilisateur.
Les thèmes dans SharePoint 2013 facilitent le changement drastique d’apparence de votre site et permettent de le rendre unique. Cela dit, la nouvelle apparence des sites SharePoint est super, alors pourquoi voudriez-vous la changer ? Voici ma propre expérience :
Après la naissance de nos jumeaux, je ne pouvais plus m’asseoir complètement dans le siège du conducteur de ma voiture lorsque les deux sièges auto étaient installés. Et même dans le siège du passager, mes genoux touchaient le tableau de bord lorsque j’étais assis de biais. Le moment était venu d’acheter une voiture plus spacieuse. Alors que nous étions enfants, nos parents roulaient en minibus, et nous avons été très excités lorsque nous avons trouvé la marque, le modèle et la couleur que nous souhaitions à tout prix. Notre minibus pouvait contenir toute la famille, et il nous restait plein d’espace utilitaire. C’était fantastique !
Peut-être n’était-ce qu’un effet psychologique mais, dès ce jour, il nous a semblé que tout un chacun possédait le même véhicule que le nôtre : un Honda Odyssey bleu clair métallisé. À plusieurs occasions, je me suis retrouvé sur un parking en train d’essayer de déverrouiller ma portière à l’aide du bouton de télécommande sur ma clé, pour finalement m’apercevoir que mon véhicule était garé deux allées plus loin.
Comment personnaliser réellement sa voiture ? Le moyen le moins onéreux consiste à placer un autocollant ou une décalcomanie à l’arrière. À l’opposé, vous pouvez payer quelqu’un pour modifier intrinsèquement votre voiture. Ou tenter courageusement de le faire vous-même.
Nous avons rencontré des clients qui avaient le même problème avec leurs sites SharePoint. Lorsque tout le monde utilise un petit nombre de modèles similaires, le vôtre peut se perdre dans la masse des sites étonnamment ressemblants. Vous pouvez accepter les similarités et espérer que les différences mineures des sites suffisent à les distinguer (tel que l’autocollant sur le pare-chocs), ou vous pouvez utiliser CSS et HTML pour personnaliser votre site, qui est somme toute, un exercice minutieux et chronophage.
Nous résolvons ce type de problèmes avec la nouvelle expérience de thèmes SharePoint. Au travers de cette expérience, vous pouvez personnaliser votre site en quelques minutes en jouant sur quatre tableaux de base : les couleurs, la disposition du site, les polices et l’image en arrière-plan. En modifiant ces paramètres, vous pouvez obtenir une apparence véritablement unique.
Procédure rapide pas à pas
- Sous « Mise en route de votre site », cliquez sur la vignette « Quel est votre style ? ». (Si les vignettes sont masquées, vous pouvez également cliquer sur « Modifier l’apparence » dans le menu des paramètres ou dans les Paramètres du site sous le titre « Aspect ».)
- La première page expose quelques points de départ que nous avons rassemblés, afin de vous montrer la plage d’options disponibles pour travailler sur l’aspect de votre site. Choisissez n’importe quelle option pour démarrer.
- Place au fun. Vous pouvez modifier les quatre éléments dont nous venons de parler juste avant (arrière-plan, disposition, couleurs et polices), et afficher immédiatement un aperçu de la modification. Faites glisser votre propre image d’arrière-plan sur le rectangle dans le coin supérieur droit, sélectionnez une palette de couleurs assortie, choisissez la disposition du site souhaitée, puis choisissez le jeu de polices qui correspond le mieux à votre personnalité.
- Une fois que vous avez sélectionné une parfaite combinaison de ces options, cliquez sur « Le tester » (dans le coin supérieur droit) pour en afficher un aperçu sur votre propre site.
- Cette fois, place à la magie ! Nous effectuons une copie des fichiers CSS de votre site (les fichiers qui définissent l’apparence et la mise en forme) mais nous appliquons les nouvelles couleurs et images. Une fois que vous avez vu le résultat, vous pouvez choisir de conserver les modifications ou réessayer.
Vous pensez à une couleur ou une police particulière ?
Nous avons inclus un jeu de palettes de couleurs et de polices que nous aimons. Mais vous pouvez toujours ajouter le vôtre. Vous avez uniquement besoin de votre éditeur de texte favori. Nous allons entamer la phase légèrement plus technique à présent (et si vous êtes familier avec les thèmes dans SharePoint 2010, vous avez une longueur d’avance). La différence principale réside dans le fait que nous n’utilisons plus le format de fichier THMX. Nous avons créé un jeu de nouveaux formats XML simples pour décrire les options liées aux thèmes : les fichiers SPColor décrivent la palette de couleurs et les fichiers SPFont décrivent le jeu de polices. Pour créer facilement vos propres palettes de couleurs et jeux de polices, il vaut mieux démarrer avec les palettes et jeux par défaut proposés dans le site d’équipe. Naviguez jusqu’au site racine de la collection de sites, cliquez sur « paramètres du site » dans le menu de paramètres, puis sur « galerie de thèmes ». Vous trouverez des palettes de couleurs et des jeux de polices dans le dossier appelé « 15 ».
Palettes de couleurs
Chaque fichier SPColor contient du code XML qui définit la valeur d’une couleur, en hexadécimal, pour chaque emplacement de couleur disponible. Si vous connaissez l’emplacement de couleur que vous voulez modifier, écrivez simplement la nouvelle valeur et enregistrez une copie du fichier dans le même dossier de la Galerie de thèmes (si le contrôle de version ou la publication est activé, veillez à archiver et à publier le fichier). Votre nouvelle palette sera disponible dans le sélecteur de couleurs de l’expérience des thèmes (étape 3, mentionné précédemment).
Voici un extrait de code d’un fichier SPColor. Autre nouveauté de cette version, la possibilité de spécifier les valeurs d’opacité avec la couleur. Vous pouvez effectuer cela à l’aide d’une valeur hexadécimale à 8 chiffres, où les deux premiers chiffres représentent l’opacité, suivis des 6 chiffres représentant traditionnellement les valeurs rouge, vert et bleu.
<?xml version="1.0" encoding="utf-8"?>
<s:colorPalette isInverted="false" previewSlot1="BackgroundOverlay" previewSlot2="BodyText" previewSlot3="AccentText" xmlns:s="https://schemas.microsoft.com/sharepoint/">
<s:color name="BodyText" value="444444" />
<s:color name="SubtleBodyText" value="777777" />
<s:color name="StrongBodyText" value="262626" />
<s:color name="DisabledText" value="B1B1B1" />
<s:color name="SiteTitle" value="262626" />
<s:color name="WebPartHeading" value="444444" />
<s:color name="ErrorText" value="BF0000" />
<s:color name="AccentText" value="0072C6" />
<s:color name="SearchURL" value="338200" />
<s:color name="Hyperlink" value="0072C6" />
<s:color name="BackgroundOverlay" value="D8FFFFFF" />
...
</s:colorPalette>
Jeux de polices
Les polices peuvent ajouter une touche personnelle à un site. L’une des fonctionnalités les plus intéressantes des thèmes dans SharePoint est la prise en charge des polices web. Avant l’arrivée de cette fonctionnalité, vous deviez choisir parmi les bonnes vieilles polices 8–10 approuvées du web (des polices qui sont réputées être installées par défaut sur quasiment tous les appareils, comme Arial, Times New Roman et Georgia). Avec les polices web, vous pouvez choisir parmi un riche éventail de polices disponibles sur Internet ; les fichiers nécessaires sont téléchargés par les navigateurs web avec le reste de la page.
Pour les polices, le pendant du fichier SPColor pour les palettes de couleurs est le fichier SPFont qui définit la police utilisée pour chaque emplacement de police disponible. Le moyen le plus facile pour créer un jeu de polices personnalisé consiste à utiliser un jeu de polices disponible que vous modifiez à loisir. SharePoint prend en charge de nombreux langages et scripts à l’instar des thèmes de polices. Pour chaque emplacement de police, vous devez définir la police à utiliser dans chaque script. Dans le cas des polices approuvées du web, incluez simplement le nom dans l’attribut typeface pour chaque emplacement de police. Si vous voulez spécifier une police web, vous devrez fournir l’URL de vos fichiers de polices web dans quatre formats de polices (pour la prise en charge sur divers navigateurs), et deux images miniatures, une petite et une grande, utilisées pour effectuer le rendu des noms de polices dans le sélecteur de polices (voir l’étape 3, abordé précédemment).
<?xml version="1.0" encoding="utf-8"?>
<s:fontScheme name="Impact" previewSlot1="title" previewSlot2="body" xmlns:s="https://schemas.microsoft.com/sharepoint/">
<s:fontSlots>
<s:fontSlot name="title">
<s:latin typeface="Impact"
eotsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.eot"
woffsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.woff"
ttfsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.ttf"
svgsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.svg"
largeimgsrc="https://blogs.msdn.com/_layouts/15/fonts/ImpactLarge.png"
smallimgsrc="https://blogs.msdn.com/_layouts/15/fonts/ImpactSmall.png" />
...
<s:font script="Arab" typeface="Segoe UI Light" />
<s:font script="Deva" typeface="Nirmala UI" />
<s:font script="Grek" typeface="Segoe UI Light" />
...
</s:fontSlot>
<s:fontSlot name="navigation">
<s:latin typeface="Segoe UI" />
...
<s:font script="Arab" typeface="Segoe UI" />
<s:font script="Deva" typeface="Nirmala UI" />
<s:font script="Grek" typeface="Segoe UI" />
...
</s:fontSlot>
...
</s:fontSlots>
</s:fontScheme>
Présentations composées
Les « présentations composées » sont les points de départ indiqués dans la première étape de l’expérience des thèmes. Vous pouvez ajouter des nouvelles présentations composées qui utilisent vos palettes de couleurs et jeux de polices personnalisés. Voilà une façon d’enregistrer une série de présentations que vous pouvez appliquer quand vous voulez. Vous trouverez la liste des présentations composées dans « Paramètres du site » sous « Galeries du concepteur web ». Vous pouvez gérer le jeu existant de présentations composées et en ajouter d’autres. Pour ce faire, ajoutez simplement un nouvel élément de liste et indiquez un nom et un titre ainsi que les URL vers la page maître, le fichier SPColor, l’image en arrière-plan (facultatif) et un fichier SPFont (facultatif). Une fois ajouté un élément de liste, l’aperçu de votre nouvelle présentation composée est ajouté en tant que point de départ sur la page « Modifier l’apparence ».
Allez-y, amusez-vous ! Donnez à votre site une apparence exceptionnelle, affirmez la personnalité de votre équipe et distinguez-vous. Si seulement je pouvais en faire autant avec mon minibus !
Ce billet de blog a été traduit de l’anglais. Vous trouverez l’article original ici : Show Off Your Style with SharePoint Theming