Page 1 of 1

[SOLVED] - What's the correct way to add some custom css?

Posted: Fri Jun 05, 2020 9:20 pm
by CJC
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.

Re: What's the correct way to add some custom css?

Posted: Fri Jun 05, 2020 9:38 pm
by johnp
I normally use this or something similar and add custom CSS from the admin panel:

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

Re: What's the correct way to add some custom css?

Posted: Sat Jun 06, 2020 5:19 am
by CJC
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

Re: What's the correct way to add some custom css?

Posted: Sat Jun 06, 2020 5:41 am
by johnp
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.

Re: What's the correct way to add some custom css?

Posted: Sat Jun 06, 2020 7:09 am
by CJC
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.

Re: What's the correct way to add some custom css?

Posted: Sat Jun 06, 2020 9:00 pm
by Johnathan
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.

Re: What's the correct way to add some custom css?

Posted: Sat Jun 06, 2020 9:29 pm
by JNeuhoff
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">

Re: What's the correct way to add some custom css?

Posted: Mon Jun 08, 2020 9:34 pm
by CJC
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.

Re: What's the correct way to add some custom css?

Posted: Mon Jun 08, 2020 9:38 pm
by CJC
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">

Re: What's the correct way to add some custom css?

Posted: Mon Jun 08, 2020 9:51 pm
by JNeuhoff
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

Re: What's the correct way to add some custom css?

Posted: Tue Jun 09, 2020 11:36 pm
by CJC
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

Re: What's the correct way to add some custom css?

Posted: Wed Jun 10, 2020 12:54 am
by derzet
"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

Re: What's the correct way to add some custom css?

Posted: Wed Jun 10, 2020 1:54 am
by JNeuhoff
Glad to hear you got it to work.

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

Re: What's the correct way to add some custom css?

Posted: Mon Jun 29, 2020 10:33 pm
by JuJue
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?)

Re: What's the correct way to add some custom css?

Posted: Mon Jun 29, 2020 11:19 pm
by CJC
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?)

Re: What's the correct way to add some custom css?

Posted: Sun Jul 19, 2020 3:48 am
by sxfber
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">

Re: [SOLVED] - What's the correct way to add some custom css?

Posted: Sun Jul 19, 2020 5:20 pm
by JNeuhoff
Yes, the @import statement is the first line in your theme's 'stylesheet.css'.

Re: [SOLVED] - What's the correct way to add some custom css?

Posted: Mon Jul 20, 2020 7:20 am
by IP_CAM
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