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.
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
johnp wrote: ↑Fri Jun 05, 2020 9:38 pmI normally use this or something similar and add custom CSS from the admin panel:
https://www.opencart.com/index.php?rout ... _license=0
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
However, it's not a stylesheet, and it's not super easy to edit. It works though.
- Copy the catalog/view/theme/default/stylesheet/stylesheet.css to catalog/view/theme/my-theme/stylesheet/stylesheet.css
- 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 */
- Copy the catalog/view/theme/default/template/common/header.twig to catalog/view/theme/my-theme/template/common/header.twig
- In the copied header.twig change the to
Code: Select all
<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
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
Johnathan wrote: ↑Sat Jun 06, 2020 9:00 pmWell, 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.
JNeuhoff wrote: ↑Sat Jun 06, 2020 9:29 pmNormally you'd only add some modified or additional CSS for a new web theme, in which case proceed as follows:
- Copy the catalog/view/theme/default/stylesheet/stylesheet.css to catalog/view/theme/my-theme/stylesheet/stylesheet.css
- 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 */
- Copy the catalog/view/theme/default/template/common/header.twig to catalog/view/theme/my-theme/template/common/header.twig
- In the copied header.twig change the
toCode: Select all
<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
Code: Select all
<link href="catalog/view/theme/my-theme/stylesheet/stylesheet.css" rel="stylesheet">
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: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?
- Extensions > Themes > edit Default Store Theme > Theme Directory: my-theme
- 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
JNeuhoff wrote: ↑Mon Jun 08, 2020 9:51 pmYou would basically keep the default theme, only the template folder needs to be changed. In the admin backend, you can do it like this: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?
- Extensions > Themes > edit Default Store Theme > Theme Directory: my-theme
- System > Settings > edit Store > tab General > Theme: Default Store Theme
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
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
I wanted to simply add some custom CSS to some elements.CJC wrote: ↑Mon Jun 08, 2020 9:38 pmWill 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 pmNormally you'd only add some modified or additional CSS for a new web theme, in which case proceed as follows:
- Copy the catalog/view/theme/default/stylesheet/stylesheet.css to catalog/view/theme/my-theme/stylesheet/stylesheet.css
- 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 */
- Copy the catalog/view/theme/default/template/common/header.twig to catalog/view/theme/my-theme/template/common/header.twig
- In the copied header.twig change the
toCode: Select all
<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
Code: Select all
<link href="catalog/view/theme/my-theme/stylesheet/stylesheet.css" rel="stylesheet">
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?)
JuJue wrote: ↑Mon Jun 29, 2020 10:33 pmI 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?)
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 */
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%;
}
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 pmNormally you'd only add some modified or additional CSS for a new web theme, in which case proceed as follows:
- Copy the catalog/view/theme/default/stylesheet/stylesheet.css to catalog/view/theme/my-theme/stylesheet/stylesheet.css
- 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 */
- Copy the catalog/view/theme/default/template/common/header.twig to catalog/view/theme/my-theme/template/common/header.twig
- In the copied header.twig change the
toCode: Select all
<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
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
Well, but then, even this: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.
Code: Select all
@import "../../default/stylesheet/stylesheet.css";
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 ...
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.
Users browsing this forum: No registered users and 140 guests