Global CSS not affecting site elements

[gmhansen]

I’ve been trying to apply css entered from the Global CSS section in theme options to elements on the page.

e.g. I created an .h1-white class, assigned it to a headline in my Pro editor, then created CSS for that class in the Global CSS Customizer, but nothing changes.

In addition to that, I’m unable to override the Headings color set in the Theme Options > Typography section even when I use Pro’s “Text Color” setting.

Basically, it looks like the Theme Options > Headings Font Color option is overriding everything else, no matter what. Which really isn’t a workable situation. My headings don’t have a lot of color variety to them, but they certainly need more than just one color.

Here’s a link to a screencast showing what I’ve tried, and how it’s all failing to override the theme options setting.

Please help!

note: in a previous thread one of your reps suggested that this might be getting caused by a custom CSS error somewhere, but the only custom CSS that I’ve applied anywhere was in the global CSS area to this heading, and one button style. nothing complex, and nothing that I would think should be breaking anything.
This is a fresh install where I just cleaned off the entire WP database, so if you’re able to find any left-over custom CSS I’d be shocked (and grateful )

[ruenel]

Hello @gmhansen,

Thanks for writing in!

Did you added your custom css in Appearance > Customizer > Additional CSS? Please be advised that the custom css added here maybe overridden by the theme option settings. The hierarchical order of the styles loaded in your site is this:

• Theme’s stack style.css
• Child theme’s style.css
• WordPress Additional CSS (Appearance > Customizer > Additional CSS)
• Theme Option settings
• Theme Option’s Custom CSS
• Cornerstone page’s Custom CSS

You must add your custom css in Theme Options’s custom css so that it will override the Theme Option settings.

By the way, we cannot check your site because the site url is invalid. We cannot view your site.

Best Regards.

[barryovb]

I have tried the additional CSS but it isn’t working.

When I put the CSS in Wordpress Additional CSS, Wordpress Additional CSS got overridden by the generated CSS. See the screenshot below.

.e776-4.x-text .x-text-content-text-primary is the generated CSS of the theme with the unique CSS “e776-4” while .subtitle.x-text .x-text-content-text-primary is my custom CSS with my own Custom CSS “subtitle”.

I want to replace “e776-4” with “subtitle”.

I’d want to do this for several elements on my website. I would need a kickstart from you, please.

If I take my custom CSS to Global CSS, it works perfectly when the website is viewed in browsers but doesn’t display in the builder.

Thanks for your help.

[barryovb]

We are facing similar issue just as you have said earlier…

[christian]

Hey Barry,

Thanks for providing screenshots.

That happens because of [CSS Precedence](You can read more about that here: http://tutorials.jenkov.com/css/precedence.html) and/or Specificity. With that said, the solution to your problem, since you want to use the WordPress Customizer CSS, is to make your CSS more specific usually by adding more parent selectors.

It’s also recommended that you use the Theme Options > CSS for adding global CSS because that has more priority or precedence that the WordPress Customizer CSS.

In summary, this is not an issue with our theme nor CSS syntax errors but incorrect CSS.

Thanks.

[barryovb]

Oh, I see.

Thank you for your reply and possible solution. I just finished reading that.

I’ll get back to you.

[gmhansen]

I’m assuming then that you might not have watched the entirety of the screencast that I linked? It shows that I added my CSS into the theme options CSS area, and not into the Custom CSS section under Appearance > Customizer.

So: with the CSS hierarchy that you presented, was it in reverse order, making the Cornerstone page’s Custom CSS the one that takes precedent over the rest? Theme options taking second?

I’ve also attempted to add the custom CSS directly to the elements on the cornerstone pages (since deleted to keep things clean as you debug), and that didn’t work either. Attached screenshot shows the area I’m referring to.

As for the incorrect URL, I’m sorry. I left in the ‘www.’ Still not used to excluding that from my domains.
I’ll include it in another secure note for convienice.

[barryovb]

!important does the trick perfectly.

I think I prefer it to the Specificity method.

Thanks.

[barryovb]

Maybe you are not using the proper selector.

I have everything working for me now.

[gmhansen]

Thanks MrBizzy, but I’m hoping that the solution here isn’t to tag each of my CSS edits with !important, because that could end up causing a whole bunch of other issues down the line, should I need to employ any media queries.

My understanding is that the custom CSS entered into the Theme Options should be overriding the default theme options.
As for using the proper selectors, I’ve created custom classes on elements inside the element ‘customize’ sections, then copied and pasted those classes into the CSS editor in Theme options. So I don’t know how I could be getting that part wrong.

I’m really hoping that there’s some simple trick/fix that i’ve just overlooked here.

[barryovb]

Do you want to use your custom CSS to centralize your texts and even add color?

Use this code:

.h1-white.x-text .x-text-content-text-primary { text-align: center; color: brown !important; }

Where .h1-white is the Custom Class

The text will be centralized both in browsers and the builder.

The text will be colored following your Custom CSS color when viewed from browsers but it will not be colored in the builder except you add !important as shown above in the solution.

Basically, I have seen that most Elements will not take your CSS color except you add !important or you’d have to be specific with your selector just I have read from the link that @christian shared in this thread.

If you want your CSS properties to be applied to specific screens, please use @media.

Do let me know how I can assist further.

I hope this helps.

[ruenel]

Hello @gmhansen,

You are inserting ID and classes incorrectly.

For ID, only one unique text is allowed. For classes, you can insert different classes as many as you want. You just have to separate each of them with a space character.

When using the ID in your css, it should be like this format:

#ID {
  /* some css styling here */
}

