Procédure : personnaliser les styles

Dans de nombreux cas, un concepteur souhaite conserver l'apparence d'une page Web en appliquant certains styles personnalisés au contenu de la page. Ce faisant, il devient possible en modifiant la définition des feuilles de style de changer l'apparence de la page dès à présent sans affecter le contenu de la page ultérieurement. L'éditeur HTML Microsoft Office SharePoint Server 2007 prend en charge la possibilité pour l'auteur de la page d'appliquer des styles personnalisés au contenu en utilisant une liste de styles prédéfinis fournie par le concepteur.

Par défaut, l'éditeur HTML présente le jeu de styles par défaut, mais un concepteur de mise en page peut le remplacer en ajoutant des références aux feuilles de style dans la mise en page. Si l'éditeur HTML détecte de nouvelles classes de feuilles de style en cascade dont les noms portent le préfixe ms-rteCustom-XXXX, où XXXX est le nom complet des classes uniques aux auteurs de page, il affiche le nouveau jeu de styles personnalisés au lieu du jeu par défaut.

L'éditeur HTML détecte les classes spécifiques à certaines balises et les affiche pour l'utilisateur uniquement si le contenu spécifié est sélectionné. Le menu déroulant affiche toujours les styles qui ne sont pas définis pour une balise spécifique. Par exemple, un concepteur de mise en page peut souhaiter rendre les styles suivants disponibles pour l'auteur de la page en utilisant un fichier CSS inclus dans la mise en page. Lorsque l'auteur de la page modifie une page créée à partir de la mise en page, il peut utiliser le bouton Sélectionner de la barre d'outils de l'éditeur HTML pour mettre en surbrillance une liste sur la page, cliquer sur le bouton Style, choisir le style de liste illustré ici et l'appliquer à la liste sélectionnée.

Ol.ms-rteCustom-RomanNumberList {
    font-family:Times New Roman; font-size:10pt; color:#000000; 
    text-indent:0; text-align:left; list-  style-type:upper-roman; 
    margin-left:30; margin-right:10; padding-left:10px; margin-top:1; 
    text-transform:capitalize

Vous pouvez spécifier un préfixe de nom de classe CSS unique pour chaque contrôle de champ HTML de publication de manière à présenter plusieurs styles personnalisés pour les différentes sections de la page.

Dans la mise en page, lorsque le contrôle RichHTMLField est spécifié, vous pouvez remplacer la propriété PrefixStyleSheet. Par exemple, si vous spécifiez :

<PublishingWebControls:RichHtmlField id="Content" FieldName="PublishingPageContent" runat="server" PrefixStyleSheet-"PageContentStyle"/>

L'éditeur HTML recherche les classes CSS avec le préfixe PageContentStyleCustom dans la syntaxe CSS associée. S'il détecte des styles personnalisés qui contiennent ce préfixe, il affiche les styles dans la liste déroulante Styles selon la sélection active.

Personnalisation des styles de Lien de synthèse, Sommaire et Contenu par les composants WebPart Requête

Le contrôle de champ Lien de synthèse et le composant WebPart Requête de contenu présentent des liens créés sur votre page. Vous pouvez baser ces liens sur un jeu de styles disponibles pour le site Web.

Les composants WebPart Sommaire et Requête de contenu affichent des vues de navigation pilotées par les données et des requêtes de contenu du site, respectivement. Vous pouvez aussi styliser les éléments et en-têtes de groupe dans ces composants WebPart de façon à ce qu'ils utilisent un jeu de styles disponibles pour le rendu.

Microsoft Office SharePoint Server 2007 utilise des feuilles de style XSL pour afficher ces composants WebPart. Vous pouvez personnaliser et étendre ces styles pour qu'ils correspondent à la couleur et personnalisation de votre site Web.

Le tableau suivant montre le mappage de fichiers de feuille de style XSL et les composants WebPart correspondant.

Procédures

Pour rechercher et modifier les styles Lien de synthèse

1. Accédez à la page d'accueil de votre site Web et cliquez sur Afficher tout le contenu du site.

2. Cliquez sur Bibliothèque de styles.

3. Cliquez sur Feuilles de styles XSL. La liste des fichiers XSL disponibles dans la bibliothèque de styles pour les trois types de composant WebPart s'affiche.

4. Pour afficher un exemple, ouvrez le fichier ItemStyle.xsl, qui contrôle l'affichage des éléments des composants WebPart Lien de synthèse et Requête de contenu, pour le modifier. Ensuite, examinez la structure et le contenu du fichier.

   • Le modèle XSL est un fichier HTML avec quelques variables (@ImageURL, @LinkURL, @Description, etc.).

   • Pour afficher ou masquer les données Lien de synthèse, ajoutez ou supprimez ces variables.

   • Vous pouvez aussi choisir de modifier l'affichage de ces variables par le code HTML voisin.

   • Chaque modèle XSL est mappé sur un style pouvant être choisi par l'auteur.

   • La première section de l'échantillon de code comprend des modèles XSL appelés par Office SharePoint Server 2007, auxquels des données sont transmises et à partir desquels les versions modifiées des données sont obtenues.

   • Cette section contient le HTML rendu avec le résultat de la fonction.

   <xsl:template name="Default" match="*" mode="itemstyle">
   // This section includes a set of functions, or xsl templates, which MOSS 2007 calls, passes data into, and gets modified versions of the data from.  The product does this primarily to improve security.
       <xsl:variable name="SafeLinkUrl">
           <xsl:call-template name="OuterTemplate.GetSafeLink">
               <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
           </xsl:call-template>
       </xsl:variable>
       <xsl:variable name="SafeImageUrl">
           <xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
               <xsl:with-param name="UrlColumnName" select="'ImageUrl'"/>
           </xsl:call-template>
       </xsl:variable>
       <xsl:variable name="DisplayTitle">
           <xsl:call-template name="OuterTemplate.GetTitle">
               <xsl:with-param name="Title" select="@Title"/>
               <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
           </xsl:call-template>
       </xsl:variable>
       <xsl:variable name="LinkTarget">
           <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
       </xsl:variable>
   // Includes the rendered HTML with the results of the functions.
       <div id="linkitem" class="item">
           <xsl:if test="string-length($SafeImageUrl) != 0">
               <div class="image-area-left"> 
                   <a href="{$SafeLinkUrl}" target="{$LinkTarget}">
                       <img class="image" src="{$SafeImageUrl}" alt="{@ImageUrlAltText}" />
                   </a>
               </div>
           </xsl:if>
           <div class="link-item">
               <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
               <a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}">
                   <xsl:value-of select="$DisplayTitle"/>
               </a>
               <div class="description">
                   <xsl:value-of select="@Description" />
               </div>
           </div>
       </div>
   </xsl:template>
   

Pour créer un style

1. Répétez les étapes 1 à 4 de la procédure précédente pour accéder au fichier ItemStyle.xsl.

2. Ouvrez le fichier ItemStyle.xsl et ajoutez le code suivant :

   <xsl:template name="MyCustomStyle" match="Row[@Style='MyCustomStyle']" mode="itemstyle">
   </xsl:template>
   

3. Ajoutez si nécessaire le nom du modèle, des variables, des informations sur les paramètres et d'autres détails entre les balises d'ouverture et de fermeture dans le fichier ItemStyle.xsl.

4. Ajoutez le code HTML et les instructions XSL appropriées pour afficher correctement les variables dans le composant WebPart.

Voir aussi

Autres ressources

Procédure : personnaliser le contrôle de champ de l'éditeur HTML