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

Posted by spessex on June 27, 2013 at 10:07am

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

Posted by saurabh.dhariwal on June 27, 2013 at 10:26am

Please try to clear cache after compressing them!

I'd done that before and was

Posted by spessex on June 27, 2013 at 11:02am

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

Posted by davidmac on June 27, 2013 at 12:48pm

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

Posted by dgtlmoon on June 27, 2013 at 1:16pm

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

http://dgtlmoon.com

Your post isn't really

Posted by dalin on June 27, 2013 at 1:28pm

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
Director of Technical Strategy, Advomatic.com
Pronouns: he/him/his

Before changing ownership

Posted by Jamie Holly on June 27, 2013 at 1:34pm

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

Posted by mikeytown2 on June 27, 2013 at 2:15pm

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

Posted by spessex on June 27, 2013 at 2:41pm

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

Posted by mikeytown2 on June 27, 2013 at 3:53pm

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,

Posted by spessex on June 27, 2013 at 4:24pm

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

Posted by spessex on June 27, 2013 at 2:43pm

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

Posted by mikeytown2 on June 27, 2013 at 3:50pm

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

Posted by spessex on June 27, 2013 at 2:45pm

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

Posted by davidmac on June 27, 2013 at 5:30pm

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

Considering the NGINX comment

Posted by spessex on June 27, 2013 at 7:19pm

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

Posted by davidmac on June 27, 2013 at 7:59pm

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

Thanks David. I had seen this

Posted by spessex on June 28, 2013 at 6:56am

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

Posted by bapi_22 on June 28, 2013 at 5:25am

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

Hi I have sent you an email

Posted by spessex on June 28, 2013 at 6:38am

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

This is now fixed. Thanks

Posted by spessex on July 4, 2013 at 12:27pm

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

Posted by Hadi Farnoud on July 11, 2013 at 5:09pm

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.

Hadi Farnoud
فروشگاه ساز | ایمیل مارکتینگ پاکت

If you aren't using an IDE

Posted by Jamie Holly on July 11, 2013 at 5:57pm

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

Posted by tripper54 on July 11, 2013 at 9:19pm

There's another argument in favour of compass.

Good idea

Posted by mikeytown2 on July 11, 2013 at 10:17pm

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

Validate your CSS!

Posted by Spruitje on September 10, 2013 at 8:06am

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!