Docs

[sonofzell]

Greetings,

I am having a heck of a time changing the color of buttons (example page: http://www.warminsterpioneers.org/wordpress/login ).

I have modified colors within X customizer, however the elements appear in the default red color when using cornerstone. I am able to override the background color to #1d453c using the element class, however a red outline remains.

I have not inserted any custom CSS for button colors; and I’m quite stumped. As you can see on the example page above, I have attempted inserting the button as a cornerstone native element as well as a manual shortcode within a text box.

What am I missing?

Thanks in advance,

K

[Darshana]

Hi there,

Thanks for writing in! That red border outline comes from your custom CSS rule that you have added.

#cs-content .x-btn {
    border-color: #ac1100;
    box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
    color: #ffffff;
    margin-bottom: 0.25em;
    text-shadow: 0 0.075em 0.075em rgba(0, 0, 0, 0.5);
}

To override these settings, please refer to the following post (https://community.theme.co/forums/topic/custom-button-colors/#post-344481).

Hope that helps.

[sonofzell]

Thanks for the reply!

Your advice helped me a bit with the cause, however I am still pretty sure there’s something buggy happening here. These are my two hangups:

1. Using your link as a reference, I see that I had only a style class for the button background and not the border. Adding the border removed most of the unwanted red color, however a portion below the element remains (looks like a drop shadow of sorts). In the link you provided, I only see style classes for text, border and background; I’m not sure what part of the element is considered the “drop shadow” color.

2. More concerning is the fact that the CSS you mentioned above seems foreign. I do see it in the page source, however there is no such code present in my customizer CSS, and it’s certainly not a style that I would have intentionally added (as you can see, my site’s color scheme doesn’t include any red hues at all). When I view Appearance>Customize>Buttons, my desired colors are visible, with no red in sight.

It seems something is preventing the colors I have assigned in customizer from being implemented in the cornerstone GUI.

Any thoughts?

[sonofzell]

This reply has been marked as private.

[sonofzell]

Update: After inspecting the page source more closely, I found the “box-shadow” style class. Adding this to the element style in cornerstone solved the issue and the red is gone (yay!).

So I’m sorted out with regards to a workaround, however I’m still curious as to why the CSS set in customize is not being replicated in cornerstone.

[Darshana]

Hi there,

As I have mentioned above, the red border came from your custom CSS added. When you have add custom CSS, it will override the default settings.

Hope that’s clear.

[sonofzell]

I’m sorry: I have not added any custom CSS for buttons. I did see it in the original page source, however I did not put it there (again, at least not knowingly).

My question is: if the code containing #ac1100 is not present in my customizer, not present in any element style tags, and was not added to any other stylesheets, why would it still be propagating in the page code?

[Friech]

Hi There,

That css code is generated by Cornerstone, however that should not be the styled to be applied for the button when you’re on X|Theme, it should be the style you set on the Customizer > Button. So you’re right this seems to be a bug but only on your setup, as I cant replicate this issue on my end.

Is there a chance that you switch to different theme and still use the Cornerstone? And why there is two instances of X theme on your site? Please delete the other one. And can you confirm that the folder of your X|Theme on /wp-content/themes/ is named x?

Thanks.

[sonofzell]

Hmmm, I may have done something erroneous if there are two instances of the X theme… I did create a child theme for some customizations (within the folder “X-Child”).

I installed “X” immediately after WordPress, so to my knowledge, there is no other theme available than the WP defaults. I don’t believe they support Cornerstone, but I have not yet tested.

[sonofzell]

Attached is a screenshot of the themes shown in “/wp-content/themes” I created a child theme in order to protect customizations from being lost during Themeco updates; perhaps I did something incorrectly when doing so?

[sonofzell]

Update:

I identified the reason you were seeing two instances of the X theme. When I created my child theme, I renamed the directory for it, but never actually changed the title in the child theme’s “style.css”. That has been corrected, and both parent and child themes are identifiable by name within the admin dashboard.

HOWEVER…

I have played around with both the parent and child “X” themes activated. In both scenarios, my button colors are selected in the cusomtizer (without any red, of course). Within the cornerstone editor, however, buttons are STILL appearing red unless I specify classes in the element settings. This is easy enough to work around when inserting top-level buttons in cornerstone, but when I’m required to code them (for example, placing a button within a block grid), it’s a bit cumbersome.

Regretfully, I’m still stumped. 🙁

[Rad]

Hi there,

Please try clearing your plugin cache, then disable it for a moment. Then clear your browser cache. I don’t see any red buttons on my end, but have connection issues with your site.

Connection lost. Saving has been disabled until you’re reconnected. We’re backing up this post in your browser, just in case.

And I can’t get into cornerstone builder.

Thanks!

[sonofzell]

I may need some guidance with disabling plugin cache. I’ve used several caching plugins and used them to clear data, but none specifically reference “plugin cache”.

Additionally, I’ve added the following to the site’s custom CSS in an attempt to rid it of the harassing red buttons, with no success:

.x-btn {
color: #ffffff;
border-color: #333;
background-color: #1d453c;
-webkit-box-shadow: 0 0.25em 0 0 #666, 0 4px 9px rgba(102, 102, 102, 0.75);
box-shadow: 0 0.25em 0 0 #666, 0 4px 9px rgba(102, 102, 102, 0.75);
}

.x-btn:hover {
color: #ffffff;
border-color: #1d453c;
background-color: #666;
-webkit-box-shadow: 0 0.25em 0 0 #666, 0 4px 9px rgba(102, 102, 102, 0.75);
box-shadow: 0 0.25em 0 0 #666, 0 4px 9px rgba(102, 102, 102, 0.75);
}

The specific page I’m using to test is: http://www.warminsterpioneers.org/wordpress/articles/u10-comp-cheer-national-champions/

[Christopher]

Hi there,

The cache plugin is still active on your end, please disable it while you’re developing your site. See the attachment.

Hope it helps.

[sonofzell]

Thanks, Chris – that’s helpful. I didn’t realize the effect caching would have when using cornerstone.

Still no luck with the buttons, however. Even after clearing all caches, I’m still “in the red”.

[Author]

Posts