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.
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.
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.
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.
