I’ve had your tool for nearly 6 months and for the life of me I don’t know how to use it with Beaver Builder. I decided to sit down and try and crack it tonight but it doesn’t seem to work in a way that makes it easy to select different components.
I have been using CSS Hero and I think your tool could be really powerful.
The issue I have is that it selects for example all H3 on page – whereas BB works with rows and columns – with CSS Hero I am able to target individual H3 elements within a row and style.
How do I do this with microthemer. I want to only select row related content – not all content on the page. How can it recognise the individual modules in a row?
When you add an new item in a row – it is given a new ID. If I have multiple h3 in a row, then if I select one for styling it will select all h3 in that row (using CSS Hero) – but will not select other h3 items in a different row.
Is there a way to import all the standard Beaver Builder CSS classes so they can be recognised?
Is there a way to target specific elements on a page?
Could really do with some help here as I’m making no progress.
ANyone else using this with Beaver Builder, and if so any suggestions.
Hey, from reading about your h3 problems my guess is that I can suggest a way forward. Microthemer should be able to create selectors that use the row/column specific classes that Beaver builder generates, thus allowing you to apply your styles less broadly.
The solution will probably involve choosing different options from the list of selectors on the Targeting tab of the selector wizard. If you could send me a link to your website I can advise you further. Or if you’d like to send me site login details via this secure contact form I can create a couple of example selectors for you.
You’re right actually. It wasn’t easy to style those h3’s with Microthemer. The selector wizard was missing the elements with unique node classes e.g. .fl-node-55e7487c9c442.
We will address this issue when we update the selector wizard – Microthemer will widen it’s net when searching for possible selectors. But as it’s a bummer that you have to wait for this update, I’ve manually created 24 different selectors that will allow you to target the h3’s on the example page you set up. Note: I created ‘span’ selectors because each h3 element has a child span element. These span elements control the color of the text, and possibly some other styles.
I created the selectors by inspecting your page with Firebug and identifying the unique node classes for each h3 or column. I then created selectors using these node classes, e.g.
Really appreciate your time and efforts. It’s also good to know that it wasn’t me 🙂 – I couldn’t understand why it never worked for me. I will test it out later.
I can set up a testing site for you with a clean install and BB plugin – that you can use as you choose to test out any changes when doing the future selector updates. Will send you the details later via the contact form, if this is OK with you. No strings, just want to do my little bit for the community, if it will help.
Thanks for the offer Dennis. But actually Beaver Builder have been kind enough to send me a copy of their plugin for testing purposes. I’m actually planning to make it easier to integrate Microthemer and Beaver builder following an improvement suggestion by Abland (to automatically add ?fl_builder to the preview URLs in Microthemer, so you can use beaver builder within MTs preview). I haven’t done this yet due to other priority features. But it would make sense to add this as soon as I’ve updated the selector wizard.
Im too very excited about this as l’ve just started using beaver Builder with Microthemer. I did try CSS Hero but Microthemer seems way more powerful and with the stuff in the pipe line I think I’ve made the right Choice 🙂
Hi has all this been fixed yet for working with BB i also now use BB for all the sites i make for my customers and on the fence to buy Microthemer or CSS hero would like to get Microthemer if it is working now with BB?
It would be great if it would work with BB with out needing to name and save everything as well.
I would like to be locked into the life time membership if this is working now for BB.
Hey Donna, unfortunately we haven’t rolled out the new selector wizard yet. If you sign up to our edge mode newsletter you will get notified when we pilot it in edge mode, which will be a few weeks before it is officially released.
I too am having this problem with BB – these two products could be a match made in heaven its a shame that its not calling the row class and h3 tags that I’ve assigned correctly. I’ve already signed up to Microthemer so looking forward to this being fixed. CSS hero was much more logical in this respect but I didn’t like the interface so much. Please fix this as soon as possible!
I’d like to chime in. I’m not great at css, but I’m not understanding how to apply the styles I’ve created on other pages. I’ve been struggling with it all day and feel I must be missing some very elementary piece. A video or step by step of how to apply the styles from page to page and work with BB would be nice. I’m lost…
Lynnr321 you can add custom classes to BB and then just target them.
Sebastian is doing a tutorial (waiting patiently;). And I bet parts of that will help
And also waiting for edge mode which will help a lot to target stuff in BB 🙂
It’s gone abit quite is there any news on the responsive tutorial, edge mode, and implementing beaver builder into microthemer better?
That would all be a great Christmas present 😉
Christmas was the personal deadline I set myself for the tutorial. I’ll probably miss that. Better integration with Beaver builder will follow. I know it’s frustrating not knowing exactly when things will get done. But rest assured, if you’re keen to see these updates, I’m even keener 😉
Thanks for the tip Abland. There is actually another way to trigger beaver builder from MT more easily, now that the menu system has been updated.
Hover over the new ‘View’ option, then click the ‘Change site preview URL’ link, then simply append ‘?fl_builder’ to any URL path. Finally click the ‘GO’ button.
However, with regards to updating Microthemer’s selector wizard to do a deeper search of Beaver Builder’s classes, that’s still on the way. And so are some other optimizations to make using MT with BB easier.
Very useful tip on the preview url – even more so because it pointed me in the direction I needed to configure a custom menu item. Javascript isn’t my strong suit so after some fumbling I worked it out 😉
I read through this thread a bit closer 😉 and this is what I currently do for targeting specific elements:
I double click the containing area around the element I want to edit – in this case the div around the h1 – then move from the Targeting tab to the Inspector tab and drill down to the heading h1 tag. The target class for the h1 is “fl-heading”
I copy the class then arrow back up to the unique container class, in this case a div with unique class, “fl-node-54f9e800686ea”
I move back to the Targeting tab where the first selector usually has the unique class div, in this case “div.fl-node-content div.fl-node-54f9e800686ea”
I just paste the h1.class following in the highlighted text area, “div.fl-node-content div.fl-node-54f9e800686ea h1.fl-heading”
Then I create the selector and it’s for that specific heading.
Between the Targeting and Inspector tabs I’m able to select any single or group element I need. The issue with Beaver Builder is there’s a few elements nested between the h1 and the first available unique class. If anyone can make it work my bet’s on you, Sebastian, but that’s still a pretty tall order.
@Abland – many thanks sharing your Beaver Builder targeting technique.
The new selector wizard will suggest nth-of-type() selectors. This should help. Although nth-of-type() doesn’t solve all targeting issues. I will raise the issue with the Beaver Builder guys if the generated HTML is untargetable even with more complex CSS selectors.
.
.