corners with images

[kjharrison]

Is it possible to make rounded corners with only the stylesheet and not have to alter any .php files?

I have tried with this:

div.sideBoxContent ul {
	background-color: #CCCC99;
	background: url(../images/corner_right.gif) no-repeat top right;
	margin-top: 20em;
	padding: 0.4em;
	margin-right: 2em;
}

div.sideBoxContent.centeredContent {
	background-color: #CCCC99;
	background: url(../images/corner_right.gif) no-repeat top right;
	margin-top: -0.1em;
	padding: 0.4em;
	margin-right: -0.02em;
}

div.sideBoxContent {
	background: url(../images/corner_left.gif) no-repeat top left;
	background-color: #CCCC99;
	padding: 0.4em;
	}

These two do not work:

• div.sideBoxContent ul
• div.sideBoxContent.centeredContent

Why is it that the UL tag doesn't work and the OL tag does?

[Kim]

What sidebox template are you working with?

[kjharrison]

I'm working with my own CSS template.

[gjh42]

We would need a link to your site to say for sure whether you can do this without adding any divs in the PHP files. Also, we need to know how much flexibility you are wanting. Will the sideboxes be a fixed width, or do you want the ability to change their width and have the corners keep pace?

[kjharrison]

I have the side boxes set at 150px. I can change them accordingly if need be. As long as I do not have to change any .php files I'm flexible. My reason is that I don't want to have to remember any .php customizations with every Zen Cart upgrade. I did that with my first version of this web site (2 upgrades ago) and do not want to go there again. It was a pain for me.

Here is a link to my web site: http://www.seventhwindow.com/. FYI I publish M/M (I can't use the "g" word here) romance, I'm sorry if this offends you.

We would need a link to your site to say for sure whether you can do this without adding any divs in the PHP files. Also, we need to know how much flexibility you are wanting. Will the sideboxes be a fixed width, or do you want the ability to change their width and have the corners keep pace?

[gjh42]

As long as you decide on a width and keep it, any width will do.
Your sideboxes are standard in their coding, so they can easily be styled with rounded corners and/or borders.

Make a sample box image with all round corners, and cut it into top, middle and bottom sections.

Put the general sidebox background color, or slice of image with side borders if desired, in
.leftBoxContainer, .rightBoxContainer {
background: #aabbcc url(../images/sbmidbg.gif) repeat-y;
}

Put the image with top round corners in
.leftBoxHeading, .rightBoxHeading {
background: #aabbcc url(../images/sbtopbg.gif) top center no-repeat;
}

Put the image with bottom round corners in
.sideBoxContent {
background: url(../images/sbbotbg.gif) bottom center no-repeat;
}

Adjust background colors and image names as desired.

[kjharrison]

OMG, doesn't that make sense! I was using two small image files for the corners, but since the side boxes are a specific width I just have to make one image file with that specific width and put it where I want.

I'll let you know how it works out. I kind of feel silly for making it more complicated than it needed to be.

Thank you for your help,
Ken.

[kjharrison]

It worked! Now I just have to spruce up my image file and make it go live. I only want the corners on the top, so my code was very simple. I can't believe this is all I had to do. Here's my CSS.

div.sideBoxContent {
	background: url(../images/corners.gif) no-repeat top left;
	background-color: #CCCC99;
	padding: 0.4em;
}

Thank you.

[gjh42]

Looking good!
You can get rid of the white "ghost" on the round corners by making the background color of the image (in Photoshop) the same light green as the box. Then when you cut the curve out of the dark green, the fractional pixels will go between dark & light green, not dark green & white.

[kjharrison]

Thanks fir the tip. I'll probably give it a whirl, but you have no idea how long it took me just to make the corners! I'm no artist.