Utilisation du moteur de thèmes SharePoint

  • Article

Utilisation du moteur de thèmes SharePoint

Bonjour, c’est encore moi, Kolby. Plus la date de lancement de SharePoint 2010 approche et plus je suis emballé par notre produit et les fonctionnalités que nous avons ajoutées à la version 2010. Je suis particulièrement impatient de découvrir les fonctions de création de thèmes que l’équipe SharePoint a intégrées dans cette nouvelle version. La semaine dernière, j’ai appris à configurer un fichier CSS pour créer un thème de page maître dans SharePoint Designer 2010, et je me suis dit « Vivement que le monde découvre cela ! »

Quelles sont les possibilités de création de thèmes ?  

Le moteur de création de thèmes fonctionne sur des fichiers CSS, et peut effectuer les tâches suivantes (nom de jeton en italique):

  • Remplacer les couleurs (telles que les couleurs d’arrière-plan et de police) - ReplaceColor
  • Remplacer les polices – ReplaceFont
  • Recolorer les images (à l’aide d’une des trois méthodes suivantes : teinte, mélange et remplissage)- RecolorImage

Via l’interface utilisateur du navigateur, vous pouvez sélectionner Thème de site prêt à l’emploi ou créer avec SharePoint Server (SPS) un nouveau thème à l’aide de 12 couleurs et de 2 polices à sélectionner. Ces valeurs sont stockées dans un fichier THMX, un standard qui est également utilisé par Microsoft Office. Vous pouvez également créer un thème dans Microsoft PowerPoint et l’enregistrer en tant que fichier THMX à utiliser dans SharePoint. Les fichiers THMX sont stockés dans la Galerie de thèmes de votre site racine, et vous pouvez ajouter des thèmes via SPD ou Paramètres du site > Galerie de thèmes du navigateur. Les douze couleurs de thème sont représentées par les jetons :

  • Foncé1, Foncé2
  • Clair1, Clair2
  • Accent1, Accent2, Accent3, Accent4, Accent5, Accent6
  • Lien hypertexte
  • Lien hypertexte visité

Le moteur de thèmes fonctionne avec ces couleurs et produit 5 permutations supplémentaires pour chacune : Le plus clair, Plus clair, Moyen, Plus sombre et Le plus sombre. Pour référencer une permutation dans le fichier CSS, utilisez le format: Couleur-Permutation (« Clair2-Le plus sombre » par exemple).

Syntaxe 

Le moteur de thèmes fonctionne en lisant les commentaires dans votre fichier CSS. Pour un style à thème, définissez un choix par défaut et placez un jeton de thème directement avant le style. Exemple : je dispose d’un élément de couleur d’arrière-plan auquel je veux appliquer le thème Clair2-Le plus sombre. Ma définition dans le CSS ressemblerait à ceci :

/* [ReplaceColor(themeColor:"Clair2-Le plus sombre")] */ background-color:#707070;

Dans le thème par défaut, l’arrière-plan apparaîtra comme #707070, mais à l’application d’un thème, la couleur d’arrière-plan sera remplacée par Clair2-Le plus sombre. Pour obtenir des exemples d’utilisation d’autres jetons, reportez-vous à la fin de l’article ou recherchez dans le fichier CSS par défaut v4.master (corev4.css), lequel constitue une excellente référence.

Configuration de fichier 

Pour configurer une page maître avec des fonctions de création de thèmes, vous devez faire deux choses :

  1. Placez le fichier CSS à un endroit où le moteur le verra.
  2. Enregistrez le fichier CSS correctement dans la page maître.

Emplacement 

Le moteur de thèmes s’exécutera sur les fichiers CSS uniquement s’ils sont placés au bon endroit. Pour nos personnalisations, nous utiliserons le dossier Site Racine/Style Library/~language/Themable. Ce dossier existera pour les sites SPS avec la fonction Publication SharePoint Server activée. Si vous travaillez dans un site ne disposant pas de cette structure, tout ce qu’il vous faut est un dossier nommé « Style Library » sur le site racine et un sous-dossier nommé « Themable » à l’intérieur. Tout contenu de ce dossier Themable sera pris en compte par le moteur de thèmes (y compris le contenu de ses sous-dossiers). Recréez cette structure de dossiers dans SharePoint Designer ou via le navigateur. Le dossier de langue n’est pas obligatoire, mais si vous souhaitez différents fichiers CSS pour différentes langues, vous en aurez besoin. Pour l’anglais, nommez le dossier en-us.

