Borders

**Blue!** · 15 Jul 2006, 02:35 AM

Okay, so three general questions about adding borders.
When I mean borders, I do not mean the simple

Code:

	border: 1px solid #63859D;

I mean graphical borders, that are made up of a repeating image, in the sense that the sideboxes have borders by having a top image, repeating middle image and a bottom image.

Well, first question is, can I give the main content box a border like the sideboxes? eg, can I use something along the lines of

Code:

.CentreBoxHeading {
	background-image:url(../images/row_top.gif);
	background-repeat:no-repeat;
}

And so on to surround the centre box in a frame..?

Second question, can I do the same to products (image plus desciption within the border)

Lastly, can I add two vertical borders either side of the mainwrapper, that run from the top of the header to the bottom of the page, without having to edit tpl files?

Many thanks =)

**kobra** · 15 Jul 2006, 09:58 AM

.CentreBoxHeading if you only want the heading with the border.

If yo want the border around the center section you will have to create a css entry for .centerColumn and I would also use the admin dev tools and search the catalog files for this in case there is a file that references this.

**rvagrrl** · 15 Sep 2006, 05:54 AM

Hey there! I'm basically wanting to do the same thing, except I'd like to make my graphic border around a 1px border on the mainwrapper. I'm recreating my 1.2.7 template in 1.3.5:

www.cherrymomma.com

I'm definitely not a CSS genius and can't figure it out. I've tried several things to no avail. Any tips are gladly welcome and appreciated!!

Leila

**kobra** · 15 Sep 2006, 11:45 AM

Assuming that you are using 1.3.x and a template based on the template default files. Find .centerColumn and I think that one has to separate it from the group that it is in and start by trying somethning like this, changing colors to suit and omitting what you do not want:

Code:

.centerColumn {
	background-color: #FFF0F5;
	border: 1px dotted;
	border-color: #9B11A1;
	}

Then if you have suitable images that can repeat to maintain a fluid nature. you can try something like this for each side that you want a image for the border; this example places an image to the left border only:

Code:

.centerColumn {
	border-left: url(../images/sidebox_left.gif) repeat-y;
	}

The above may not work as it is coming in CSS3 and I have truncated it a bit but have not tried it. If it does you can also add margins, padding & other styling.