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
Active Member

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 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
Active Member

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 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
Active Member

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
Administrator

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">

Export/Import Tool * SpamBot Buster * Unused Images Manager * Instant Option Price Calculator * Number Option * Google Tag Manager * Survey Plus * OpenTwig


User avatar
Guru Member
Online

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
Active Member

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
Active Member

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

Export/Import Tool * SpamBot Buster * Unused Images Manager * Instant Option Price Calculator * Number Option * Google Tag Manager * Survey Plus * OpenTwig


User avatar
Guru Member
Online

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
Active Member

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.

Export/Import Tool * SpamBot Buster * Unused Images Manager * Instant Option Price Calculator * Number Option * Google Tag Manager * Survey Plus * OpenTwig


User avatar
Guru Member
Online

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?)

User avatar
New member

Posts

Joined
Fri Feb 15, 2019 10:40 am
Location - Australia

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
Active Member

Posts

Joined
Wed Jun 03, 2020 5:51 am

Post by sxfber » Sun Jul 19, 2020 3:48 am

I've tried this on OpenCart 3.0.3.2 but it ain't working...

What i changed from your solution is that i didn't put the following part as it was a bit unclear to me...

Code: Select all

@import "../../default/stylesheet/stylesheet.css";
/* your custom css goes in here */
may be you can tell me a bit more about this part...

my code for the new custom css i want to add is looking like that:

Code: Select all

body {
	font-family: 'Georgia', sans-serif;
	font-weight: 400;
	color: rgb(121, 121, 121);
	font-size: 12px;
	line-height: 20px;
	width: 100%;
}
Should i place your part of the code @ import etc... before that body part?

somehow like that at the very begin of the new .css file ?

Code: Select all

@import "../../default/stylesheet/stylesheet.css";
body {
	font-family: 'Georgia', sans-serif;
	font-weight: 400;
	color: rgb(121, 121, 121);
	font-size: 12px;
	line-height: 20px;
	width: 100%;
}
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">

Newbie

Posts

Joined
Sat Jul 04, 2020 3:27 pm

Post by JNeuhoff » Sun Jul 19, 2020 5:20 pm

Yes, the @import statement is the first line in your theme's 'stylesheet.css'.

Export/Import Tool * SpamBot Buster * Unused Images Manager * Instant Option Price Calculator * Number Option * Google Tag Manager * Survey Plus * OpenTwig


User avatar
Guru Member
Online

Posts

Joined
Wed Dec 05, 2007 3:38 am


Post by IP_CAM » Mon Jul 20, 2020 7:20 am

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.
Well, but then, even this:

Code: Select all

@import "../../default/stylesheet/stylesheet.css";
would no longer exist, and needs to be added again, if one belongs to the forever OC upgrade-fanatics. :laugh:
And from that point of view, it's MUCHO simpler, to just add CUSTOM Content into the existing stylesheet.css file,
instead of creating one more file, to be called individually. And the Site-Testers will honor this, in contrary to the
'import' routine, as everyone can easy find out, by making tests.

Just figured ... :D
Ernie

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland
Who is online

Users browsing this forum: No registered users and 140 guests