How do I change the button size on a Slider?

Asked on October 11, 2015 in How To.

I reviewed the Layers Doc on button sizes which says to append “.btn-small” to the CSS class string.

I go to Slider >Advanced>Custom CSS and then tried to include “.btn-small” but wasn’t able to get it to change the button size. The reason why is because I’d like the button size to look exactly the same as the button in my “Content Slider”.

Thank you.

RedCoat Layers User
Reply
  • Possible Answers to Your Question:

  • 1 Answer(s)
    Answered on October 12, 2015.

    Hi there,

    The button sizes in the default theme are dependent on the size of the font and length of the word in the button. Each button class, such as btn-small, btn-large etc set that font size and the button padding.  You can affect changes on ALL elements using btn-small using that class in the CSS field of the customizer, example:

    
    .btn-small{ font-size: 1.8rem !important; font-weight: bold; height: 30px !important;}
    
    

    To apply it to just this widget, you would use the Advanced button on the widget and put this into that CSS field.

    For a button to use this style, the text option on the column toolbar has to be set to small. To change the button style independent of the chosen text size, you would use the Advanced button on the widget and create a custom class instead. Then you would combine it with the button element like this:

    
    .custom-class a.button{font-size: 1.8rem; font-weight: bold; height: 30px;}
    
    
    Reply