design created, how to implement it in my store?

02 Sep 2011, 10:03

#1

New Zenner

Join Date:: May 2005
Posts:: 49
Plugin Contributions:: 0

design created, how to implement it in my store?

Hi

I am using the latest version of the zen cart, 1.3.9

I get a new template, which has nothing or little to do with the default template which comes installed wtih zen cart.

I spent some time, reading the posts in this forum and reading here: themeswiki.org/Creating_a_new_Zen_Cart_Template

I followed the steps listed here so I have the copy of the template_default which I named custom.

Can someone to help me to get started?
Since the header is quite complicated area, I would like to start from the footer.

Can anyone write the steps what should I do, which files I should edit to change the existing footer with the footer from the new design? I have different links as well, not only different layout.

And, yes, I do have the php knowledge, what I am missing is zen cart knowledge, and its files structure.

I think that this post will be of great use to many people as well, so If I manage to accomplish the tasks, I will post here the steps what I did, and which files I edit for each part of the site.

Regards, Zoreli

02 Sep 2011, 10:28

#2

stevesh

Black Belt

Join Date:: Feb 2005
Posts:: 19,793
Plugin Contributions:: 2

Re: design created, how to implement it in my store?

That would be way too much information for a forum reply. Most of us learned how to style Zencart by, well, just doing it. Having the proper tools is important:

A good FTP program - many here use Filezilla.
A good text editor - I use Notepad++.

Put aside your WYSIWYG HTML editors - they aren't all that useful in Zencart.

Install the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. An essential tool.

Some prefer Firebug, which does much the same thing.

(If you're using Firefox 4-6, you'll need to remap the editor shortcut, since Firefox has appropriated Ctrl-Shift-E for an internal function - I use Ctrl-Shift-Q.)

Also, you can use the Developers Tool Kit to search for the class and id names you find in Web Developer to see what files to edit:

https://www.zen-cart.com/tutorials/index.php?article=38
https://www.zen-cart.com/tutorials/index.php?article=39

02 Sep 2011, 10:43

#3

zoreli

New Zenner

Join Date:: May 2005
Posts:: 49
Plugin Contributions:: 0

Re: design created, how to implement it in my store?

Hi Steve

Thanks for your reply. I have the tools and the php knowledge. I do use firebug and netbeans as my ide editor of choice. And I do have the file zilla installed.

So, lets try this way: I do have the tools and custom folder in which is the copy of template_default. I want to change the links in the footer, and the footer layout.

Which files I should edit? Which CSS file, and which php file? I will find my way from there on.

Regards, Zoreli

02 Sep 2011, 10:50

#4

stevesh

Black Belt

Join Date:: Feb 2005
Posts:: 19,793
Plugin Contributions:: 2

Re: design created, how to implement it in my store?

We have no way of knowing what links you have in the footer now, since you mentioned you have a new template. If you provide a link to the site, we might be able to help you get started.

In a stock installation of Zencart, the navSuppWrapper is at the bottom of the site. Those links (Home, My Account, Site Map, etc.) are to what are called EZ pages, and can be edited in Admin - Tools - EZ Pages.

BTW, styling Zencart requires no PHP knowledge unless you really want to change things.

02 Sep 2011, 11:37

#5

zoreli

New Zenner

Join Date:: May 2005
Posts:: 49
Plugin Contributions:: 0

Re: design created, how to implement it in my store?

Thanks a lot Steve...I appreciate that you are spending your time to help me.

I almost manage to change the links...any idea how can I put the link in the footer to the contact page? Which file should I edit?

And the last question for this section will be...which css file should I edit? stylesheet.css which is located in the css folder?

Regards, Zoreli

02 Sep 2011, 11:53

#6

afo

Totally Zenned

Join Date:: Aug 2004
Posts:: 6,800
Plugin Contributions:: 0

Re: design created, how to implement it in my store?

includes/templates/YOUR_TEMPLATE/css/stylesheet.css where YOUR_TEMPLATE is the name of your custom template.

02 Sep 2011, 12:03

#7

afo

Totally Zenned

Join Date:: Aug 2004
Posts:: 6,800
Plugin Contributions:: 0

Re: design created, how to implement it in my store?

This list is a bit outdated, but it'll give you an idea where to start to create a very basic custom template (you can build from there):

includes/languages/YOUR_TEMPLATE/english.php
includes/languages/english/YOUR_TEMPLATE/index.php
includes/languages/english/YOUR_TEMPLATE/meta_tags.php
includes/languages/english/YOUR_TEMPLATE/header.php (to change the logo and header text)
includes/templates/YOUR_TEMPLATE/template_info.php
includes/templates/YOUR_TEMPLATE/common/tpl_header.php <- may not be necessary
includes/templates/YOUR_TEMPLATE/common/tpl_footer.php <- may not be necessary
includes/templates/YOUR_TEMPLATE/images/logo.gif (or .jpg or .png)
includes/templates/YOUR_TEMPLATE/css/stylesheet.css

Anywhere you see a /classic/ folder, you can create a folder for your custom template. You can copy the necessary files from either the /classic/ folder, the /template_default/ folder or the parent folder.

Edit includes/templates/YOUR_TEMPLATE/template_info.php to give your template identifying information so you'll recognize it in the admin under tools->template selection.

Note: if you've changed the height of the logo in header.php, you may need to change it in your stylesheet as well:

#logoWrapper{
background-image: url(../images/header_bg.jpg);
background-repeat: repeat-x;
background-color: #ffffff;
height:75px; <-adjust this line if necessary
}

02 Sep 2011, 12:59

#8

zoreli

New Zenner

Join Date:: May 2005
Posts:: 49
Plugin Contributions:: 0

Re: design created, how to implement it in my store?

Once again, thanks to all of you for the help. I am slowly but surely managing to start the things moving my way. I have one question:

I would like to add link to the contact page in the footer.

I can do it like this:

<a href="www.mydomain.gr/index.php?main_page=contact_us>Contact us</a>

but I prefer to do it right, like this:

<?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a>

any one know the syntax for the contact page? or how to find it?

If there is nothing wrong with the first way, I would be fine, just wanted to confirm that..

Once again, thanks to all of you for the help.

Regards, Zoreli

02 Sep 2011, 14:01

#9

stevesh

Black Belt

Join Date:: Feb 2005
Posts:: 19,793
Plugin Contributions:: 2

Re: design created, how to implement it in my store?

Assuming that by the footer you mean the #navSupp EZ page links, a better way would be to create an EZ page called Contact Us, activate it in the footer, and in the Internal Link box, put index.php?main_page=contact_us

If you're not talking about navSupp, either way you mentioned should work, I think.

02 Sep 2011, 23:44

#10

rescoccc

Totally Zenned

Join Date:: May 2010
Posts:: 1,700
Plugin Contributions:: 2

Re: design created, how to implement it in my store?

stevesh:
Assuming that by the footer you mean the #navSupp EZ page links, a better way would be to create an EZ page called Contact Us, activate it in the footer, and in the Internal Link box, put index.php?main_page=contact_us

This is the way I did it.