Sidebox background images

Hi guys,

I'm currently using the gloss_blue template and am trying to use background images in my sidebox in an attempt towards the sliding doors method. The problem I'm having however is that any changes I make in the css aren't coming out. I'm not sure if I'm editing the right code or not.

For example, I'm editing

.leftBoxContainer, .rightBoxContainer {
margin-bottom: 1em;
background-color: #000000;
** background-image: url(../images/box_back.gif);**
border: 0px solid #000000;
}

and trying to add an image input but its not coming up. Even setting the background color to all black doesnt change anything. The only thing I can change is the border.

Am I editing the right code or is there somewhere else I'm supposed to look?

Btw, the url is https://www.goodair.com.au

Cheers!

I could be wrong, but I think you'd have to do that via .sideBoxContent. :unsure:

Are you using FireFox & the Web tools?

I checked the one box that you have and the item is as follows:

Class = .sideBoxContent
ID.....= #informationContent

I would try finding this:

.rightBoxContent, .leftBoxContent, .sideBoxContent {
	background-color: #ffffff;
	padding: 0.5em;
        font-size: 1.1em;
	}
``` and separate the .sideBoxContent to make it look like this or apply to all three.

.sideBoxContent {
background-color: #ffffff;
padding: 0.5em;
background-image: url(../images/box_back.gif);
background-repeat: repeat;
font-size: 1.1em;
}

.rightBoxContent, .leftBoxContent {
background-color: #ffffff;
padding: 0.5em;
font-size: 1.1em;
}

Ahh thank you!!

This is why the zen community is going forward, Love the online community help :)

Hi Kobra,

Yeah I know what you are saying. I was just using that image just to test whether I was editing the right piece of code.

My plan is to resize that testbox image I showed you last night and use that in the side boxes. My understanding of the sliding door method is that if I use the lower end of the image for the main background in the sidebox content, and use the upper end of the image has the header background then teh two should be able to slide over on top of each other given the images are long enough?

Am I on the right track?

I think that what you will find is that as a background image, it will only fill the specified container so placing one in the header will only display that container size.

I would create one full image the correct width and say 300-400px high. So that this image looks as you want the head & box to appear. Then slice it to create the header image & a box image. When placing the box image, align it to the top and the additional will not display at the bottom.

you can check this by creating a test image say 200x80px as the head image and it should only fill the header box bleeding the additional into the "ethos"

Thanks Kobra

I think I did what you said, although I used a separate header image for the top as I couldn't quite work it just using the middle section.

I'm now figuring out how to add a bottom section.

Another question...is there a way I can add padding or spacing before the text begins on teh left side? You can probably see its too close to the box image edge, or will it be easier just to make teh box wider?

Your Choice, padding-left or margin-left will cause a wrap; making the column and the box wider will maintain single line