Shop Layout Stuff - Categories, images, etc.

[janissaire]

Hi,

Ok with my new shop I’ve started using categories and sub categories together.

I’ve asked for a review of the site and have received some valuable input already - but the more I look at the store now the less I like it - specifically:

jecphotography dot com

Click on Fine Art Prints and you see

All others
Toronto
Trinity College

In center not OK

Currently in this order:

Fine Art Prints
Picture
Description

I’d like to have it looking like

Breadcrumbs
Horizontal Rule
Fine Art Prints - Description (this right beside the title) same colour text size as current
no picture

I would like to put the ‘Filter Results by:’ on the right hand side (not right column)

I would like to put the Sub-Categories in the center with the picture

Then if a link on the left is clicked or a sub from the center then you would go into that sub-cat.

I’d like to know if this can be done before I spend a ton of time doing coding work. Has anyone else done it?

Thanks!

[keneso]

Try thes in your stylesheet.css
Add the ones in red

#productListHeading {text-align: center;}

#categoryImgListing {text-align: center;}

#indexProductListCatDescription {
margin: 0.5em;
text-align: center;
}

label.inputLabel {
float: left;
width: 9em;
padding-left: 320px;
}

#navBreadCrumb {
background-color: #000000;
font-size: 0.95em;
font-weight: bold;
margin: 0;
padding: 0.5em;
border-bottom: 1px solid #FFF;
}

And remove the stylesheet-backup from the server

[janissaire]

Thank you have it working much better now

[janissaire]

Ok things look good with your change recommendations however when I go to the signup page things now look a little wonky.

Any ideas?

[keneso]

Sorry.

Try this

Remove the red ones from

label.inputLabel {
float: left;
width: 9em;
border-bottom: 1px solid #FFFFFF; <<< REMOVE
border-top: 1px solid #FFFFFF; <<< REMOVE
padding-left: 320px; <<< REMOVE
}

and add this to your stylesheet

#indexProductList label.inputLabel {
border-bottom: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
float: left;
padding-left: 320px;
width: 9em;
}

[Alasdair Macleod]

Hi Guys, this may relate to a problem I'm trying to solve- to alter the appearance of the Category level page, so the list of products in the category could be made to appear alongside the category image, to the right of it instead of underneath, anyone think this can be done?
All the best and thanks

[janissaire]

Keneso - it didn't work. I tried modifying what you gave me and even tried to padd the cells from the right.

I mean it worked - sort of - but when you go to the logon on sign up the ZipCode field and the date of birth appeared out of alignment with everything else.

Alasdiar - not sure what you mean - can you put in an image of what you are trying to do or try different explanation?

[keneso]

Hmmm
Will you please try removing the .inputLabel (remove for the dot too)

#indexProductList label.inputLabel {
border-bottom: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
float: left;
padding-left: 320px;
width: 9em;
}

[keneso]

@Alasdair

I'm not sure either, if I understood correctly you could try the following - the values in red to be adjusted to your needs eventually

#indexProductListHeading {
float: left;
width: 100px;
} 
#indexProductListCatDescription {
float: left;
width: 100px;
} 
#indexProductList label {
float: left;
clear:left;
}
#indexProductList select {
float: left;
clear:left
}
#productListing {
float: right;
width: 250px;
clear:both;
margin-top:-150px;
}