Inline Css

[quituck]

Hi,
I’m trying to remove the inline css from my pages so that my site loads faster and to improve my SEO. I’ve been following the advice from a previous thread see here >>>https://theme.co/apex/forums/topic/move-inline-css-to-external-file/
I was able to remove the inline css but of course, I lost all the styling on my pages. I moved the css code from the customizer but to the css stylesheet in my child theme but the styling didn’t come back for the header, buttons, footer, etc…so I guess my qustion is do you know where I can find the css for the pages main features like the nav bar and footer so I can move it to the style sheet or do I have to code it from scratch? Overall my question is How do I remove inline css and manage it in an external stylesheet?

Thanks

[christian]

Hey @quituck,

Regretfully, it is not possible to move inline CSS to an external file. It won’t affect your SEO though because the generated styles are minified. If you want to override some theme styles, it must be done in the Global CSS. Global CSS is not minified automatically so you need to manually minify your CSS before inserting it there using a tool like https://cssminifier.com/. You can put your own styles in style.css.

There might be some tools or plugins that can pull inline CSS from a cached page and load it externally. You must use them at your own risk though and we do not have support for optimization issues.

Thanks.

[quituck]

Okay I will look into css minification.

Since I have you, I have one other issue that I could use your help with.

My author page background is transparent see here https://internetideators.com/author/toddallan/

I use this code to make other pages on my site non transparent

.blog .site,
.single-post .site {
background-color: #ffffff !important;
}

But I can’t figure out the css for the author page.

Please advise.

Thank you

[Prasant]

Hello @quituck,

Thanks for updating thread.

Please add following CSS under X > Theme Options > CSS to change author page background:

.author .site {
    background-color: #fff !important;
}

Thanks.

[quituck]

Works Great.

Thank you!

[thai]

Glad we were able to help