Change background color of just one button

Questions
,
1

Hi everybody,
I’m quit new both to Skuid and to CSS, so I’m asking for help.

I have a button in the page title, and I’d like it to change its color if a particular field in salesforce is true.
So I thought about rendering, and duplicating the button to show the red one only in some cases.

I went to the page and inspected the code, then copied the css with another color, and told to the second button to get that css, but nothing happens…

Here is the css: 

.ui-button, .ui-widget-content .ui-button.ui-state-default {background-color: #27C77A;}

Thanks in advance for any hint.
Giovanni 

2

Add an Id to the button. Then you can target it specifically.

3

Ok, sorry but I think I’m missing something…
I went to the button, and in advanced I gave it a DOM id “RedButton”, then in the css I changed the .ui-button, .ui-widget-content .ui-button.ui-state-default part of the code with .RedButton but nothing changed…

Thanks in advance
Giovanni

4

I see. Dot notation is for a class, whereas # are for id’s. So… #RedButton

5

Sorry but still nothing happens:
I’m in sandbox, I created a new inline css called red, with the code 


#RedButton{background:#FF0000}

Then in the Advanced section of the Button (that is in the page title component) I assign it the Dom Id RedButton and the css class red.

Nothing happens.
Tried without the class in the button as it says optional, still nothing, the button maintains the same color as the other buttons in the title component

Giovanni

6

Another way that will work quickly without CSS to get a red background is to use a navigation component with one navigation item for your button. Then put it in a wrapper and make the background of the wrapper red. Then you can also quickly style borders and padding too.

7

Very click oriented :slight_smile:

8

its working for me.