Is it this easy to create templates?

Hello Everyone!

I am new to Zencart and this forum. I hope everyone is doing fine.

I want to create custom Zencart templates to give away and some to sell and I wanted to see if I had the process right:

1.) I create the design in Photoshop, slice and export it
2.) I code the website in my html editor
3.) Then I simply follow these instructions: http://www.zen-cart.com/content.php?180-how-do-i-create-a-new-custom-template

Is that really all or is there something else? :smile:

Thanks!

No.
No.
No.

Zencart is a database-driven PHP program, and contains few, if any, static HTML pages.

The best way to learn to style Zencart is to download some of the free templates from the Plugin area and see how their authors did what they did.

stevesh:

No.
No.
No.

Zencart is a database-driven PHP program, and contains few, if any, static HTML pages.

The best way to learn to style Zencart is to download some of the free templates from the Plugin area and see how their authors did what they did.

Hi Stevesh and thanks for your reply. I really wanted to know mostly about my Photoshop images and the CSS that I create. I apologize for not making this clear earlier. I have no intention of putting the HTML files anywhere near the Zencart template.

Right now I am studying hard how to get these png or jpeg images into Zencart and then add the CSS to the appropriate Zencart folder. Am I a little closer or am I way off base again. :smile:

I don't know where you want these images to appear. Again, take a look at another template (or the Classic Zencart template) using a Firefox tool like Web Developer or Firebug to see how the pages are built. CSS stylesheets go in the current template's css folder. Stylesheets are preferable to inline CSS, I think.

stevesh:

I don't know where you want these images to appear. Again, take a look at another template (or the Classic Zencart template) using a Firefox tool like Web Developer or Firebug to see how the pages are built. CSS stylesheets go in the current template's css folder. Stylesheets are preferable to inline CSS, I think.

Okay. I'll try that. Thanks for your advice. :smile:

To add to stevesh answer:

The "html" markup is already there for you, with all the css classes, and ids already in the code, some are styled (css folder of the template), and some are there for further customization if needed, all you have to do is add them to your stylesheet. And you can do a lot just with that.

If you need to push it more you then need to rearrange the pieces of code (template files), and add your css in the code as well.

Like stevesh said you need to know the structure, and files that make up the page, and only way to do it is to take a look at the files. And if you know php then you can do "magic".

As for the photoshop file, it should only be your guide as to what you want to achieve, and of course insert some graphic here, and there.

If you wanted to create your own template from scratch then simply copy the directory includes/templates/template_default and all it's subdirectories to another folder. Then rename the copied template_default to the name of your template (eg mybeautifultemplate).

Modify your css etc etc, add your images to the image folder contained in your copied template_default (buttons etc etc)

Don't forget to open and modify the file includes/templates/template_default/template_info.php (do not rename the file though...)

If you wanted a mobile friendly template look for DIY responsive template in the Plugins section of this and apply your modifications.

In either case retain the directory structure.

frank18:

If you wanted to create your own template from scratch then simply copy the directory includes/templates/template_default and all it's subdirectories to another folder. Then rename the copied template_default to the name of your template (eg mybeautifultemplate).

Modify your css etc etc, add your images to the image folder contained in your copied template_default (buttons etc etc)

Don't forget to open and modify the file includes/templates/template_default/template_info.php (do not rename the file though...)

If you wanted a mobile friendly template look for DIY responsive template in the Plugins section of this and apply your modifications.

In either case retain the directory structure.

What folder would you copy directory includes/templates/template_default and all it's subdirectories to? I would like to make my own template from scratch

XxMousiexX:

What folder would you copy directory includes/templates/template_default and all it's subdirectories to? I would like to make my own template from scratch

Short answer is templates/YOUR_CUSTOM_TEMPLATE/

Full, and correct answer is here
http://www.zen-cart.com/content.php?180-how-do-i-create-a-new-custom-template

keneso:

Short answer is templates/YOUR_CUSTOM_TEMPLATE/

Full, and correct answer is here
http://www.zen-cart.com/content.php?180-how-do-i-create-a-new-custom-template

