Comment créer un fichier d’aperçu de page maître dans SharePoint

Découvrez comment créer des fichiers d'aperçu de page maître utilisés dans les thèmes SharePoint pour afficher un aperçu des composants du thème sélectionné.

L'Assistant Modifier l'apparence est le point d'entrée vers les thèmes SharePoint. La bibliothèque de présentations est la première page de l'Assistant Modifier l'apparence et présente une vue miniatures des conceptions disponibles. Les utilisateurs sélectionnent une conception pour leur site, puis passent à la page suivante dans laquelle ils peuvent personnaliser la conception. Les utilisateurs peuvent ensuite afficher le site avant d'appliquer la conception à celui-ci. Le fichier d'aperçu de page maître est utilisé pour générer les images miniatures et d'aperçu. Si une page maître ne dispose pas de fichier d'aperçu correspondant, elle ne peut pas être utilisée dans l'expérience de thème.

Pour plus d’informations, voir Vue d’ensemble des thèmes pour SharePoint.

Concepts de base à connaître pour utiliser des fichiers d’aperçu de page maître

Le tableau 1 répertorie les articles qui peuvent vous aider à comprendre les concepts de base pour utiliser des fichiers d’aperçu de page maître.

Tableau 1. Concepts de base pour utiliser des fichiers d’aperçu de page maître

Qu'est-ce qu'un fichier d'aperçu de page maître ?

Les fichiers d'aperçu de page maître (fichiers avec l'extension .preview) sont des fichiers avec un format spécial qui disposent de sections de palette de couleurs par défaut, de jeu de polices par défaut et de code HTML tokenisé. Le fichier d'aperçu de page maître doit utiliser le même nom (sans l'extension) que la page maître correspondante. Par exemple, si vous disposez d'une page maître nommée article.master, le fichier d'aperçu de page maître correspondant porte le nom article.preview. Les pages maîtres et les aperçus de page maître sont stockés dans la galerie de pages maîtres.

Un fichier d'aperçu de page maître est structuré de la manière suivante :

Default color palette
[SECTION]
Default font scheme
[SECTION]
CSS
[SECTION]
HTML

Dans le fichier d'aperçu de page maître :

