How to style Archbee templates with CSS
1 min
Custom CSSCustom CSS is an option from the Custom CodeCustom Code feature that allows users to style their template.
You can style any of the following HTML elements that have a class that starts with ab-:
.ab-callout { }
.ab-changeloc { }
.ab-code-editor { }
.ab-minitasker { }
.ab-graphiql { }
.ab-horizontal-divider { }
.ab-jira { }
.ab-map { }
.ab-mermaid { }
.ab-openapi { }
.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-tree-navigation-link-inactive { }
.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 { }
When adding the CSS, please use the <style> tags in the Customs CSS field, like in the example below:
Customm CSS section
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.