Post by jbcul » Wed Sep 19, 2018 4:26 am

I've looked for this info relating to v 3.0 and haven't found it. Sorry if I'm repeating a question. I've created a test bed installation and have decided to modify the default theme. As I work through this and modify templates etc. I'm concerned that I'm one update from it all going away.
It seems the best thing to do is make a duplicate (child theme) of default. How is this done in OC 3.0?

Active Member

Posts

Joined
Fri Feb 01, 2013 9:18 am

Post by IP_CAM » Wed Sep 19, 2018 6:34 am

Well, I would download a simple v.3 Custom Theme, like the one linked below,
then, you will find out, what it takes on files and code, to create a Custom Theme.
Ernie
https://www.opencart.com/index.php?rout ... on_id=3850

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

Post by jbcul » Wed Sep 19, 2018 7:15 am

Thanks Ernie,
Funny, ODD and somewhat Sad that OC doesn't have a workflow for this. If they are going to encourage folk to use TWIG the assumption is that they won't be doing a ton of mod's to commercially available themes because of the inherent issues that would cause. Therefore the assumption has to at the least include the possibility that one would be modifying the default theme or creating a child theme version of default and customizing that. I fully expect that if templates or php pages get changed in 3.1, anyone doing what I'm doing could be very unhappy very quickly.
Still, while your recommendation has merit if I want to be careful, it's just too much work for something that should be a simple process. Even if there were a document that said copy the folder and go here, here, here, here and change Default to MyThemeName, that would suffice. This is discouraging but I appreciate your input.

Active Member

Posts

Joined
Fri Feb 01, 2013 9:18 am

Post by IP_CAM » Wed Sep 19, 2018 10:00 am

Well, it's not so bad, for OC-3 Versions, out of about 5'600 v.3.x Extensions in total,
abolut 3'500 of them even come for free, in the OC Extension Section. So, it's less a
matter of encouraging someone, but more, of taking the chance, and get familiar,
just by checking, how this MVC(L) Framework based OC Technique handles and
controls the Files. It's learning by Doing, I am not a Coder, and do it the same way. 8)
https://www.google.com/search?q="MVC(l)"
---
And Theme-Files in OC-3 Versions are mostly built in TWIG today.
They say, that this makes OC faster, but TWIG contains about the same amount
of files, as OC itself, to make it work in OC, and that makes me wonder, if this really
improves performance ... :crazy:
https://www.google.com/search?source=hp ... YBQ&q=TWIG
---
Then, CSS is another part of OC, to make the Pages look, as they should:
https://www.google.com/search?ei=xpmhW_ ... ass+styles
besides of Bootstrap, to make Page View match the different Screen Resolutions /Sizes:
https://www.google.com/search?q="Bootstrap"
And the Rest is a little basic PHP + JS/JSON/ Scripting and MySQL(i) Knowledge, if
one really plans to build more complicated Modifications. But I am also not familiar
with JS and JSON Code, so, don't worry too much about this, you will seldom use it,
as long as you only build Themes... ::)
---
In addition to a relatively easy to understand Vq - / Oc - modded Override Function,
based on a simple
SEARCH someplace in some file for: ......
TO THEN add / remove / replace - instead / above / below / e.t.c -
Routine.
---
That's about, what OC contains, and works on. It's all default Technology,
and nothing special, so, why should OC reinvent the wheel, trying to tell
the folks, what has been explained already in various places in detail ?!
---
BUT, for a simple new Theme, not much work or knowledge is required, to build
another one, in most cases a simple exchange of an existing and OC Version matching
stylesheet.css file, plus a couple of images, Backgrounds, e.t.c., is absolutely
sufficient, to build a different looking Shop.
---
I found about 80 different early OC 2.0.x Version matching Themes, and used their
stylesheet.css file, partly with the default - in may case - OC v.2.0.3.1 type
header.tpl + footer.tpl - files.
And some have been used with their own theme header.tpl + footer.tpl Files.
Just to give you an impression, what can be achieved this way, and without
great knowledge about OC Code... ;)
http://www.opencart.li/themes.html
---
In some cases, one can use the template/common/header.twig and
footer.twig File from the other Theme, where the stylesheet has been
taken from, to change the Header and Footer visual 'Setup', but other Theme
files are usually not required, and then linked/used from the default Theme
Directories, if they do not exist withing the Custom Theme. Some minor changes
in Custom Theme Header + Footer Files might be required, to make sure, that
all PATH's are linked correctly, to link to the Theme Directory Name used.
---
The Yoocart Theme I linked above is a perfect sample of, how 'few' files
it takes, to have a totally different Theme, compared to the OC Default Theme.
And this theme also contains some theme-adapted sections like Specials,
Featured, e.t.c.! I downloaded the OC v.2.3.0.2 Version, just for fun, and I just
had to remove the GOOGLE header linking, to make it work on my Custom PEKU
v.1.5.6.5_rc Engine, on Spot! :D
It's only the header cart product delete function, which does not work, or at
least not with other Scripts and Code I use, one of those little misses, many
complain about on a regular schedule. :-[
http://www.ipcam.li/shop/en
---
But a nice range of nice free OC-3 Theme already exisits, so, you should have
no problem, to find some matching Code. Just be aware, that many
Custom Themes consist out of additional Modules, Files, Styles, Scripts, e.t.c.,
also in the Admin Section, and such stylesheet files can usually NOT be used
in the way, as explained above. Just to have this mentioned too. ;)
Add each Test Theme into it's own THEME named Directory, and leave the
Default Theme, as it exists, since the Custom Theme needs to know, where
to find, what it does not contain by itself!
---
And if you want to try them all out first, better make a backup of your Site first,
or then accept, to suddenly carry bulkloads of never used Code, or even ALTERED
Code, like the common.js File, in your Shop Software, wich might be not
the best way, to keep a working Shop alive and well !

