Rough Guide: Editing the new templates Part 3

Now that you understand (hopefully) the main template layout of your store in Part 1 and Part 2, its time to have a look at the Content Page HTML.  As we learnt in part 1, this is the content that is shown on all pages other than the actual home page of your store. Typically this will be when a vistior goes into a section of your store. The code looks something like this for most of the stores:

<DIV class=clearfix id=content>
<DIV id=cImage>##currentsectionimage## </DIV>
<DIV id=cName>##currentsectionname## </DIV>
<DIV id=cDesc>##currentsectiondescription## </DIV></DIV>##sectionswrapper## ##sections## ##sectionswrapper## ##products##

 

Styling the top part.

The Section Image, Name and Description all sit in this code. The first thing you will probably want to style is the #content DIV. You can set a background or border that will be seen behind or around your Section Image, Name and Description.

To set a background, you will use CSS something like this:

#content {background: #440011 ! important: }

Name, Rank and Serial Number.

Next you can look at the Section details - #cName, #cImage and #cDesc. Each of these can be styled with fonts and colors.You may even wish to alter text alignments as well. You can even move the section image from right to left by changing the float and margin appropriately. For a left aligned cIimage, you would use:

#cImage {float:left; margin-right: 20px;}

For a right aligned cImage use:

#cImage {float:right; margin-left: 20px;}

If you want to get really tricky, you could even make it:

#cImage {float:none}

15.07.2007. 12:40

This article hasn't been commented yet.