add my css to theme in prestashop

Question

I'm new in prestashop. I created my css file and want to add it to prestashop theme. How can i add the new fill and make prestashop read the file in the header section? In forums i see that they said to add it to hookheader , i tried to add it to some module and do the following:

1) add to the theme header file {hook h="myCssHook"}

2) add to some rendom module function:

public function myCsshook(&params)
{
$this->context->controller->addCSS(($this->_path).'prestashop/myshop/theme/css/myoverride/myCsstheme.css', 'all');
}

3) in the module installition copy and add:

|| $this->registerHook('myCssHook') == false

and it didn't work. I'm using prestashop 1.6.1.1

Answer 1

The best way to do that is to add the following in the setMedia() function of the correct controller file.

$this->addCSS(_THEME_CSS_DIR_.'myoverride/myCsstheme.css');

For example, if you want to add your css to all your Products pages, you will have to add this code in controllers/front/ProductController.php after

$this->addCSS(_THEME_CSS_DIR_.'product.css');

If you want to add it to all your pages, you will have to add this code in classes/controller/FrontController.php after

$this->addCSS(_THEME_CSS_DIR_.'global.css', 'all');

An even better (and cleaner) way to do that is to create an override file.
For example, for FrontController, create a new file named FrontController.php in override/classes/controller/FrontController.php and put this code:

<?php
class FrontControllerCore extends Controller
{
    public function setMedia()
    {
        parent::setMedia(); // This will take all code in setMedia() of the original classes/controller/FrontController.php
        $this->addCSS(_THEME_CSS_DIR_.'myoverride/myCsstheme.css');
    }
}

You can create an override file for each of your controllers. As you wish.

Answer 2

@ébewè: That is definately not the best way to do it because with the next software update that will most probably be overwritten again.

if you want to do this in the controller itself, then create an override of that class in overrides/controllers/yourcontrollers and do it in that override. That way your work won't be overwritten with a software opdate.

If you work on a module, then you create the css file inside the module (f.i. css/mycss.css) and in the appropriate hook you add:

$this->context->controller->addCSS(($this->_path).'css/mycss.css);

and if you want that also in your theme then you add the file also in

/themes/yourtheme/modules/yourmodule/css/mycss.css

but if you don't need to alter the css in your theme, then that is not necessary.