Indexing products by alphabet

[Guest skye020681]

Hi there,

I am hoping somebody may be able to help me. I am brand new to web design and really am struggling to try and get the look that I want.

I am in the process of setting up a store that specialises in womens and mens perfumes. Ideally what I would like to be able to do is have a menu that had:

# A B C D E F ect (preferably across the top of the page as oppossed to down the side menu)

The idea would be that the customer could then click on 'a' for example and it would take them to a page that would list all fragrances begining with 'a' and so on.

Does anyone know if firstly, I can do something like that within cubecart and if so, how?

[Guest vrakas]

Try this link

First try the search on the top as i saw a post and reply about this a few days ago */*

[roban]

Here's what I would do. Killer skin lines up categories across the top by default in the form of tabs, each tab formed by 3 images. The bar is made up of 3 other images. These are called in Skins/Killer/styleSheets/layout.css.

To do what you want:

1. setup your categories A,B,C,D,E,F,G,...and so on

2. Open layout.css and remove the references to the images. They appear in 6 places as:

These 3 are the bar

.topCats {

text-align: center;

background-image: url(../styleImages/backgrounds/catBg.gif);

height: 42px;

color: #ffffff;

margin-bottom: 15px;

}

.topCatsBgRight {

background-image: url(../styleImages/backgrounds/catBgRight.gif);

background-repeat: no-repeat;

background-position: right;

height: 42px;

}

.topCatsBgLeft {

float: left;

background-image: url(../styleImages/backgrounds/catBgLeft.gif);

background-repeat: no-repeat;

background-position: left;

height: 42px;

These 3 are the tabs

.topCatsTabLeft {

background-image: url(../styleImages/backgrounds/catTabLeft.gif);

background-repeat: no-repeat;

width: 7px;

}

.topCatsTabMid {

background-image: url(../styleImages/backgrounds/catTabMid.gif);

background-repeat: repeat-x;

}

.topCatsTabRight {

background-image: url(../styleImages/backgrounds/catTabRight.gif);

width: 7px;

background-repeat: no-repeat;

Remove the url(../styleImages/backgrounds...........); from each group and upload to your server. You will be left with only text. The text color is called from style.css as:

.txtCat {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

font-weight: bold;

color: #000000;

text-decoration: none;

Just change the color to anything you like. You don't have to use hex codes for the color as shown. You can simply use: white, black, red, blue, green, grey.

[Guest skye020681]

great...i will give it a go. Thanks for your help :w00t: