Rounded Sidebox Heading ??

I'm running ZenCart v1.3.9 and I'm running off a custom template that I'm starting from scratch.

I want to have only the heading of my sideboxes to be rounded, rather than just a solid color rectangle.

All it has it the "tile_bg" image but I want to make it so that both the left and right sides of the sidebox headings to be rounded.

I have advanced graphic design skills, along with Photoshop CS5, so making the left and right rounded images, along with the center background images will be no problem for me.

How would I go about incorporating rounded edges on my sidebox headings? Oh, and if it helps, I only have it set up so that I have sideboxes on the left column only.

Thanks.

hey hows it going thats actually easy to replace if you go to

.../includes/templates/your_template/css/, open up stylesheet.css

look for this:

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
// background-color: #abbbd3;
background-image: url(../images/tile_orange.gif);
padding: 0.5em 0.2em;
}

images are stored in here your .../includes/templates/your_template/images/

If your sideboxes are a fixed width then you can easily use a single image in the background. If they are to be fluid, then you would want to use a sliding door technique.

magic462:

hey hows it going thats actually easy to replace if you go to

.../includes/templates/your_template/css/, open up stylesheet.css

look for this:

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
// background-color: #abbbd3;
background-image: url(../images/tile_orange.gif);
padding: 0.5em 0.2em;
}

images are stored in here your .../includes/templates/your_template/images/

Hmm.
That code refers only to one generic background image. This will probably work in my case, but I'm a bit of a perfectionist and would like one left side image, one center image (for tiling according to width), and one right side image.

How would this be done?

Kim:

If your sideboxes are a fixed width then you can easily use a single image in the background. If they are to be fluid, then you would want to use a sliding door technique.

If by "sliding door technique", you mean one image for the left side, one center image for tiling according to the width, and one right side image, then yes, this is what I want to do, and how do I do it.

Thanks to both of you for your help. (:

B0ssm4nJones:

If by "sliding door technique", you mean one image for the left side, one center image for tiling according to the width, and one right side image, then yes, this is what I want to do, and how do I do it.
http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml

FragaGeddon:

http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml

But I want to make the left, center, & right images, as I would like to use gradients and such, rather than just a solid color.

):

Bump. :/

if you want to do that

take each one and put it by itself like this

.leftBoxHeading {}

.centerBoxHeading {}

.rightBoxHeading {}

they all can have its own image

magic462:

if you want to do that

take each one and put it by itself like this

.leftBoxHeading {}

.centerBoxHeading {}

.rightBoxHeading {}

they all can have its own image

I. F.#######.g. Love. You.
Thank you SOOOO much. (:

Thought that that ^ would work, but it didnt.

I only want to have a custom background for the LEFT column sidebox headers, but I want them to be curved, rather than a single color.

I could use one background image, however, I would like to use a "right" image for the right curve, a "left" image for the left curve, and a "center" image for the center of the header which will be tiled according to whatever width I set it too.

I've seen it implemented on some of the Live Shops, I just don't know how. I already have a "header_right_bg.png", a "header_left_bg.png", and a "header_center_bg.png".

Somebody please help me out here.

Did you get it sorted ? i.e. rounded corners on your side boxes ?

If your sideboxes are going to be only one width, by far the simplest and easiest (and fastest-loading) method will be to make one image with the desired corners.

If you are not looking for a 3d gradient style with highlights, but simply a tile_back type image with the corners rounded, every major browser now including IE9 (but not IE8 or older) supports the border-radius property. You can add to
.leftBoxHeading {
-moz-border-radius: 9px 9px 0 0; /* tl tr br bl */
border-radius: 9px 9px 0 0;
}

If you want elliptical curves rather than circular, you can use

-moz-border-radius: 4px 4px 0 0 / 9px 9px 0 0; /* horizontal radius tl tr br bl / vertical radius tl tr br bl */
border-radius: 4px 4px 0 0 / 9px 9px 0 0;

This example will produce a curve that is taller than wide.