SharePoint Online Branding

Le Branding est un sujet très important à considérer quand il s’agit de construire votre écosystème de travail numérique. Dans cet article, nous couvrirons les principaux aspects du Branding des sites SharePoint Online .

Voici un tableau récapitulatif des sujets abordés:

Nom, logo et description
Thèmes
Navigation et Header
Pied de page

Nom, logo et description

Commençons par les plus évidentes, lorsque vous créez un site dans SharePoint online, vous devrez lui donner un Nom et une description. Vous pouvez changer ces éléments quand vous voulez, mais gardez à l’esprit que changer le titre du site ne changera pas l’Url. Changer l’URL d’un site est un véritable défi, cela a été annoncé lors de la conférence SharePoint 2019 et sera bientôt disponible . La description est également importante pour la découverte de contenus. Lorsque vous naviguez dans l’environnement Office 365, les utilisateurs verront cette description sous le nom de votre site.
Vous pouvez également mettre un logo pour votre site, ce logo sera affiché en haut de votre site mais aussi a d’autres endroits de l’écosystème. Notez que vous pouvez mettre un logo avec un fond transparent , et non carré
Vous pouvez configurer ces éléments quand vous créez un site et, par la suite, dans le menu « Informations du site » :

Pour voir à quoi ressemble notre site ailleurs dans l’écosystème Office 365, voici un exemple de résultats de recherche:

Maintenant que vous avez donné un nom, une description et un logo à votre site, jetons un coup d’oeil à quelques configurations plus visuelles.

Thèmes

SharePoint Online est livré avec des thèmes intégrés que vous pouvez personnaliser dans le menu « modifier l’apparence » dans l’engrenage de configuration du site et thème

Thèmes intégrés

Une fois que vous cliquez sur un thème, vous verrez les thèmes intégrés que vous pouvez utiliser et personnaliser. Voici un lien vers la documentation des thèmes de Microsoft. Vous pouvez commencer à partir de ces thèmes et personnaliser la couleur principale et la couleur d’accentuation .

Notez que vous pouvez également définir une couleur d’arrière-plan pour les éléments de mise en page. La couleur de fond disponible provient de votre thème, du blanc à votre couleur d’accent. Cette option se trouve dans les paramètres éditer les paramètres d’un élément de mise en page lorsque vous éditez une page :

Les thèmes intégrés sont un bon point de départ, mais vous pourriez vouloir gérer les thèmes dans votre organisation. Pour cela, vous pouvez alors créer votre propre thème personnalisé .

Thème personnalisé

Lorsque vous créez un thème personnalisé, les propriétaires de site pourront appliquer ce thème à n’importe quel site SharePoint Online. Votre thème sera affiché en haut des thèmes disponibles dans la section thème d’organisation.
Un thème SharePoint Online est basé sur un objet Json, voici un exemple :

{ 
    name: 'Blue', 
    isInverted: true, 
    backgroundImageUri: '', 
    theme: { 
        themePrimary: "#00bcf2", 
        themeLighterAlt: "#00090c", 
        themeLighter: "#001318", 
        themeLight: "#002630", 
        themeTertiary: "#005066", 
        themeSecondary: "#00abda", 
        themeDarkAlt: "#0ecbff", 
        themeDark: "#44d6ff", 
        themeDarker: "#6cdfff", 
        neutralLighterAlt: "#2e3340", 
        neutralLighter: "#353a49", 
        neutralLight: "#404759", 
        neutralQuaternaryAlt: "#474e62", 
        neutralQuaternary: "#4c546a", 
        neutralTertiaryAlt: "#646e8a", 
        neutralTertiary: "#c8c8c8", 
        neutralSecondaryAlt: "#d0d0d0", 
        neutralSecondary: "#dadada", 
        neutralPrimaryAlt: "#eaeaea", 
        neutralPrimary: "#ffffff", 
        neutralDark: "#f4f4f4", 
        black: "#f8f8f8", 
        white: "#262a35", 
        primaryBackground: "#262a35", 
        primaryText: "#ffffff", 
        bodyBackground: "#ffffff";
        bodyText: "#333333";
        disabledBackground: "#f4f4f4";
        disabledText: "#c8c8c8";
        error: "#ff5f5f";
        accent: "#ffb900";
    } 
}

