Search code examples
phphtmlcssopencartopencart-3

my question is about how can i add my new css_style file to the theme in opencart?

For example, on my home 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 tried so many solutions but there is no result can anyone put me into the right direction.

Solution

  • so there are several ways you can add a stylesheet in OpenCart themes

    the simple way

    in file catalog/view/theme/YOUR_THEME/template/common/header.twig add the link to your stylesheet in< head >` right after your last css file.

    remember that your custom stylesheet has to go after your default stylesheet for the styles to override them.

    <link href="catalog/view/theme/YOUR_THEME/stylesheet/CUSTOM_STYLESHEET.css" rel="stylesheet">

    the more sophisticated way

    OpenCart allows you to set the stylesheet from the contorller. this is often used by modules to add their styles to the head tag and also allow site optimization modules to compress the stylesheet file.

    you can test it by editing a controller file for homepage (as an example)

    in file catalog/controller/common/home.php on line 7 add this code

    $this->document->addStyle('catalog/view/theme/YOUR_THEME/stylesheet/CUSTOM_STYLESHEET.css');

    I hope this helps