13 Advanced CSS

When you click the ‘advanced CSS’ button in the left Top Bar the screenshot with “Page CSS” is what you’ll see. In this tab you can insert your page-specific CSS code. It will automatically be applied & synchronized with the builder. You can also Import CSS from Global Classess (see button at the bottom right).

The other tabs are: “Global CSS” and “Child Theme CSS”.

In the Global CSS tab the CSS codes apply on all the pages of your website. All the changes made here during a session will apply on the page, but they won’t be saved inside your database until you click on the SAVE button at the bottom of this tab.

You will find 3 more buttons at the bottom, i.e. Generate Selectors, Import CSS from Global Classes, and Extract Classes and save as Global Classes.

In the Child Theme CSS tab the CSS codes apply on all the pages of your website. The Child Theme CSS are set to be read-only. To modify it, go to your Theme File Editor.

With the buttons in the top right corner, you can choose to have the panel as a left sidebar on top of the Elements or Style Panel, as a right sidebar on top of your Structure Panel, or as a full-screen modal.

Instead of having to go to Dashboard – Bricks – Bricks Settings – Custom Code to put your CSS there, and save, from now on the same exercise can be done in this panel by pressing the ‘SAVE’ button at the bottom right. After the save, the code will be in the Bricks Global CSS panel.

In the Page CSS tab, you can import the CSS from each individual element by pressing the button at the bottom right.

Now when you check your individual elements all CSS has gone. The CSS panel is empty. From now on the CSS can be managed centrally from the CSS panel.

The other possibility is to go to the Global CSS tab where you’ll find at the
bottom the button “Import CSS from Global Classes” with two possibilities. Import “All Global Classes” or “Import Active Global Classes on This Page”.

It now becomes obvious that /*Carefully commenting your CSS*/ is imperative!
It is also very important to click on the ‘Save’ button after you import the CSS and make your comments, otherwise, it is lost.

On the Global CSS tab, you’ll find at the bottom the ‘Generate Selectors’ button, again with two possibilities. Create ‘Plain Classes’ and/or ‘Include Media Queries’.

However, you have to select a component (Element) first, otherwise you’ll get an error (see image below).

Once you select an Element, e.g. a Section, all declarations are shown and one can start styling. When media queries are included everything is grouped per device.

Any locked class will NOT be displayed and if an element has more than one class both classes will be displayed in the same declaration. If an element has no class its ID will be displayed.

On the same Global CSS tab is another button at the bottom, right next to the “Save” button.