• 0
Sign in to follow this  
Followers 0

Rounded Corners in PageLines Framework

Question

Posted · Report post

I searched for "rounded corners" and found a lot of conversation but almost all of it was for PlatformPro. After hoping that the solution would remain consistent on PageLines Framework I gave the following a try:

#page-canvas {
	-moz-border-radius-topleft:15px;
	-moz-border-radius-topright:15px;
	-webkit-border-top-left-radius: 15px;
	-webkit-border-top-right-radius: 15px;
	border-top-right-radius: 15px;
	border-top-left-radius: 15px;
	}
	#page { background: transparent !important; }
	#page-canvas { background: white !important; }

It didn't work. X_X Please help.

Share this post


Link to post
Share on other sites

16 answers to this question

  • 0

Posted · Report post

The CSS is correct, but maybe the selector isn't. Try div.page-canvas instead of #page-canvas.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

That doesn't work either. :((

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Try this, hope you can read my css pseudo code: #morefoot .content - border bottom left and right #branding .content - border top left and right #page-canvas, #page {border-radius: 10px;}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Kastelic, Now we're making some progress. I translated your pseudo-code to: [code]#morefoot .content { border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; } #branding .content { border-top-left-radius: 15px; border-top-right-radius: 15px; }[/code] And indeed it does round the corners. Unfortunately the problem isn't completely solved yet as the corners seem to still have some artefacts in them. To demonstrate I've uploaded this configuration to: http://test123.lifegadget.co/ Your help would be greatly appreciated.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I also now realise that the problem is less solved than I'd hoped. By attaching to the #morefoot ID we only have a solution when the morefoot footer is displayed and in my case it is usually NOT shown. There must be some element which is universally associated with the content's bottom, right?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Add this as well: [code].content-shadow.fixed_width .page-canvas { border-radius: 15px; }[/code] The artifact you see is the shadow of the page, you need to round that as well.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Jackey, excellent. Thanks. Shadows rounded now too. Getting very close. I just need the correct reference to the bottom of the content (when the morefooter is NOT displayed).

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I think the only way you can do that is when you make the content area that comes immediately before the morefoot-area transparent, and make the .page-canvas white. (or a color of your choice) I see no class outside the morefoot div that indicates if there is, or is not, a morefoot_area.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Nuts. I really think that's poor design. One should NOT assume that those morefooters are required. Obviously they're not, configuration allows removal but CSS structure apparently doesn't support it's effective removal.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Depending on how many pages you have, it could just take a few more rules of CSS. Do you have an example of a page that doesn't have the morefoot active?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sorry, but I disagree. Morefooters are not required. If you require to use rounded corners on your page, and want the option to drop area's, you have to make concessions. The solution I provided works b.t.w. With the new 2.1 version you can create a template without moretooter area.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I don't see why the rounded corners CSS wouldn't work... unless you're viewing the site on Internet Explorer.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

My best example would be my production site: http://lifegadget.co/. From there you'll see the home page is a feature page where I've turned off the morefooter option and the bottom edges are still square but the blog page does have rounded corners on all four corners (as do individual post pages, search result pages, 401 error pages, etc.). I'd like to move to version 2.1 of the Framework but am resisting it due to the new social icons. I may get over my objection to them and Jackey, I may explore a little more about the template approach you suggest as I haven't currently got my head around that approach yet.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

If you make your dynamic content area transparent, and make the page canvas white, you should get exactly way you want. [code].content-shadow.fixed_width .page-canvas { border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; background-color: white; }[/code] [code]div#dynamic-content .container div.content { background-color: transparent; }[/code] [code]#morefoot .content { border-bottom-left-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-botomleft:15px; border-bottom-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -moz-border-radius-botomright:15px; }[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@jackey Thanks for posting this CSS.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks Jackie, this did the trick!

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  
Followers 0