Radius on pagecontent

[ibaker]

I am trying to put a radius on the top corners of the page content but can't seem to achieve it properly.

I have separated the header and the page content by adding a 10px top margin in Style Properties => General => Content

This gives me:


However when I for example add a border and a radius (I will use a 25px radius to highlight the problem) I get the radius showing but the part of the page content outside of the radius isn't transparent:


Any ideas on how to achieve what I am trying to do...thanks!

 

[RobinHood]

Hey Ian, try the following in Extra.css

You need to apply it to both classes to make the result visible

.pageWidth,
.pageContent {
border-radius: 10px;
}

 

[MagnusB]

You have the same background on the parent div, you need to change that background, or apply the border radius on that.

 

[bogus]

Why always everything in Extra.css if there is a Style Property available for?!

Head to ACP -> Style Properties: Building Blocks -> Click to Section Main
There you can set the Border Radius for the Forums List BG also everything else like BG Color etc....


As a tip: If you want to find out if there are Style Properties available use Firebug in Firefox, locate the Class you need and go into Template Search, search for the Class in your Style. Then just go into that CSS Template and find the Class in there. If there is a @whatever before the .classes you can be sure to find the Class in Style Properties

 

[MagnusB]

I don't think everyone is following his question, he has already managed to set the border radius, but the radius isn't visible. The problem is simple though, assuming it the site in OP signature, .pageWidth has a background color that is mighty similar to the background color of .pageContent when the gradient is applied at the top. To solve it, you need to change the background color of .pageWidth, maybe to transperant or the same as the body bg color.

 

[CyberAP]

This will help:

body #content .pageWidth
{
    background: transparent;
}

 

[ibaker]

This will help:

body #content .pageWidth
{
    background: transparent;
}

Thanks Mate...that worked brilliantly