Créer un thème pour votre portail

Lorsque vous générez des portails avec les fonctionnalités du portail pour Dynamics 365, vous devez utiliser l'infrastructure frontale Bootstrap. En tirant parti de l'écosystème Bootstrap, vous pouvez rapidement et facilement retravailler le thème de ces portails pour l'adapter à votre organisation.

Implémenter des modèles de portail à l'aide de Bootstrap

Bootstrap est une structure frontale qui comprend des composants CSS et JavaScript pour les éléments communs de l'interface d'application Web. Il comprend des styles pour les éléments de navigation, les formes, les boutons et un système de disposition de grille réactif, qui permet aux dispositions du site de s'ajuster dynamiquement aux différentes tailles d'écran telles que celles des téléphones et des tablettes. En utilisant le système de disposition Bootstrap, vous pouvez développer un site unique qui présente une interface adéquate pour tous les appareils utilisables par les clients.

Les modèles inclus dans les portails Dynamics 365 sont implémentés à l'aide de composants Bootstrap standard, avec le moins possible de styles personnalisés supplémentaires. Et lorsque vous implémentez les modèles, vous pouvez tirer parti des options de personnalisation de Bootstrap. Vous pouvez personnaliser le thème (polices, couleurs, etc.) et l'appliquer rapidement et de manière cohérente au sein du portail.

Personnaliser Bootstrap

Bootstrap prend en charge la personnalisation, à l'aide d'un ensemble de variables. Vous pouvez définir tout ou partie de ces variables à des valeurs personnalisées, puis télécharger une version personnalisée de Bootstrap compilé selon ces valeurs.

La puissance des variables Bootstrap vient du fait qu'elles ne dictent pas le style d'un élément unique. Tous les styles de l'infrastructure sont basés et dérivés de ces valeurs. Par exemple, prenons la variable @font-size-base. Ceci spécifie la taille que Bootstrap attribue au corps de texte normal. Toutefois, Bootstrap, utilise également cette variable pour indiquer la taille de police des en-têtes et d'autres éléments. La taille d'un élément h1 peut être définie comme 300 % de la taille de @font-size-base. En définissant cette seule variable, vous contrôlez l'échelle typographique entière de votre portail, de façon cohérente. De même, la variable @link-colorcontrôle la couleur des liens hypertexte. Pour la couleur que vous affectez à cette valeur, Bootstrap définira la couleur de survol des liens comme 15 % plus sombre que votre valeur personnalisée.

Le mode standard pour créer une version personnalisée de Bootstrap est via le site officiel de Bootstrap. Toutefois, en raison de la popularité de Bootstrap, plusieurs sites tiers ont également été créés à cette fin. Ces sites peuvent fournir une interface facile à utiliser pour la personnalisation de Bootstrap, ou peuvent fournir des versions pré-dessinées de Bootstrap à télécharger. Le site officiel de personnalisation de Bootstrap fournit d'autres informations sur la personnalisation de Bootstrap. Il s'agit toujours de la version la plus récente, mais elle ne comporte actuellement pas de fonctionnalités d'interface utilisateur (UI) telles que les sélecteurs de couleur et la prévisualisation en direct.

Quand vous téléchargez une version personnalisée de Bootstrap, elle contient la structure de répertoires suivante.

css/ |-- bootstrap.min.css img/
|-- glyphicons-halflings-white.png |-- glyphicons-halflings.png js/ |-- bootstrap.min.js

Ou, en fonction de l'application de personnalisation utilisée, elle peut uniquement contenir bootstrap.min.css. Indépendamment de cela, bootstrap.min.css est le fichier qui contient vos personnalisations. Les autres fichiers sont les mêmes pour toutes les versions personnalisées de Bootstrap, et ils sont déjà inclus dans votre portail Dynamics 365.

Appliquer un thème Bootstrap personnalisé à votre site Web

Une fois que votre fichier bootstrap.min.css est personnalisé, vous pouvez l'appliquer à votre portail de deux manières. Si vous êtes un développeur et préférez travailler directement avec le code source de votre application, vous pouvez remplacer la version bootstrap.min.css incluse dans la source de votre application par votre version personnalisée. Dans la plupart des cas, il est recommandé d'appliquer votre thème personnalisé de Bootstrap sans modifier le code de votre site en le chargeant comme un fichier Web dans le système de gestion de contenu du portail Dynamics 365.

  1. Connectez-vous à votre application en tant qu'utilisateur possédant des autorisations de gestion de contenu. Pour plus d'informations : Configurer les rôles Web d'un portail PRM
  2. Accédez à la page Accueil de votre application.
  3. Sélectionnez Enfants >Modifier ce fichier (bouton en forme de crayon et de papier) pour bootstrap.min.css dans la barre d'outils de modification de contenu (qui se trouve dans le coin supérieur droit de la fenêtre du navigateur).
  4. Sélectionnez votre fichier bootstrap.min.css personnalisé, en utilisant le champ Charger le fichier dans la boîte de dialogue Modifier ce fichier qui s'affiche.
  5. Vérifiez que le champ URL partielle est défini sur bootstrap.min.css. C'est cette valeur qui indique à l'infrastructure du portail Dynamics 365 qu'elle doit utiliser votre version personnalisée de Bootstrap au lieu de la version par défaut incluse.
  6. Vous pouvez également activer la case à cocher Masqué du plan de site (sélectionnée par défaut), afin que ce fichier n'apparaisse pas aux utilisateurs dans aucun élément de navigation dans le site.
  7. Enregistrez le fichier.
  8. Actualisez votre page pour faire apparaître immédiatement vos styles personnalisés.

Le capture d'écran ci-dessous est un exemple d'une version personnalisée de Bootstrap appliquée au portail communautaire :

Appliquer un thème bootstrap personnalisé à votre site Web

Options supplémentaires de définition de thème su portail

Outre une version personnalisée de Bootstrap, les portails Dynamics 365 prennent également en charge le téléchargement de vos propres fichiers CSS personnalisés dans le système de gestion de contenu. Cela vous permet d'appliquer des styles supplémentaires à votre portail, sans devoir déployer une nouvelle version de son code. Pour ce faire, suivez simplement la procédure décrite précédemment pour télécharger des fichiers CSS Bootstrap personnalisés, en utilisant un fichier contenant votre propre CSS, puis choisissez une nouvelle URL partielle pour ce fichier Web. Tant que l'URL partielle se termine par .css, les portails Dynamics 365 l'identifieront et l'appliqueront à votre site.

Avec une version personnalisée de Bootstrap, vous pouvez utiliser le système de modification de contenu pour ajouter un logo personnalisé à l'en-tête de votre application de portails. Avec ces options simples mais puissantes, il ne vous faudra que quelques minutes pour que l'application du portail Dynamics 365 soit à l'image de votre marque.

Voir aussi

Interagir avec les communautés à l'aide du portail communautaire
Configurer un portail Dynamics 365