View custom CSS tips and tricks

Use some of these examples provided by our development team to kickstart your Custom CSS knowledge and abilities

🧰 What You Will Need

A subscription to the Business plan
A Hub to customize
Some familiarity with CSS (W3 Schools Tutorial)
Knowledge of the Hub Custom CSS

What can I use this for?

The article below is meant to give you an idea of the type of customization that custom CSS can provide. There are also examples of code that you can copy & paste into your Hub's Custom CSS, replacing code where relevant.

Choose and implement your new code

Text spacing - "margin" for vertical space between elements, "letter-spacing" for spacing between the letters.

a) Globally set the desired properties for any typography element (p, h1, h2, h3, h4, h5).

.hub-app h2 { 
    margin: 0 0 10px; 
    letter-spacing: 2px;
}

b) Individually set the properties per section or element. Set the desired properties to an inner typography element (p, h1, h2, h3, h4, h5) based on the ID selector of the parent. Replace "M2mZg" in the example below with the selector for your desired section or element.

#M2mZg h2 { 
    margin: 0 0 10px; 
    letter-spacing: 2px;
}

Background color - HEX or RGB values, also some wording values acceptable i.e. ‘orange’.

a) Globally set the desired properties (buttons and button hover).

.hub-app .btn { 
    background-color: #333; 
    border-color: orange; 
    color: orchid; 
} 

.hub-app .btn-primary:hover { 
    background-color: #111; 
    color: #fff; 
    border-color: yellow; 
}

b) Individually set the properties on the desired element using ID (directly with ID or use ID as a parent selector). Replace "M2mZg" in the example below with the selector for your desired section or element.

#M2mZg { 
    background: #444;
}

#M2mZg .btn { 
    background: rgb(255,231,155);
}

Sticky/Floating section - Applicable only to an entire section. Do not use the default background appearance option in this case to avoid bad UI.
Select desired section with a selector in format #section-{hash} and add following snippet. Replace "M2mZg" in the example below with the selector for your desired section or element. Section can be sticky to the top or to the bottom.

#hub-container { 
    overflow: unset;
}

// Sticky top
#section-M2mZg {
    position: sticky;
    z-index: 2;
    top: 0;
}

// Sticky bottom 
#section-M2mZg { 
    position: sticky;
    z-index: 2;
    bottom: 0;
}

Link hover

a) Globally set the desired properties.

.hub-app .rte-output a:hover {
    color: #333 !important;
}

b) Individually set the properties on the desired element using ID (directly with ID or use ID as a parent selector). Replace "wEzWA" in the example below with the selector for your desired section or element.

#column-wEzWA .rte-output a:hover {
    color: #333 !important;
}

Custom font on inner sections (we recommend using Google Fonts)

First we need to load a new font in the CSS format, with @import. Then we are targeting a specific element and adding a font-family rule. In the example below, the font is called "Square Peg".

@import url('https://fonts.googleapis.com/css2?family=Square+Peg&display=swap');

#column-wEzWA {
font-family: 'Square Peg', cursive;
}

Here is how the font looks on Google Fonts, with the "@import" code shown on the far-right. Ignore the "<style>" tags in that text if copying it from there.