Site Borders

[pettiger15]

How do i change the height of the lower main bar, as you can see, the lower one has half a bamboo border and so does the footer bar, and would like to remove it. Another question is how to i make the "New products for october" bar a different border than the rest. Thank you here is my site
http://www.thebonsaimarket.com/store

[clydejones]

Try changing the highlighted portion of this declaration in your stylesheet:

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
	margin: 0em;
	background-color: #abbbd3;
    background-image: url(../images/tile_main.jpg) repeat-x;
    padding: 0.5em 0.2em;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 750px;
	}

[pettiger15]

and do what to it?, I just want to make the height less so the half bamboo won't show.

[clydejones]

For the second part of your question...

You have two choices depending on whether you want an image or just a background color.

(one)
Using your image editing software create your new image and save it to:
includes -> templates -> YOUR_TEMPLATE -> images -> your_image.???
upload the image to your server.
Now in your stylesheet.css make the following changes.
Find the following code:

.leftBoxHeading, .centerBoxHeading {
	margin: 0em;
	background-color: #abbbd3;
    background-image: url(../images/tile_back.jpg);
    padding: 0.5em 0.2em;
	}

create two declarations as follows:

.leftBoxHeading {
	margin: 0em;
	background-color: #abbbd3;
    background-image: url(../images/tile_back.jpg);
    padding: 0.5em 0.2em;
	}

.centerBoxHeading {
	margin: 0em;
	background-color: #abbbd3;
    background-image: url(../images/your_image.???) repeat-x;
    padding: 0.5em 0.2em;
	}

Save the changes and upload to your server.

(two)
in your stylesheet.css make the following changes.
Find the following code:

.leftBoxHeading, .centerBoxHeading {
	margin: 0em;
	background-color: #abbbd3;
    background-image: url(../images/tile_back.jpg);
    padding: 0.5em 0.2em;
	}

create two declarations as follows:

.leftBoxHeading {
	margin: 0em;
	background-color: #abbbd3;
    background-image: url(../images/tile_back.jpg);
    padding: 0.5em 0.2em;
	}

.centerBoxHeading {
	margin: 0em;
	background-color: #abbbd3; /*Change this to whatever color you want */
    padding: 0.5em 0.2em;
	}

Save the changes and upload to your server.

[clydejones]

and do what to it?, I just want to make the height less so the half bamboo won't show.

save the changes and upload to your server.

What you've done is tell the background image to repeat itself horizontialy across the area.

The way you have it now it is repeating itself across and down the area.

[dbltoe]

Pettiger,
On line 239 of your stylesheet, you need to tell it either 3em or 3px whichever it should be.
On line 287, you need a ; at the end.

That AND clydejones earlier repeat-x suggestion

Try changing the highlighted portion of this declaration in your stylesheet:

Code:

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper { 
margin: 0em; 
background-color: #abbbd3; 
background-image: url(../images/tile_main.jpg) repeat-x; 
padding: 0.5em 0.2em; 
font-weight: bold; 
color: #ffffff; 
height: 1%; 
width: 750px; 
} 

should make things look a lot better

[pettiger15]

I added the "repeat-x;" after

background-image: url(../images/tile_main.jpg)

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
	margin: 0em;
	background-color: #abbbd3;
    background-image: url(../images/tile_main.jpg) repeat-x; 
    padding: 0.5em 0.2em;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 750px;
	}

but then the border just dissapears.

[pettiger15]

Never mind the last post i got it. Instead of

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
	margin: 0em;
	background-color: #abbbd3;
    background-image: url(../images/tile_main.jpg) repeat-x;
    padding: 0.5em 0.2em;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 750px;
	}

and have the "repeat-x; after the image directory, you had to make a new line stating

background-repeat: repeat-x;

Thanks it working great now.