How is it possible for CSS code to be in a false directory but still be used?

Question

I am trying to mimic a theme from another website. I pulled the code / database down and now I have a local copy.

The sub-theme this guy is using is fine and correct, all is in order.

/var/www/sandbox/sites/all/themes/erc_generic/css/

However, when I go to look at where he put his CSS code, its in this directory:

/var/www/sandbox/sites/default/files/css/

This is no-where near in the sub-theme that is being used by Drupal.

He has about 30-40 CSS files in that folder and they don't have normal names either.. here is a example of one:

css_0_-tDmvAnmauKU86ANuyPJMDjn5wjUx4qFEEbOhbr7g.css

Also for whatever reason, maybe for extraction purposes, each CSS file he has, he has them individually zipped up.

I am trying to mimic the theme and I thought just copying and pasting the sub-theme settings would do, but when I right-click on the site to look for what CSS properties are being used.. they are linked to these files instead.

How does one even DO this? I can't find how he can link CSS files to a theme thats not even located in the sub-theme folder.

Answer 1

I can't find how he can link CSS files to a theme thats not even located in the sub-theme folder.

He's not, the system is doing that part.

When you have CSS aggregation enabled, Drupal concatenates all the relevant files together per-page (bit more complicated than that actually, but for the sake of argument that'll do), and those are served instead of multiple originals. Compressed versions are also created for browsers that support it, yes.

If this is messing with you, just pop to the Performance settings page at admin/config/development/performance, switch off CSS aggregation, reload your page, and check the source again. You'll now see links to the original, un-merged CSS files within the theme.