View custom CSS tips and tricks

Choose and implement your new code

Text spacing

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

Option 1: 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;
}

Option 2: 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 and some acceptable wording values, e.g., ‘orange’.

Option 1: 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; 
}

Option 2: 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 the desired section with a selector in the format #section-{hash} and add the following snippet. Replace "M2mZg" in the example below with the selector for your desired section or element. The section can be sticky to the top or 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

Option 1: Globally set the desired properties.

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

Option 2: 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

NOTE: We recommend using Google Fonts.

First, we need to load a new font in the CSS format with @import. Then, we target a specific element and add 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 on the far right. Ignore the <style> tags in that text if copying it from there.

 

TIP: If you need a more controlled approach to your design, you might want to prioritize individual or scoped styles over global rules. Global styles can reduce flexibility and lead to unnecessary overrides.

For example, if you want to reformat main title headers using CSS without affecting all the other section headers in all pages, you can use !important in your code like this one:

/*MAIN TITLE HEADERS*/
#item-lzaN2 b,
#item-6gdB4 b {
 letter-spacing: 1px !important;
 font-size: 45px !important;
}


.item-headline-wrapper h2 b,
.item-headline-wrapper h2 letter-spacing: 1px !important;
}

In the above code, !important :

• Forces specific letter spacing and font size. For instance, if another CSS rule later in the stylesheet tried to set the font size of #item-lzaN2, the !important declaration would override it, and the font size would remain 45px.
• Acts like a "this is non-negotiable" flag. It tells that "No matter what other styles you find, apply these letter-spacing and font-size values." This is relevant because the targeted elements might have inherited styles from parent elements. This !important tag cuts through all of that, guaranteeing that the specified styles are applied.
• Overrides potential conflicts. The use of !important on both the letter-spacing and font-size properties ensures that if any other css rule attempts to change either of those properties on the selected html elements, that the CSS within the provided code snippet will be used.