Appliquer des styles à des champs de page dans SharePoint

Article
03/21/2023

Dans une mise en page, vous pouvez appliquer des styles à un champ de page et les styles appliqués à tout le contenu ajouté par les auteurs de contenu lorsqu'ils créent une page à partir de cette mise en page. En outre, vous avez d'autres options permettant de contrôler la façon dont le contenu dans un champ de page RichHtmlField est dotée du style.

Présentation de l’application de styles à des champs de page

En tant que concepteur, vous pouvez ultimate contrôler le positionnement et le style des champs de page sur une mise en page et sur toutes les pages créées à partir de cette mise en page. Lorsque les auteurs de contenu créer des pages à partir d'un navigateur, ils ne peuvent pas déplacer des champs de page dans la page ou remplacer les styles que vous spécifiez. Cela contribue à garantir que votre marque cohérence par le biais de toutes les pages du site.

Lorsque vous appliquez des styles aux champs de page, il existe deux catégories de base des types de champ à prendre en compte :

Types de champs autres que RichHtmlField Les champs de page qui constituent une mise en page est conforme au type de contenu pour cette mise en page. Un champ de page peut être de nombreux types, par exemple une seule ligne de texte (champ de texte) ou de plusieurs lignes de texte (NoteField). En tant que concepteur, vous pouvez appliquer des styles à tous les champs de page de la même manière, en appliquant des styles dans le champ de page directement sur la mise en page.
RichHtmlField Le contrôle de champ HTML enrichi (également appelé un champ HTML de publication) est un des contrôles plus puissants et fréquemment utilisées dans les mises en page. Par défaut, dans un champ HTML enrichi, les auteurs de contenu utilisent le ruban pour mettre en forme le contenu et y appliquer des styles, ainsi que pour insérer des tableaux, des éléments multimédias tels que des images et vidéos, et des composants WebPart. Ce type de champ est utile lorsque vous souhaitez donner aux auteurs de contenu libre d'ajouter et de contenu dans les paramètres que vous pouvez contrôler de style. Vous pouvez contrôler un RichHtmlField de deux manières :
- Créer une feuille de style personnalisée Par défaut, les styles disponibles sur le ruban d'un RichHtmlField proviennent d'une feuille de style intitulée HtmlEditorStyles.css. Vous pouvez configurer la propriété PrefixStyleSheet pour cet extrait de code afin que vos propres styles personnalisés s'affichent sur le ruban pour les auteurs de contenu à utiliser.
- Configurer les propriétés Autoriser Un extrait de code pour un champ RichHtmlField comporte 28 propriétés disponibles qui commencent par Autoriser, et vous pouvez utiliser ces propriétés pour rendre des commandes ou des groupes de commandes spécifiques sur le ruban indisponibles pour les auteurs de contenu. Par exemple, si vous définissez la propriété AllowFontsMenu sur False, les auteurs ne peuvent pas utiliser le menu Police du ruban pour modifier la police appliquée au texte . au lieu de cela, ils peuvent utiliser uniquement les styles CSS que vous spécifiez.

Pour tous les types de champs de page, y compris le RichHtmlField, le concepteur détermine la façon dont le contenu est dotée du style. Vous pouvez utiliser la RichHtmlField pour donner aux auteurs de contenu de liberté pour insérer du contenu riche et appliquer des styles ; Vous pouvez toujours contrôler ultimate quel contenu peut être ajouté et les styles peuvent être appliquées.

Application de styles à des champs de page autres que RichHtmlField

Avec un contrôle de champ de page, vous pouvez définir les styles utilisés par le contenu. Les auteurs peuvent ajouter du contenu à une page, mais les contrôles concepteur comment ce contenu est rendu par le biais de CSS appliquée à ces contrôles.

