Post by CJC » Fri Jun 05, 2020 9:20 pm

Hi All,

New user of Opencart. Can someone tell me the proper way to add a custom.css stylesheet. I thought I had seem some older posts about an area within Settings where that could be done, but I don't see anything like that.

Thank you.

CJC
Newbie

Posts

Joined
Wed Jun 03, 2020 5:51 am

Post by johnp » Fri Jun 05, 2020 9:38 pm

I normally use this or something similar and add custom CSS from the admin panel:

https://www.opencart.com/index.php?rout ... _license=0

Opencart 1.5.6.5/OC Bootstrap Pro/VQMOD 2.6.1 lover, user and geek.
Affordable Service £££ - Opencart Installs, Fixing, Development and Upgrades
Plus Ecommerce, Marketing, Mailing List Management and More
FREE Guidance and Advice at https://www.ecommerce-help.co.uk


User avatar
Active Member

Posts

Joined
Fri Mar 25, 2011 10:25 am
Location - Surrey, UK

Post by CJC » Sat Jun 06, 2020 5:19 am

Thanks. That looks useful, but I can't believe there isn't something available within the core installation to do that.
johnp wrote:
Fri Jun 05, 2020 9:38 pm
I normally use this or something similar and add custom CSS from the admin panel:

https://www.opencart.com/index.php?rout ... _license=0

CJC
Newbie

Posts

Joined
Wed Jun 03, 2020 5:51 am

Post by johnp » Sat Jun 06, 2020 5:41 am

If that was a core feature there would be people saying "I don't need that, why don't they leave it out".

You can't think of everything and keep everybody happy as the core OC developers know only too well.

Opencart 1.5.6.5/OC Bootstrap Pro/VQMOD 2.6.1 lover, user and geek.
Affordable Service £££ - Opencart Installs, Fixing, Development and Upgrades
Plus Ecommerce, Marketing, Mailing List Management and More
FREE Guidance and Advice at https://www.ecommerce-help.co.uk


User avatar
Active Member

Posts

Joined
Fri Mar 25, 2011 10:25 am
Location - Surrey, UK

Post by CJC » Sat Jun 06, 2020 7:09 am

I guess so.
johnp wrote:
Sat Jun 06, 2020 5:41 am
If that was a core feature there would be people saying "I don't need that, why don't they leave it out".

You can't think of everything and keep everybody happy as the core OC developers know only too well.

CJC
Newbie

Posts

Joined
Wed Jun 03, 2020 5:51 am

Post by Johnathan » Sat Jun 06, 2020 9:00 pm

Well, you CAN do something like that in a default installation, it just takes a bit of setup. You can use an HTML module and its source code mode to add CSS (with no other HTML content), and then apply that module to every layout. That would add the CSS on each page.

However, it's not a stylesheet, and it's not super easy to edit. It works though.

Image
Image Image Image Image


User avatar
Global Moderator

Posts

Joined
Fri Dec 18, 2009 3:08 am


Post by JNeuhoff » Sat Jun 06, 2020 9:29 pm

Normally you'd only add some modified or additional CSS for a new web theme, in which case proceed as follows:
  1. Copy the catalog/view/theme/default/stylesheet/stylesheet.css to catalog/view/theme/my-theme/stylesheet/stylesheet.css
  2. Modify the catalog/view/theme/my-theme/stylesheet/stylesheet.css,
    it could look like this:

    Code: Select all

    @import "../../default/stylesheet/stylesheet.css";
    /* your custom css goes in here */
    
  3. Copy the catalog/view/theme/default/template/common/header.twig to catalog/view/theme/my-theme/template/common/header.twig
  4. In the copied header.twig change the

    Code: Select all

    <link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
    to

    Code: Select all

    <link href="catalog/view/theme/my-theme/stylesheet/stylesheet.css" rel="stylesheet">

MHC Web Design
Override Engine * Integrated VQMod * Unused Images Manager * Instant Option Price Calculator * Number Option * Google Rich Snippets * Google Tag Manager * Export/Import Tool * SpamBot Buster


User avatar
Expert Member

Posts

Joined
Wed Dec 05, 2007 3:38 am


Post by CJC » Mon Jun 08, 2020 9:34 pm

That's an interesting approach. I may give it a shot.
Johnathan wrote:
Sat Jun 06, 2020 9:00 pm
Well, you CAN do something like that in a default installation, it just takes a bit of setup. You can use an HTML module and its source code mode to add CSS (with no other HTML content), and then apply that module to every layout. That would add the CSS on each page.

However, it's not a stylesheet, and it's not super easy to edit. It works though.

CJC
Newbie

Posts

Joined
Wed Jun 03, 2020 5:51 am

Post by CJC » Mon Jun 08, 2020 9:38 pm

Will this approach work on its own, or do you still need to go through the whole process of setting up a custom theme first?
JNeuhoff wrote:
Sat Jun 06, 2020 9:29 pm
Normally you'd only add some modified or additional CSS for a new web theme, in which case proceed as follows:
  1. Copy the catalog/view/theme/default/stylesheet/stylesheet.css to catalog/view/theme/my-theme/stylesheet/stylesheet.css
  2. Modify the catalog/view/theme/my-theme/stylesheet/stylesheet.css,
    it could look like this:

    Code: Select all

    @import "../../default/stylesheet/stylesheet.css";
    /* your custom css goes in here */
    
  3. Copy the catalog/view/theme/default/template/common/header.twig to catalog/view/theme/my-theme/template/common/header.twig
  4. In the copied header.twig change the

    Code: Select all

    <link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
    to

    Code: Select all

    <link href="catalog/view/theme/my-theme/stylesheet/stylesheet.css" rel="stylesheet">

