This is driving me crazy. I still can't upgrade to 1.3.5 because it won't work with my theme which is like This link

It's all tables and works so fine! Why did ZenCart have to go DIVs????? It's using up too much of my time to try to upgrade.

How can I have the exact same look with DIVs? Please point me to a guide. Or is it possible to upgrade the security functions without using the new DIV template?

Surely I can't be the only person with this theme problem. This new release must be breaking everyone's site. What's the solution? I looked at the following sites and they look the same and I doubt they have upgraded because it's so much to change!
http://www.hideflifestyle.com/
http://www.shirtsandladders.com/

This is possible using div's. Yes it will take a bit of work, but will keep you inline with the future features that are to come with ZenCart.

The recommended course is to create a spearate install with a separate DB in another folder. This will allow you to proceedd with styling while keeping your current shop live. You can then style it test it and only when you are satisfied, convert it to your live site.

Your option is to stay with what you have and not be able to upgrade to capture the features to come.

And then there are the security issues, but if this is not a concern to you then this is your choice.

There are many reasons that the Development team converted to div's and I am not privy to all of them and leave this issue to them to answer properly.

As you have a live site that is generating revenue for you, have you supported the ZenCart Team that has assisted in making this possible?

kobra:

This is possible using div's. Yes it will take a bit of work, but will keep you inline with the future features that are to come with ZenCart.

As you have a live site that is generating revenue for you, have you supported the ZenCart Team that has assisted in making this possible?
Is there a site you can recommend that is "Designing with DIVs for the complete idiot"?

My online shop was opened in March of this year and has yet to generate income. I still beat the streets to sell my services but that does not mean I won't donate, it's just that I'm still operating in the red. The links I posted are not mine, just showing that those seemingly busy shops are still using older versions since their designs won't adapt to the new template.

I can see how those quite impressive designs could lead you to believe that I am successful so you prompt me to donate. I've read many other posts with site links and never seen a prompt like yours. Maybe you were not impressed. This is why I know that an impressive design is crucial so I must conquer this DIV formatting to keep my existing theme and have the new functions.

You can post in the commercial help forum hee for assistance. But always check references.

HI! maxima!

Have you taken a peek at some of the donated templates for 1.3.5? You
can test drive them here:
http://(sorry, site offline)/135/index.php

Perhaps the Sage template or the Arch Shoppe template would work for you?

I couldn't get your first link (your shop?) to load, but if it's similar to the others, it should be quite simple to reproduce in a CSS format. Not all of the programming has changed, just (mostly) the formatting methods.

Try googling for "CSS tutorial" and you will find a vast supply (w3schools is good). I have a very nice book from Sitepoint, "HTML Utopia: Designing Without Tables Using CSS" which explains clearly both why and how to use the new techniques.

Good luck!

TShooters:

HI! maxima!

Have you taken a peek at some of the donated templates for 1.3.5? You
can test drive them here:
http://(sorry, site offline)/135/index.php

Perhaps the Sage template or the Arch Shoppe template would work for you?

Thanks for the suggestion but as I stated... I most definitely want to retain my current theme. Those at the site you suggest are exactly what I don't want and it seems that's the only appearance DIVs can produce.

I prefer designs like these Zen Cart templates

gjh42
It certainly isn't simple for me. I am trying and learning as I go. For instance, how do I convert the following table to DIV and have the exact appearance```

"...it seems that's the only appearance DIVs can produce."
I'm sorry, but that's ridiculous. CSS can produce just about anything you can envision - any shortcomings you see are due to vision or skill levels.

I've never used tables, so I don't know exactly what your table code should look like. I'm also still learning CSS myself. You would make the <table> a div with a .class or #id name, then each <tr> would be another div with name. In the stylesheet, you would define those names as to background-image, font, border, etc. Zen Cart already has most of that structure built into the newer releases, so you mostly need to apply the right styling.

Do yourself a favor and look at the preview for this book: HTML Utopia: Designing Without Tables Using CSS (click on the preview link on the page.) It includes a chapter demonstrating building a sharp page.

For the start, please refer to the topic below.
MSP Computech 1.3.5.
It convert the Template Monster's sample template which similar to the one you are refer to.

