GUIDES
How to style Archbee templates with CSS
1min
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
🤔
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.
Updated 09 Aug 2024
Did this page help you?