Making Custom Template

[rebelrose]

I don't understand what I am reading I guess, I was looking at what I need to make a custom template and it seems to say I have to copy the css two times?

Is that correct?

This is what I am reading:

Next, copy the includes/ templates/ template_default/ css directory from includes/ templates/ template_default/ and place the new folder and its files in your new includes/ templates/ my_template/ folder.

Copy the stylesheet.css from includes/ templates/ template_default/ css to includes/ templates/ my_template/ css. This si the stylesheet you will be editing.

[clydejones]

Its probably eaiser to explain it this way:

in includes -> templates

create your CUSTOM_NAME folder

Now in you should have something that looks like this:

includes -> templates -> CUSTOM_NAME

In CUSTOM_NAME create the following folders
common
css
images
templates

Now from your templates_default -> css

copy the stylesheet.css and paste it into:

CUSTOM_NAME -> css

If you have or create images for your CUSTOM_NAME template they should go in

CUSTOM_NAME -> images

You will also need a file called template_info.php that contains the following:

<?php
/*
*
 * Template Information File
 */
 
$template_name = 'custom_name';
$template_version = 'Version 1.0';
$template_author = 'your name';
$template_description = 'description of template';
$template_screenshot = '';
?>

Your finished folder should look like this:

CUSTOM_NAME

• common (folder)
  css (folder)
  images (folder)
  templates (folder)
  template_info.php

Hope this helps

[rebelrose]

Thank You that is much easier, I appreciate your time. I am trying to make my own template and the way things are explained here are a bit confusing.

Thank You

[clydejones]

Just take your time and read through both the FAQs and the Wiki. It seems complicated but once you get over the first hurdle things become eaiser.

[rebelrose]

Well if you say so, but this is all greek to me. Code is something I just don't understand well.

But Thank You

[clydejones]

Don't get lost in the forest of "code". You don't have to write code and in any case if you need help changing something in one of your template files you can always ask for help here in for forum.

In the meantime maybe these hints and tips will help a little bit.

How do I change the background header?

Using an image editor, create a new background graphic and save it to includes -> templates -> YOUR_TEMPLATE -> images -> header_bg.jpg and upload it to your server.

-------------

How do I add and position a new logo?

Using an image editor create your new logo and save it to includes -> templates -> YOUR_TEMPLATE -> images -> logo.gif and upload it to your server.
By default the logo is Left aligned. Changing the alignment involves making a modification to your stylesheet.css. Open the stylesheet.css and find the following:

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
}

and change it to

#logo {float: left;}/* Make your changes here (i.e. to center the logo change float: left; to text-align: center; or you can align it to the right by changing float: left; to float: right;) */

.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
}

----------------

How do I remove the logo completely?

If you don't want or need a logo, use your image editor and create a 1px by 1px transparent image and save it to includes -> templates -> YOUR_TEMPLATE -> images -> logo.gif and upload it to your server.

--------------

How do I change the "sales message goes here"/"TagLine Here" text?

In order to add your own "sales text", changes will have to be made in includes -> languages -> English (or YOUR LANGUAGE) -> header.php.
Open the file in a text editor and find the following line of code:

define('HEADER_SALES_TEXT', 'TagLine Here');

Make your changes to the text highlighted in red. Save the file and copy it to the includes -> languages -> English (or YOUR LANGUAGE) -> YOUR_TEMPLATE folder and upload it to your server.

--------------

How do I change Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution?

look in includes -> languages -> english -> index.php and find this:

// This section deals with the "home" page at the top level with no options/products selected
/*Replace this text with the headline you would like for your shop. For example: 'Welcome to My SHOP!'*/
define('HEADING_TITLE', 'Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution.');
} elseif ($category_depth == 'nested') {
// This section deals with displaying a subcategory
/*Replace this line with the headline you would like for your shop. For example: 'Welcome to My SHOP!'*/
define('HEADING_TITLE', 'Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution.');
}

change the portions in red to whatever you want.

----------------

How do I change or turn off "Welcome Guest" message?

To turn off the Customer Greeting go to your admin -> configuration -> layout settings -> Customer Greeting - Show on Index Page and set to 0.
If you want to have your own customized greeting, You will have to make changes in includes -> languages -> English (or YOUR LANGUAGE) -> index.php.
Open the file in a text editor and find the following lines of code:

if (STORE_STATUS == '0') {
define('TEXT_GREETING_GUEST', 'Welcome <span class="greetUser">Guest!</span> Would you like to <a href="%s">log yourself in</a>?');
} else {
define('TEXT_GREETING_GUEST', 'Welcome, please enjoy our online showcase.');
}
define('TEXT_GREETING_PERSONAL', 'Hello <span class="greetUser">%s</span>!');

Make your changes to the text highlighted in red. Save the file and copy it to the includes -> languages -> English (or YOUR LANGUAGE) -> YOUR_TEMPLATE folder and upload it to your server.

----------------

