That tile_back.gif!

[CultureClick]

The default size for the tile_back.gif is 11 x 30 pixels. I've been wrestling with it, because my tile_back.gif is a gradient and depending on where it shows up (side boxes, center boxes, nav div), it gets truncated - the sideboxes cut it off at 22 pixels high, for example.

I made my custom gradient using Paint Shop Pro. When I realized I needed another tile_back.gif for my navigation divider because I have two rows of categories, I needed to make it 50 pixels high. Sideboxes cut that tile_back.gif off at 22 pixels.

Paint Shop gradients are done to scale, so the "steps" of the gradient are more pixels deep on a 50 pixel high image than on one that is 30 pixels high. So what I had to do is make the standard 30 pixel high .gif, and then cut and paste the gradient (top and bottom) onto taller or shorter versions, so the actual gradient stays the same size.

So, it takes a series of at least three tile_back.gifs, like this:







And then of course you have to put them in your stylesheet.css at the appropriate places, and play with the width of your navigation divider. But... it solves the problem of having dividers that all look slightly different depending on their size.

TA DAH!

CultureClick the baby Zenner

[schoolboy]

You could create individual background images for each area, then just edit the image call in the stylesheet to reference a different image name...

[CultureClick]

AND, the center box heading reads 29 pixels, so I had to make a 29 pixel tile_back too!

Here's what the relevant code looks like:

#navMainWrapper, #navSuppWrapper {
margin: 0em;
background-image: url(../images/30pixel_tile_back.gif); (that is to say, 30 pixels HIGH)
padding: 0.5em 0.2em;
font-weight: bold;
color: #ffffff;
height: 1%;
}

...

#navCatTabsWrapper {
margin: 0em;
background-image: url(../images/50pixel_tile_back.gif);
padding: 0.5em 0.2em;
font-weight: bold;
color: #ffffff;
height: 50px;
}

...

#navEZPagesTop {
background-color: #abbbd3;
background-image: url(../images/30pixel_tile_back.gif);
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}

.leftBoxHeading, .rightBoxHeading {
margin: 0em;
background-image: url(../images/22pixel_tile_back.gif);
padding: 0.5em 0.2em;
}

.centerBoxHeading {
margin: 0em;
background-image: url(../images/29pixel_tile_back.gif);
padding: 0.5em 0.2em;
}

...

.productListing-rowheading {
background-color: #abbbd3;
background-image: url(../images/30pixel_tile_back.gif);
height: 3.5em;
color: #FFFFFF;
}

[CultureClick]

You could create individual background images for each area, then just edit the image call in the stylesheet to reference a different image name...

Yes, that's exactly what I did. The thing is that if you have an image 150 pixels high, each step in a Paint Shop Pro gradient is 3x wider than the same gradient applied to an image 50 pixels high. So you have to make your 30 pixel image, then cut and paste the top and bottom of the gradient to all the different sizes, so the only thing that is different (in my case, see graphics above) is the black central area. The top and bottom gradient stay the same size, and they don't get truncated out of what the viewer sees.

Oh goody I figured it out!

CultureClick the baby Zenner