CenterBox border

[Forum5]

I'm looking for stylesheet control to place a graphic border around the CenterBox (center display area) like it is done all the time for sideboxes. All types of free templates show nice borders around the left/right sideboxes but not centerbox. Is it possible?

Can someone help me out with CSS context.

[Design75]

add this to your styleshteet (values can be changed of course)

.centerBoxWrapperContents {
border: 1px solid #B5B5B5;
}

or

.centerColumn{
border: 1px solid #B5B5B5;
}


for rounded corners
goto http://www.css3.info/preview/

[Forum5]

Thanks for the input Design75.

It seems that when I ask a question on this Forum I next have to then refine the question. But, I'm getting better at putting my thoughts to text. HA!

I understand how to put a colored border on the .centerColumn or the .centerBoxWrapperContents but I want a graphic.

I downloaded hand full of templates before I stumbled upon the simply_kerrin template. It seems to be useing a graphic image to form the borders of the center.

This may be what I want. I'll give it a test drive to see if I can learn from this css.

Thanks again for being there.

[Design75]

In Simply kerrin the border effect is indeed made with images. I think it can be achieved with css3 (but not 100% sure about that). Images are "safer", because not all olderversion browsers understand css3

[Forum5]

In Simply kerrin the border effect is indeed made with images. ...

It's not exactly what I want. Simply_Kerrin’s graphic border surrounds the entire content.

I would like the same border as Simply_kerrin uses but I am trying to put the border around the center text area only. I want the left column outside this defined (center) graphic border.

For the time being, I will deal with what I have. Thanks for the help.

If anyone runs across something, let me know.

[RescoCCC]

In Simply kerrin the border effect is indeed made with images. I think it can be achieved with css3 (but not 100% sure about that). Images are "safer", because not all olderversion browsers understand css3

Most browsers now do support border radius. The exception among most used is, of course, Microsoft and IE8, (it's supported in IE9). But, there are ways to make it work even in IE8.

Here's an example I did at one of my sandbox installs. It's a mockup of a friend's existing site and was something I did just to see if I could make it work:

http://www.oozix.com/store2

I created an additional id in the style sheet that looks like this:

#MainPageText {
border: 2px solid #000000;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
width: 705px;
background: white;
padding: 15px;
position: relative;
behavior: url(../store/includes/PIE.htc);
}

PIE.htc is a little script that can be downloaded.

[Forum5]

Most browsers now do support border radius. The exception among most used is, of course, Microsoft and IE8, ........
http://www.oozix.com/store2

I created an additional id in the style sheet that looks like this:

#MainPageText {
border: 2px solid #000000;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
width: 705px;
background: white;
padding: 15px;
position: relative;
behavior: url(../store/includes/PIE.htc);
}

PIE.htc is a little script that can be downloaded.

Thanks. I'll take a look when I can play with it more.

I went to css3pie.com then demo. It looked good but didn't seem to play nice with my firefox 5.0.

Actually, I assumed it could be done with graphics, as it is with simply_kerrin. I have completed the site for the customer and turned it over to them. I will try it out on a demo store.

Thanks again.