Good Luck! ;)
Ernie
---
Image

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

Post by jbcul » Wed Sep 19, 2018 11:14 am

Wow, lot to digest here. Point of clarity however, I don't want to make a "New Theme" I want to use the Default Theme, customize it and be assured that my work won't get written over by an OC upgrade. The thinking (taken from WordPress world) is to make a "Child Theme" (clone of Default), give it its own name and style it.
CSS is no biggie. I use SASS for my stuff and use a post processor to crank out an updated CSS file. Having TWIG has been useful so far because I can add structure (new div's for example) but also because the page code is sloppy with tons of elements having the same class selectors and not ID's it's bloody hard to style only one element. At least in 3.0 I can add an ID to an element and style. Without that you get into some nasty child selectors and some stuff that I gave up on in 1.5.6.4 I can no do.
Again, its the Default Theme I want to make work for me but with my customization. My inquiry was about how to do that and my beef is that it's not obvious or perhaps easy.

Active Member

Posts

Joined
Fri Feb 01, 2013 9:18 am

Post by IP_CAM » Wed Sep 19, 2018 12:45 pm

and be assured that my work won't get written over by an OC upgrade
Well, For the past 4.5 Years, I have been trying to find out, why OC Users have not
found out yet, that there just is not such a Thing as an OC Upgrade. :laugh: :crazy:
It could not function anyway, since every single OC Installation uses different Extensions
and Modifications, and how could an Upgrade- Routine be able to identify something like
this, if NO RULES exist for a Software, on how Extensions have to be made ?! ???
OC is NOT a Windows, it's Open Source, and it uses no Programs, like Windows,
wich can be upgraded individually, it's all OC, what works, just in different ways,
depending on the Extensions involved.

It's always another Version, if one installs a next OC release, and the only Result of an
Upgrade into a running System would possibly be, to then end up with a bunch of never
ever used File Carbage from older Versions, beeing part of OC, and possibly even leaving
some visible Controller Links to somewhere, leading to an error Page only. ::)
In addition, other changes might hinder anything 'old' from further doing it's Job, like
VqMods/OcMods won't longer function errorfree, and/or Existing Modules will fail to work.

So, just make sure, that your Theme will neither be overwritten, nor otherwise damaged,
by simply name it's directory to something individual. Then, nothing will happen ever,
it just might no longer function errorfree on a next Version. :D
But I wrote it not only for you, a few others will read it too, I assume... :laugh:
Good Luck! ;)
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

Post by jbcul » Wed Sep 19, 2018 1:09 pm

Another challenge. The layout of the product page has the column holding the image also holding the description tab etc. This is a problem because it makes the image frame span the columns and if you have a long product name, the next column to the right smashes the product name into multiple lines. I wanted the image thumbnail a reasonable size and lots of room for the image name etc. like in default theme 1.5.6.4. To get this I'm going to have to change the entire page structure. What a pain. Might have to go with a commercial theme after all. Alas.

Active Member

Posts

Joined
Fri Feb 01, 2013 9:18 am

Post by IP_CAM » Thu Sep 20, 2018 1:27 am

Try this: (tested in a v.1.5.6.5_rc !) :D
BUT, it might have some impact on Vq/Oc-Mod Extensions, using this TITLE Line
Anchor/Tag, to add some additional Variables/Listings to Product Infos! Just to have it said ...
I had to disable 3 VqMod's, after doing the changes, to sort it out right first ! ;)
Image

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

Post by jbcul » Thu Sep 20, 2018 2:37 am

Thanks Ernie. I appreciate your putting time into this. I'll give it a try.

Active Member

Posts

Joined
Fri Feb 01, 2013 9:18 am

Post by IP_CAM » Thu Sep 20, 2018 3:12 am

No Problem, I need such input, once in a while, to be inspired. And, like in this case,
to then use it for myself. ;)
Ernie
---
BTW: If you PLACE the moved Line ONE LINE UP from like it is shown on the image above,
in the Product Page, it might place the Title ABOVE the 'left side' Category Selection
also, as shown in my Image below, to really be aligned in the whole page center.
---
Image

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

Post by jbcul » Mon Oct 01, 2018 8:33 am

Well I took the big leap and modified the default theme. Still wish OC was easier to add child themes but there you have. In a break from the norm I actually kept detailed notes on the structural changes to the twig files in case they get modified in an upgrade. The biggest impact was that i added two major structural div's which impacted my whole layout, especially in responsive mode. Now my test site has a full background image and a box at the top that spans the page above the menu and another div that allows all the content maintain a white background in front of the background. Bit of a chore but I'm happy. My use of twig has been mostly doing simple html (adding ID's to div's etc.) and all the nasty was in CSS.

Active Member

Posts

Joined
Fri Feb 01, 2013 9:18 am
Who is online

Users browsing this forum: JNeuhoff and 140 guests