For the classes, it can be like this:

.class1 {
  /* some css styling here */
}

.class2{
  /* some css styling here */
}

.class3 {
  /* some css styling here */
}

To learn more about the HTML element ID and classes, please check this out:

• https://www.w3schools.com/html/html_id.asp
• https://www.w3schools.com/html/html_classes.asp

And if you are going to add an inline element css, you can make use of this code:

$el.class1 {
  /* some css styling here */
}

$el.class2 {
  /* some css styling here */
}

Hope this helps.

[gmhansen]

Thanks for the response, and good catch on my incorrectly handling that button. I totally overlooked that one, and you probably just saved me from some future confusion when I’d have had to track that down myself

I’m familiar with the general rules for using classes and ID’s and appreciate you demonstrating how they’re supposed to be used inside the Inspector. The problem is that, even when I use them correctly, they’re not working.

See the following screenshots for example. I’ve assigned the class white-text to the heading on my video hero header. Then I went into Theme Options, opened the global CSS drawer and created .white-text {} as a class, entering color:white; to set the color of any text using that class as white.
But nothing happens. After saving in theme options, returning to my header editor, and refreshing, I find no change.

I’m able to affect the heading’s size by setting up some css for h1 in Theme Options, so I know that the global CSS is at least working.
But I don’t understand why it’s not taking custom classes into account.
Same story for on-page CSS, or in-line CSS.
I’m assuming that i must be doing something wrong here, but the problem is not, as you suggested, that I’m just entering the CSS and ID’s incorrectly (with the exception of that button )

[jade]

Hello @gmhansen,

The CSS class and the CSS code you have added for the class is actually there but you are not seeing it take effect because there is another CSS declaration that is more specific than the CSS you have added which is given the priority.

For example, you have added the class white-textto the headline element with the text Join the Pretty Shell BETA.

If you go to the frontend of the site and check in the code inspector, the code is actually there:

However, you also have to take into account the complete structure of the headline element since it has some inner divs:

Notice that there is a generated CSS:

.e61-4.x-text .x-text-content-text-primary {
    margin: 0 calc(0em * -1) 0 0;
    font-family: "Roboto Slab",serif;
    font-size: 1em;
    font-style: normal;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0em;
    text-transform: none;
    color: rgb(255,255,255);
}

This sets the color to the headline element based on the color set to the text element setting.

This generated CSS has a higher level of specificity so the code you have added to the white-text class get overridden by this that is why it seems that you code doesn’t take effect.

It is possible to override the generated code above. You just need to rewrite your CSS code and make it more specific than the generated CSS.

So from:

.white-text {
    color: white;
}

You may update it to:

.white-text.x-text .x-text-content .x-text-content-text .x-text-content-text-primary {
    color: white;
}

Unfortunately, we cannot provide further details from here because this has nothing to do with the theme but more about the understanding of how CSS works.

Please check these links if you wanna learn more about the CSS Specificity:

https://www.w3schools.com/css/css_specificity.asp

Specificity

Hope this helps.

[gmhansen]

Thanks for diving deeper into that, Jade! Ok, good to know where I’m messing things up. So on inspecting the elements of a page, I’m able to find some of those classes but, like in the example you showed above, I’ve also go the auto-generated classes based on where the element’s parent div is located (e.g. .e61-4.x-text). I’m wanting to create some truly global CSS that will allow me to just drop in pre-established classes and move on (and so that any future edits I make will apply globally).
So getting to greater specificity like you demo’d above es exactly what I’d like to do.
Are the extra classes that you mentioned in your example standard classes for the X/Pro theme? If so is there documentation somewhere that I can find them for future use? (I found this link, but it doesn’t contain the classes you mentioned) or were those just classes that you created for this example?

Thank you again!

[christian]

Hey @gmhansen,

You need to override the generated style by using CSS Specificity. Your CSS must be more specific than what the builder generates usually by adding parent classes to the selector.

We do not have documentation on all of the classes as it’s not feasible to list hundreds of classes available in our themes and builders moreover that the best tool to use is not a document but the browser’s element inspector. All CSS developers should know that and that includes you as you want to use CSS and not the built-in options of the builders.

The sample created by Jade is not random. It’s actually targeting the x-text-content-text-primary specifically using its parent classes .white-text.x-text .x-text-content .x-text-content-text. You will know what parent class to use if you’re going to use the browser’s element inspector. You should learn how to use it if you wish to custom develop.

Hope that helps.

[gmhansen]

Ok cool. Thank you all for your help! I think I’ve finally got it figured out now

[jade]

You’re most welcome, @gmhansen.