How to style Archbee templates with CSS
1 min
Custom CSS is an option from the Custom 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