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

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

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:

  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.

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