How do I add a border to my side boxes?

[Beth-katherine]

I have been searching zen sites and have seen some that have borders on their sideboxes as well as backgrounds within, how do I do that?

[barco57]

This is from my stylesheet, you also have to background the leftBoxHeading

.leftBoxContainer {
	margin-top: 1.0em;
	border: 1px solid #000000;
	}

.sideBoxContent {
	background-color: #ffffff;
	background-image: url(../images/purpltran45.gif);
	padding: 0.4em;
	}

[Beth-katherine]

Thank you.

I also meant to ask how do you add in an image to the border.

[barco57]

You can't attach a image to a border, you have to use a background-image on the div. You can simulate an image as border by adding a div that wraps the area you want to border and background-image that. Have I confused you yet. Maybe someday when they release css3 as a standard and the browsers catch up we will be able to use images on the border.

Oh you could also create a background image that is big enough for the whole sidebox (header, content area, footer) and make it the background of #categories.leftBoxContainer if using it on the categories box. same theory applies to the other boxes just use the id for that box.

[Beth-katherine]

Thank you so much for answering my question. That's sort of what I thought was what.

I got it, the background image WRAPS around the size of the box so if I want a border on both sides I make certain the image is the size of the box with the border image on both sides of the box.

Cool. That's where creativity goes beyond the box

[gjh42]

Don't mean to burst your bubble, but in this case you can't get outside the box ;)

What Mike was saying is that you would make a new div (a bigger box) around the one you want to border, and give that a background-image. You could use padding in the new div to keep its edges spaced out from the original.

This will work easily for a fixed-size box. If your box changes dynamically, it can still be done but is more complicated and uses two or more outer divs. Google "sliding door method" for some good explanations.

Have fun!

[Beth-katherine]

<<What Mike was saying is that you would make a new div (a bigger box) around the one you want to border, and give that a background-image. You could use padding in the new div to keep its edges spaced out from the original.>>

Ok now I am a bit confused. How do I code this? Where and what.

Beth

[gjh42]

If you don't need the background to go beyond the sidebox, there is no complication. I expect that would really work just fine for you.
So identify the box ID or class (as given by Mike above) and put the border and background-image under it in your stylesheet.
Make sure you put all your customizations in your template override directory. If you haven't made one yet, read the FAQs about templates.

[maza]

I wanted to add borders to my sideboxes too, and edited my .css as below. Still I can't get the box. What's wrong with it?

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
    margin: 0em;
        border: 2px solid #black;
    background-color: #488AC7;
    padding: 0.5em 0.2em;
    }

.leftBoxContainer, .rightBoxContainer {
    margin: 0em
    background-color: #ffffff;
    border: 2px solid #black;
    border-bottom: 5px solid #488AC7;
    margin-top: 1.5em;
    }

BTW, my site is www.radiomeal.com/index.php

[gjh42]

You have

border: 2px solid #black;

This needs to be either

border: 2px solid black;

or

border: 2px solid #112233;

(six numbers), not a mixture.