Dans la mise en forme de la page HTML, chaque champ de page est encapsulé dans une balise <div\>. Pour appliquer un style à un champ de page, vous pouvez simplement ajouter un style à la balise <div\>. Par exemple, <div style="font-weight:bold". Mais un scénario plus utile et courant consiste à ajouter un attribut ID à <div\> pour chaque champ dans la mise en page, puis à utiliser ID comme sélecteur pour les styles qui résident dans une feuille de style externe. De cette manière, si vous avez plusieurs canaux, et chaque canal possède sa propre feuille de style, vous pouvez appliquer des styles différents à chaque champ de page pour chaque canal. Par exemple, le champ de page suivant du type TextField (également appelé Plusieurs lignes de texte) pourrait n’avoir qu’un attribut ID sur la balise <div\>.

<div id="ShortSummaryPageField">
<!--CS: Start Page Field: ShortSummary Snippet-->
<!--SPM:<%@Register Tagprefix="PageFieldNoteField" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<PageFieldNoteField:NoteField FieldName="a5249942-2dc5-4917-85e2-661d019ad548" runat="server">-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><div align="left" class="ms-formfieldcontainer"><div class="ms-formfieldlabelcontainer" nowrap="nowrap"><span class="ms-formfieldlabel" nowrap="nowrap">ShortSummary</span></div><div class="ms-formfieldvaluecontainer"><div class="ms-rtestate-field">ShortSummary field value.</div></div></div><!--PE: End of READ-ONLY PREVIEW-->
<!--ME:</PageFieldNoteField:NoteField>-->
<!--CE: End Page Field: ShortSummary Snippet-->
</div>

Pour plus d’informations sur la destination des styles et des références de style pour une mise en page, voir Guide pratique pour créer une mise en page dans SharePoint.

Désactivation d’options sur le ruban d’un RichHtmlField

Lorsque les auteurs de contenu créer ou modifient une page, puis ajouter du contenu à un RichHtmlField à l'aide d'un navigateur, ils peuvent utiliser des commandes dans le ruban de ce champ pour mettre en forme, style, ou insérer le média et contenu riche.

Dans la galerie d'extraits de code, vous pouvez configurer les propriétés d'un champ de page du type RichHtmlField, afin que les commandes spécifiques ou des groupes de commandes sur le ruban sont plus accessibles aux auteurs. Par exemple, en définissant la propriété AllowFontSizesMenu sur False, vous pouvez désactiver le menu Font Size sur le ruban. En définissant la propriété AllowFonts sur False, vous pouvez désactiver l'ensemble du groupe police dans le ruban.

Après avoir configuré ces propriétés dans la galerie d’extraits de code, puis mis à jour l’extrait de code, les propriétés apparaissent dans le balisage d’extrait de code à l’intérieur du <!--MS:> commentaire.

<div data-name="Page Field: ArticleBody">
<!--CS: Start Page Field: ArticleBody Snippet-->
<!--SPM:<%@Register Tagprefix="PageFieldRichHtmlField" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<PageFieldRichHtmlField:RichHtmlField runat="server" AllowFonts="False" FieldName="db3168db-8778-4fb6-a48f-57f598497388">-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><div id="ctl02_label" style="display:none">ArticleBody</div><div id="ctl02__ControlWrapper_RichHtmlField" class="ms-rtestate-field" style="display:inline" aria-labelledby="ctl02_label"><div align="left" class="ms-formfieldcontainer"><div class="ms-formfieldlabelcontainer" nowrap="nowrap"><span class="ms-formfieldlabel" nowrap="nowrap">ArticleBody</span></div><div class="ms-formfieldvaluecontainer"><div class="ms-rtestate-field">ArticleBody field value. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div></div></div>
<!--PE: End of READ-ONLY PREVIEW-->
<!--ME:</PageFieldRichHtmlField:RichHtmlField>-->
<!--CE: End Page Field: ArticleBody Snippet-->
</div>

Remarque

