Some CSS Files Come After Override.css

I'm using Storefront, but I assume this applies to other templates, too. Some of the css files (such as tablet.css and mobile.css), as well as some css files from plugins, come after the override.css file, which means I have to use !important in my css rules far too often.

Shouldn't the override.css come later on, like right before the </head>?

Thanks,
Phil

Hi,
I know this is not perfect, but but as it was done .
the only way is to customize template php file and move
<link rel="stylesheet" href="templates/gk_storefront/css/override.css" type="text/css" />
lower at the end.

Hmm, that means I can no longer update your template without overriding my code. Pretty inconvenient. Anyway, I guess that's what I have to do because you use !important in your responsive css files, so I have no other way to override them.

For anyone who wants to do this, since Oscar's answer was a nice hint, but not particularly helpful, what I had to do (for the Storefront template at least) was edit /templates/gk_storefront/layouts/blocks/head.php and comment out this code:

Code: Select all

if($this->API->get("css_override", '0')) {
   $this->API->addCSS($this->API->URLtemplate() . '/css/override.css');
}

and then find this:

Code: Select all

// add responsive stylesheets
$this->generateLayout();

and right below it add this:

Code: Select all

echo '<link rel="stylesheet" href="http://www.YOUR-DOMAIN.com/templates/gk_storefront/css/override.css" type="text/css" />';

I will inform about this our developer, who knows maybe one-day he will implement this. Thanks anyway.