X-generated-css

[alvinlewis]

Hi there.

I’d like to remove x-generated-css from my websites head section. I understand this will mean I can’t use customizer, and I’m fine with that.

I’ve tried this:

function remove_inline_customizer_css () {
remove_action( ‘wp_head’, ‘x_customizer_generated_css_output’, 9998);
}
add_action(‘after_setup_theme’, ‘remove_inline_customizer_css’);

which seems to have no effect.

T|his:

function x_output_generated_styles() {
//Empty
}

which breaks my webste, as the function is already called in frontend/styles.php - If i remove the function from frontend/styles.php, the website works, but loses styling (even thiough the styles are declared in the child theme)

can you help me remove this chunk of code from head?

Thanks

[lely]

Hi Alvin,

You can see how it is built here and how the functions are called:

\wp-content\themes\x\framework\functions\frontend\styles.php

Unfortunately, we’re not supporting removing it because it will break your site. That function includes more than the Theme Option settings CSS.

[alvinlewis]

Hi Lely

To be clear, I don’t want to remove the function from styles.php

I would just like to remove the x-generated-css from the section of my site - can you help with that?

[friech]

Hi Alvin,

You can not remove the x-generated-css without removing the function that outputs it.

Regretfully we can not provide support on this customization, the x-generated-css tag, in particular, is a core part of X itself. It takes all the decisions you made in Theme Options and styling for them. This works in conjunction with the static stylesheet to providing customization options. If you want it removed, you’ll need to supply those styles somewhere else and will lose the ability to use the settings in Theme Options.

Thanks,

[alvinlewis]

Hi Friech.

I absolutely do not care about losing the ability to use settings in the theme options, I would like the CSS to be from my child theme css file only.

With that in mind, I replaced the function in x\framework\functions\frontend\styles.php with

function x_output_generated_styles() {
//Empty
}

and it worked - no more generated css in head. Great. I should then be able to declare this css in my child theme, correct? But when I do so, the css in the child theme is ignored (I can see from the page source that the file is being referenced).

example - in x/framework/legacy/cranium/dist/css/site/icon.css you specify .p-info{float:left and in my child theme css i declare .p-info{float:right (I even tried !important) - for some reason, the parent icon css applies.

Have you any idea why the child theme css would be ignored?

Thanks.

[lely]

Hi Alvin,

The reason is CSS specificity.
On icon.css it was declared like this:

.x-topbar .p-info {
    float: left;
    margin: 9px 0 0;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.3;
    text-transform: uppercase;
}

.x-topbar .p-info selector is more specific than .p-info. You will encounter more of this issue as you go along. If you’re not familiar with it, we do recommend not to alter core functionalities of the theme. Thank you for understanding.

[alvinlewis]

Hi Lely,

I am familiar with css. I don’t was this css in the head of my document, I want the css declared in a stylesheet. I understand that this is “a functionality of the theme” but that is not what I want. Lets just assume I’d never touched code in the customizer, and am only working with child theme css (as that is my currenty setup since emptying the function in styles.php)

Apologies for not being specific enough - this is what I have in my child theme css

.x-topbar .p-info { float:right !important; margin-right:20px; }

yet still it is overriden by icon.css

can you please advise why else this might be?

Thank you.

[jade]

Hey Alvin,

That is because the style.css file that is loaded by the child theme is cached version that is why even if you have made some changes in the style.css, no changes are still visible.

An option would be to clear your browser cache after making changes to the style.css file.

Another is to apply this solution:

Child Theme style.css has version "?ver=5.1.1" and doesn't load original

Hope this helps.

[alvinlewis]

Hi Jade.

So, my customizer css is empty, I’ve included the script to remove the css version as suggested, I’ve purged the cludflare cache. turned off all local caching (after purging), refreshed browser cache (and tried private windows) and still I see x generated css in the head. Also, .x-topbar .p-info { float:right !important; margin-right:20px; } as declared in my child theme css, is still overridden by .x-topbar .p-info { float:left; } in themes/x/framework/legacy/cranium/dist/css/site/icon.css

Any other ideas?

[lely]

Hi Alvin,

Please share the URL in question so we can further. Thank you.

[alvinlewis]

Hi Lely,

Here it is.

https://www.streetermarshall.com/

[lely]

Hi Alvin,

At the moment, your child theme CSS is already working on top of icon stack CSS for .x-topbar .p-info. You have it twice in child theme style.css and both are working.
See this: https://screencast-o-matic.com/watch/cqjQQsONWA

[alvinlewis]

Hi Lely.

Any idea why I migt be seeing different, having checked multiple browsers?

Also, are you seeing x generated css in head?

[jade]

Hey Alvin,

Just the same as Lely, this is what I am seeing on my end:

Perhaps it is a browser caching issue that is why you are seeing an older version of the site resources where the code in the icon.css file is given higher priority so kindly make sure to thoroughly clear your browser cache.

[alvinlewis]

Hi Jade.

Not sure why it would be browser caching as they’ve been cleared.

Anyway, I guess I’ll have to check that elsewhere, but can you confirm whether or not you still see the x generated css in head for me?

Thanks.

[lely]

Hi Alvin,

X generated CSS is still there when I viewed the source code.
You might try to set Cloudflare to development mode. This is to make sure it is not cause by cloudflare.

[alvinlewis]

Thanks Lely - Turned on development mode and the generated css has gone. Odd, as I have purged the cludflare cache and it was still there!

Also, I’ve downloaded an entirely new browser, never used before, and still see the flaot:left on .x-topbar .p-info

[lely]

Hi Alvin,

Please check in with your Cloudflare provider. Maybe because the content of your site is still on progpagation after purging cache. As you can see, it is both working for us when we checked. The provider can answer you better. Thank you.