Sidebox questions

[FunkyPapa]

Hi,

We're trying to use different colors for our sideboxes. I have all of them showing with the colors that we want. One of the last things for changing the look of our site though, we'd like to have rounded corners on the sideboxes. I can find how to do that in a few places on the forums, what I can't find is how to do it for different sideboxes. I have no problem using images, but I don't know how to implement different images for different sideboxes. If anyone could just point me in the right direction I would greatly appreciate it.

A link to our site that shows the sideboxes as they are now:
http://funkymunkys.ca/index.php?main...ks_of_interest

[kobra]

Add the image in the stylesheet.css file for your template

Get FireFox if you do not have it and the extentions for it such as web developers tools, fire bug or aardvark for a start
The last 2 allow finding the class & tag for things

Some are
#currenciesHeading
#bestsellersHeading
#moreinformationHeading

Find or add for each sidebox and enter the image
You can review the classic stylesheet for syntax

[kuroi]

Historically this was done with images and there's a ton of really complicated ways to accomplish this that can be found by Googling.

But here's a much simpler alternative - the css3 border-radius feature.

Find your .rightBoxContainer styling (about line 786 of your stylesheet and add the following:

-moz-border-radius: 15px;
border-radius: 15px;

That won't work in old versions of browsers or Internet Explorer (though it should work in IE9 when it eventually appears), but it is very quick, very effective for the rest, future-compatible and will leave you lots of time to develop traffic and sales, rather than fiddling with out-dated techniques for out-dated browsers.

[gjh42]

For the look you have, and assuming you are going to keep the sideboxes the same width as they are, you could make round-cornered image backgrounds that would not require any added PHP/HTML coding at all, only simple CSS (and a lot of versions of the box image). But I concur with Kuroi: unless it is important to you to give IE users the prettiest appearance, you can round the boxes with CSS and give folks an incentive to use modern browsers. It's not like people who don't see the rounded corners will see anything wrong.

You might also add

-webkit-border-radius: 15px;

to cover all modern browsers except IE8.

[FunkyPapa]

Find your .rightBoxContainer styling (about line 786 of your stylesheet and add the following:
Quote:
-moz-border-radius: 15px;
border-radius: 15px;

FANTASTIC!! this was excellent. I changed 15 to 20 and that works perfect for making sure things fit nicely in the More Information box

You might also add

-webkit-border-radius: 15px;

to cover all modern browsers except IE8.

Would I put this in the .rightBoxContainer section as well? I looked at it in firefox/web developer, but I didn't notice a change.



Thank you guys for the awesome information!!

[gjh42]

This would go in the same rule as the other border-radius properties.

-moz- in front of a property indicates that it is made only for Mozilla products (Firefox). -webkit- indicates that it applies to browsers that use the Webkit rendering engine. And, one or two browsers actually use the W3C standard border-radius, so don't need a prefix. All of them will do essentially the same thing in their respective browsers and be ignored by the rest. IE, of course, has not yet seen fit to implement this bit of Web 2.0 se xiness, thus dragging the developer world back from using simple, clean CSS for this job.

[FunkyPapa]

Thank you very much for the clarification :)