Design troubles once again.

[Martin Burton]

Hi all

I am trying to implement a design feature my boss has requested (he's a "can you just......" kind of guy). His "can you just"s generally require a complete rebuild as he has little or no understanding of how websites work.

To business. I am using the Silver theme. I have altered the product template to show as a product name at the top, then a product image, then a row of three cells (the whole thing is in a table) with a "more info" button, a retail price and a "buy it" button next to each other.

My boss wants this table to have a frame around it like the one around the sidebar links in the Silver theme.

I have moved the "divs" into the right places but the frame doesn't render correctly, with the top and bottom showing several mms to the right of the side pieces.

Is what I am attempting possible? I realised that the side menus are lists not a table - Is this the problem?

Any help gratefully received.

[Duncan Rounding]

Are these are the bits you want in the outer layout:
<div id="silver-bulk">
<div id="silver-bulk-bottom">
<div id="silver-bulk-top">
etc.

The standard product layout already has this frame around it so I'm not sure what you want.

[Martin Burton]

Sorry - should have been clearer.

I have rearranged the products into 3 columns on the page. My boss would like each product to have the frame around it, within the bulk frame you have mentioned.

I have been playing with:

<div class="silver-sidebar-list">
<div class="silver-sidebar-list-bottom">
<div class="silver-sidebar-list-top">

as they are about the right size for each product separately.

But I can't get it to work.

I presume that there is a width set somewhere for the top and bottom "divs", but I have no idea where to find it. I suppose that I can create my own custom boxes once I know where these are stored.

[leehack]

Get yourself Firefox and Firebug, both free, most if not all designers use these, fantastic help when tracing code and seeing what is styling what areas in real time.

[Martin Burton]

Thanks for that, Lee

I hasve now gone into the design library, made a copy of the Silver theme stylesheet and added my own custom "div" family, changed the name of the divs in the product template and added my renamed copy to the list - but nothing is showing up.

Beginning to think either this is beyond my capabilities or I'm missing something so blindingly obvious it will result in me headbutting the keyboard.

[Martin Burton]

OK

This is the code I have inserted in to the Silver Theme Stylesheet, or rather the copy, renamed Styles for Custom Silver Theme:

/* product ---------------------------- */

#silver-product-left {
	float: left;
	margin: 5px;
	display: inline;
	width: 220px;
}

.silver-product-list {
	background: url('silver-theme-sidebar-curve-bg.gif');
}

.silver-product-list-bottom {
	background: url('silver-theme-sidebar-curve-bottom.gif') no-repeat bottom;
}

.silver-product-list-top {
	background: url('silver-theme-sidebar-curve-top.gif') no-repeat top;
	padding-bottom: 6px;
}

And I have inserted this in the product code in the template:

<div class="silver-product-list">
			<div class="silver-product-list-bottom">
			<div class="silver-product-list-top">

Above the table containing the product details etc and closed by:

<div style="clear: both;"><img src="theme_shim.gif" height="1" alt="spacer"/></div>
</div></div></div>

I hope this is the correct way of doing it, but I'm getting confused.