[!REMARQUE] Si vous affectez AllowFontsFalse, auteurs de contenu peuvent toujours utiliser les raccourcis clavier par exemple CTRL + B (fort) au format texte. Pour empêcher les auteurs d'ajouter des styles de texte, vous pouvez définir AllowTextMarkup sur False. Avec ce paramètre, lorsque le contenu auteurs tentent d'enregistrer du contenu qui contient les styles appliqués au texte, l'éditeur HTML dans le navigateur renvoie une erreur et demande à l'auteur pour supprimer le balisage qui n'est pas valide.

Un champ de page RichHtmlField contient 28 propriétés Allow différentes. Pour plus d’informations sur le contrôle de propriétés spécifiques, consultez Propriétés de RichHtmlField. Pour plus d’informations sur l’ajout et la configuration d’extraits de code, consultez Extraits de code du Gestionnaire de conception SharePoint.

Contrôle des styles disponibles dans un RichHtmlField

Dans un RichHtmlField, auteurs de contenu peuvent utiliser options sur le ruban au format contenu. Ces options de mise en forme sont implémentées à l'aide de CSS, et les styles définis dans une feuille de style SharePoint nommée HtmlEditorStyles.css qui réside sur le serveur à un des emplacements suivants :

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\1033\STYLES
C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\FEATURES\PublishingLayouts\en-us

Étant donné que la RichHtmlField dans le navigateur utilise CSS pour implémenter ses styles, vous pouvez créer vos propres styles qui soit cohérentes avec la personnalisation de votre site, et vous pouvez ensuite apporter ces styles disponibles sur le ruban pour les auteurs de contenu à utiliser. Pour apporter des modifications mineures aux styles par défaut, vous pouvez copier un style existant à partir de HtmlEditorStyles.css à votre feuille de style qui est référencée par la mise en page et modifiez puis ce style en modifiant les propriétés CSS et valeurs (mais pas le sélecteur). Vous pouvez également masquer les styles par défaut à partir du ruban par les copier dans votre feuille de style, puis sur paramètres display:none.

Pour implémenter les styles personnalisés, vous pouvez également créer une feuille de style à partir de zéro en modifiant la propriété PrefixStyleSheet pour l'extrait de code RichHtmlField. Par défaut, cette propriété est définie à ms-rte, et les styles dans la feuille de style par défaut HtmlEditorStyles.css chaque commencent par ce préfixe par exemple :

H1. ms-rteElement-H1
{
  -ms-name:"Heading 1";
  -ms-element:"true";
}

Lorsque vous modifiez la valeur de la propriété PrefixStyleSheet, aucun des styles ms-rte existantes sont disponibles dans l'éditeur HTML enrichi, et uniquement les styles que vous créez qui utilisent le nouveau préfixe sont accessibles aux créateurs de contenu. Cela signifie que si vous souhaitez utiliser certaines des styles par défaut, ils doivent être copiés dans votre feuille de style et modifiés afin qu'ils utilisent le nouveau préfixe.

Remarque

[!REMARQUE] La propriété PrefixStyleSheet est définie par chaque champ de page RichHtmlField, mais plusieurs champs de page peuvent utiliser la même valeur pour cette propriété. Par conséquent, si plusieurs mises en page faire référence à la même feuille de style, il est possible pour plusieurs RichHtmlFields sur ces mises en page avoir le même préfixe de style et les mêmes styles de référence.

Pour définir une nouvelle liste de styles pour un RichHtmlField

Accédez à votre site de publication.
Dans le coin supérieur droit de la page, sélectionnez Paramètres, puis Gestionnaire de conception.
Dans le gestionnaire de conception, dans le volet de navigation de gauche, sélectionnez Modifier les mises en page.
Choisissez la mise en page dans laquelle le champ de page RichHtmlField résidera.
Dans le coin supérieur droit de l'aperçu côté serveur, cliquez sur Galerie d'extraits de code.
Sur le ruban, sélectionnez Les champs de Page, puis un champ de page du type RichHtmlField.
Dans la grille des propriétés, développez la section divers et ensuite modifier la propriété PrefixStyleSheet sur une valeur autre que ms-rte par exemple, modifiez la valeur pour être customstyle.

