Custom CSS

hosted and published spaces can be customized using css your css changes will only be included on your custom domain when you preview your published space, it will not be visible, so you need to publish it to production choose a space and click on the settings icon ( ⚙️ ) to open the space settings look for the custom code tab on the space settings window go to the custom css field type the html \<style> tags save your changes in the custom css field \<style> / add the css clases and the properties you want to change / \</style> for security reasons, custom code is only included on a custom domain across the dom, you will find html elements with a css class that starts with ab you can target these classes to style the portal these classes are guaranteed never to change so that we don't break your styling when we update the system if the element you are trying to style does not have a class starting with ab , we don't allow customization, and it's mostly to protect you from yourself for example, if we change the structure, it might impact your styling every element and block in the content section also has a similar class below you can find a list of the classes if you want to check them, please open devtools in your browser by right clicking > inspect this is a list of the current available css classes 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 { } ab windy template { } ab color nav template { } ab booklet template { } openapi css classes 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 { } breadcrumbs classes ab breadcrumb item { } each breadcrumb label ab breadcrumb item clickable { } breadcrumb that can be clicked to navigate ab breadcrumb item highlight { } the currently active/highlighted breadcrumb ab breadcrumb separator { } the chevron icon between breadcrumbs ab breadcrumbs wrapper { } the container around the entire breadcrumb bar ab breadcrumb ellipsis { } the " " shown when there are too many breadcrumbs the dark mode adds a dark class at the top of the html tree, and you can use that to target dark mode styles for example, this is how you change the text to red in dark mode \<style> dark ab paragraph { color red !important ; } \</style>