Creating your own template - HELP

[nxsteven]

I'm using the most current version. I know HTML and I understand how to DESIGN a website, cut it up, all that. I'm completely unfamiliar with how PHP and CSS really work or what exactly to edit, I should say. I normally use Dreamweaver or Expressions.

All I really need to know is if I'm using Dreamweaver or any WYSIWYG editor, how the heck do I open up a custom template to edit it? Once I get there, I can usually figure out what is being changed and where those files reside.

Any and all help would be great. I've already read a few of the FAQs and have googled a few things but everyone is saying something different so it's becoming confusing.

PS: I have zen-cart up and running on my webserver just fine. Fully functional. I even read a "tutorial" that says I should edit it directly from there. No idea how I would do that.

Thanks in advance!

[kobra]

All I really need to know is if I'm using Dreamweaver or any WYSIWYG editor, how the heck do I open up a custom template to edit it? Once I get there, I can usually figure out what is being changed and where those files reside.

You can not use a WYSIWYG like dreamweaver to design a php application as pages do not actually exist as one normally thinks of them.

php assembles a page from many pieces at the server and then sends this to a browser

Have a look at the classic template files and the css

[nxsteven]

You can not use a WYSIWYG like dreamweaver to design a php application as pages do not actually exist as one normally thinks of them.

php assembles a page from many pieces at the server and then sends this to a browser

Have a look at the classic template files and the css

I read about an application called XAMPP that turns your PC in to a webserver in order to use a WYSIWYG editor. It allows you to run Apache, MySql... from your PC. It's running in my Systray right now. Just don't know how to use it properly

[gjh42]

XAMPP is an excellent development tool, though I don't know if it will allow you to use Dreamweaver in wysiwyg mode. It will make it easier and faster to make and test repeated edits while working on various aspects of design and function.
You install Zen Cart in the /xampp/htdocs/ folder just like a regular server.

[nxsteven]

I know this will sound like a silly question but what is the main index file I should be viewing? Last time I really designed a page I would just open up index.htm or upload that to a directory and that would be what I view. I'm getting kind of frustrated and I refuse to use a template from a template site :\

[afo]

Forget about editing html to achieve the look you want. Most of work needs to be done in the stylesheet (css). The free templates are a great way to learn how to create your own template. You can see them in action at http://(sorry, site offline)/. Use the pulldown menu to change the template and see what it looks like.

Another handy tool is the Firefox browser with the webdeveloper addon which allows you to play with the css and see the effect immediately. You have to save the changes separately and FTP them to the site to make them permanent.

[nxsteven]

Forget about editing html to achieve the look you want. Most of work needs to be done in the stylesheet (css). The free templates are a great way to learn how to create your own template. You can see them in action at http://(sorry, site offline)/. Use the pulldown menu to change the template and see what it looks like.

Another handy tool is the Firefox browser with the webdeveloper addon which allows you to play with the css and see the effect immediately. You have to save the changes separately and FTP them to the site to make them permanent.

What you're saying may be correct as I'm not very familiar with css and how it totally works. I was under the impression that that had more to do with text, colors, and styles.

What I'm doing is creating my entire layout from scratch in Photoshop or Illustrator. What I'd normally do is cut that image up and put it in tables and just do everything manually. This is obviously not the case here.

How can I edit the physical layout with the css files? :o

[schoolboy]

You will go through this phase of anguish and anxiety (as many of us did) while you UNLEARN all you currently know about flat html websites.

While knowledge of HTML is valuable, it is superfluous, because (as Kobra pointed out), there are no HTML pages in a dynamic content website.

The pages are created on-the-fly - and while they end up at the browser being html, their contents are assembled by the programming code - in Zencart's case, that's PHP.

A single page can be cobbled together from literally hundreds of resources, files and database fields. It is assembled "on request" - ie: when a visitor clicks a link or a button. It exists only for the time it is being viewed on-screen. As soon as the viewer navigates to a new page (or clicks a button to perform a function) the page they are on evaporates forever, and a new one (possibly also comprising over 100 separate elements) is built by the PHP.

The layout and styling is largely CSS controlled, with more settings stored in the database. A handful of layout components can be adjusted in the PHP code itself - but mostly it's CSS and database "switches".

It is possible to use Dreamweaver to help you with a PHP-based layout... but tackle this only if you have GURU status in PHP.

[schoolboy]

By all means create a "desired look" in DW. bear in mind the conventional template structure in ZC is:

- - - - - - - - - - - - - - - -Header - - - - - - - - - - - - - - - -

Left Column - - - - Centre Column - - - - - Right Column

- - - - - - - - - - - - - - - Footer - - - - - - - - - - - - - - - - -

Think of these as being "similar" (in concept) to a HTML TABLE

################################################################################
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| - - - - - - - - - - - - - - - - Header - - - - - - - - - - - - -- |
|################################################################################|
| - - - - - - | - - - - - - - - - - - - - - - - - - - - - | - - - - - - |
| - - - - - - | - - - - - - - - - - - - - - - - - - - - - | - - - - - - |
| - - - - - - | - - - - - - - - - - - - - - - - - - - - - | - - - - - - |
| - Left - - | - - - - - - - - - - - - - - - - - - - - - | -Right -- |
| - - - - - - | - - - - - - - Centre - - - - - - - - - | - - - - - -|
| - - - - - - | - - - - - - - - - - - - - - - - - - - - - | - - - - - - |
################################################################################
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| - - - - - - - - - - - - - - -- Footer -- - - - - - - - - - - - - - |
|################################################################################|


Each of these "areas" is configured to display various types of site content. So if you construct your design to "conform" to this structure, you can still "slice" it. Then you will use CSS. the database switches and possibly a little PHP to get the components to behave and appear in the manner you want.

As for Dreamweaver and the future of your webshop design? Put the CD back in its box and store it in the garden shed.

[schoolboy]

One final postscript here...

This technique is not unique to zencart.

ALL CMS systems work on the same principle.

In the time of the neanderthals, internet sites were flat html - but things have moved on...

It will matter not what eCommerce package* you use - the principle is the same.

---------------------------------------------------------------------------
*There are some that "bolt" cart functionality to a HTML site,
but these systems are archaic and unreliable. They are also
insecure and un-scaleable.