website logo
Sign Up ➑Book a Demo
🌐Help Center
πŸ’ΌJobs
Navigate through spaces
🌐Help Center
πŸ’ΌJobs
⌘K
πŸ‘‹Product Documentation Portal
πŸš€GETTING STARTED
Learn the basics
How to get started
Use cases
πŸ“EDITOR
πŸ“ƒDOCUMENTS
πŸ—ƒοΈSPACES
🌎HOSTED SPACES
β˜•ORGANIZATIONS
πŸ“¦IMPORT & EXPORT
πŸ”ŒINTEGRATIONS
πŸ“₯GUIDES
πŸ”ƒPUBLIC API
Doc
πŸ”—EMBEDS EXAMPLES
➿MISC
Docs powered byΒ archbeeΒ 
6min

Custom CSS

This feature is available on these plans: βœ”οΈ Scaling βœ”οΈ Enterprise

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.

  1. Click on the gear icon βš™οΈ to open the Space Settings.
  2. Look for the Custom Code tab on the settings window.
  3. Go to the Custom CSS field
  4. Type the HTML <style> tags
  5. Add your changes in the Custom CSS field.
CSS
|
ο»Ώ
Custom CSS
Custom CSS
ο»Ώ

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.

ArchbeeDOM
ArchbeeDOM
ο»Ώ

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-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-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-link { } .ab-nav-right { } .ab-nav-right-text { } .ab-bold { } .ab-code { } .ab-paragraph { }

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:

CSS
|
ο»Ώ

ο»Ώ

Updated 31 Jan 2023
Did this page help you?
Yes
No
UP NEXT
Sitemaps
Docs powered byΒ archbeeΒ