Yep :yes: that's it! Have fun tweaking your stylesheet etc.

frank18:

Yep :yes: that's it! Have fun tweaking your stylesheet etc.

ok on the style sheet could I edit it in Dreamweaver? Also http://www.zen-cart.com/content.php?180-how-do-i-create-a-new-custom-template are not that clear. Do I do all of this in My Cpanel? or do I make folder's on my hd and then upload them?

Cause I have something like this

which is not what I want I'm trying to change baby blue background

I've never used Dreamweaver, but if it can edit text files, I guess you could use it. Stylesheets are just text. I use Notepad to edit them.

Some people use the CPanel File Manager to download and upload files, but it's always seemed easier to me to use an FTP program (I use the FireFTP plugin for Firefox).

The colors you're seeing in your screenshot are from the default Zencart template (not the Classic Green template that's activated when you install Zencart), so you've done something with the Classic files.

I'll re-suggest that you get the Web Developer or Firebug plugins for Firefox. Both allow you to edit the stylesheet online and see the results of your edits right away without making any permanent changes.

ty I have Firebug and had it for a long time so dose it mean that with the classic Green template with firebug active I could change the baby blue background to my own in the stylesheet. and where would I upload my bg while using firebug to edit my css. Not sure if that makes an since

since I cannot edit my post above I'll have to put it here. I have my Main front Page the way I want it. Can I copy my css from firebug as my new template css or not. I have to rename my images/upload them the underscores. How would I edit my main page to look like this?

XxMousiexX:

I have my Main front Page the way I want it. ... How would I edit my main page to look like this?

I for one am not understanding your needs.
Is that what you have accomplished, or not, if yes what is it that you want?

Little advice on posting:
I think you should have opened a new thread instead of hijacking this one, maybe you could try to ask single questions, and go step by step, as it's hard to tell you how to make a whole page.

keneso:

I for one am not understanding your needs.
Is that what you have accomplished, or not, if yes what is it that you want?

Little advice on posting:
I think you should have opened a new thread instead of hijacking this one, maybe you could try to ask single questions, and go step by step, as it's hard to tell you how to make a whole page.

stevesh

said I could edit my css file in firebug I did that so It would mess anything up. I wanted to know how I could make my template like the above picture for real on my server. I forgot to mention it was a script installed on x10 hosting and didn't download the zencart and they offer no support on there site for it. So I think that is my problem with the tut and when on the first page frank said to

(If you wanted to create your own template from scratch then simply copy the directory includes/templates/template_default and all it's subdirectories to another folder. Then rename the copied template_default to the name of your template (eg mybeautifultemplate).

Modify your css etc etc, add your images to the image folder contained in your copied template_default (buttons etc etc)

Don't forget to open and modify the file includes/templates/template_default/template_info.php (do not rename the file though...)

If you wanted a mobile friendly template look for DIY responsive template in the Plugins section of this and apply your modifications.

In either case retain the directory structure. ). Anyways I'll open a new thread thanks

XxMousiexX:

stevesh
said I could edit my css file in firebug I did that so It would mess anything up. I wanted to know how I could make my template like the above picture for real on my server. I forgot to mention it was a script installed on x10 hosting and didn't download the zencart and they offer no support on there site for it.

Indeed you can use firebug to see the changes on the fly, but they won't be saved.

Anyhow let's zero all, and start from scratch, maybe if you open a new thread would be better, nevertheless here is what I think you'd better do:
I am not familiar with script installations, but I think there should be somewhere on your server the zan cart files, but for not creating confusion I'd really zero it all, and install from scratch:

• UNinstall your script installation, they should have that option.
• download zen cart 1.5.4
• unpack it to a folder on your pc
• get yourself an ftp client (meaning download, and install on your pc) - filezilla is a good one
• you could use windows notepad, but since you are at it download, and install notepad++
• go to the docs folder of the unpacked zen cart, and READ 1.readme_installation.html
• follow the instructions there
• come back, and open new thread/s, and we will try to guide you thru it.