Comment transformer des fichiers CSS personnalisés en fichiers à thèmes dans SharePoint

Article
09/28/2023

Découvrez comment ajouter des balises de style commentaire dans un fichier CSS afin qu'il puisse être utilisé dans le moteur de thèmes SharePoint.

Présentation des annotations

Les annotations sont des balises de style commentaire spéciales qui indiquent au moteur de thèmes SharePoint la manière d'appliquer les thèmes aux propriétés dans un fichier CSS. Lorsqu'un thème est appliqué à un site, le moteur de thèmes remplace les valeurs des propriétés CSS par les valeurs de thèmes appropriées. Dans SharePoint, vous pouvez utiliser des annotations pour modifier la couleur, la police ou l'image d'arrière-plan. Vous pouvez également recolorer une image. Si vous utilisez des fichiers CSS personnalisés, vous devez ajouter ces annotations dans les fichiers CSS si vous souhaitez les utiliser avec le moteur de thèmes SharePoint. Si vous appliquez un thème à un site qui utilise des fichiers CSS personnalisés et que vous n'avez pas ajouté d'annotations, les propriétés CSS restent inchangées. Dans ce cas, le site peut présenter une conception qui ne correspond pas.

Cet article décrit les annotations disponibles et la manière d'enregistrer des fichiers CSS.

Pour plus d’informations sur les thèmes personnalisés, voir How to : Deploy a custom theme in SharePoint and How to : Create a master page preview file in SharePoint.

Ajout d'annotations à des fichiers CSS personnalisés

Les annotations indiquent au moteur de thèmes SharePoint la manière d'appliquer les thèmes aux propriétés dans un fichier CSS. Cette section décrit les annotations disponibles et la manière de les utiliser.

Annotation ReplaceColor

L'annotation ReplaceColor remplace la valeur de couleur par la couleur de thème spécifiée. Elle peut être utilisée avec des propriétés CSS qui définissent une valeur de couleur, comme color, background-color, border etc.

L'exemple suivant montre le format de l'annotation ReplaceColor.

/* [ReplaceColor(themeColor:"ColorSlot"[, themeShade:"ShadeValue"][, themeTint:"TintValue"][, opacity:"OpacityValue"])] */

Remplacez par ColorSlot le nom d’annotation de l’emplacement de couleur à utiliser. Pour consulter une liste des emplacements de couleur disponibles, voir la section Mappage des emplacements de couleur dans Palettes de couleurs et polices dans SharePoint.

Utilisez le paramètre facultatif themeShade si vous voulez assombrir la couleur de thème. Remplacez ShadeValue par une valeur numérique comprise entre 0.0 (aucune modification) et 1.0 (couleur la plus sombre).

Utilisez le paramètre facultatif themeTint si vous voulez éclaircir la couleur de thème. Remplacez TintValue par une valeur numérique comprise entre 0.0 (aucune modification) et 1.0 (couleur la plus claire).

Utilisez le paramètre opacity si vous voulez spécifier l'opacité de la couleur de thème. Remplacez OpacityValue par une valeur numérique qui spécifie le paramètre d'opacité. Le paramètre opacity est compris entre 0.0 (transparence totale) et 1.0 (opacité totale).

Voici des exemples de l'annotation ReplaceColor utilisée dans un fichier CSS.

/* [ReplaceColor(themeColor:"BodyText")] */ color:#444;
/* [ReplaceColor(themeColor:"BackgroundOverlay",opacity:"0.5")] */ background-color:#fff;
/* [ReplaceColor(themeColor:"EmphasisBackground",themeTint:"0.05")] */ background-color:#f2faff;

Annotation ReplaceFont

L'annotation ReplaceFont ajoute la police de thème spécifiée à la liste des polices disponibles. Elle peut être utilisée avec les propriétés CSS font et font-family.

L'exemple suivant montre le format pour l'annotation ReplaceFont.

/* [ReplaceFont(themeFont:"FontSlot")] */

Remplacez FontSlot par le nom de l’emplacement de police à utiliser. Pour voir la liste des emplacements de police disponibles, voir la section Emplacements de police dans Palettes de couleurs et polices dans SharePoint.