• La palette de couleurs par défaut est le fichier .spcolor de la galerie de thèmes (http:// SiteColltionName/_catalogs/theme/15/) que vous souhaitez utiliser par défaut. La palette de couleurs par défaut correspond aux couleurs utilisées dans la page maître dans son état par défaut. Autrement dit, avant qu’un utilisateur n’ait sélectionné une palette de couleurs dans l’Assistant Modifier l’apparence .

• Le jeu de polices par défaut est le fichier .spfont dans la galerie de thèmes (http:// SiteCollectionName/_catalogs/theme/15/) que vous souhaitez utiliser par défaut. Le jeu de polices par défaut correspond aux polices utilisées dans la page maître dans son état par défaut. Autrement dit, avant qu’un utilisateur ait sélectionné un modèle de police dans l’Assistant Modifier l’apparence .

• L'élément CSS est la section qui contient les feuilles de style en cascade (CSS). Toutes les classes CSS doivent être précédées de l'élément[ID]. L'exemple suivant montre une partie de la section CSS dans un fichier d'aperçu de page maître.

  [ID] #dgp-pageContainer
  {
      background-color: [T_THEME_COLOR_PAGEBACKGROUND];
      color: [T_THEME_COLOR_BODYTEXT];
      width: 100%;
      height:100%;
      background-image: url('[T_IMAGE]');
      background-size: cover;
      font-family: [T_BODY_FONT];
  }
  

• L'élément HTML est la section de code HTML qui définit la structure HTML de l'aperçu.

Les jetons sont utilisés dans l'ensemble du fichier d'aperçu de page maître. Il s'agit de valeurs de chaîne qui seront remplacées par du texte, des valeurs de couleur ou des valeurs de police dans l'aperçu généré. Les sections suivantes décrivent les jetons disponibles et la façon dont ils sont utilisés.

Jetons divers

Les jetons divers sont remplacés dans l'aperçu par des valeurs de hauteur et de largeur spécifiées.

Tableau 2. Jetons divers

Jetons de couleur

Les jetons de couleur sont remplacés par des valeurs de couleur dans l'image d'aperçu. Le tableau 3 décrit deux formats de jetons de couleur. Remplacez ColorSlot par le nom d’annotation de l’emplacement de couleur. Les jetons de couleur doivent être en majuscules (par exemple, [T_THEME_COLOR_PAGEBACKGROUND]). Pour consulter la liste des jetons de couleur disponibles, voir Mappage des emplacements de couleur dans Palettes de couleurs et polices dans SharePoint.

Tableau 3. Jetons de couleur

Jetons de police

Les jetons de police sont remplacés par des valeurs de police dans l'image d'aperçu.

• [T_ _SlotName__FONT]

Remplacez SlotName par le nom de l’emplacement de police. Les jetons de police doivent être en majuscules (par exemple, [T_BODY_FONT]). Pour afficher la liste des emplacements de police et leur emplacement d’utilisation dans une page, voir la section Emplacements de police dans Palettes de couleurs et polices dans SharePoint.

Jetons de contenu de texte

Les jetons répertoriés dans le tableau 4 sont utilisés dans la section HTML du fichier d'aperçu de page maître. Ils sont remplacés par des exemples de texte dans l'image d'aperçu dans la bibliothèque de présentations. L'exemple de texte apparaît dans la même langue que le reste du site.

Tableau 4. Jetons de contenu de texte

Figure 1. Thème préinstallé avec un exemple de texte

Créer un fichier d’aperçu de page maître

Pour créer un fichier d’aperçu de page maître, utilisez un aperçu de page maître existant comme point de départ.

Création d'un aperçu de page maître

1. Faites une copie d'un aperçu de page maître. SharePoint inclut les éléments oslo.preview et seattle.preview.

2. Renommez la copie de l'aperçu de page maître afin qu'elle porte le même nom que la page maître correspondante. Par exemple, si votre page maître s'appelle article.master, renommez l'aperçu de page maître article.preview.

3. Utilisez un éditeur HTML pour modifier le fichier d'aperçu de page maître. Mettez à jour le fichier pour qu'il reflète la disposition et l'apparence de votre page maître.

   Conseil

   Les valeurs de dimension sont spécifiées sous forme de pourcentages dans le fichier d’aperçu de page maître. L’exemple suivant présente une méthode de conversion d’une mesure absolue (pixels) en une mesure relative (pourcentage). Supposons que vous disposez d'une taille de navigateur de 1 024 x 768. Si la page maître a un élément de hauteur de 32 pixels et que l'élément parent est le corps de la page, vous obtenez le pourcentage en divisant l'élément de hauteur par la hauteur du navigateur. La mesure relative est donc 4 % (32/768).

4. Téléchargez le fichier d'aperçu de page maître dans la galerie de pages maîtres.

5. Utilisez l'Assistant Modifier l'apparence pour tester l'aperçu de page maître avec le contenu de votre site.

   Remarque

   Vous pouvez également créer une conception qui utilise la nouvelle page maître en ajoutant un élément à la liste Présentations composées. La conception sera disponible dans la bibliothèque de présentations (première page de l’assistant Modifier l’apparence). Pour plus d'informations, consultez la procédure Déployer un thème à l'aide de l'interface utilisateur de l'article Procédure : Déployer un thème personnalisé dans SharePoint.

6. Répétez les étapes 3 à 5 si nécessaire.

Voir aussi

• Développer la conception de site dans SharePoint
• Procédure : Déployer un thème personnalisé dans SharePoint
• Palettes de couleurs et polices dans SharePoint
• Blog de l'équipe SharePoint : Affichez votre style avec les thèmes SharePoint