Opens in a new tab

1. Global Styling setup

1. Global Website Settings (Theme Style settings)

These settings are set in the currently used Theme Style, which is accessible from any Bricks edit page/ click on the gear icon on the top left/Theme Styles/Select Theme/Select the “General Website Settings” theme.
Following this path opens a drop-down menu where the following block and settings are set:

Block “Conditions”
– set the applicability of this theme style to “Entire Site

Block “General”
– change the site background color from the “Site Background” option to: #011932

Block “Elements”
– sub-block “Section”, set the “Width” to 100%, Display: flex, Direction: Vertical, Align main axis: Start (Base brakepoint: Desktop). This set the default width of a Section to be as wide as the browser window.
– sub-block “Container”, set the “Width” to 1140px, Display: flex, Direction: Vertical, (Base brakepoint: Desktop). This set the default width of a Container Element. Given the fact that each piece of website content is placed inside a Container, this setting also globally sets the width of the website’s active area
– sub-block “Container”, set the “Padding-Left” and “Padding-Right” to 30px for Desktop view and 20px for Mobile view.

Block “Stylesheet”
– add the following code block, which sets the default background color of containers (and subsequently of the body area around the entire site):
/*set the default background color of containers*/ .brxe-container { background-color: #faffb3;}
– add the following code block, which ensures the footer never leaves space between its area and the screen’s bottom edge
/*ensures the footer never leaves space between its area and the screen’s bottom edge.*/
html, body {height: 100%;}
#brx-content-wrapper {display: flex; flex-direction: column; min-height: 100vh;}
#bricks-content {flex-grow: 1;}
– add the following code bloc, which sets the options for the containers that are used for holding the body content:
/* Sets the minimum height to viewport minus 200px (Header + Footer) */
.body-container {min-height: calc(100vh – 200px);
margin: 0px; padding: 0px;}

Block “Typography”
– set for “Body” Font-Size=18px, Font-Family: Georgia, Font-Color:#292929
– set for “All Headings”, Font-Family: Lora, Fallback-fonts: Helvetica, Font-Color:#292929
– set for “H1” Font-Size=28px
– set for “H2” Font-Size=26px
– set for “H3” Font-Size=24px
– set for “H4” Font-Size=22px
– set for “H5” Font-Size=20px
– set for “H6” Font-Size=18px
Here are samples of these font styles:

– I am a H1

– I am a H2

– I am a H3

– I am a H4

– I am a H5
– I am a H6

TBB