Global Classes: Select where custom CSS is loaded

With custom CSS in Global Classes, I only want my custom CSS to be used in Bricks canvas and on the frontend. I do not want my custom CSS to affect Bricks outer frame or Bricksforge UI. Loading custom CSS (that includes classless selectors) everywhere can break the UI in Bricks & Bricksforge. Or maybe even have a way to specify where custom CSS is loaded?

I am able to do this when loading custom CSS with WPCodebox. For more information, please see the article, Using WPCodeBox for Bricks-specific snippets on BricksLabs.

The Bricksfoge global classes set is loaded by default, even if you disable the global classes. Here I would also be in favor of at least disabling the set and later even defining at which conditions a global CSS set should be loaded:
Whole page
Archive XY
Post XY

That’s a good idea, but I think it’s a separate issue worthy of its own Feature Request: the ability to enable/disable Global Class Sets/stylesheets, and conditions for where to load them on the frontend.

I was able to get rid of the default Bricksforge global styles by removing the CSS and then regenerating the Global Classes. That way, I only had my own Global Class Set. I was thinking it would be a lot nicer to enable/disable them individually though.

Thanks for reporting this!

Fixed and will be included in the version 0.9.1.

Loading the custom global classes in not needed places was a bug and has been fixed.
The following has been included to the next update:

  1. The custom.css will be loaded only if the global classes are enabled.

  2. The classes will be loaded only in the frontend and in the builder iFrame.

For next versions, we can talk about custom settings where the classes should load. We have think about if that’s really necessary :thinking: Which places should you choose instead of the two mentioned? Maybe specific pages or archives? But would we really do this? What do you think?


I think the custom settings or contiditions is a nice to have and maybe only useful if you want to associate the same classes with a different style on certain pages.

When I needed something like this, I always solved it with the additional class in the body tag. Sometimes a bit cumbersome.

But I do not think that this is such an urgent need.

1 Like

Personally, I don’t need conditions.

I would like the ability to turn off Bricksforge’s CSS framework if I’m adding my own.

For now, you just can remove the entire Bricksforge CSS code and save. There will always be the possibility to readd the code clicking the “Reset to Bricksforge Classes” button. But an option to completely deactivate the built in css with a toggle is a good idea.