Prevent MT styles affecting the Bricks Builder UI

Author Posts

oddZilla April 13, 2023 at 1:30 pm

Hey Sebastian,

I notice that some styling I made in MT intended for the frontend, are affecting the CSS styling of the Bricks UI in the WP backend (not just the page canvas, but the actual UI itself). When I inspect the Bricks Builder page code, I notice the MT draft-styles.css are being loaded.

For instance, the following styling is limiting the max width of the left side Bricks menu:

p, 
li, 
figcaption, 
blockquote, 
dt, 
dd {
	max-width: 60ch;
	word-break: break-word;
	font-family: 'Public Sans', sans-serif;
}

Is there a workaround to prevent this from happening?

PS. I’m using the latest MT stable release, not the beta with conditional CSS.

Cheers,
Richard

Sebastian April 16, 2023 at 12:02 pm

Hey Richard, sorry for the slow reply on this. I’m currently on holiday with children and have only just found some time to do a bit of work.

I see what you mean, Bricks runs on the Frontend, replacing it with a UI and a nested site preview in an iframe. So global frontend styles still apply to the interface.

As a quick and dirty workaround you could prefix each selector with body:not(.bricks-is-builder) e.g. 

body:not(.bricks-is-builder) p,
body:not(.bricks-is-builder) li,
body:not(.bricks-is-builder) figcaption,
body:not(.bricks-is-builder) blockquote,
body:not(.bricks-is-builder) dt,
body:not(.bricks-is-builder) dd {
   max-width: 60ch;
   word-break: break-word;
   font-family: 'Public Sans', sans-serif;
}

It’s quite messy with lots of selectors. I will add a rule to exclude loading global CSS when the bricks=run parameter is set in the URL. That should be ready in a few days.

Incidentally, the beta with conditional loading support would allow you to exclude the folder from loading by adding the following logic:

!isset($_GET['bricks'])

Or:

$_GET['bricks'] !== 'run'

Cheers,
Sebastian

oddZilla April 17, 2023 at 1:33 pm

Thanks! Adding the bricks=run parameter in the next update to exclude global css by default sounds good to me. Will you implement that parameter in the conditional loading release as well? Or should I start using one of these two conditional logic examples by then?

Sebastian April 21, 2023 at 12:36 pm

Hi Richard,

I’m back from holiday now and I’ve just released a new version of MT (7.1.7.0) that fixes this. The next release of the beta and further releases will also include this fix, so you won’t have to do it manually.

Cheers!
Sebastian

oddZilla April 21, 2023 at 2:07 pm

Awesome, thx!

oddZilla April 27, 2023 at 8:11 am

Hi Sebastian,

just had a try with the new version, however now none of the MT styles are visisble on the page in the Bricks interface. That is a problem. Would it be possible to just prevent the MT styles affecting the Bricks UI, but still show every MT stylings on the Bricks page itself (the nested page iframe within Bricks)?

Cheers,
Richard

Sebastian April 27, 2023 at 8:22 am

Ah yes, sorry I missed that. Bricks uses the following URL structure when display the site frontend:

https://domain.com/page/?bricks=run&brickspreview

I will work on an fix now.

Cheers,
Sebastian

You must login or register to reply to this topic.