By HS on

I've had no issues with the 'Optimize CSS files' option in admin/settings/performance before. I've had it enabled for ages on this very theme. But recently I disabled it to make changes to some CSS, I changed the colour of the links on my site. When I enabled the 'Optimize CSS files' option, everything changes. The links are in a totally different color. But if I disable the 'Optimize CSS files' option, my changes are visible.

Can someone please assist me with this? I've tried clearing the cache, but it didn't help. Cleared my browser cache too.

Thanks in advance!

HS

⋅ Categories: Drupal 6.x

Comments

vm’s picture

vm commented

ensure you are editint the stylesheets in the theme itself and not the aggregated stylesheets in the files folder.

also ensure to clear your cache tables after adjusting css

HS’s picture

HS commented

Hi VM,

Yeah I am editing the correct style sheet. I've cleared cache through admin/settings/performance, do I need to manually clear the cache tables form the DB? If so where can the aggregated stylesheet be found in the DB, like which table?

Thanks again!

vm’s picture

vm commented

all cache tables can be cleared from the database safely. Though if you've already used the button in administer -> performance caching of the stylesheet isn't the issue.

screenshots of your before and after linked here may help.

HS’s picture

HS commented

Clearing caches both manually from the DB and the 'Performance' page did not fix it.

Here are the screenshots:

Before: http://img62.imageshack.us/img62/118/screenshot005v.jpg

And this is after 'Optimize CSS' is enabled

http://img188.imageshack.us/img188/944/screenshot004pu.jpg

px’s picture

px commented

Looks a bit as if the CSS for styling the tabs is missing. My guess would be, that you (at some time) deleted the according file (then without effect). Upon disabling and reenabling CSS Optimization, the missing CSS file is now also missing in the aggregated CSS.

If I'm correct, simply overwriting the current theme folder with a freshly downloaded copy of the theme and afterwards clearing the cache should fix the problem.

HS’s picture

HS commented

Thanks! Will give it a try.

HS’s picture

HS commented

Tried it but didn't work. As soon as the old copy is added back its still displaying incorrectly.

mtsanford’s picture

mtsanford commented

if so where can the aggregated stylesheet be found in the DB, like which table?

Don't think they're in DB. The are in your files folder. e.g. sites/default/files/css

HS’s picture

HS commented

Thank you. But my sites/default/files/css is empty..

vm’s picture

vm commented

There should be an aggregated css files in there.

have you checked your drupal logs for any errors?
are you using the private file system?
what is set in administer -> file system?

HS’s picture

HS commented

Thank you for the response.

Checked the logs. What exactly am I looking for? Didn't see anything related to this issue.

I checked again to make sure, but nothing exists in my "sites/default/files/css" folder. Where else could this CSS file be..I'm baffled?

File system: Writable (public download method)

The site has been working fine for over a year. This just popped up after I changed the link color.

vm’s picture

vm commented

when aggregated/optimized they are only put in sites/default/files/css

aggregated from the stylesheets in your theme and combined into a single file. Why there are no files there is beyond me. Enable css optimization again and check the logs for errors writing to the folder or some such.

mtsanford’s picture

mtsanford commented

Did you look in the HTML in your browser (page source)? It should show you EXACTLY what css file it's loading and the path to get there. If the css file does not exist, then you should be getting no css stying whatsoever.

looking at the HTML for this drupal page I see:

  <link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/codefilter/codefilter.css?9" />

<link type="text/css" rel="stylesheet" media="all" href="/files/css/css_2df325b2c8b18fb17a83b14e73076597.css" />
<link type="text/css" rel="stylesheet" media="print" href="/files/css/css_0a88773216cc49a9c4f780ac2f1fd229.css" />

So I'm guessing there is a file called css_2df325b2c8b18fb17a83b14e73076597.css somewhere...

malc0mn’s picture

malc0mn commented

Maybe you used @import somewhere in one of the CSS files?

Look here for a similar experience, on a much larger scale though: http://drupal.org/node/694642#comment-2516946

HS’s picture

HS commented

Thank you for all the responses folks! I have moved to a different theme since and did not get an opportunity to nail this down.

Thank you! You guys are awesome!

alberto56’s picture

alberto56 commented

Here's a solution that worked for me: Make sure all your files are encoded as UTF-8 NO BOM, not UTF-8. BOM is a byte-order mark (\0xFEFF) which css aggregator does not seem to remove. Rather, it prepends it to the first css rule of your stylesheet, so that for example, body { backgroud:green; } is transformed into \0xFEFFbody {backgroud:green;}. All of sudden your body is no longer green, but all your other styles work.

This can be all the more confusing because text editors often don't display the \0xFEFF character at all, so all looks well. (Inspecting the css in Firefox's firebug system will display a space before the word body in this case, alerting you to a potential problem).

Cheers,

Albert.

jg314’s picture

jg314 commented

I looked all over and this was the only solution that worked. I changed the encoding to remove BOM and everything worked perfectly. Thanks for your help!