1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Radius on pagecontent

Discussion in 'Styling and Customization Questions' started by ibaker, Sep 8, 2012.

  1. ibaker

    ibaker Well-Known Member

    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!
  2. RobinHood

    RobinHood Well-Known Member

    Hey Ian, try the following in Extra.css

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

    .pageContent {
    border-radius: 10px;
  3. MagnusB

    MagnusB Well-Known Member

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

    bogus Guest

    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
  5. MagnusB

    MagnusB Well-Known Member

    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.
    ibaker likes this.
  6. CyberAP

    CyberAP Well-Known Member

    This will help:
    body #content .pageWidth
        background: transparent;
    ibaker likes this.
  7. ibaker

    ibaker Well-Known Member

    Thanks Mate...that worked brilliantly

Share This Page