Importante

Valeur de cette propriété doit être entièrement en minuscule.
Sélectionnez Update (Mettre à jour).
Sur le côté gauche de la galerie d'extraits de code, choisissez Copier dans le Presse-papiers.
Dans le lecteur réseau mappé sur votre ordinateur, ouvrez la disposition de la page HTML dans votre éditeur HTML.

Remarque

Pour plus d’informations, voir Guide pratique pour mapper un lecteur réseau à la galerie de pages maîtres SharePoint.
Dans la mise en forme de la page HTML, collez l'extrait de code HTML à l'intérieur de PlaceHolderMain.
Enregistrez la disposition de la page HTML. Les modifications apportées au fichier HTML sont synchronisées sur la mise en page de la page .aspx associé.

À ce stade, si un auteur de contenu crée ou modifie une page en fonction de cette mise en page, aucun style n'est disponibles sur le ruban de l'éditeur HTML, car ce champ de page spécifique utilise uniquement les styles qui commencent par le nouveau préfixe customstyle, mais ces styles n'ont pas encore été définies.
Sur le serveur, accédez à l'emplacement suivant et ouvrir HtmlEditorStyles.css :

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\1033\STYLES

Il est utile d'afficher les styles par défaut, de comprendre comment ils sont écrits et éventuellement réutiliser certains d'entre eux en copiant sur votre feuille de style, puis en modifiant les. Si vous faites cela, remplacez le préfixe de ms-rte par défaut par votre propre préfixe.

Importante

[!IMPORTANTE] Ne modifiez pas la feuille de style par défaut, HtmlEditorStyles.css. Cette feuille de style fournit les styles pour chaque RichHtmlField dans la batterie de serveurs. En outre, les mises à jour de service ou une mise à niveau peut remplacer ce fichier, vous perdrez toutes les modifications à l'origine.
Dans votre feuille de style, créez une liste de nouveaux styles qui commencent par le nouveau préfixe.

Par exemple, si customstyle est le nouveau préfixe, votre feuille de style peut contenir le style suivant.
```
H2.customstyleElement-H2
{
  -ms-name:"Heading 2";
  -ms-element:"true";
}
customstyleElement-H2
{
  font-weight: bold;
  font-family: Cambria;
  font-size: 16pt;
}
```
Pour plus de clarté, le nom de classe et le nom du style tel qu'il apparaît dans le ruban sont définies séparément à partir des propriétés de style. Dans cet exemple, H2 est le sélecteur d'élément pour le style et customstyleElement-H2 est le nom de classe du style. Le nom de la classe comporte deux parties : le préfixe que vous avez spécifié pour ce champ de page customstyle et Element Spécifie que ce style figurera dans la section d'Éléments de Page de la galerie de Styles dans le ruban de l'éditeur HTML. La propriété -ms-name définit le nom complet qui s'affiche des auteurs de contenu dans la galerie de Styles.

SharePoint mappe un style à un menu ou une commande dans le ruban d'analyse immédiatement après le préfixe du nom de la classe puis cliquez sur une de ces chaînes :
- Element: section d'éléments de la Page de la galerie de Styles
- Style: la section Styles de texte la galerie de Styles
- FontSize: menu de la taille de police
- ThemeFontFace: menu de la police
- ForeColor: menu de la couleur de police
- BackColor: menu de la couleur de surbrillance
- Image: menu de l'Image
- Table: menu du tableau
- Position: l'alignement des boutons dans le groupe paragraphe
Pour plus d’informations sur l’emplacement où les styles d’une mise en page doivent résider, voir Guide pratique pour créer une mise en page dans SharePoint.

Partager via