About
Blackbell lets you change the style of your platform with custom CSS. Some CSS skills are required hence we encourage you to hire a CSS developer.
RELATED
Custom Content & Custom HTML https://intercom.help/blackbell/en/articles/1820509-custom-content
Method 1: via CSS
This method is recommended as your styles will load faster.
App Settings > Custom CSS
Add your global css.
How to target elements
Each content block, header, page or service has a unique class.
Examples:
.page-{pageID}
.service-{serviceID}
.content-{type}-block-{blockID}
.header-page-{pageID} To find them, inspect the generated html code:
Add a custom class to a content element:
Easily apply your CSS to multiple content blocks by adding a add custom classes to:
a page content block
a full page
a service content block
a full service page
To do this, follow the 3 steps:
Edit a content block and click on the </> icon on bottom left:
2. Add one class or multiple classes inside and save.
Format should be:
.classname1 .classname2
If one:
If multiple:
3. Save.
Once a block has a class, the </> icon will be orange
Method 2: via JS ( old method )
App Settings > Custom Javascript
And your styles to the BODY SNIPPET text area:
⚠️ Don't add your styles in the Header Snippet.
In the following example, we show you how to make some text in header red and the buttons background yellow.
Preview
<script type="text/javascript">
// Global Variables
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
// Custom CSS
var css = `
/* ADD CUSTOM CSS STYLES */
.hc-headline {
color: red;
}
.hc-button {
background-color: yellow !important;
}
/* END OF - CUSTOM CSS STYLES */
`;
// Add CSS Style to change the Font
style.type = 'text/css';
if ( style.styleSheet ) {
style.styleSheet.cssText = css;
} else {
style.appendChild( document.createTextNode( css ) );
}
head.appendChild( style );
</script>