ESPACES HÉBERGÉS
CSS personnalisé
4 min
les espaces 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 espace publié, il ne sera pas visible, donc vous devez le publier en production choisissez un espace et cliquez sur l' paramètres icône ( ⚙️ ) pour ouvrir les paramètres de l'espace recherchez l' code personnalisé onglet dans la fenêtre des paramètres de l'espace allez au champ css personnalisé tapez les html \<style> balises enregistrer vos modifications dans le champ css personnalisé \<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 tout le dom, vous trouverez des éléments html avec une classe css qui commence par ab vous pouvez cibler ces classes pour styliser le portail ces classes sont garanties de ne jamais changer afin que nous ne rompions pas votre style lorsque nous mettons à jour le système si l'élément que vous essayez de styliser n'a pas de classe commençant par ab , nous n'autorisons pas la personnalisation, et c'est principalement pour vous protéger par exemple, si nous changeons la structure, cela pourrait affecter votre style chaque élément et bloc dans la section de contenu a également une classe similaire ci dessous, vous pouvez trouver une liste des classes si vous souhaitez les vérifier, veuillez ouvrir devtools dans votre navigateur en faisant un clic droit > inspecter voici une liste des classes css disponibles ab callout { } ab changeloc { } ab code editor { } ab minitasker { } ab graphiql { } ab horizontal divider { } ab jira { } ab map { } ab mermaid { } ab vertical split { } ab vertical split item { } ab video { } ab checklist { } ab blockquote { } ab diagram { } ab embed { } ab file { } ab iframe { } ab html { } ab image { } ab ul list { } ab ol list { } ab list item { } ab list item child { } ab table { } ab space { } ab collection { } ab space container { } ab collection container { } ab top navbar { } ab search input { } ab public search { } ab space content { } ab collection content { } ab tree navigation { } ab tree navigation link { } ab left nav chevron { } ab tree navigation link inactive { } ab space navigation { } ab doc name { } ab h1 { } ab h2 { } ab h3 { } ab expandable heading { } ab link { } ab link dynamic { } ab nav right { } ab nav right text { } ab bold { } ab code { } ab paragraph { } ab footer container { } ab search modal header { } ab search modal content { } ab auth jwt button { } ab auth saml button { } openapi classes css ab openapi { } ab open api param name { } ab open api param expand icon { } ab open api param type { } ab open api param description wrap { } ab open api param example wrap { } ab open api param custom type { } ab open api required star { } ab open api param example title { } ab open api param example { } ab open api param description title { } ab open api param description { } ab open api input wrap { } ab open api array input wrap { } ab open api schema wrap { } le mode sombre ajoute une classe sombre en haut de l'arbre html, et vous pouvez l'utiliser pour cibler les styles du mode sombre par exemple, voici comment vous changez le texte en rouge en mode sombre \<style> dark ab paragraph { color red !important ; } \</style>
Have a question?
Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.
To ask a question or participate in discussions, you'll need to authenticate first.