Les images n’ont pas d’emplacement spécifique mais nous vous suggérons le dossier SiteRacine/Style Library/Images.

Quelques conseils à propos de la recoloration des images. Si vous recolorez une image qui est restituée à plusieurs endroits, la dernière recoloration effectuée sur l’image sera utilisée dans tous les emplacements à thème. Par exemple, j’ai voulu illustrer différentes méthodes de recoloration de la même image (teinte, mélange et remplissage), mais les images sont toutes apparues comme ayant été remplies. J’ai dû enregistrer des copies individuelles de l’image et leur appliquer un thème différent (note : une solution de dernier recours consiste à utiliser un attribut de détachement pour indiquer au moteur de créer une nouvelle image lorsqu’il la recolore, mais cette méthode doit être utilisée avec parcimonie en raison des problèmes que peut poser aux performances le téléchargement de plusieurs copies d’image pour le rendu. C’est pour cette raison que je ne poursuivrai pas ici dans cette direction). Pour des blocs d’images (fichier contenant plusieurs images), vous pouvez recolorer des parties de l’image à l’aide du paramètre includeRectangle (consultez corev4.css pour un exemple de procédure à suivre).

Inscription 

Pour que les fichiers CSS à thème soient appliqués à notre page maître, nous ne pouvons pas nous contenter de créer un lien au fichier CSS, il nous faut l’inscrire. Cela permet de pointer la page maître au fichier CSS à thème lorsqu’un thème est appliqué. Placez le paramètre suivant dans la balise head de la page maître :

<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/ Themable /myStyleSheet.css %>" After="corev4.css" runat="server"/>

Le paramètre After veille à ce que notre fichier CSS à thème soit appliqué à la page après corev4.css. Notez toutefois que l’élément <% $SPUrl ne se résoudra pas dans SharePoint Foundation (SPF). Dans SPF, vous devrez spécifier l’emplacement à l’aide d’une URL codée en dur. Malheureusement, cela vous limitera si vous souhaitez utiliser différents fichiers CSS pour différentes langues (puisque vous n’avez pas de jeton ~language).

Démonstration 

Bien. Nous devrions maintenant être en place avec notre fichier CSS « thémable ». Créez un brouillon de page maître très sommaire et testez-le. Pour mieux comprendre la palette de couleurs dont je disposerai en fin de compte avec mes thèmes, j’ai intégré à v4.master un grand tableau montrant toutes les permutations de couleurs. J’ai également inclus un exemple d’image et essayé de la recolorer. Vous trouverez ci-dessous à quoi ressemble ma création avec le schéma de couleurs par défaut (notez que j’ai utilisé le blanc comme paramètre par défaut pour les styles de couleur d’arrière-plan).

Démo Styles

Passons maintenant au navigateur et sélectionnons un nouveau Thème de site. Que dites-vous des polices Convention with Papyrus et Segoe Script ? Me voilà accueilli par un tableau beaucoup plus coloré (voir ci-dessous). J’ai appliqué un thème au texte des liens et des légendes d’image. Pour la recoloration, j’ai utilisé Foncé2-Le plus clair (vous apprécierez l’harmonie parfaite des couleurs entre la cellule Foncé2-Le plus clair et le logo recoloré avec la méthode de remplissage).

Démo Styles 2

Exemple de code 

Voici un extrait du CSS pour l’image du deuxième logo pour lequel j’ai créé un thème de police, de couleur de police et de couleur d’image :

/* [ReplaceFont(themeFont: "MinorFont")] */ font-family:Verdana;
/* [ReplaceColor(themeColor:"Foncé2-Plus sombre")] */ color:black;
/* [RecolorImage(themeColor:"Foncé2-Le plus clair",method:"Tinting")] */ background:url("/Style Library/images/spdicon1.png") no-repeat;

Je suis véritablement impressionné par la qualité de la recoloration d’image. Utilisé avec méthode et style, le moteur de thème SharePoint peut produire des résultats vraiment séduisants.

Merci d’avoir lu cet article. J’espère que vous trouverez le nouveau moteur de thèmes SharePoint aussi excitant et pratique que moi.

Ce billet de blog a été traduit de l’anglais. Vous trouverez l’article original ici : Working with the SharePoint Theming Engine