Change button color

[focusingresources]

Hi there,

I’m wondering how to change the button color “accent” and “orange” to #fda76d? We want to keep the accent color the blue it is currently set to… we’re just looking to change the button color. I noticed this was possible with some custom CSS, but I’m not sure where to edit…

Thanks!
Maggie

[Kyle – SUPPORT]

Hi

Try adding this to your custom css in Theme Options

.sf-button.accent {
  background-color: #fda76d!important;
}

– Kyle

[focusingresources]

Thanks for the super quick response, Kyle. Will that update the orange button as well?

[Kyle – SUPPORT]

This will:

.sf-button.accent, .sf-button.orange {
  background-color: #fda76d!important;
}

– Kyle

[focusingresources]

Fantastic, thanks so much!

[Kyle – SUPPORT]

No problem

– Kyle

[focusingresources]

Ope – quick follow up… is there a similarly easy way to update the button color in the pricing tables? (pt button)

Thank you thank you!

[Kyle – SUPPORT]

link?

– Kyle

[focusingresources]

Scroll down to the “Would you like to get started” Section on this page… but we use the same thing in several places

Welcome! Here’s a bit of information to help get you started.

~Maggie

[Kyle – SUPPORT]

That button is the .sf-button.accent so the css above will also apply to that button

– Kyle

[focusingresources]

Except that it didn’t…. I swapped out the super orange color with a reddish color hex and it changed the buttons in many places, but not there…

Oh, wordpress… you are mysterious. Any ideas?

~Maggie

[Kyle – SUPPORT]

But before I provided you with css which made your buttons a more pastel orange, now your buttons are back to the bright orange again as if you have removed the custom css?

– Kyle

[focusingresources]

Hi Kyle,
The Custom CSS is still there. For some reason, the buttons on the home page are not cooperating. There are many other buttons on other pages that are… I have no idea why. I’ve attached a picture of what color they should be based on the custom css.
Sorry to be such a headache!
~Maggie

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

In your css you have this:

.sf-button.accent {background-color:#ff9f0f !important;}

Which is the bright orange color, not the color that’s in the screenshot attached

– Kyle

[focusingresources]

Weird, because this is what is in the custom CSS box in our pinpoint options:

.sf-button.accent, .sf-button.orange {
background-color: #e67e4b!important;
}