Jump to content


Photo
- - - - -

Rounded Corners in PageLines Framework


  • Please log in to reply
16 replies to this topic

#1 ksnyde

ksnyde

    Super Member

  • Members
  • 177 posts
  • Framework Version:2.3

Posted 29 January 2012 - 07:36 PM

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:

Please Login or Register to see this Hidden Content


It didn't work. X_X

Please help.

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 29 January 2012 - 07:59 PM

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

#3 ksnyde

ksnyde

    Super Member

  • Members
  • 177 posts
  • Framework Version:2.3

Posted 30 January 2012 - 06:34 PM

That doesn't work either. :((

#4 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 30 January 2012 - 11:54 PM

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;}

#5 ksnyde

ksnyde

    Super Member

  • Members
  • 177 posts
  • Framework Version:2.3

Posted 31 January 2012 - 08:53 PM

Kastelic,

Now we're making some progress. I translated your pseudo-code to:

Please Login or Register to see this Hidden Content


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:

Please Login or Register to see this Hidden Content



Your help would be greatly appreciated.

#6 ksnyde

ksnyde

    Super Member

  • Members
  • 177 posts
  • Framework Version:2.3

Posted 31 January 2012 - 08:56 PM

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?

#7 Jackey

Jackey

    Advocate

  • Members


  • 685 posts
  • LocationHelmond
  • Country: Country Flag

Posted 31 January 2012 - 09:12 PM

Add this as well:

Please Login or Register to see this Hidden Content


The artifact you see is the shadow of the page, you need to round that as well.

#8 ksnyde

ksnyde

    Super Member

  • Members
  • 177 posts
  • Framework Version:2.3

Posted 31 January 2012 - 09:54 PM

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).

#9 Jackey

Jackey

    Advocate

  • Members


  • 685 posts
  • LocationHelmond
  • Country: Country Flag

Posted 31 January 2012 - 10:18 PM

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.

#10 ksnyde

ksnyde

    Super Member

  • Members
  • 177 posts
  • Framework Version:2.3

Posted 31 January 2012 - 10:37 PM

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.

#11 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 31 January 2012 - 10:58 PM

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?

#12 Jackey

Jackey

    Advocate

  • Members


  • 685 posts
  • LocationHelmond
  • Country: Country Flag

Posted 31 January 2012 - 11:06 PM

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.

#13 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 01 February 2012 - 03:21 AM

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

#14 ksnyde

ksnyde

    Super Member

  • Members
  • 177 posts
  • Framework Version:2.3

Posted 01 February 2012 - 11:08 AM

My best example would be my production site:

Please Login or Register to see this Hidden Content

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.

#15 Jackey

Jackey

    Advocate

  • Members


  • 685 posts
  • LocationHelmond
  • Country: Country Flag

Posted 01 February 2012 - 11:34 AM

If you make your dynamic content area transparent, and make the page canvas white, you should get exactly way you want.


Please Login or Register to see this Hidden Content


Please Login or Register to see this Hidden Content


Please Login or Register to see this Hidden Content



#16 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 02 February 2012 - 03:10 AM

@jackey Thanks for posting this CSS.

#17 ksnyde

ksnyde

    Super Member

  • Members
  • 177 posts
  • Framework Version:2.3

Posted 02 February 2012 - 10:10 AM

Thanks Jackie, this did the trick!