How to add custom CSS that applies to the whole site

When customizing themes I’m used to editing one global CSS file, usually in WP Customizer. Now in Bricks each page has its own custom CSS. Now I can see that being useful in specific cases but I much prefer editing all my CSS in one place and specifying from there. Is there a way to do that in Bricks and I’m just missing something obvious? If not, can I just use the Customizer, is that intended by the developers? I’m not sure how the global CSS there would mesh with any CSS from within Bricks.

Hi @SaskiaB ,

you have multiple options here.

You could use Bricks Child Theme CSS (using Child Theme is sugested anyway).

Or you may place your CSS to Custom Code tab in Bricks Settings

Or you may use some Custom snippets plugin WPCodeBox or any other…

Ah, somehow I completely missed the code tab in the settings :see_no_evil: I will use that then in the cases with no child theme. Thank you so much! Do you have any knowledge whether the customizer code section is safe to use together with Bricks?

I am not using wordpress customizer at all. Maybe just for Favicon :smiley: . Try it for yourself you will see. I would still suggest one of mentioned option. Starting with child theme. Why you don’t use it?

Yeah okay, I will test ist and report back :sunglasses: I’m just used to the customizer and like how its layout allows looking at how the site changes while editing the code. I try to only use additional plugins when really needed. I do use child themes just not for everything, usually just if I expect to need custom php code since that will get overwritten by theme updates. It’s just a habit but yes, maybe I should start always using a child theme.

Well I see. I do not like plugins either.

Anyway you may use code snippets during development and then just move your files to child functions or JS/CSS. Some snippets plugins allow you to export that with ease.

You may take a look at WPCodeBox. It allows you also to work with your CSS and see changes in realtime :wink: (not paid promotion :joy: )

1 Like

@SaskiaB I’m new to Bricks and was contemplating putting my additional CSS in the Wordpress customizer vs the Bricks settings, as well. I like how the WP one helps you type the code out by offering suggestions that make things faster. I did a quick test by setting a heading color just as example using both methods and it seemed to work, but I don’t know performance wise or with the way the hierarchy works, which is better. Were you ever able to get more of an answer to your question? What did you learn regarding this?

Hey Jane, I haven’t learned anything new or official about this. I also tried just using the customizer and it seems to work but I don’t know if one option is better than the other.

Meanwhile I found the global CSS in the settings, however I am still interested in how the global bricks CSS field meshes with the customizer global CSS. @timmse , can you help maybe? I checked the doku and couldn’t find any info. I like working with the customizer since I can see changes on the site while editing. Would be really interested in what is considered best practice.

Sorry, I missed this thread.
It shouldn’t matter if you use the Bricks Settings, the WordPress Customizer, or a scripts/snippets plugin.

1 Like

Thanks, that’s good to know!

(Pinging @SeeJaneB in case you are still interested in this.)

1 Like

Hi, I intend to install the Child theme shortly. Where can I find the style.css file, or whatever it is called, so I can add custom css to it? I would prefer this to adding it in the editor. Thanks.

Hi Mark,
Welcome to the forum!

The Child theme’s style.css is located in the root of the child theme folder.
You can edit it right within WordPress in Appearance » Theme file editor.

Alternatively, you can also use global custom styles in Bricks » Settings » Custom Code, in the Customizer (Appearance » Customize), or in a code plugin such as ‘code snippets’.

Best regards,
timmse

Thanks so much for your help.

Mark

Do you know if using CSS inside of the Settings → Custom Code is the same as applying it to a style.css when it comes to performance? Is one better than the other?

Hi Russ, welcome to the forum!

The styles from the settings are placed inline, the styles from the child theme require a request - but since the request takes place anyway (regardless of whether the file contains styles or not), it shouldn’t make a big difference. But you can easily test this, and let us know the results :slight_smile: