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.

[JerryAPowers]

I don't know if this is what you are looking for, but I have managed to create a border around my center box on my website at: http://shop.okaquariumgiftshops.com

I am still working on perfecting my layout before I add products to my shop.

I am using Clyde Jones' Ocean Front template for my site except that I replaced all of the graphics. I created the borders using a header graphic, background graphic for the content area that includes the side borders (that happens to be a transparent png with a gradient), and a footer graphic. I had to create 2 divs and a table to hold these images.

One downside that I have figured out a way around yet - I would the footer and background graphics to extend down to match up with the bottom of the left sideboxes when there is little content. I created an additional div that holds the entire center box, hoping that I could get the footer and background extended to the bottom, but I have had no success in getting that to work. However, it may not really matter once I add the products to my shop.

Let me know if you want to see the code that I used to make this work. However, the solution could be dependent upon which template you are using.

[Design75]

You could set a min-height of e.g. 800px to your #centerColumnBG

#centerColumnBG{min-height: 800px;}

[JerryAPowers]

Thank you Design75! That is a great solution - it worked! Now I can adjust the height after I add products if my sideboxes extend lower than my center column.