Dynamik website Builder CSS is overriding Beaver Buider’s heading module CSS

Beaver Builder
1

Does anybody know how to change the CSS loading order of the Dynamik or beaver builder stylesheet?

I’m trying to change font size in the BB’s heading module’

But it doesn’t work : (

Apparently that’s because Dynamik’s CSS is overriding the heading module’s CSS in Beaver Builder.

Billy and the beaver boys are unable to help as they said, this isn’t a BB issue

And DWB Support said this goes beyond normal support and they can only help outside of Dynamik as a consultant

Hmmmm…

hence this call for help to the paying members of BB or DWB.

Any solution or pointers in the right direction would be appreciated

Regards

Jason

2

Hi Jason,

The problem is that Beaver Builder inherits the theme’s H1-H6 tags, which is actually a good thing. Not sure why you want to override the Heading styles, but there are many ways to do it.

1)How about using a regular Text module and adding a Custom CSS class in line with your heading text?

Add the following to your Dynamik Custom “CSS” Area:

.myh2 {
font-family:Helvetica, Arial, sans-serif;
font-weight:normal;
font-size:30px;
}

Then add your heading text like this:

<h2 class="myh2">Your Heading</h2>

  1. Or if you want to use the Beaver Builder Heading module, add the following to the Class section on the Advanced Tab;

myh2

Then add the css above to the Dynamik Custom "CSS’ area.

You’ll just need to change the css values for font, size etc. to suit your purpose.

Hope that helps.

Colin

3

Hi Jason and Colin,

Not sure why you want to override the Heading styles, ...

Colin, it’s because it is an option within the Heading Module in BB and one should be able to use it as needed :slight_smile:

That said, and I have posted this on the DWB forum; it is an issue with DWB, as this option works just fine, out of the BB box, as it were, with any other theme that I have tried. Namely, Genesis by itself, a few Genesis child themes, a couple of WP default themes (2015, 2014, 2013) and a few random ones from the WP theme repo. No need for custom CSS with them. This is why I am curious as why DWB behaves in this manner :slight_smile:

Cheers!
Lyle

4

Hi Lyle and Colin, I appreciate your input… Thanks

Lyle you beat me to the punch but Colin I thought I’d throw another one while you’re on the ropes…

The reason I want to override the DWB heading style is because I just want the font on ONE header to be big around 60px and in the bb header module it gives you that option to change the font size…

The header module also has the option to set a font size for mobile displays which is great as 60px is way to big for smaller devices

But that doesn’t work either…

So it’s frustrating I’m unable to use one of the bb’s features… It’s a bit like having a keyboard and the @symbol don’t work… I can get round it by copying and pasting but it’s not ideal. haha…

If it’s a bug that can’t be fixed then I would have to use the text module that you suggested.

But how would I make the font only smaller on mobiles and tablets?

OK im ready to be knocked out now!!

Cheers

Jason

5

me again someone from the DWB forum earleir kindly posted this…

This is clearly a CSS issue.

Dynamik has something like this
.content .page h3 {font-size:2.8rem;}
In this case the h3 tag wins.

where BB has this: (without the h3 tag and therefore is not specific enough)
.fl-node-54ff63ae6e1be .fl-heading {font-size:48px;}

All BB needs to do is add the h3 tag to the selector like this and it should work and be compatible with existing setups (note the node id number will likely change with each use)
.fl-node-54ff63ae6e1be h3.fl-heading

I’ve emailed it to billy and he just replied saying

Thanks for bringing that back, Jason We’ll take a look at implementing that! We’ll review asap

Beaver fingers, knees and elbows crossed its reviewed “TONIGHT”…

only joking billy tomorrow will be fine… haha

i see light…

6

Hi Jason,

I just posted a video on how to get around Dynamik overriding your Beaver Builder Heading Settings. Hope it helps until it’s fixed.

How To Override The Dynamik Headings in Beaver Builder

Cheers,

Colin

7

Hey Colin thankyou

i used your other tip yesterday as a temporary solution and used csshero to make the changes then copied the css to the DWB custom CSS box…

appreciate all your support…

Jason

8

Hey Jason,

We’ve made an adjustment to the heading module CSS based on Dynamik’s feedback that will be available in the maintenance release next week.

Thanks,
Justin

9

hey that’s good news… thanks Justin … keep up the good work… : )

10

hey justin…

are you doing the update you mentioned above this week,

cheers

Jason

11

Hey Jason,

Yes, but it will probably go out Sunday. I was planning on sooner but there are a few things that need additional testing.

Justin

12

: )

13

Thanks Justin,
Just out of curiosity, what is the reason for updates going out on a Sunday night (Monday morning my time) ?
Cheers, Dave

14

Hey David,

Thanks for asking. Releasing on Sundays gives us plenty of time to test and add in any last minute fixes that may come up during the week. Also, I usually have plenty of uninterrupted time on Sundays to focus on getting a release out without any issues.

Justin