Si vous avez besoin de plus d’informations, voici un lien vers le schéma de thème de Microsoft docs.
Au début de cet objet Json, vous trouverez quelques métadonnées pour le thème. Ensuite, dans le nœud de thème, vous devrez trouver des couleurs à remplir sur toutes les clés.
Pour vous aider à configurer votre thème SharePoint Online, vous pouvez utiliser le theme generator tool.
Dans la section concepteur de thème, vous pourrez fournir trois couleurs : Primaire, Texte et Arrière-plan, puis extraire l’objet thème sous la forme Json ou PowerShell. Lorsque vous changez les couleurs, l’outil vous montrera différents aspects d’un site SharePoint Online avec vos couleurs mises à jour. Si vous voulez jouer avec les couleurs, je recommande cet article qui est très détaillé sur l’utilisation de chaque couleur.

Pour déployer notre thème personnalisé, nous allons d’abord exporter le thème en sélectionnant Export puis PowerShell et copier le code fourni.

Nous utiliserons PowerShell avec le module Microsoft.Online.SharePoint.PowerShell pour déployer notre thème personnalisé

#Connexion à SharePoint Online
Connect-SPOService -url https://btcstech-admin.sharepoint.com
#Nous stockons notre thème exporté dans une variable
$MyTheme = @{
"themePrimary" = "#000000";
"themeLighterAlt" = "#898989";
"themeLighter" = "#737373";
"themeLight" = "#595959";
"themeTertiary" = "#373737";
"themeSecondary" = "#2f2f2f";
"themeDarkAlt" = "#252525";
"themeDark" = "#151515";
"themeDarker" = "#0b0b0b";
"neutralLighterAlt" = "#f8f8f8";
"neutralLighter" = "#f4f4f4";
"neutralLight" = "#eaeaea";
"neutralQuaternaryAlt" = "#dadada";
"neutralQuaternary" = "#d0d0d0";
"neutralTertiaryAlt" = "#c8c8c8";
"neutralTertiary" = "#ffd9b3";
"neutralSecondary" = "#ffb366";
"neutralPrimaryAlt" = "#ff8f1f";
"neutralPrimary" = "#ff8000";
"neutralDark" = "#c26100";
"black" = "#8f4700";
"white" = "#ffffff";
}
#Et nous publison le thème sur SharePoint Online
Add-SPOTheme -Identity "Company theme" -Palette $MyTheme -IsInverted $false

Maintenant les propriétaires de sites pourront appliquer ce thème pour leurs sites.

Après avoir joué avec les thèmes, vous voudrez peut-être configurer les paramètres de Navigation et Header pour votre site. Voyons quelles sont les options disponibles.

En ce qui concerne la navigation, lorsque vous créez un site, il est livré avec une navigation intégrée montrant le contenu de votre site. Vous pouvez modifier cette navigation en cliquant sur le bouton d’édition :

Dans le menu de navigation, vous pourrez définir les en-têtes pour regrouper les sous-liens, les liens et les sous-liens. L’interface utilisateur est pratique, vous la prendrez en main facilement :

Vous pouvez aussi configurer la façon dont la navigation s’affichera dans les propriétés du site puis changer l’apparence. En allant dans « changer l’apparence » puis navigation, vous pouvez choisir entre Cascade ou Méga Menu.
Voici l’image des deux options :

D’un autre côté, le menu Header vous offre deux options : compact et standard sur deux lignes. Vous pouvez également donner à votre en-tête une couleur d’arrière-plan basée sur le thème de votre site (Identique au fond des éléments de mise en page)

Pour finir, vous avez également la possibilité de définir un pied de page pour votre site.

Vous pouvez l’utiliser pour afficher un nom, un logo et quelques liens . Pour le configurer vous irez dans le même menu : Engrenage de propriétés du site puis changer l’apparence et cliquer sur pied de page :