Change background color of just one button

  • 1
  • Question
  • Updated 7 months ago
  • Answered
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 
Photo of giovanni pravadelli

giovanni pravadelli

  • 272 Points 250 badge 2x thumb

Posted 2 years ago

  • 1
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Add an Id to the button. Then you can target it specifically.
Photo of giovanni pravadelli

giovanni pravadelli

  • 272 Points 250 badge 2x thumb
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
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
I see. Dot notation is for a class, whereas # are for id's. So....

#RedButton
Photo of giovanni pravadelli

giovanni pravadelli

  • 272 Points 250 badge 2x thumb
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
Photo of Rabart Kurrey

Rabart Kurrey

  • 60 Points
its working for me.
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
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.
Photo of Shmuel Kamensky

Shmuel Kamensky, Champion

  • 4,328 Points 4k badge 2x thumb
Very click oriented :)