Feature: An Advanced “Custom Class(es)” tab on the buttons within the “Call to Action” Widget

Asked on May 17, 2016 in Feature Requests.

It would be great if we could create custom classes for individual buttons within the Layers PRO call to action widget.

Struggling to call the buttons individually for styling purposes.

Thanks

Sam

Sam Sinton Layers User
Reply
2 Answer(s)
Answered on May 17, 2016.

Hi Sam ,

I took a look at the call to action buttons.
I think you can change them individually with ID’s
this is not the best but if in emergency it will do.

As you see in the image my two buttons have the ID layers-widget-layers-pro-call-to-action-3-buttons-83
I used this code in devkit to test background color and radius.

 a#layers-widget-layers-pro-call-to-action-3-buttons-83{
 background-color:#00afec;
 border-radius:0px;
 }
 

Dont forget to change my ID to your id and start a new line for the other button also select
that ID of that specific button.

Let me know if it helped 🙂
-Dieter

Thank you so much Dieter!

I have been struggling with this all afternoon.

I had tried that but did not use the “a#” – although this itself didn’t work either – but along with the !important; tag it worked a treat!

Also managed to get the hover state using the following.


a#layers-widget-layers-pro-call-to-action-3-buttons-8:hover

You have saved me countless hours 🙂

Sam

on May 17, 2016.

Hi Sam,

Happy it helped but the use of important tag is not good. You can read more about it here

CSS Best Practices

If nothing breaks and you are not going to distribute it as child theme it is okay but try to use it as last resort.

-Dieter

on May 17, 2016.

!important can be used all you want on your own site, It is just a bad thing to do in a commercial product where it keeps a user from using a customization control. Hope that clears it up!

on May 20, 2016.
Reply
Answered on May 20, 2016.

The new CTA widget has a new button control group on each button for customization.  The IDs are the right way to go here if you need to manipulate them beyond that (or nth childs, there are a few ways to do it)

Reply