Docs

[Michael C]

So guys, now you get this one a lot, but I couldn’t find the answer on the forums. Working on a new site and I need to change the text color of a button on a single page only [http://fogp.twoguyswebserv.wpengine.com/garfield-alive-tours/]. On that one page I need to change the button text color to black.

Thank you in advance!

[Prasant Rai]

Hello Michael,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

.page.page-id-70 div#x-content-band-4 a.x-btn {
    color: #000;
}

Thanks.

[Michael C]

That worked perfectly. [You guys ROCK] Can I add another page id to that code if I need to add another button somewhere else? Would I just add the page # after the “70” in your code?
Thanks again..

[Friech]

Hi There,

Thank you for the kind words. The “70” is actually the page id, so you need to replace that with the page id of your new page.

Follow this post on how you can locate the page/post IDs.

Hope it helps, Cheers!

[Michael C]

Awesome. But let’s say I wanted to add another page in addition to page 70. Can I add to the exisiting code snippet, ie:

.page.page-id-70, 71, 75, div#x-content-band-4 a.x-btn {
color: #000;
}

Or do I need to replace page 70 with page 71 Do I add the whole code snippet again for each additional page?

.page.page-id-71 div#x-content-band-4 a.x-btn {
color: #000;
}

Sorry for the confusion. Hope this is making sense now.

[Prasant Rai]

Hello There,

In that scenario you need to change the code to something like this:

.page.page-id-70 div#x-content-band-4 a.x-btn, .page.page-id-71 div#x-content-band-4 a.x-btn{
color: #000;
}

Thanks.

[Michael C]

Perfect as always!!!!
Thank you

[Prasant Rai]

You are most welcome. 🙂

[TTCmanagement]

I have a similar issue on my site (http://digiridders.nl) and though I’ve looked through the forum and read through ‘Implementing Additional Button Colors’ the suggested solutions aren’t working for me.

I have several buttons on my homepage and have set the general button color to white (I’m using transparent buttons) in my customizer. However, one of the buttons would look better in black, because it’s on a relatively light background.
I’ve tried changing the color of the button using a custom button class. I added [button class=”my-black-button” href=”#” title=”#”]Meer[/button] to the button’s ‘text’ field in cornerstone, but this gave me a weird white square in front of my original button, almost like a second button, so I got rid of that. I attached a screenshot of the this. Do I need to add the code somewhere else?

[TTCmanagement]

Sorry, forgot to change the file size.

[Joao]

Hi There,

On Cornerstone, Click on your button.

On Cornerstone left tab, on the bottom, you will find the Style Box of this button element.

Add:

color: white; border-color: black; color: black;

Alternatively if you also want to change the hover color.

Add a class in the clas box , for example : blackbutton

Than Access Appereance Cust`omizer Custom CSS and add

.x-btn.blackbutton {
color: white;
border-color: black;
color: black;
}
.x-btn.blackbutton:hover {
color: red;
border-color: black;
color: black;
}`

Hope that helps

Joao

[TTCmanagement]

I tried that, but there is no style box. When I select the button and scroll down, all I see are the following boxes: text, href, link title attribute, open link in new window, type, shape, size, block, marketing circle, enable icon, and finally info.

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– Point the page and the button you are trying to change

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[TTCmanagement]

This reply has been marked as private.

[Paul R]

Hi,

Please update your theme and plugins.

You can find the latest version numbers here: (https://community.theme.co/kb/version-compatibility/ ) Then you can compare them to what’s installed on your site.

If you find anything to be out of date, you can review our update guide.

Don’t forget to check the changelog as well – http://theme.co/changelog/

Thanks

[Author]

Posts