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
