Rounded corner modules with images.
 

I have seen quite a few rounded corner boxes using CSS or javascript and solid colors, but I guess the image based boxes aren't even discussed any more. At least I am having difficulty finding any.

The box I am looking for needs to be fluid both horizontally and vertically. The background is a tiled 5x5 image that is already incorporated into the skin used on my site and the borders of the box are a fade from the dark colored panel background to the lighter colored tiled background. This is an example:


This has to be done using vBadvanced CMPS 2.20 for my site, www.TheFloorPro.com. The modules I plan to use it on are the articles and main content of various pages. Right now there are limited options for display of the modules, either no module shell, but the background is too dark, or the standard module shell with 2 different background choices. I want to have one more option that is a cross between the no shell look and one of the shell backgrounds.

How the no shell option looks: http://www.thefloorpro.com/about.php
How the shell looks : http://www.thefloorpro.com/vbgooglemap_instructions.php

Can I do this using all divs? I either have to do the styling in-line or add new CSS to the site through the style manager. I would like to be able to position the text so that it slightly overlaps the dark borders as you see in the example above. Do I slice the image into 8 pieces (4 corners, 4 sides) or use much fewer, but also much larger images that will allow for whole page module widths?

It appears that, with or without the shell, all the module content is contained at the beginning of a <td>. It can be either vBCode, HTML or template based, so anything that can be contained within a <td></td> is fair game.

I hope you can help me figure this out. Thank you for your time.

Jim

If I understand you clearly, I think curvyCorners should have the effect you're seeking. It uses JavaScript though.

No sorry, I don't think that is what I am after at all. It must have the same look as the example I show above. There is a small image that is tiled used in the background of the body of the module. There is also a rectangle/square that has a fade effect from the main panel's background color (the very dark green above - see my links to TheFloorPro.com for a live view of the whole page) to the blend of that color and the module body's tiled image. I believe this can only be done with images, which I have, of course. I just need to know where to make the slices and how to code the fluid box so that when I type my content into the box, it looks similar to my example above.

My thanks to anyone who can help me with this.

Jim

Can I ask again for some help with this? Please?