CJC
Newbie

Posts

Joined
Wed Jun 03, 2020 5:51 am

Post by JNeuhoff » Mon Jun 08, 2020 9:51 pm

Will this approach work on its own, or do you still need to go through the whole process of setting up a custom theme first?
You would basically keep the default theme, only the template folder needs to be changed. In the admin backend, you can do it like this:
  1. Extensions > Themes > edit Default Store Theme > Theme Directory: my-theme
  2. System > Settings > edit Store > tab General > Theme: Default Store Theme

MHC Web Design
Override Engine * Integrated VQMod * Unused Images Manager * Instant Option Price Calculator * Number Option * Google Rich Snippets * Google Tag Manager * Export/Import Tool * SpamBot Buster


User avatar
Expert Member

Posts

Joined
Wed Dec 05, 2007 3:38 am


Post by CJC » Tue Jun 09, 2020 11:36 pm

Thanks. I just gave it a quick try and it seems to work. The only thing is I had a hard time getting my browser to reload the stylesheet. I used the theme cache refresh on the Dashboard page, but that didn't seem to do anything. I had to manually force my browser to load the stylesheet in a new window and then go back and reload the shop page. But other than that, I think this will server the purpose of making some basic changes.
JNeuhoff wrote:
Mon Jun 08, 2020 9:51 pm
Will this approach work on its own, or do you still need to go through the whole process of setting up a custom theme first?
You would basically keep the default theme, only the template folder needs to be changed. In the admin backend, you can do it like this:
  1. Extensions > Themes > edit Default Store Theme > Theme Directory: my-theme
  2. System > Settings > edit Store > tab General > Theme: Default Store Theme

CJC
Newbie

Posts

Joined
Wed Jun 03, 2020 5:51 am

Post by derzet » Wed Jun 10, 2020 12:54 am

"The only thing is I had a hard time getting my browser to reload the stylesheet ...."

What can help in cases like that:
- press F12 to open your browser's developer console
- choose the "Network" tab and make sure "Disable cache" is selected
- reload the page

Newbie

Posts

Joined
Sat Jun 06, 2020 11:17 pm

Post by JNeuhoff » Wed Jun 10, 2020 1:54 am

Glad to hear you got it to work.

This solution is also the most compatible one with other 3rd party extensions.

MHC Web Design
Override Engine * Integrated VQMod * Unused Images Manager * Instant Option Price Calculator * Number Option * Google Rich Snippets * Google Tag Manager * Export/Import Tool * SpamBot Buster


User avatar
Expert Member

Posts

Joined
Wed Dec 05, 2007 3:38 am


Post by JuJue » Mon Jun 29, 2020 10:33 pm

CJC wrote:
Mon Jun 08, 2020 9:38 pm
Will this approach work on its own, or do you still need to go through the whole process of setting up a custom theme first?
JNeuhoff wrote:
Sat Jun 06, 2020 9:29 pm
Normally you'd only add some modified or additional CSS for a new web theme, in which case proceed as follows:
  1. Copy the catalog/view/theme/default/stylesheet/stylesheet.css to catalog/view/theme/my-theme/stylesheet/stylesheet.css
  2. Modify the catalog/view/theme/my-theme/stylesheet/stylesheet.css,
    it could look like this:

    Code: Select all

    @import "../../default/stylesheet/stylesheet.css";
    /* your custom css goes in here */
    
  3. Copy the catalog/view/theme/default/template/common/header.twig to catalog/view/theme/my-theme/template/common/header.twig
  4. In the copied header.twig change the

    Code: Select all

    <link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
    to

    Code: Select all

    <link href="catalog/view/theme/my-theme/stylesheet/stylesheet.css" rel="stylesheet">
I wanted to simply add some custom CSS to some elements.
Here is what I did:
Working inside admin, I opened the relevant twig.file and added a custom class, like; class="anything" to the element which I wanted to add this styling;
Then
inside my panel (Plesk in my case) I added a new CSS file named override.css and added my class styling (for 'class="anything"')
Then
I opened the main stylesheet.css and added at the very top: @import "./override.css";
Refreshing my browser with my store page open, I can see the new style being added.
Now I can just add any styling to any element the same way without having to worry about messing with existing CSS files.

I am on Opencart 3 with a theme installed.
(Any comment?)

New member

Posts

Joined
Fri Feb 15, 2019 10:40 am

Post by CJC » Mon Jun 29, 2020 11:19 pm

I believe the only issue with your approach is that both your twig file and your stylesheet will be overwritten during an update and you'll lose your customizations. Hopefully someone with more OC experience will confirm.

JuJue wrote:
Mon Jun 29, 2020 10:33 pm
I wanted to simply add some custom CSS to some elements.
Here is what I did:
Working inside admin, I opened the relevant twig.file and added a custom class, like; class="anything" to the element which I wanted to add this styling;
Then
inside my panel (Plesk in my case) I added a new CSS file named override.css and added my class styling (for 'class="anything"')
Then
I opened the main stylesheet.css and added at the very top: @import "./override.css";
Refreshing my browser with my store page open, I can see the new style being added.
Now I can just add any styling to any element the same way without having to worry about messing with existing CSS files.

I am on Opencart 3 with a theme installed.
(Any comment?)

CJC
Newbie

Posts

Joined
Wed Jun 03, 2020 5:51 am
Who is online

Users browsing this forum: No registered users and 9 guests