Lost my CSS customisation

If you can see the css customization on one of the generated files by my plugin, them most probably it’s either,

– something to do with the order of css files
– the css selectors on the customizations are not properly called, so it doesn’t overwrite previous stylesheets
– there’s some other css file missing or some other file was enqueued with a different mediatype and got stuck together with some others.

If your customizations are on a CSS file, here’s some things to try (one by one, in order):

On the plugin settings page:

Select “Disable reordering of CSS files” and save. Does it work?
Select “Disable minification on CSS files” and save. Does it work?

Select “Disable minification on HTML” and save. Does it work?
Select “Disable CSS processing” and save. Does it work?

Select “Disable JS processing” and save. Does it work?
Add the css full url to the ignore list (the one with customizations).

—

If none of this helps, please send me the admin access to wp-admin via https://fastvelocity.com/contact-us/ and I’ll take a closer look.

• This reply was modified 8 years, 1 month ago by Raul P..

Hi Raul,

Thank you so much for getting back to me so quickly. I tried each step above but unfortunately none of them worked (including ignoring the style.css with customisations).

I have created a temp admin access for you and sent it to https://fastvelocity.com/contact-us/ Would really appreciate it if you can take a look.

Thank you so very much.

Lydia Kurnia

Hi Lydia,

This is probably a cache problem on your local computer or device, because I disabled the plugin and took a screenshot, and then I enabled it and took another screenshot… and then there’s absolutely no difference between the two.

I also checked that all javascript and css has been merged properly, so nothing else for me to do.
It’s working fine, please try using Google Chrome on Windows 10 (the most usual setup) or an up to date OS and browser. Also try to clear your browser cache or use another device to view the site.

Here’s without my plugin:
https://pasteboard.co/jXcwQTSG2.png

And here’s after:
https://pasteboard.co/jXgkwqJA9.png

Zero difference in layout.

By the way, your hosting is so slow I think you should try to move the site to another provider.
Take a look at cloudways.com and choose a vultr, Sydney location for $9 if you’re on a budget… or find something in the US west coast.

Hi Raul,

Thank you so much for taking a look. No, it isn’t the browser cache issue because the screenshot isn’t the version with my customisation. And when I try to apply any customisation, nothing sticks either, it’s like the site isn’t reading my custom style.css

I use Google Chrome. You can try doing this – change one aspect of the site, say removing the gray background in navigation bar via inspect element. This works, but when I write the same code in the style.css via Appearance > Theme editor – the customisation doesn’t show. It’s like the link between my style.css and the live site has been cut off.

Yes it is very slow! Thanks for the recommendation but I went to the hosting and they said it’s the website setup? I looked at the gtmetrix report it told me to minify and this is when I tried your plugin. First thing I did was actually purge the processed css and js files and that’s when all the customisation disappeared. Do you think this has anything to do with the issue?

Do you think your plugin will speed up the site or is it a hosting issue?

Thanks again so very much for your help.

Just to make sure I understand the issue… it’s not that your css is lost when you use my plugin, but instead that after you edit your style.css via the theme editor, it doesn’t apply to the site or it doesn’t show any changes on the site.

From my tests, this seems to be true with and without my plugin (uninstalled)… so your request here is not a problem or support thread related to my plugin, but rather with your theme.

I would suggest you to contact your theme author and ask him about it.

—

When you change the css code on chrome directly, it applies regardless of any other rules (it’s a preview)… but when you edit the style.css file, things work differently.

The order of css rules and files matter as well as specificity on rules.
ex: https://www.smashingmagazine.com/2010/04/css-specificity-and-inheritance/

In other words, #id div.someclass { } will take precedence over .someclass { } even the the second comes later. If the second one however, was the same as the first (same specificity) then the later would be applied.

I removed my plugin and used the theme editor on your site to change the style.css and tried to make the nav bar white with this:

div.storefront-primary-navigation { background:#FFF; }

However it didn’t work, even though I see it when I open that css file directly on the browser (it’s definitely there and it’s the last one).
I tried more specific selectors and those still didn’t overwrite the background.

I disabled javascript on my browser and it still didn’t work, so it’s not JS related.

I see on the network tab that the stylesheets are being downloaded, so it’s being processed properly… however, the browser is giving priority to some other css rule, somewhere earlier.

Just to make it clear this is outside of the scope of my plugin, it’s clearly a problem with your theme and how the css rules have been built and I cannot spend time fixing it for you.

What I can tell you however, is that you can overwrite that CSS code if you inline the CSS on the header, so for example you can add the same code – div.storefront-primary-navigation { background:#FFF; } – to the header, inlined and it will work.

You can go to Appearance > Custom CSS and add all your CSS customizations there… and this is provided by the TJ Custom CSS plugin, that I have installed for you.

You also don’t need to clear the cache on my plugin with this method.

—

Your speed problems are related to the hosting.
My plugin increases the speed score on those sites and makes it feel faster, however this only happens after the page is generated by your server. In other words, if your server is slow generating the page, my plugin has to wait for it to finish serving the page.

Since your wp-admin area is so slow, it’s obviously your hosting company that is slow.
My plugin does nothing on the wp-admin area… and even if it were to optimize those, all it does is to optimize delivery. The server still needs to generate the page before any delivery.

• This reply was modified 8 years, 1 month ago by Raul P..

Hi Raul,

Wow, you’re a star. Thank you so very much for your help. You understood my issue correctly and your explanation makes sense. In addition to installing your plugin, I also did an upgrade on the theme, the issue could definitely have started there. I will check my theme and also contact my hosting again for the speed issue.

Thank you so much for the TJ Custom CSS plugin. It has fixed the customisation issue in the meantime.

I appreciate all your help. Have a great day, Raul.

Regards,
Lydia