Laying out your sections: space - the final frontier
I regularly get questions about how to control the layout of the section thumbnails, links and teasers.
The sections boxes have three things at play that control the overall layout of your sections. Put the following at the bottom of your custom CSS to see the three elements:
.sectionsTD1{border: 1px solid blue; padding: 0px !important}
.sectionsTable2 {border: 1px solid red; height: 320px; width: 230px; margin: 10px}
.sectionsTable2 td {vertical-align: top; border: solid 1px yellow; text-align: left; padding: 5px}
The colored borders are there so that you can make sense of what I am about to say, of course remove them once you have what you want.
The blue box is .sectionsTD1 and should be considerd the container for the section. You dont need to do much to it, although you can set a height or width to give a consistent look. I typically only set padding:0px !important and then leave it alone and use the next two.
The red box is .sectionsTable2 which is the one that you will control the most. To space out your sections, you can set a margin on this, either one right around, or a left, right, top or bottom. You may also want to set a height and width to force a consistent border and size.
The last box, the yellow one (.sectionsTable2 td) is only needed for alignment purposes. By default, it is set to center horizontally and middle vertically. You can change text-align to left, right and center. You can change vertical-align to top, bottom or middle.
Finally, a brief note about margin and padding. Margin is the space that is created on the outside of the box, padding is the space created inside the box. Both of these have a part to play in spacing, but do behave slightly differently in some browsers. Play around and check it out to make sure you are happy.
Comments (0) 23.11.2007. 14:13
Highlight Your Products: Add a border
If the main area of your store has a white background, the prodyct shots of your shirts may tend to blend in a little, and you may like to help them stand out a bit. The best and simplest way to do this is to add a border to the .productImage class in your CSS.
.productImage {border: 1px solid #000000;}
Each of the attributes controls the appearance of the border. The 1px is the line width of the border. The bigger the number, the wider the line around the productImage.
The solid is the style of border. This can be one of the following values:
- none
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
Finally, the #000000 is the color. This can be set to any hex color or a color name, eg white, black, blue, red,etc.
Some examples of what is possble are (l to r - ridge, double, inset)
The fancier borders such as inset, outset, groove, ridge and double all look best with a minimum width of 3px.
Setting a border on hover
If you want to get a bit trickier, it is possible to set the border to change when someone hovers their mouse of the image. To do this, you will need to add the following line of CSS:
a:hover img.productImage{border: 4px inset red;}
Of course, you can set the attributes on this as well. Experimet a little, however it can look quite good if your hover stat is the opposite of yoor normal state. Eg inset / outset or ridge / groove.
Comments (0) 23.11.2007. 05:36
Adding a Horizontal Menu
Many websites today have a horizontal menu accross the page, often for basic navigation like "home", "about us" and "contact" type links.
In order to add that to your printfection store, follow these steps and then customise to taste.
Firstly, you will need to add the HTML for your menu to the base HTML section of your store. Where you need to put the this will depend on which them you are using.
If you are using Crestone, Oxford, Sandbox or Square Blocks, you will enter the menu HTML directly after:
<DIV id=logo><A title="##storename##"
href="##storeurl##">##logo##
</A></DIV></TD></TR>
If you are using Windom or Grays, you replace the <tr></tr> from the following:
<tbody>
<tr></tr>
Once you have the location, you need to add the following HTML to create the menu:
<TR> <TD id="navcontainer" colSpan=2> <ul id="navlist2"> <li id="active"><a href="#" title="">Home</a></li> <li><a href="#" title="">About</a></li> <li><a href="#" title="">Contact</a></li> </ul> </TD></TR>
If you save that and then go to your store, it will look a little strange, with a bulleted list of links. Fear not CSS will come to the rescue.
Add the following CSS to your store's CSS:
#navcontainer{margin-top:0;padding:0;text-align:center}
#navcontainer ul{background:purple;border-bottom:7px solid #fff;color:#333;height:30px;line-height:30px;margin:0px !important;padding-left:15%;padding-right:15%}
#navcontainer ul #active a{border-left:1px solid #fff}
#navcontainer ul li{display:inline;font-size:13px;font-weight:bold;margin:0px}
#navcontainer ul li a{background:#8105bb;border-right:1px solid #fff;color:#fff;float:left;text-align:center;text-decoration:none;width:33%}
#navcontainer ul li a:hover{background:#af5ac5;color:#fff}
You will want to edit the colors in here to match your store. You can very safely change all color, background and border tags to suit your taste.
I want more than three buttons, how do I do it?
There are a couple of simple steps to add more buttons. Firstly, add another item to the list bfore </ul>:
<li><a href="#" title="">Contact</a></li>
Then change the width that is highlighted in blue in the CSS above to match the number of buttons. 3 = 33%, 4 = 25%, 5 = 20% . . . . 10 =
10%.
Comments (0) 15.10.2007. 13:17
