Didacticiel : Ajouter un CSS personnalisé à votre site
L’espace de travail Style vous permet de modifier certaines des caractéristiques du thème de votre site, telles que les polices et les couleurs ; cependant, vous pouvez appliquer vos propres thèmes personnalisés CSS.
Vous pouvez créer votre propre thème en définissant un fichier CSS de thème personnalisé et le charger sur votre site.
Dans ce didacticiel, vous allez découvrir comment :
- Charger un fichier CSS personnalisé
- Modifier CSS dans Visual Studio Code pour le Web
Conditions préalables
- Un abonnement d’essai à Power Pages. Obtenez un abonnement d’essai à Power Pages ici.
- Un site Power Pages créé. Créer un site Power Pages.
- Un fichier thème personnalisé créé à l’aide de votre éditeur CSS favori.
Note
Tout thème personnalisé que vous créez doit être compatible avec Bootstrap v3.
Ajouter un CSS personnalisé à votre site
La vidéo suivante vous montre comment appliquer un code personnalisé CSS à votre site.
Dans cet exemple, nous allons ajouter des fichiers personnalisés CSS qui nous permettront d’ajouter des effets d’ombre aux boutons de notre site web. Vous pouvez utiliser votre propre fichier CSS personnalisé ou utiliser l’exemple fourni.
Pour créer un exemple, dans votre éditeur CSS favori, créez le fichier de thème personnalisé button_shadow.css et enregistrez.
.button1 { box-shadow: 0 9px 18px 0 #333333, 0 8px 24px 0 #333333; }Accéder à Power Pages.
Sélectionnez le site auquel vous souhaitez ajouter le thème personnalisé et choisissez Modifier.
Ouvrez l’espace de travail Styles.
Sélectionnez un thème, puis ... (points de suspension) et Gérer CSS.
Dans la section CSS personnalisés, sélectionnez Télécharger et choisissez votre fichier CSS personnalisé. Vous ne pouvez télécharger qu’un seul fichier CSS à la fois, mais plusieurs fichiers peuvent être téléchargés. Si plusieurs fichiers CSS mettent à jour le même attribut, les attributs du fichier CSS en bas de la liste s’appliquera. Vous pouvez ajuster l’ordre de vos fichiers CSS personnalisés.
Vous devriez immédiatement voir les résultats des mises à jour sur le canevas des pages.
Vous pouvez désactiver ou déplacer l’ordre de vos fichiers CSS personnalisés. Le fichier listé en dernier aura priorité sur les autres.
Vous pouvez modifier un fichier CSS directement en sélectionnant les points de suspension (...), puis Modifier le code. Cette étape ouvrira l’éditeur Visual Studio Code pour le Web. Sélectionnez CTRL-S pour enregistrer vos modifications.
Sélectionnez Synchroniser dans le studio de conception pour mettre à jour le CSS et visualiser les modifications.
Sélectionnez Aperçu pour afficher le thème personnalisé sur votre site.
Remarque
Pour supprimer complètement le thème personnalisé, supprimez l’enregistrement du fichier Web dans l’application Gestion du portail.