Okay
  Public Ticket #839960
Targetting Custom CSS Class
Closed

Comments

  • Charles Dewey started the conversation

    Hi 

    I'm having problems targetting a particular custom class that I've assigned using Beaver Builder. I've given the h2 heading 'Testimonials' a custom bit of code called 'inner_testimonials_wrapper. 

    See the firebug code below

    .inner_testimonials_wrapper div.fl-module-content.fl-node-content h2.fl-heading

    I only really want to change the h2 in this area however when I highlight it using Yellow Pencil it pics up a very generic bit of code that effect all the BB h2 modules and I can't seem to drill back to make the code more specific. 

    Can you tell me the best way of targetting this custom css class in a simple way. It would be good to have a routine where I can give a custom class to a module in Beaver Builder and then get YP to pick this up specifically. 

    Many thanks and congratulations on a glorious product...as a visual designer its been a life changer for me!!

  •  127
    Zafer replied

    Hey Charles,

    First thank you for your purchase!

    You can edit the CSS selector as you want. Use "Edit Selector " feature. See following screenshot:



    So you can edit selectors as you want. Take a look to plugin docs for more info. by the way I'm working now on a new update. I will fix problems with Beaver Builder plugin.

    I'm hope thats help,

    Best Regards

  • Charles Dewey replied

    A couple of bits of feedback - it would be good to see the code that you're editing in the dashboard rather than having to select it first. 

    It would be good to be able to assign a custom css class in BB and yellow pencil pick it up. 

    I use firebug a lot this is what I'm getting

    .fl-row-bg-parallax .fl-row-fixed-width .fl-col .fl-module-heading .fl-heading .fl-heading-text

    This is the code from Firebug: .contactBlock div.fl-module-content.fl-node-content

    I'm wanting to target .contactBlock and just the h2 tag what would be the best way of doing that?

  •  127
    Zafer replied

    Hey Charles,

    Thank you for your feedback!

    1. Select the h2 tag that you want edit.
    2. Open menu and select "Edit Selector"
    3. write: .contactBlock h2 and press enter.
    4. Okay. This ".contactBlock h2" CSS selector simple and useful, so you can customize it now.

    I'm hope thats help.

    Best Regards