Themeover: Global saving using Beaver builder THEMER

This topic contains 5 replies, has 2 voices, and was last updated by  Sebastian 4 years, 7 months ago.

Author Posts

jjjas

Hello
Please see: https://youtu.be/_CR8qYTM-uo

Is it possible to give style in the whole form (Gravity form: sorry, in the video I say contact form but it is Gravity form)

Thanks!

Jasmin


Sebastian

Hey Jasmin,

Thank you so much for making the helpful video. I understand exactly what you are looking for. The solution in both cases is to use broader selectors than the default selectors Microthemer was suggesting when you initially styled the content. I raised this point when I responded to your other forum post about beaver builder/themer and global styles.

Beaver builder uses slightly different HTML code when inserting a saved module in multiple places on the site. The node classes e.g. .fl-node-12345 are different. And so when Microthemer generates selectors based on these classes, the selectors only target the one instance of the module, rather than all instances. The solution I recommended was to add a custom class to the module, and then look for selector suggestions which reference the custom class, and ignore selectors which reference the node numbers. Please see the instructions in the following post:

https://themeover.com/forum/topic/beaver-builder-themer/#post-10270

It would be helpful if you could share a link to the page with the gravity form, so I can advise you how to target the dynamic content using broader selectors. The form probably doesn’t include numbered node classes in the HTML, but I suspect that it does include variable classes that update every time an option is selected from the dropdown. And so the solution will be the same – use broader selectors. And maybe add a custom class to the form too.

Custom classes are useful because that allow us to be precise about where we want our styles to apply. You have encountered an issue with styles not applying broadly enough. But the opposite is equally common – applying styles more broadly than you want. Custom classes can prevent both problems.

BTW the following targeting video gives a good overview of using Microthemer’s advanced targeting options: https://themeover.com/videos/?name=gettingStarted (this video is accessible form Microthemer’s Help menu).


jjjas

Hello Sebastian!

Sure, I will send you credentials.


Sebastian

Hey Jasmin,

Thanks for sending access details. I removed them from here. I was actually just requesting a link to the page you were trying to style. I always request access details via our secure contact form, and only when I think I will need them to solve a particular problem.

I wasn’t actually able to login with the details you provided before anyway. But if you can check the details and send them again via our secure contact form, I will show you how to style the gravity form content without using unique ids which only relate to a single selection from the dropdown menu.

Cheers,
Sebastian


jjjas

Hello Sebastian,
Thanks for kindly let me know. I just sent to you.
Thanks!

Jasmin


Sebastian

Thanks Jasmin,

For adding custom classes to beaver builder modules so instances of each module around the site can share the same styling, please see this video: http://somup.com/cFnrF1Vaz2
You will need to add the national-sites class to each instance of the module that you have already created. And then I recommend that you save the module again, so when you apply the module next time it will already have the class.

For styling the local events conditional content, please see this video: http://somup.com/cFnrbCVaaW
I’ve created selectors in a folder called ‘Local events’. You can apply styles to these selectors to globally customize the content.

Cheers!
Sebastian

You must login or register to reply to this topic.