CSS Rounded Corners For Pages

[vijayninel]

Hi, I was trying to put rounded corners for pages using CSS so I puth following code : -moz-border-radius: 10px; border-radius: 10px; in the Extra CSS Attributes of the Page Background selector. While this put rounded corners on the page, the problem is that it also puts rounded corners in individual posts.

Can anyone tell me how I can put rounded corners in just the page and not individual posts.

Thanks.

[Lynne]

You probably need to then remove the border radius for all divs 'under' the page.

[vijayninel]

Thanks Lynne. I solved the problem by putting a rounded div under the header.

[CoffeeLovesYou]

I am having this same issue.
I put

-moz-border-radius: 20px; border-bottom-right-radius: 20px; 
-moz-border-radius: 20px; border-top-right-radius: 20px;
-moz-border-radius: 20px; border-bottom-left-radius: 20px; 
-moz-border-radius: 20px; border-top-left-radius: 20px;

in the Page Background Extra CSS Attributes, however it re-rounds the posts as well on threads.
So, I tried this;

.rounded edges {
-moz-border-radius: 20px; border-bottom-right-radius: 20px; 
-moz-border-radius: 20px; border-top-right-radius: 20px;
-moz-border-radius: 20px; border-bottom-left-radius: 20px; 
-moz-border-radius: 20px; border-top-left-radius: 20px;
}

in the Extra CSS Attributes for Page Background, then I put

<div class="rounded edges">

at the bottom of the header template

and

</div>

at the bottom of the footer template

The result is nothing.

How did you fix this exactly, vijayninel?

[Lynne]

Link to the site/style?

[vijayninel]

Originally Posted by CoffeeLovesYou

in the Page Background Extra CSS Attributes, however it re-rounds the posts as well on threads.
So, I tried this;
n the Extra CSS Attributes for Page Background

Dont put it in the Extra CSS Attributes put it in the second Additional CSS Definitions box at the bottom of the page.

I use this ...

.toproundoff{width: 97%; 
height: 10px; background-color:#ffffff; -moz-border-radius-topright:10px; -moz-border-radius-topleft:10px; border-top-right-radius:10px; border-top-left-radius:10px;  padding-bottom:12px; margin: 0 auto;}

And then put <div class="toproundoff"> </div> below the <!-- /logo --> in the header template. You may need to adjust the padding for your style.

[CoffeeLovesYou]

Originally Posted by Lynne

Link to the site/style?

http://www.toontownplayground.com

Style is Dance!
Right now it isn't rounded but I'll try now, tyvm!
Edit; it works, thank you very much!

[Simon Lloyd]

Originally Posted by CoffeeLovesYou

http://www.toontownplayground.com

Style is Dance!
Right now it isn't rounded but I'll try now, tyvm!
Edit; it works, thank you very much!

I checked your site out, didn't see it in "Dance" using IE8 did see it in "Fishing" but only top right and bottom left corners?