D7 'Aggregate and Compress CSS Files' - live site losing styles???

spessex's picture

Hi

Everytime I select 'Aggregate and Compress CSS Files' in D7 Performance settings on my live site I'm instantly losing my styles. However on my local machine this does not happen. Interestingly this only happens on my live site when I have my sub-theme of Bartik selected. If I use the default Bartik theme there is no issue. I've searched Google and found a plethora of possibilities but I still haven't found the solution. If anyone could advise it would greatly appreciated.

Thank you

Stephen

Comments

Please try to clear cache

saurabh.dhariwal's picture

Please try to clear cache after compressing them!

I'd done that before and was

spessex's picture

I'd done that before and was still have the sane problems. Oddly though, I've set the aggregate settings on the default Bartik and then changed to the sub-theme and now there's no problem?? I'm not sure how this has worked but it's sorted it. Thanks anyway :)

Permissions

davidmac's picture

I'd check the permissions in the folders where the compressed CSS is stored for example sites/default/files/css.

I haven't looked into whether the sub-theme uses this folder but its worth checking. It could explain losing styles, as well as the fact that it works on a local machine and not on the server.

yeah, and make sure to set

dgtlmoon's picture

yeah, and make sure to set the whole 'files' (Use the interface to find out exactly where it thinks your files directory is) to www-data.www-data

Most standard debian installs, something like..

chown -R www-data.www-data thesite.com/files

Your post isn't really

dalin's picture

Your post isn't really applicable to the High-Performance group, but a frequent cause of your symptoms is invalid CSS. When the CSS compressor tries to combine all the CSS files it sometimes chokes on invalid CSS. Try running your CSS through a validation tool.

--
Dave Hansen-Lange
Technical Manager
Advomatic LLC
Great White North Office
Canada

Before changing ownership

Jamie Holly's picture

Before changing ownership and/or permissions, check your error logs! If PHP can't write to a destination, then it will produce an error.

You can also check Drupal's logging to see if there are 404s on the style sheets.

If there's nothing there, then fire up developer tools in Chrome or Firebug in Firefox and check the network tab to make sure the stylesheets are being requested. Click on them to make sure that content is being returned.

If all that is good, then grep one of the compressed stylesheets for a rule that you have in your sub-theme to make sure that file is being aggregated.


HollyIT - Grab the Netbeans Drupal Development Tool at GitHub.

AdvAgg

mikeytown2's picture

You can give the latest dev of AdvAgg a try. With it installed go to your status page; it will test a lot of things and let you know why aggregation might be failing. https://drupal.org/project/advagg

Great, I'll give this a

spessex's picture

Great, I'll give this a try.

As I replied in the second post oddly it started working again but I've just added the CDN module, set it all up correctly, got it working with the exception that - again- it immediately losses all the 'front end' styles (note the admin functions retain their styles). I've even tested it on a very basic site of ours (see www.cerebraluk.com) that doesn't even use any sub-themes (just Bartik) and it has the same problem - add CDN and it loses all the 'front-end' styles.

PS Please note I have deactivated CDN on this as it is a live site.

CDN

mikeytown2's picture

If using the CDN module with AdvAgg, you need to apply this patch for the CDN module https://drupal.org/node/1942230#comment-7314446

The CDN module has it's own CSS aggregation code; AdvAgg provides hooks so the CDN module can modify the CSS without having to copy what core is doing.

Yes, I realised after a bit,

spessex's picture

Yes, I realised after a bit, but even then the patch keeps failing on CDN? I've tried a few times now. I'll keep trying as there must be something I'm doing wrong.

PS Is okay yet to use on a

spessex's picture

PS Is okay yet to use on a live site only I notice there was mention not to use on 7.x-2.x but does this still stand for the latest 7.x-2.x beta?

Use dev

mikeytown2's picture

Be sure to test it. Until a 1.0 is released the dev will usually be more stable then any tagged version as it will have the latest fixes in it.

Please also note I'm on some

spessex's picture

Please also note I'm on some new fancy bespoke NGINX setup (I haven't configured it). Would this have anything to do with it?

Might Do

davidmac's picture

Well you'll need to check that NGINX is serving zipped/compressed files.

Considering the NGINX comment

spessex's picture

Considering the NGINX comment would there be any reason why I can see the styles of the admin theme (seven) and not the front-end styles (Bartik)? Surely it wouldn't serve any of them?

sounds like .htaccess

davidmac's picture

see here for the same problem resolved: https://drupal.org/node/1335366

Thanks David. I had seen this

spessex's picture

Thanks David. I had seen this and have tried all the solution to no avail. Particularly the NGINX server reference in:

3 "For others having issues with css in IE when aggregate is on - take a look at http://web-sniffer.net/ and look at your http headers when aggregate and compress is off. If the headers are still showing the content is being compressed, you probably have the same issue."

This was not the issue on testing as the sites with 'aggregate and compress is off' were not showing the content as being compressed.

Thanks anyway :)

HI spesse, can u give the

bapi_22's picture

HI spesse,
can u give the live site URL.
I think it's very simple to solve..

Hi I have sent you an email

spessex's picture

Hi

I have sent you an email with details. Thank you very much for your help.

This is now fixed. Thanks

spessex's picture

This is now fixed. Thanks everyone for their help. In a nutshell the styles were getting lost with 'Far Future expiration' turned on because I think I'm using an NGINX config (turned off and it worked).

for anyone else having some

Hadi Farnoud's picture

for anyone else having some css rules not working, If you miss a ; in any css rule, compression make it worst and any rule after that wouldn't work.

speaking from experience. took me a while to find that.

If you aren't using an IDE

Jamie Holly's picture

If you aren't using an IDE that highlights errors, then it's best to always run your CSS through a linter first, just to be sure. Here's a great, online one I use a lot.

http://csslint.net/


HollyIT - Grab the Netbeans Drupal Development Tool at GitHub.

There's another argument in

tripper54's picture

There's another argument in favour of compass.

Good idea

mikeytown2's picture

I'll see what validation tools I can build into an AdvAgg submodule.
https://drupal.org/node/2040259

Validate your CSS!

Spruitje's picture

I had a similar problem, but the styles were also lost on my local server; so it was not a server-side error.

I validated all my stylesheets (with http://validator.w3.org) and there was the problem: a parse-error in one of my stylesheets!

Once I corrected the css-error, aggregration & compression worked, both local and on the production site.

So, first: VALIDATE YOUR CSS!

High performance

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week