Custom CSS styles
David Brahka avatar
Written by David Brahka
Updated over a week ago


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.


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. 



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:

  1. 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.


<script  type="text/javascript">

  // Global Variables
  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');

  // Custom CSS
  var css = `

  .hc-headline {
    color: red;
  .hc-button {
    background-color: yellow !important;

  // 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 );
Did this answer your question?