Ethos 3 style.css

I have the X Theme installed and using a child theme. It was installed using the templates for X child theme. It has been activated and I chose to use the Ethos 3 demo. I am trying to change the style.css in the child theme folder. When I click on INSPECT in Chrome, it says the site is using:

http://localhost:8888/domain_name/wp-content/themes/x/framework/legacy/cranium/dist/css/site/ethos.css?ver=6.4.6

How do I get it to recognize the style.css so modifications can be made?

I just noticed that I can edit the CSS in X > THEME OPTIONS > CSS

I’ve always edited in style.css using PhpStorm from jetbrains.com and since I’m so used to using their software, do I have the ability to use the typical style.css that is used when using a child theme?

Hi Jason,

Thank you for writing in, yes it should work, our x-child theme is no different from other child theme. The styles in ethos.css are the styles of Ethos stack, it can be override from child theme’s style.css or Theme Options > CSS. Just make sure you use a more specific selector on your custom CSS.

CSS Specificity: Things You Should Know

Cheers!

Hmmm, so I can’t use the same specificity in style.css? For instance, if ethos.css is using:

.h-widget {
margin: 16px 0 12px;
font-size: 128.6%;
line-height: 1.3;
color: #fff
}

I cannot use the same code in style.css and change it?

Also, if I edit in Theme Options > CSS and then the theme updates, does it override my edits?

Hi Jason,

Yes you can not use the same selector, you can still copy it but make it more specific, like:

footer .h-widget {
margin: 16px 0 12px;
font-size: 128.6%;
line-height: 1.3;
color: #fff
}

Or

.x-sidebar .h-widget {
margin: 16px 0 12px;
font-size: 128.6%;
line-height: 1.3;
color: #fff
}

You can also use the unforgiving !important statement if it really needs to.

When Using !important is The Right Choice.

No, Theme Options are saves in database, so its safe when you do update.

Remember to clear all your caching features (plugin, server-side, CDN, and browser’s cache) after updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.