Rough Guide: Editing the new templates Part 1

There has been a bit of discussion on the forum about what we can and cannot do with the new templates. The simple answer is anything , nothing or somewhere n between. This multi-part guide is designed to help you safely make change to your template and understand the various parts. 

The 3 wise HTML pages

 The first thing you will see when you enable HTML customization is that you have three boxes for HTML - Base HTML, Home Page HTML and Content Page HTML. Each area plays a part in displaying your site. 


This is the HTML that appears on every page of your store. Think of it as the dinner plate for your store. If you add anything to this HTML it wil be relected on every page of your store. This is where things like your statcounter code should be placed, or links that you want on every page. Depending on which page your shoppers are at, will depend on what ##content## they see on their "plate".

Home Page HTML 

This is the ##content# that gets displayed inside the Base HTML on your main page only. For example you may wnat a welcome message that only appears on the first page and not deeper down in the sections. This is the place for that. 

Content Page HTML

This is where all the other pages come from as ##content## for the Base HTML page. You are less likely to want to edit this section, but if you had something that you didn't want on the home page, but did want on every other page, that would go here. 

Base HTML - going deeper

Lets look at the various areas of the Base HTML from the top down. Each theme has some subtle differences, however the same naming applies, so you should be able to follow easily enough.

<DIV id=topbar></DIV>

Not all the themes have this section, however if it is there, it is the lage block of solid color at the top of your page. In Crestone for example it is full width, behind the main content area of your page. You can style this in various ways, background, border, etc for different looks. To make it dissapear altogether, set the CSS to #topbar{background: none !important}.

<TD id=header vAlign=center colSpan=2>
<DIV id=logo><A  title=##storename## href="##storeurl##">##logo## </A></DIV></TD>


This is the area directly behind your store logo. Again it can be customised by CSS in anyway you like. The Store logo lives in here as well in its own div. You can adjust the alignment of the logo by setting some CSS: #logo {text-align: center} or left or right. You may also notice that the logo has an anchor around it which means that clicking on the logo will take you back to the stores home page.

<TD id=menucol vAlign=top>##menuwrapper##
<H4>Store Categories: </H4>##menu## ##menuwrapper## ##pricingmenuwrapper##
<H4>Shop by price: </H4>##pricingmenu## ##pricingmenuwrapper##
<DIV id=prop></DIV>You can put additional links buttons or banners here in the sidebar</TD>

This is the menu column of your store. You can add additional links here, or perhaps put your statcounter code in here, particularly if you want a visible counter.

Part 2 Coming Soon

18.04.2007. 05:13

This article hasn't been commented yet.