Beaver Builder Custom Classes and IDs Not Working

Beaver Builder
1

I’ve attempted to use the custom classes and IDs in the plugin modules but nothing seems to be working. I’ve written the classes and IDs that I’ve added into the modules into my style.css file or am I going about this all wrong?

2

Could be that your theme is overriding them, or perhaps you may have incorrectly set them up.

In the screenshots below are two BB text editors in a 2 column row on a page in a fresh install of WP 4.1.1 and the default 2015 theme. The CSS is added to the end of the styles.css file using the WP editor.

NOTE: When you enter the Class name in BB, one does NOT enter the period. When you write the CSS in the styles.css file, you MUST use a period in front of the name.

In the example, the first BB Text Editor module has a class name of bbtext1 and in the styles.css file, it is entered as .bbtext1.

http://i.imgur.com/idxoUrm.jpg
BB page editor

http://i.imgur.com/H9lLXuU.jpg
Class name entered in BB module

http://i.imgur.com/vixTfo3.jpg
CSS entered into styles.css file

http://i.imgur.com/NLq7aS8.jpg
Result

3

Thanks Lyle - that was a very thorough response! I had coded it as you did above, but it appears not to work on the Genesis - Epik theme, sadly. The good news is that I can get a refund on my plugin and go for the free lite version as I’ll only need the HTML modules which can reference the css file. (Always something!)

4

Before you go for the refund on BB, perhaps consider ‘shelling out’ for Dynamik Website Builder :slight_smile: With that combo, you can easily recreate the Epik theme in a matter of minutes, along with pretty much else you can imagine :slight_smile:

Genesis + DWB + BB = hard to beat combo and what I use exclusively :slight_smile:

5

@John: Just to emphasize Lyle’s comment. If you develop websites with WordPress you definitely should analyze the combo of WordPress - Genesis Framework - Dynamik Website Builder - Beaver Builder. You’ll cut down development time at least by 30% if not 50%. We develop every repeating element like Header, Nav, Footer etc. and the site intelligence with Dynamik Website Builder and all the different and individual content with Beaver Builder. The flexibility of this workflow is really not limited.

Give it a try. If you’d like to know more check out Eric Hamm’s videos (Developer of Dynamik) here: Dynamik Website Builder Videos.

Also check out these tutorials: Dynamik Beaver Tutorials.

Have fun,
Leo

6

Thanks all!

John - let us know if there is anything we can do here, we can certainly take a look.

Best,
Billy

7

Thanks Lyle & Leopold! The problem I am having with Dynamik is that I am getting dotted underlines under clickable elements in, for example, callout modules whenever there has been a link assigned (Firefox v35.0.1) which is not present in the other Genesis child theme (Epik).

Also, the mobile responsiveness appears rather wonky in Dynamik out of the box. For example, with other Genesis child themes the sidebar appears to the right on an iPad in landscape mode and when you turn to portrait mode, the sidebar moves under the content - a signature effect common with Genesis themes; but with Dynamik the sidebar appears under the content in both orientations.

Billy Young: Yes, if I could possibly have you look into this - perhaps you can email me and I can send you a copy of Epik?

8

Hey John,

Sure, no problem. Would you mind sending me temp admin access via private reply so I can take a look at what might be going on with your IDs/Classes issue?

Best,
Billy

9

John,

The responsive settings in Dynamik give you so much more to work with than the standard Genesis themes, so I can definitely help you with that. I also think I know what is causing the dotted line effect but would have to take a look at your Dynamik Settings.

Hey Billy,

I’m willing to jump to help on this one if you want. Just let me know.

Cheers,

Colin

10

Thanks Colin, that would be awesome of you since you know this stack so well. If I can be of assistance, just let me know!

11

Hello again, everyone - I installed BB on another site with Epik v1.3 and the custom class option worked so I upgraded it to v1.4 and it also worked, so I must have done something (either with my css or my php or both) to mess things up for BB on my main site. So, this is good news!

I’m also am running Dynamik on this other site, and I’m still getting the dotted line effect. Now, I’d say that I’ll be using Epik and won’t worry about it, but I’m kind of warming up to Dynamik, so Billy or Colin I’d appreciate your having a look, if possible.

You can see the effect on the main page (the site is currently only viewable if you sign in). If you’re able to help, let me know, and I’ll send you my login info via private reply (if that’s how you do it).

Cheers

12

John if you can send me a temp admin access via private reply, I will take a look at what might be causing your problem.

Colin

13

[Content Hidden]

14

Thanks for the login information John.

It’s all fixed now.

The problem was caused by a bit of extra css you had added to the Dynamik custom css area. See the following image:

https://drive.google.com/file/d/0Bx52P9LVlmZSODJZSVNRZjNqMUk/view?usp=sharing

Try to stick with Dynamik if you can. It’s got a little bit of a learning curve, but once you get to know it a little bit, it’s probably the most flexible WordPress theme available. When combined with Beaver Builder, you really have the ultimate combination for any type of WordPress site.

Let me know if you need any more help.

Cheers,

Colin

15

Awesome! Thanks Colin, great support :slight_smile: