PDA

View Full Version : CSS Rounded Corners For Pages


vijayninel
08-29-2010, 05:43 AM
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
08-29-2010, 02:03 PM
You probably need to then remove the border radius for all divs 'under' the page.

vijayninel
08-29-2010, 10:15 PM
Thanks Lynne. I solved the problem by putting a rounded div under the header.

CoffeeLovesYou
08-12-2012, 07:19 PM
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
08-13-2012, 02:23 AM
Link to the site/style?

vijayninel
08-13-2012, 03:17 AM
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
08-15-2012, 12:39 AM
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
08-15-2012, 03:24 AM
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?