Confused about css and font settings - which has precedence?

[Millar]

Hi,

I have been using X & Cornerstone for about a week on a site I have taken over and can’t figure out where to set things. For example, I’d like to use a child theme for my css but nothing happens when I put the code into the child theme’s styles.css file. I can put the same code in to the Dashboard > Appearance > Customize > Additional CSS and it works, but my usual workflow is to test them in the customizer and then move them to the style.css file so I have a backup, etc. I know the styles.css is ‘connected’ because I can see it in change in the editor.

And fonts - there are two places where fonts appear to be set - in the templates > fonts section. But what I’ve set in there is not working - I’ve selected Work Sans and am getting Source instead. And then from the Dashboard > Appearance > Customize, there is a second set of everything - this appears to be taking precedence over the other one. And then there’s another place that shows that I have two body fonts and says I can only have one.

Your tutorials and videos I’ve watched are showing that I should use the X theme options but I don’t know how to override the other set of options. What is best practice here, so that I can do it in one place and not have things overriding each other?

There’s a bunch of css already in the global css section - is this the theme’s css or just where the last person who worked on this site added theirs? I’m just wondering if I need to go through it all, because we’re changing a lot of things and we don’t need a bunch of code that doesn’t apply anymore, or if those are important styles that are part of the theme itself.

Thanks for your help!

[jade]

Hi there,

Thanks for writing in.

@Millar

I have been using X & Cornerstone for about a week on a site I have taken over and can’t figure out where to set things. For example, I’d like to use a child theme for my css but nothing happens when I put the code into the child theme’s styles.css file. I can put the same code in to the Dashboard > Appearance > Customize > Additional CSS and it works, but my usual workflow is to test them in the customizer and then move them to the style.css file so I have a backup, etc. I know the styles.css is ‘connected’ because I can see it in change in the editor.

If the code you have added in the customizer does not work in the child theme’s style.css, kindly try to clear the browser cache as the style.css sometimes gets loaded as a cached version. You can also try loading the page in Incognito Mode in Cornerstone to check it.

@Millar

And fonts - there are two places where fonts appear to be set - in the templates > fonts section. But what I’ve set in there is not working - I’ve selected Work Sans and am getting Source instead. And then from the Dashboard > Appearance > Customize, there is a second set of everything - this appears to be taking precedence over the other one. And then there’s another place that shows that I have two body fonts and says I can only have one.

Would you mind providing the URL to your website so that we can check this?

@Millar

Your tutorials and videos I’ve watched are showing that I should use the X theme options but I don’t know how to override the other set of options. What is best practice here, so that I can do it in one place and not have things overriding each other?

There are some available customization options that you can find in the customizer which you can freely use. In case the option is not available for what you are trying to achieve, that is when you could make use of custom CSS.

@Millar

There’s a bunch of css already in the global css section - is this the theme’s css or just where the last person who worked on this site added theirs? I’m just wondering if I need to go through it all, because we’re changing a lot of things and we don’t need a bunch of code that doesn’t apply anymore, or if those are important styles that are part of the theme itself.

Basically, the settings on the customizer gets loaded as CSS codes in the frontend. These are the options that you can freely adjust by yourself. The theme also has CSS files that sets the default styling of each stack which you can override by writing your own CSS and adding it in the child theme or the customizer.

Hope this helps.

[Millar]

Hi again, thanks for the help. This website is currently on my local host but I will post it later if I am still having this issue.

So you’re saying that the styles in the customizer css are written by the theme, from the settings people have made while working through Cornerstone? If I take that stuff out, does it erase all of those settings? It would be kind of nice if that was the case, instead of having them all hidden somewhere and things competing against each other.

[lely]

Hi There,

This is the order of all CSS:

1.) Inline CSS style > CSS added directly on the elements using the style field.
2.) When adding CLASS depends where the class is defined.
Cornerstone page custom CSS > works after inline style but available on specific page only where you add it.
3.) Customizer CSS > custom CSS you have added on Global CSS
4.) CSS generated from Customiser settings
5.) Child theme style.css file content
6.) Main X theme stack specific CSS.

If there is no inline, it will go to the class attached to the element then check where it is added. Aside from it’s location, it is still depend on the selector. Check this link too: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity. CSS specificity is wide topic, but that’s the main hierarchy.

Removing custom CSS from Cornerstone page means that it will only remove those CSS design for that page. Sitewide settings is still intact.

Hope this helps,