[pixieParticipant]

Hi team,

Day 5 working with X and I have to say honestly it has not been as smooth I as had hoped – steep learning curve. Currently struggling with css – and all the different locations to add it – but slowly navigating between working with Cornerstone and the Customize section. Do you usually work with 2 windows open – one for each?

Moving on – I do love the forum, and have found many answers here without writing in, very grateful for this resource. However the advice from this post to remove the shadow from the button text by adding css to the X Customizer did not work:

How to remove drop shadow from text on buttons?

And this suggestion to add to the Cornerstone custom css did work (but only in the cornerstone preview – not displayed on the site after saving?)

Remove text shadow on flat round buttons

The answer I am looking for in the end is to remove the shadow from the button text.
AND
If you could perhaps clarify why the suggestions to add the css in different locations and why the Cornerstone suggestion would work for one user but my settings do not, seemingly overridden – somewhere –

ps – I did try old school firebug find the css edit and paste into both locations as well, but no luck 🙁 what is the trick to this multiple css wonderland? I am not used to such a struggle to complete such a simple task – yikes – it’s probably me?

[Paul RModerator]

Hi,

The codes provided above is for button box shadow and the other one is for flat button only.

You can add this under Custom > Edit Global CSS in the Customizer.

a.x-btn {
   text-shadow:none !important;
}

Hope that helps.

[pixieParticipant]

Hi again,

Hammering away here and have had success with removing the button shadow but, not using the shortcode, but inserting a button element from Cornerstone and then adding the text-shadow: none; to the style field there — which in the 3 hours struggling with the above css issues and digging through the forum was never suggested – so now my question is with the 4 locations to add css – which is the most streamlined moving forward?

If I add my css styling edits via cornerstone elements will they be lost in any future updates/upgrades – or would it be better practice to figure out the global styling issue above and add the text-shadow: none; to another css location?

I am trying hard to find the groove here…

[pixieParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

You can add CSS diffrent ways :

Adding inline CSS is being apply on specific element, e.g : <h1 style="color:red">Heading</h1>
Assume that I’ve added following CSS once under cornerstone setting tab/CSS and once under customizer/CSS or child theme’s style.css file:

a.x-btn {
   text-shadow:none !important;
}

The code we add in cornerstone page will be applied to elements with x-btn class only on that specific page, while adding CSS under customizer or child theme’s style.css fileis being apply to all elements witch has this class through entire site.

Feel free to add CSS anyway that you want, as they won’t be lost or overwritten during update.

Hope it helps.

[pixieParticipant]

Thank you Christopher 🙂

Does this mean that adding css to the Cornerstone Custom CSS (with the little paintbrush icon) OR adding the same css to the X Appearance > Customize > Custom > Edit Global CSS are one and the same?

[ChristopherModerator]

Hi there,

Both are correct places to add custom CSS, but note that code under cornerstone settings tab is being applied to one page while adding it under customizer is being applied globally.

Thanks.

[pixieParticipant]

Christopher,

I have removed any css edits in Cornerstone I made earlier (because I would like a site wide solution to removing this shadow AND to try and understand the best way forward with these systems) and added your above code only to the X Customizer > Custom > Custom Code > Edit Global CSS

but it’s not working ??

Please advise.

[ChristopherModerator]

Hi there,

There are several missing curly bracket in your code. The media query correct format is :

@media (max-width: 979px) {/*opening bracket*/

/* Style goes here*/

}/*closing bracket*/

But your code is :

@media (max-width: 979px) {
.x-navbar-inner {
        background-color: rgba(57,49,45,0.6);
    }

Which is incorrect, please close curly bracket for all media query rules.

Thanks.

[pixieParticipant]

Correct version of the above would be:

@media (max-width: 979px) {
.x-navbar-inner {
background-color: rgba(57,49,45,0.6);
}}

as in 4 curly brackets total?

Thank you for your patience with my learning curve 🙂

[Paul RModerator]

Hi,

Yes, that’s correct. 🙂

[pixieParticipant]

Thank you both – so much – I have learned so much to carry forward just from tackling these buttons.

My last button question moves over to Cornerstone and past the global settings.
I wanted 2 styles of buttons on the home page, the 1st is the global styles minus the shadow, the second I added the style to the Cornerstone Button element style field:

color:white;border-color:white;background-color: rgba(255, 255, 255, 0.1);

which made the original button look great, but the global button hover settings stopped functioning.
When I remove the code from the style field on the button element then the hover works again…
how can I have both, the new second set of styles and the global hover effect?

[LelyModerator]

Hi There,

What you put on the style field of an element is called inline CSS. In CSS priority, inline CSS is on top compare to CSS added on Customizer or CSS generated by Customizer settings. We can add the content of your style field to another class like default-btn. Then add the following CSS:

.default-btn{
   color:white;
   border-color:white;
   background-color: rgba(255, 255, 255, 0.1);
}

Then just add the class default-btn on the button element.

Hope this helps.

[pixieParticipant]

Beautiful Lely!

Thank you so much 🙂

[Paul RModerator]

You’re welcome! 🙂

[Author]

Posts