How do I remove the Home in the middle column next to the Categories box?

This is called the breadcrumb (think Hansel and Gretel) showing where you are and how to get back to previous locations. You can either turn it off completely or you can turn it off only on the main page.

You can turn it off in admin -> configuration -> layout settings -> Define Breadcrumb Status and set to 0.

To turn it off on the main page in includes -> templates -> YOUR_TEMPLATE -> templates -> common -> tpl_main_page.php find the following lines of code

<!-- bof breadcrumb -->
<?php if (DEFINE_BREADCRUMB_STATUS == '1') { ?>
<div id="navBreadCrumb"><?php echo $breadcrumb->trail(BREAD_CRUMBS_SEPARATOR); ?></div>
<?php } ?>
<!-- eof breadcrumb -->

and change to:

<!-- bof breadcrumb -->
<?php if (DEFINE_BREADCRUMB_STATUS == '1' && ($current_page!='index' || (int)$cPath>0 )) { ?> <div id="navBreadCrumb"><?php echo $breadcrumb->trail(BREAD_CRUMBS_SEPARATOR); ?></div>
<?php } ?>
<!-- eof breadcrumb -->

--------------

How do I change Copyright © 2003-2006 Zen Cart in the footer?

in includes -> languages -> YOUR_TEMPLATE -> english.php find the following:

define('FOOTER_TEXT_BODY', 'Copyright &copy; 2006 <a href="http://www.zen-cart.com" target="_blank">Zen Cart</a>. Powered by <a href="http://www.zen-cart.com" target="_blank">Zen Cart</a>');

Make your changes to the portion in red. As a bow to the developers of Zen Cart leave the powered by portion as is.

-----------------

Additional customizations would be made in your template files. In general terms these would be the only files you would modify but, occasionaly you will also need to modify your stylesheet.css as well.

--------------

Where do I find the files I would edit to change other parts of my cart (ie. template files, sideboxes, etc.)?

If you want to turn your sideboxes on and off or move them left and right, you do this from the admin control panel in admin ->tools -> layout boxes controller.

The other files you would modify are located in includes -> templates -> YOUR_TEMPLATE.

Which file(s) you edit will depend on which page of your shop you want to customize. Working with these files is fairly easy since they are clearly marked with <!--bof whatever--> and <!--eof whatever-->. This makes moving sections of the file easy.
The most common file(s) to be customized are:
includes -> templates -> YOUR_TEMPLATE -> common -> tpl_main_page.php
includes -> templates -> YOUR_TEMPLATE -> common -> tpl_header.php
includes -> templates -> YOUR_TEMPLATE -> common -> tpl_footer.php
includes -> templates -> YOUR_TEMPLATE -> templates -> tpl_product_info_display.php

---------------

How do I change the of sidebox titles?

Look in includes -> languages -> english.php

Find this line:
define('BOX_HEADING_XXXXXXXX', 'whatever');
in this case find:
define('BOX_HEADING_CATEGORIES', 'Categories');

Change the portion in red to whatever you need.

Save the modified file to includes -> languages -> YOUR_TEMPLATE and upload it to your server.

--------------

Again, a lot of your basic customization can be done in your admin control panel. Generally, you would do this in:

admin -> configuration
admin -> catalog -> product type -> product - general -> Edit Layout
admin -> tools -> layout boxes controller

As you can see, customizing your cart will take a bit of work and time but well worth the effort to get your cart looking the way you want.

--------------

What directories are all the images? ( ie. buttons, icons, images etc.)?

admin -> images folder:
admin -> images -> flags folder:
admin -> images -> graphs folder:
admin -> images -> icons folder:
images folder: This is where your Product images are located.
includes -> languages -> english [or YOUR_LANGUAGE] -> images folder: icon.gif (your language flag).
includes -> templates -> YOUR_TEMPLATE -> buttons -> english [or YOUR_LANGUAGE] folder: contains the buttons used by the cart.
includes -> templates -> YOUR_TEMPLATE -> images folder: contains header_bg.jpg, logo.gif and other images required by your template files.
includes -> templates -> YOUR_TEMPLATE -> images -> icons folder: contains additional images used by the cart

----------------

[ladysaat]

Wow Clyde that was awesome! I am half tempted to print that for crying out loud. LMAO! I still forget most of where that stuff is...

[rebelrose]

Don't get lost in the forest of "code". You don't have to write code and in any case if you need help changing something in one of your template files you can always ask for help here in for forum.

In the meantime maybe these hints and tips will help a little bit.

Thank you so much for all of that, I am going to print that out.

Thank You

[Ziggy]

Thanks for that summary. It really helped a lot.

[mommydesigns]

I followed your notes above to center my header.gif and no luck.

this is my site:

http://saab.websitewelcome.com/~azure/

I know this is straight forward but I'm having a heck of a time - i think I've been looking at it too much this a.m. and that's my trouble KWIM?

Thanks for your help.