Voici un exemple de l'annotation ReplaceFont. Dans cet exemple, si l'emplacement de police body est défini sur Courier dans le thème, Courier sera ajouté en tant que premier élément dans la liste des polices disponibles dans l'Assistant Choose the Look.

/* [ReplaceFont(themeFont:"body")] */ font-family:"Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;

Annotation ReplaceBGImage

L'annotation ReplaceBGImage remplace l'image d'arrière-plan dans le fichier CSS par l'image d'arrière-plan du thème. Elle peut être utilisée avec les propriétés CSS background et background-image.

L'exemple suivant montre le format de l'annotation ReplaceBGImage. L'annotation ReplaceBGImage peut également être utilisée avec le filtre AlphaImageLoader pour prendre en charge les versions antérieures d'Internet Explorer.

/* [ReplaceBGImage] */

Annotation RecolorImage

L'annotation RecolorImage recolore l'image spécifiée.

Les éléments suivants décrivent le format de l'annotation RecolorImage.

/* [RecolorImage(themeColor:"ColorSlot"[, method:["Tinting"|"Blending"|"Filling"]][, includeRectangle: {x:x-Setting,y:y-Setting,width:RegionWidth,height:RegionHeight})] */

Remplacez ColorSlot par le nom d’annotation de l’emplacement de couleur. Pour consulter la liste des emplacements de couleur disponibles, voir la section Mappage des emplacements de couleur dans Palettes de couleurs et polices dans SharePoint.

Utilisez le paramètre facultatif method si vous souhaitez spécifier la méthode de recolorisation.

Utilisez le paramètre facultatif includeRectangle si vous voulez recolorer uniquement une zone spécifique d'une image. Remplacez x-Setting, y-Setting, RegionWidth et RegionHeight par la coordonnée x, la coordonnée y, la largeur et la hauteur de la région que vous souhaitez recolorier.

Voici des exemples de l'utilisation de l'annotation RecolorImage dans un fichier CSS.

/* [RecolorImage(themeColor:"SubtleBodyText",method:"Tinting")] */ background-image:url("/_layouts/15/images/tabtitlerowbottombg.png?rev=23");
/* [RecolorImage(themeColor:"BodyText",method:"Filling",includeRectangle:{x:161,y:178,width:16;height:16})] */ background:url("/_layouts/15/images/spcommon.png?rev=23") no-repeat -161px -178px;

Téléchargement du fichier CSS dans le dossier Themable dans la bibliothèque de styles

Placez les fichiers CSS personnalisés dans le dossier Themable de la bibliothèque de styles (pas le dossier Themable de la galerie de pages maîtres). Seuls les fichiers CSS stockés dans le dossier Themable de la bibliothèque de styles sont reconnus par le moteur de thèmes. Le dossier Themable est créé automatiquement pour les sites de publication. Sinon, vous pouvez créer le dossier Themable à l’emplacement approprié (http:// SiteCollectionName/Bibliothèque de styles/ language/Themable/).

Remarque

Le nom du dossier de langue doit être au format à 4 chiffres ll-cc pour identifier la langue et la culture, respectivement. Par exemple, en-us ou ar-sa. Pour plus d'informations, consultez la rubrique Identificateurs de langue et valeurs d'ID de l'élément OptionState dans Office 2013.

Les fichiers CSS doivent être enregistrés et publiés. Si les fichiers CSS sont modifiés, vous devez appliquer à nouveau le thème pour que les modifications soient reconnues.

Enregistrer le fichier CSS

Vous devez enregistrer le fichier CSS auprès d'une page maître pour que le fichier CSS puisse être utilisé par le moteur de thèmes. Cela permet d'indiquer à la page maître où se trouve le fichier CSS lorsque vous appliquez un thème à un site. Pour inscrire un fichier CSS, vous ajoutez un <élément SharePoint :CssRegistration> à l’élément <head> de la page master. L’exemple suivant montre le format de l’élément <SharePoint :CssRegistration> .

<SharePoint:CssRegistration Name="CSSFileLocation" runat="server" />

Remplacez CSSFileLocation par l'emplacement du fichier CSS.

Voici un exemple d’élément <SharePoint :CssRegistration> .

<head>
…
<SharePoint:CssRegistration Name="<%$SPUrl:~SiteCollection/Style Library/~language/Themable/MyCustomFile.css%>" runat="server" />
</head>