CSS personnalisé
Les Spaces hébergés et publiés peuvent être personnalisés à l’aide de CSS.
Vos modifications CSS ne seront incluses que sur votre domaine personnalisé. Lorsque vous prévisualisez votre Space publié, elles ne seront pas visibles, vous devez donc le publier en Production.
Choisissez un space et cliquez sur l’icône Paramètres ( ⚙️ ) pour ouvrir les Paramètres de l'espace
Recherchez l’onglet Code personnalisé dans la fenêtre Space Settings
Accédez au champ CSS personnalisé
Saisissez les balises HTML <style>
Enregistrez vos modifications dans le champ Custom CSS.
<style>
/* add the CSS clases and the properties you want to change */
</style>
Pour des raisons de sécurité, le code personnalisé n’est inclus que sur un domaine personnalisé.
Dans le DOM, vous trouverez des éléments HTML avec une classe CSS commençant par ab-. Vous pouvez cibler ces classes pour styliser le portail. Ces classes sont garanties comme ne changeant jamais afin que nous ne cassions pas votre style lorsque nous mettons le système à jour.
Si l’élément que vous tentez de styliser n’a pas une classe commençant par ab-, nous n’autorisons pas la personnalisation, principalement pour vous protéger. Par exemple, si nous modifions la structure, cela pourrait affecter votre style.
Chaque élément et bloc dans la section de contenu possède également une classe similaire. Vous trouverez ci-dessous une liste de ces classes. Si vous souhaitez les vérifier, veuillez ouvrir DevTools dans votre navigateur en cliquant avec le bouton droit -> Inspect.
Voici une liste des classes CSS disponibles :
OpenAPI Classes CSS
Classes BreadCrumbs
Le mode sombre ajoute une classe dark en haut de l’arborescence HTML, que vous pouvez utiliser pour cibler des styles en mode sombre.
Par exemple, voici comment changer le texte en rouge en mode sombre :
<style>
.dark .ab-paragraph {
color: red !important ;
}
</style>