Jump to content
Sign in to follow this  
Lynn759

How can I round the corners of the page canvas?

Recommended Posts

Lynn759

I read another post that described how to do it with Platform Pro but I can't seem to get it to work with Pagelines 2.0. The area I'm referring to is the box you get when checking Content Shadow in the Color Control section. Here is a link. http://iostv.com

Share this post


Link to post
Share on other sites
kastelic
http://www.pagelines.com/forum/discussion/17338/rounded-corners-in-pagelines-framework#Item_4 Hi, i answered a similar question here, let me know if that makes sense to you.

Share this post


Link to post
Share on other sites
Lynn759
That worked for the top but not that bottom. I changed it to this; [code]#branding .content {border-radius: 10px;} #morefoot .content {border-radius: 10px;} .page-canvas, #page {border-radius: 10px;}[/code] I did have to change it to .page-canvas instead of #page-canvas. I've played around with a few other things to get the bottom working but nothing has worked so far. You can view the link above if that helps. Thanks.

Share this post


Link to post
Share on other sites
catrina
Try adding this CSS for the morefoot area: [code]#morefoot_area {border-radius: 10px;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
Lynn759
Thanks Catrina but that didn't work. I have been inspecting it with Firebug and tried just about every selector I can find but nothing has worked correctly.

Share this post


Link to post
Share on other sites
Jackey
@Lynn759 You're almost there... Your universal sidebar's content area has a white background that covers the rounded corners. Add the following CSS: [code]#morefoot_area .sb_universal-bottom div.content { background-color: transparent; }[/code]

Share this post


Link to post
Share on other sites
Lynn759
Thanks for everyones help. I finally got it working. Here is what I used; [code]#branding .content {-moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; border-top-right-radius: 20px; border-top-left-radius: 20px;} #morefoot_area .sb_universal-bottom div.content { -moz-border-radius-bottomleft: 20px; -moz-border-radius-bottomright:20px; -webkit-border-bottom-left-radius: 20px; -webkit-border-bottom-right-radius: 20px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; } .page-canvas, #page {border-radius: 20px;}[/code]

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×