However, don't forget the usability for a shop.
The templates you refer to, one in common is the images for header, logo and buttons with hugh size. With compare to the whole web page, the space for the products are not sufficient and the product may become decorations.

.

gjh42:

I've never used tables, so I don't know exactly what your table code should look like.
Wow! No offense but you are either very young (13yo or so) or very new to Web design. Tables have been the key source of formatting since it's introduction. Prior to that information just flowed straight down a page with intermttent animated rulers, sorta like DIVs do now.

That table looks like

When I use DIVs I don't know how to split it into multiple sections so I can put images in a row. How would I use DIVs to get the exact table format as the image?

All I am seeking is the quick simple way and so far DIV seem way more complex since it relies on CSS to keep it in shape. Now instead of point and click with my trusty WYSIWYG editor, I have to know color codes, get precise measurements in em or px, set hundreds of classes to control various areas and much more headache.

I'm no expert, but think that the Sage template...or even the new 1.3.5
Classic template...could be made to look like the pic you posted this morning.

I commend you for trying to build your own. At least you won't be draggin'
your head on the floor waiting for Template Monster to catch up to Zen Cart. :thumbsup:

I must really not be coming across clear. I am not trying to create a new theme/template. I already have a site with a theme from template monster which was in place since zc 1.2.7 and I want to implement the 1.3.5 security and functions and be able to have the exact appearance. You have suggested the sage template before and no offense if it is yours, but I think it is horrid.

Anyway, from what I've read on 'Tableless' designs, it is all about the CSS. That handles all the positioning. I just don't know how to design without seeing the results as I go and I can't find a WYSIWYG that does CSS.

I just don't know how to design without seeing the results as I go and I can't find a WYSIWYG that does CSS. Couple of things...

The serverside scripting restricts the WYSIWYG for ZenCart now and before.

Tables have been used and abused for some time as you have aknowledged that you know they have been in use for a long time. Have you actually investigated the use of css? As I see, all the scripts are moving in this direction and it is not for reasons of restricting creativity nor making it more difficult to design & style effectively.

As your current site is a commercial template base, you really do not need to design it as your design is already established, What is required is the porting of the styling and the functionality of your current design.

If this was html with css styling, there are several applications that allow WYSIWYG; Dreamweaver & NVU being just two. But due to the server side php, the pages are assembled from several pieces of html/xhtml and DB information and this has been the case for all the versions of Zen Cart and is not a change nor anything new.

I realize that it is difficult leaving an environment that is comfortable to move into another that one does not currently feel competent at. But this is the course that most well supported, popular scripts are following.

For WYSIWYG and shorten the time in modifications,
Both on line or off line, I usually use the ways below to connect the WYSIWYG, CSS edit and style preview for Zen Cart. Also in provide solutions and answer questions to the forum, I will try it first by the way below.

Normally, the steps only take less than half minute or 15 seconds in my practices. And then can play it around until end.

The tools

It just for examples, you can use any tools you like.
#1. for editing and preview, I prefer TopStyle Pro but any editor with samilar functions will do the jobs.

#2. for browser I use Firefox for it have numeric helpful extensions for all sorts.
For the purposes talking about, two extensions will help, again any way with similar function will do the jobs.
#2a. Just Source View - JSView
#2b. View Souce With - ViewSourceWith

The steps

Again it only for demo, you can do any way you like.
#3. For the page need to edit, first use Firefox to browse the page, then save:
#3a. the page source - for e.g. we call it => testpage.html
#3b. the stylesheet - use the same name => stylesheet.css (or any you like)
then save to your local pc.

#4. open the saved => testpage.html by TopStyle Pro,
and in the file you can find the standard structure of Zen Cart for the css.
#4a.
e.g.
the below is the link to the stylesheet of my testing.

<link rel="stylesheet" type="text/css" href="includes/templates/future_zen_4/css/stylesheet.css" />

And from your local pc find the path of the stylesheet in point 3b.
#4b.
e.g.
in my testing, the path of the styleshee in my Win pc is:
C:\01\css\stylesheet.css

