Can anyone help me with changing the color of Skuid Mobile Buttons?

  • 1
  • Problem
  • Updated 3 years ago
  • Solved
I'm trying to change the color of the mobile buttons on my skuid mobile page. Making CSS changes elsewhere is a breeze but this one is really stubborn. Upon inspecting the page the button reads .sm-button.sm-navstyle . I've created a CCS resource like this. 


.backcolor .sm-button .sm-navstyle    {background-color: #27C77A;} 

I simply put 'backcolor' into the division as a 'CSS Class' and it should change but it simply doesn't. I've tried different spacing and I've attempted to change different parts of the element. 

For instance, If I make the change elsewhere or even right behind the text on the button (sm-button-text) it works flawlessly. 

I'm running out of ideas and any help would be appreciated. 
Photo of Kyle Mathis

Kyle Mathis

  • 576 Points 500 badge 2x thumb

Posted 3 years ago

  • 1
Photo of Peter Baeza

Peter Baeza

  • 2,868 Points 2k badge 2x thumb
Instead of changing the CSS you could clone the mobile theme you are currently using and change the color of the button. Much easier and you get preview while you make the theme and don't have to manually maintain the CSS.
Photo of Zach McElrath

Zach McElrath, Employee

  • 48,984 Points 20k badge 2x thumb
Agreed with Peter - if you upgrade to Banzai, the latest release of Skuid, you can change lots of styling properties related to mobile buttons, including button colors, all using the Theme Composer. Just go to "theme" and then "Mobile" to get to Mobile themes, then click "Create new Theme" to create a new mobile theme.
Photo of Kyle Mathis

Kyle Mathis

  • 576 Points 500 badge 2x thumb
Incase anyone doesn't have Banzai or comes across this same problem, here's the solution. I wasn't hitting the parent class correctly in CSS it should have been '.sm-button.sm-navstyle.backcolor'.

Drop 'backcolor' into your class and it'll work like a charm.