How to add CSS customizations to the Bricks Builder UI?

Developers
1

I ran into an issue where my screenshots for templates all had transparent backgrounds. I like the Dark theme UI but a bunch of my template screenshots are dark text so it’s hard to see them. I’m wondering if its possible to load custom CSS so I can make the thumbnail backgrounds in the template popup white under the image?

Essentially:

#bricks-popup.templates .thumbnail-wrapper {
  background-color:white;
}

I’ve tried loading an admin-only css file, but it’s not loaded in the builder. Even adding that code to the front end styles via Custom Code in the Settings or via a style.css for a bricks-child theme doesn’t work either.

Is there a correct spot to do this? I don’t want to edit the bricks files directly.

2

Take a look Builder Mode.

3

Thanks, that seemed to work!

If I leave out the boilerplate code the article mentions and just put in a specific CSS class, it keeps the dark mode. I was under the impression you could only modify those color variables shown.