#4c.
in the line of the point #4a. of the file testpage.html in point #4
change the line for link of the stylesheet and point it to your local file.
#4d.
e.g.
in my test win pc, the link look like below.

<link rel="stylesheet" type="text/css" href="file://C:/01/css/stylesheet.css" />

After that, again use TopStyle Pro to open and edit your stylesheet.css in local.
And you will find that every edit after save will be refect by the preview window of TopStyle Pro and for Firefox or IE.

One more, since it is in html and you can move the "section code of html" defined by Zen Cart.
By trial and error, move section by section, add and edit the html, it can achieve the mock up effects.
After that you can turn to the php file and figure out how to edit the template files for the final results.

.

There is a good method for editing CSS which, if not strictly drag-and-drop wysiwyg, at least shows instant results.

Use Firefox and download the Web Developer extension. After it is installed and activated, click on the CSS button and select Edit CSS. You will see a panel on the left with the stylesheet(s) that control the current page, and the page displayed on the right. Any changes you make to the stylesheet will display instantly on the page - not even a refresh needed. When you are happy with your results, you can save the edited stylesheet. The changes will not become permanent until you upload the file to your server.

There is also a facility in Miscellaneous to Edit HTML, which I presume works similarly, not to mention a host of useful information-displaying functions.

Since I have a local installation of my site for development, I like to have the stylesheet open in Notepad++ and make edits there as I test them in Firefox. I just save the Notepad copy when I am ready to commit.

Yes, the Web Developer extension is very useful. :smile:
For me it is not a problem since came from the age of bin, hex, then Edlin. However, for normal users, it has its limitations for lack of syntax hightlight, auto complete, searching and hints.

Yes, I also have local installation and also don't have problem in that.
It is only how to use the tools and work efficiency for users not familiar with the codes, especially the php.

The above is only suggestions and think that it can be improved or expanded depend on everyone's favor. :smile:

.

Thanks all for the guidance. Though I am complaining about the CSS formatting I will eventually adapt. For now though I will have to leave my store as is with 1.2.7 as I don't have time and upgrading will certainly ruin it.

I have installed 1.3.5 on my localhost and trying to make everything behave properly and so far it is kicking my butt especially trying to align 3 images horizontally with text in the center. How is that done? Can a DIV be split into 3 columns? How do you place a DIV beside a DIV? By the time I'm done the method may change again.

If you are looking for a tutorial to help you with css - the web standards group has exactly that and it is free. The CSS tutorials can be found here :
http://www.w3schools.com/css/default.asp

As to the comment of someone not being a designer long or not old enough to have used tables - that is pure nonsense. I am by far not young, and I also am not "new" to design and I personally prefer CSS layouts to tables for numerous reasons, the primary being cross browser compatibility. I can create a css layout that looks the same no matter what browser you view it from - even a mobile phone. Tables are not rendered by all browsers the same and therefore a table based design cannot say the same.

Lastly, you wouldn't want to seperate a div into 3 sections to achieve your last question, you will want to create 3 divs each of which are positioned using the float, padding, margin "commands" (for lack of a better word) in your stylesheet.

Hope that helps a little more :yes:

I have installed 1.3.5 on my localhost and trying to make everything behave properly and so far it is kicking my butt especially trying to align 3 images horizontally with text in the center. How is that done? Can a DIV be split into 3 columns? How do you place a DIV beside a DIV? By the time I'm done the method may change again.
This ia a good method for development and being local saves the upload step and is much closer to WYSIWYG than other approaches, albeit with a save and refresh step in between changes,
Another option that will allow for help through the forum would be to install to another folder i.e. /test on your host with a separate DB, In this way we can actually view what and where you are and recommend specific adjustments.

TinaS:

As to the comment of someone not being a designer long or not old enough to have used tables - that is pure nonsense. I am by far not young, and I also am not "new" to design and I personally prefer CSS layouts to tables for numerous reasons...

You mis-understand that response. gjh42 stated that they ' HAVE NEVER' used tables and did not understand the table code I posted, not that they 'PREFER' CSS over tables. I am merely saying that anyone designing from the early '90s must have used tables and would certainly be able to interpret the table code I posted.

Thanks for the tip :smile: