Adding CSS stylesheet to pages based on route in OpenCart

Question

I'm using opencart (version 1.5.1.3.1) for a client store, and am wondering what the best way to code it so I can have certain stylesheets added for certain routes.

For example, on my category page I'd like to have a different stylesheet to the default one, or one that will over ride the default styles with my custom sheet. I have use for this for more than one route obviously, and want to do this with as little edits required as possible, so as to reduce the amount of edits in the framework should I need to upgrade at any stage (and with opencart's well known random changes and bug fix releases this is quite probable)

Answer 1

Open catalog/controller/common/header.php

Right after the line protected function index() { on a new line put

    $route = empty($this->request->get['route']) ? 'common/home' : $this->request->get['route'];
    $css_file = str_replace('/', '_', $route) . '.css';

    if(file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/stylesheet/' . $css_file)) {
        $this->document->addStyle('catalog/view/theme/' . $this->config->get('config_template'). '/stylesheet/' . $css_file);
    }

Then go to your current theme, and create a file in catalog/view/your-theme/stylesheet/ folder called product_category.css and put your styles in that. The stylesheets work off your route name except you replace the forward slash to an underscore followed by .css, ie common/home becomes common_home.css

Note that is is going to use the override method rather than replacing your default stylesheet