-2

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.

Omar Nizar
  • 3
  • 3
  • Hey Omar, why don't you share the theme you're using and at least list what you've done so far. This will help us to try and determine what hasn't worked and, hopefully, suggest something that may work – Daniel Feb 27 '19 at 08:21
  • im using opencart v3 – Omar Nizar Feb 27 '19 at 08:29
  • 1
    Possible duplicate of [Adding CSS stylesheet to pages based on route in OpenCart](https://stackoverflow.com/questions/8285961/adding-css-stylesheet-to-pages-based-on-route-in-opencart) – Mohit Gupta Feb 27 '19 at 08:31
  • im using the default opencart theme – Omar Nizar Feb 27 '19 at 08:32
  • Omar, @MohitGupta has suggested a good answer, have a look at that and you should be fine – Daniel Feb 27 '19 at 10:11

1 Answers1

0

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

Dmitriy Zhuk
  • 757
  • 1
  • 6
  • 9
  • An even simpler way is just to modify the default stylesheet.css – Paul Feakins Mar 06 '19 at 09:51
  • Yeah! There is even a simple way - add the styles in the theme files with – Dmitriy Zhuk Mar 06 '19 at 15:29
  • Except that wouldn't be valid because – Paul Feakins Mar 07 '19 at 16:04
  • You do you think – Dmitriy Zhuk Mar 07 '19 at 16:15
  • Yes it works wherever you put it but it is invalid HTML anywhere except the https://stackoverflow.com/questions/1303416/does-style-have-to-be-in-the-head-of-an-html-document – Paul Feakins Mar 08 '19 at 17:22
  • Yes, I see, you are right. Always thought of it as bad practice for a reason) well, frankly, the only way we are adding custom styles is via the module controller. everything else just seems too dirty. – Dmitriy Zhuk Mar 08 '19 at 18:48
  • This only adds the CSS to the homepage. I tried adding the same script to header.php and it didn't show up in the html for any page. How do you add a CSS file sitewide? – danielgetsthis Jun 10 '20 at 21:40
  • you can add this script to your catalog/controller/common/header.php file. this will be shared among all pages. – Dmitriy Zhuk Jun 12 '20 at 15:24