I have been trying to migrate to Cornerstone, but I ran into problems with my homepage adapting to it well. So I decided to just rebuild the homepage using Cornerstone and getting rid of the X-Shortcodes homepage.

The problem is I can not get my buttons in the dark areas to adapt like they did with X-Shortcodes.

See brppodcast.com (This page is still running on the X-Shortcodes) I want to change it to Cornerstone for future simplicity and also the buttons aren’t playing nice.

I am building the exact same page now in cornerstone, but the buttons in the dark area will not change to white like I have them now.

This is the CSS I used before in the customizer to make this happen:

.text-white h2,
.text-white p,
.text-white .x-btn {
color: #fff;
}

.text-white .x-btn {
border-color: #fff;
}

.text-white .x-btn:hover {
opacity: 0.75;
}

It is still in the customizer under Custom CSS, but it doesnt do anything when building in Cornerstone.

Any ideas?

Thank You in advance!

I got the text AND the border to the right color (white) by adding

color: #ffffff; border-color: #ffffff;

to the style of the button under the advanced options.

Figured I would leave this because I saw a lot of questions around this topic with complex answers that didn’t help me.

Did you already see our Additional Button Colors walkthrough at https://community.theme.co//kb/implementing-additional-button-colors/?

Thanks.

Exactly where does this line get put into the system? [button class=”my-btn” href=”#” title=”Title”]

Couldn’t we just select the button and choose a color? It would be a lot easier.

[button class=”my-btn” href=”#” title=”Title”] – This code can be added in your raw html element of cornerstone.

Color option for button. This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive.

Thanks.

I’m sorry but I have no idea where the raw element is located. You probably have a different name/process for it than I know. I was trying to add the css below in customizer but could not get it to work. I did make progress by adding the code to my child theme style.css and changing the type of element in cornerstone from block grid to button. Please see http://www.acre-school.com – More Continuing Education Courses button. Please let me know where to put the button class.

.x-btn.bluebutton {
color: #ffffff;
border-color: #7a7a7a;
background-color: #1e73be;
-webkit-box-shadow: 0 0.25em 0 0 #7a7a7a, 0 4px 9px rgba(0, 0, 0, 0.75);
box-shadow: 0 0.25em 0 0 #7a7a7a, 0 4px 9px rgba(0, 0, 0, 0.75);
}
.x-btn.bluebutton:hover {
color: #ffffff;
border-color: #7a7a7a;
background-color: #1e73be;
-webkit-box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
}

Please see the first attachment to know where to add class name.

Check the second one which shows ‘raw content’ element.

Hope it helps.