Shape 5

Joomla Templates => Your Store - July 2007 - Club => : Jered Brent January 07, 2008, 06:45:16 PM

: Transparent module borders... help please!
: Jered Brent January 07, 2008, 06:45:16 PM
Hey guys,

Great templates - but I am having a difficult time trying to get the module borders to allow the correct transparency using pngs...

Basically I change the background image to a static image in the css and when the page is shrunk down - you can see the white squares over my background image... It looks kinda dumpy like that - I've tried changing the corner .gif files to transparent png24 images in photoshop and exporting... but then it looks really weird - overlapping strangeness...

I then thought I could make pretty 90degree boxes... but this page looks so great with the rounded corners that it would be a waste not to have it look pretty.

Here is what the page looks like with the original graphics and css with my update background:

Here is what the page looks like with transparent .png graphics for the sides and corners:

Does anyone have any idea how to clean up the module boxes?

Thanks alot!

Jered Brent
[email protected]

: Re: Transparent module borders... help please!
: jonahh January 08, 2008, 11:47:34 AM
Hello Jered,

The only way to get transparent rounded corners on modules is to make them at a static width and height.

The images get assigned to the background of the 4 divs that are output by Joomla.  As you can see they overlap each other to get the rounded corner effect.  The right images are quite large in height and width to compensate for the when a module needs to extend in either width and height.  The left images then lay on top of the right covering up the left sides of the right images.

This all being said, I don't think you'd really want static module height and widths.  If you are familiar with CSS and working with DIVs you could always setup divs to wrap the left and right modules.  This way you get your modules in a rounded corner column.  You would then of course have to take off the styles and images that are assigned to the modules themselves.  If you need a reference point to start you can look at how we setup the rounded corners that surrouned the mainbody area where your Joomla content is output, you could setup up the DIVs wrapping the modules similiar to this.

I hope this helps.