Personnaliser des extraits de code à l’aide de CSS dans SharePoint
Importante
Cette option d’extensibilité est disponible uniquement pour des expériences SharePoint classiques. Vous ne pouvez pas l’utiliser avec des expériences modernes dans SharePoint Online, telles que des sites de communication. Nous vous déconseillons d’utiliser l’expérience classique ou les techniques de marque.
Pour appliquer un style un extrait de code, vous remplacez les styles par défaut avec CSS personnalisé. Vous pouvez utiliser l'ID de CSS et des sélecteurs d'élément de remplacer tous les styles par défaut appliqués à des éléments, ou vous pouvez utiliser un éditeur HTML ou un outil tel que les outils de développement F12 dans Internet Explorer pour identifier et remplacer les styles par défaut spécifique.
Présentation des extraits de style avec CSS
Une fois que vous convertissez une page maître HTML ou créez une mise en forme de la page HTML, vous pouvez afficher un aperçu de cette page dans l'aperçu côté serveur du Gestionnaire de conception. À partir de la page d'aperçu, vous pouvez accéder à la galerie d'extraits de code et puis copiez extraits de code dans votre fichier HTML. Un extrait de code est une représentation sous forme de code HTML d'un contrôle de SharePoint, par exemple un contrôle de navigation supérieure ou une zone de recherche.
Une fois que vous copiez un extrait de code dans le fichier HTML dans votre lecteur mappé et enregistrez les modifications, vous pouvez actualiser l'aperçu côté serveur du fichier HTML pour voir comment le contrôle s'affiche. Extraits de code contiennent des balises qui fournit un aperçu au moment du design dans votre éditeur HTML de choix, mais vous ne devez pas modifier ce balisage, car il est en lecture seule et n'affecte la façon dont le contrôle s'affiche sur le serveur. En revanche, l'aperçu côté serveur affiche un aperçu fidèle des données live, si elle est disponible par exemple, un contrôle de navigation affichera structure de navigation actuelle du site avec des données en direct à partir de votre source de données, par exemple un magasin de termes de SharePoint pour la navigation gérée.
Remarque
Pour plus d’informations sur le mappage d’un lecteur réseau, voir Guide pratique pour mapper un lecteur réseau à la galerie de pages maîtres SharePoint.
Par défaut, les extraits héritent leurs styles des feuilles de style SharePoint telles que corev15.css. Pour appliquer un style un extrait de code, vous devez remplacer les styles par défaut avec votre CSS personnalisés. Pour ce faire, vous devez :
Utilisez CSS ID et des sélecteurs d'élément de remplacer complètement les styles par défaut appliqués aux éléments que vous avez choisies.
Utilisez un outil basé sur le navigateur telles que les outils de développement F12 dans Internet Explorer pour inspecter les styles par défaut dans l'aperçu côté serveur dans le Gestionnaire de conception et vous pouvez ensuite identifier les styles spécifiques à remplacer.
Utiliser les fonctionnalités de votre éditeur HTML pour inspecter les styles par défaut dans l'aperçu en lecture seule d'un extrait de code et vous pouvez ensuite identifier les styles spécifiques à remplacer.
Pour identifier les styles par défaut en utilisant les outils de développement dans Internet Explorer, vous devez utiliser l'aperçu côté serveur dans le Gestionnaire de conception pour afficher votre page maître HTML ou la mise en page, appuyez sur la touche F12 pour démarrer les outils de développement, choisissez le menu Rechercher, puis cliquez sur élément Select par. Cela vous permet de cliquer sur des éléments dans la page et de voir exactement quels styles de remplacer en ajoutant CSS à la feuille de style personnalisée que votre fichier HTML master page ou des liens de mise en page.
Les feuilles de style SharePoint par défaut contiennent différents styles, ce qui peut rendre difficile l’identification des styles spécifiques. Comme alternative aux outils basés sur navigateur et en fonction de votre éditeur HTML, vous pouvez plus facile à copier l'extrait de code à partir de la galerie d'extraits de code dans votre fichier HTML et ensuite utiliser l'éditeur HTML pour identifier les styles. Dans la galerie d'extraits de code, lorsque vous choisissez mise à jour, puis le Copier dans le Presse-papiers, l'extrait de code contient un aperçu HTML de cet extrait. Une fois que vous copiez l'extrait de code dans votre fichier HTML, vous pouvez inspecter les styles utilisés dans l'aperçu en lecture seule contenu dans l'extrait de code. De cette manière, vous analysez un plus petit sous-ensemble des styles par défaut.
En fonction de l'extrait de code et l'ampleur de votre personnalisation, vous souhaiterez peut-être utiliser CSS ID et des sélecteurs d'élément complètement remplacer tous les styles par défaut, au lieu de choisir des styles par défaut spécifique à remplacer. L'exemple suivant montre comment utiliser cette méthode pour appliquer des styles personnalisés à l'extrait de navigation supérieure.
Example : application d’un style à l’extrait de navigation supérieure
L'extrait de navigation supérieure étant un des extraits de code couramment utilisées, il est également un des extraits de code personnalisées plus fréquemment. Dans un site SharePoint, vous pouvez sélectionner une option pour utiliser la navigation gérée, afin que le magasin de termes devienne la source de données pour l’extrait de navigation supérieure. De cette manière, vous pouvez utiliser l'outil de gestion du magasin de termes dans Les paramètres de Site pour ajouter ou supprimer des termes de navigation et gérer la taxonomie de navigation affiché par l'extrait de Navigation supérieure.
Dans cet exemple, le site utilise la navigation gérée, afin que le contrôle de navigation supérieure extrait ses entrées d'un magasin de termes. Il existe un seul niveau de lanceurs qui s'affichent lorsque vous placez sur un terme de navigation de niveau supérieur, tels que des ordinateurs. Cette section montre comment ces styles personnalisés remplacent les styles de SharePoint par défaut.
Exemple 1 : élément <div> de navigation issu du fichier de la maquette HTML
Avant d'utiliser le Gestionnaire de conception, lorsque vous concevez le maquette HTML de votre page maître, vous allez probablement utiliser HTML et CSS pour concevoir un élément de navigation supérieure fonctionnel. Cet exemple de code HTML utilise une structure de base pour la navigation supérieure : un élément <div> avec un ID et un nom de classe, une liste pour les entrées de navigation de niveau supérieur et une liste imbriquée pour chaque sous-menu flottant.
<div id="navigation" class="msax-Navigation">
<ul>
<li><a href="#">Cameras</a>
<ul>
<li><a href="#">Camcorders</a></li>
<li><a href="#">Digital cameras</a></li>
<li><a href="#">Disposable cameras</a></li>
<li><a href="#">Film cameras</a></li>
</ul>
</li>
<li><a href="#">Computers</a>
<ul>
<li><a href="#">Desktops</a></li>
<li><a href="#">Laptops</a></li>
<li><a href="#">Netbooks</a></li>
<li><a href="#">Tablets</a></li>
</ul>
</li>
<li><a href="#">Media</a>
<ul>
<li><a href="#">Movies</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">TV shows </a></li>
<li><a href="#">Video games </a></li>
</ul>
</li>
<li></li>
</ul>
</div>
Exemple 2 : élément <div> de navigation avec style CSS personnalisé
Pour remplacer les styles SharePoint par défaut, dans le fichier HTML de maquette, incluez un lien standard vers votre fichier (<link rel="stylesheet" type="text/css" href="URLtoYourCustomCSSFile"/>CSS ) juste avant la balise /head> fermante<.
Dans ces exemples de code HTML et CSS, notez ce qui suit :
Les entrées de navigation sont stylisées en utilisant le format
.msax-Navigation ul liau lieu d’appliquer des classes directement aux <balises ul> ou <li> .Les styles utilisent la syntaxe
.msax-Navigation ul liau lieu de , car le balisage d’extrait.msax-Navigation ul>lide code peut contenir des balises div> intermédiaires< entre les éléments sélectionnés.La maquette HTML contient un élément <li></li> vide en tant que dernière entrée de l’élément <ul> de niveau supérieur. Il s'agit car, avec navigation gérée allumée, SharePoint ajoute une commande Modifier les liaisons en tant que l'entrée finale pour la navigation de niveau supérieur et le site final ne doit généralement pas afficher cette option. L'exemple de CSS utilise
.msax-Navigation ul li:last-childpour sélectionner cette entrée et de définir la valeur d'affichage ànone. L’élément <li></li> vide dans le fichier HTML est un substitut temporaire pour l’entrée Modifier les liens par défaut. Notez la présence de cet élément <li> final si votre site utilise la navigation gérée et votre CSS utilise des sélecteursli:last-child.
.msax-Navigation {
margin: 10px 0px; top: 0px; position: relative;
z-index:200;
}
.msax-Navigation a {
margin: 0px; padding: 0px; border: 0px currentColor;
}
.msax-Navigation ul {
list-style: none; margin: 0px; padding: 0px; font-size: 16px; z-index:200;
}
.msax-Navigation ul li {
padding: 10px; display: inline-block; position: relative; z-index:200;
}
.msax-Navigation ul li:first-child {
margin: 0px;
}
.msax-Navigation ul li:last-child {
margin: 0px; padding: 0px; display: none;
}
.msax-Navigation ul li a.selected, .msax-Navigation ul li.selected {
background-color: rgb(58,60,62) !important;
color:rgb(255,255,255) !important;
}
.msax-Navigation ul li a {
width: 100%; color: rgb(58,60,62); font-size: 16px;
}
.msax-Navigation ul li:hover {
background-color: rgb(58,60,62);
color:rgb(255,255,255) !important;
}
.msax-Navigation ul li a:hover {
text-decoration: none;
color:rgb(255,255,255) !important;
}
.msax-Navigation li ul {
left: 0px; top: 35px; display: none; position: absolute; min-width: 100px; box-shadow: 5px 5px 10px 0px rgb(0,0,0); background-color: rgb(58,60,62);
}
.msax-Navigation li:hover ul {
display: block; z-index: 150;
}
.msax-Navigation li li {
margin: 0px; padding: 5px 10px 5px 0px; border-top-width: 0px; display: block; min-width: 100px;
}
.msax-Navigation li li:last-child {
margin: 0px; padding: 5px 10px 5px 0px; border-top-width: 0px; display: block; min-width: 100px;
}
.msax-Navigation li li a {
width: 100%; padding-left: 10px; display: block; color:rgb(255,255,255) !important;
}
.msax-Navigation li li:hover {
background-color: rgb(120, 120, 120);
}
Exemple 3 : aperçu en lecture seule de l’extrait de navigation supérieure
Une fois vos styles personnalisés sont implémentés dans votre maquette HTML et que vous disposez d'un élément de navigation supérieure fonctionnel, suivez la procédure habituelle :
Mapper un lecteur réseau.
Télécharger vos fichiers de conception.
Convertir le fichier HTML en page maître
Afficher un aperçu et corriger les éventuels problèmes.
Ajoutez l'extrait de navigation supérieure à la page maître HTML à l'aide de la galerie d'extraits de code.
Dans la galerie d'extraits de code, lorsque vous configurez les propriétés de l'extrait de navigation supérieure, notez ce qui suit :
Dans la section Important dans la partie supérieure, n'apportez aucune modification à la propriété CssClass.
N'apportez aucune modification à propriétés sous le titre AjaxDelta parce que ces propriétés sont liées aux propriétés MDS utilisées par SharePoint pour convertir l'extrait de code HTML dans l'extrait de code ASP.NET correspondante. Cela s'applique à n'importe quel extrait de code, et pas seulement l'extrait de navigation supérieure.
Si vous projetez de remplacer les styles de SharePoint par défaut, dans la galerie d'extraits de code, dans la section Behavior sous AspMenu (il peut exister plusieurs sections Behavior si l'extrait de code contient plus d'un contrôle, tel qu'un contrôle de délégué), la valeur ClientIDModeStatic. Si vous laissez ClientIDMode la valeur par défaut définissant, Inherit, CSS appliqué l'extrait de code classes change selon l'ordre des extraits de code dans la page. Pour plus d’informations sur ClientIDMode, consultez Propriété Control.ClientIDMode.
Par exemple, par défaut, le contrôle de navigation supérieure utilise les attributs ID SharePoint par défaut tels que zz5_TopNavigationMenu et zz6_RootAspMenu. En modifiant ClientIDMode à Static, vous permettez à utiliser ces numéros d'identification par défaut comme sélecteurs dans votre propre CSS pour substituer les styles de SharePoint par défaut.
Certaines propriétés sont déjà configurées pour émettre l'extrait de navigation supérieure plus facile de personnalisation en éliminant les comportements CSS et JavaScript dynamiques par défaut par exemple, par défaut UseSimpleRendering est défini sur True et MaximumDynamicDisplayLevels est définie sur 0. Pour plus d’informations sur les propriétés spécifiques de l’extrait de code de navigation supérieur, consultez Propriétés AspMenu et Propriétés de menu.
Une fois que vous avez configuré l’extrait de navigation supérieure dans la galerie d’extraits de code, sélectionnez Mettre à jour, puis Copier dans le Presse-papiers. Dans la page maître HTML, supprimez le contenu de la navigation <div id="navigation" class="msax-Navigation"> qui contient votre contrôle de maquette (supprimez uniquement le contenu de la <balise div>, et non la <balise div> elle-même), puis copiez l’extrait de code dans la div> de navigation<. Si nécessaire, repositionnez la div> de navigation<, généralement juste après le début de la <div id="s4-bodyContainer"> balise, mais avant la <div> contenant PlaceHolderMain.
Pour faciliter la comparaison avec le code HTML de l’élément <div> de navigation ci-dessus, l’exemple suivant contient la partie <div> de navigation de l’extrait de navigation supérieure. Notez qu'il ne s'agit pas de l'extrait de code entière.
<div id="zz7_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox">
<ul id="zz9_RootAspMenu" class="root ms-core-listMenu-root static">
<li class="static">
<a accesskey="1" class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Cameras</span></span></a><ul class="static">
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras/camcorders" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Camcorders</span></span></a></li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras/digital-cameras" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Digital cameras</span></span></a></li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras/disposable-cameras" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Disposable cameras</span></span></a></li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras/film-cameras" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Film cameras</span></span></a></li>
</ul>
</li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Computers</span></span></a><ul class="static">
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers/desktops" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Desktops</span></span></a></li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers/laptops" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Laptops</span></span></a></li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers/netbooks" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Netbooks</span></span></a></li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers/tablets" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Tablets</span></span></a></li>
</ul>
</li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Media</span></span></a><ul class="static">
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media/movies" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Movies</span></span></a></li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media/music" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Music</span></span></a></li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media/tv-shows" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">TV shows</span></span></a></li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media/video-games" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Video games</span></span></a></li>
</ul>
</li>
<li class="static ms-verticalAlignTop ms-listMenu-editLink ms-navedit-editArea">
<span id="zz7_TopNavigationMenu_NavMenu_Edit" class="ms-navedit-editSpan">
<a id="zz7_TopNavigationMenu_NavMenu_EditLinks" class="ms-navedit-editLinksText" href="#" onclick="g_QuickLaunchMenu = null; EnsureScriptParams('quicklaunch.js', 'QuickLaunchInitEditMode', 'zz7_TopNavigationMenu', 2, 0, 0, ''); cancelDefault(event); return false;">
<span class="ms-displayInlineBlock">
<span class="ms-navedit-editLinksIconWrapper ms-verticalAlignMiddle">
<img class="ms-navedit-editLinksIcon" src="/_layouts/15/images/spcommon.png?rev=23" /></span><span class="ms-metadata ms-verticalAlignMiddle">Edit Links</span></span></a><span id="zz7_TopNavigationMenu_NavMenu_Loading" class="ms-navedit-menuLoading ms-hide"><a id="zz7_TopNavigationMenu_NavMenu_GearsLink" href="#" onclick="HideGears(); return false;" title="This animation indicates the operation is in progress. Click to remove this animated image."><img id="zz7_TopNavigationMenu_NavMenu_GearsImage" src="/_layouts/15/images/loadingcirclests16.gif?rev=23" /></a></span><div id="zz7_TopNavigationMenu_NavMenu_ErrorMsg" class="ms-navedit-errorMsg">
</div>
</span></li>
</ul>
</div>
Au lieu d'utiliser uniquement les styles personnalisés, vous pouvez avoir un scénario dans lequel vous souhaitez remplacer simplement un style spécifique. Par exemple, pour masquer le nœud de Modifier les liaisons, vous pouvez créer un style personnalisé qui utilise l' id de valeur par défaut zz7_TopNavigationMenu_NavMenu_Edit pour définir le paramètre d'affichage en none.