Jump to content


Photo

Round Top Corners of Header

Round Corners Header

  • Please log in to reply
9 replies to this topic

#1 sedique

sedique

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 01 May 2013 - 11:12 PM

How do i round the corners of the header? I can't seem to round them.



#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 01 May 2013 - 11:37 PM

Hi there,

 

To add rounded corners to the header area you'll need to use some custom css to apply a border-radius property to the item you're looking to edit. More info on border-radius command and an example of the code can be found here - http://www.w3schools...rder-radius.asp

 

If you're not used css inside the framework before please see - http://support.pagel...ion/custom-css/ which will give you an overview on the processes and the tools we advise you use to find and edit the css so you can copy/paste the code back into the framework.



#3 sedique

sedique

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 02 May 2013 - 01:21 AM

I know how to do css and how to round corners, i am just wondering how you round the corners on this template... I can't find the style for it... Do you have a snippet of it that i can use?



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 02 May 2013 - 02:30 AM

Try using and removing the content color from the color control panel and then setting it in css to the page-canvas area.

 
.page-canvas {border-radius:20px;
background:white;}


#5 sedique

sedique

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 02 May 2013 - 02:56 AM

For some odd reason, it does not work. It doesn't make a single change to the pages.

 

Any other ideas.



#6 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 02 May 2013 - 03:08 AM

That codes giving this result on my test site - http://screencast.com/t/Kg7tDeXT1g

 

Check your css above to make sure there's no semicolons or closing brackets missing. Anything broken in the code above will stop the css below from being read.



#7 sedique

sedique

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 02 May 2013 - 03:26 AM

I checked my code, i am not seeing any mistakes on it...  Any ideas?



#8 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 02 May 2013 - 03:44 AM

Ok after some digging it seems the color is set somewhere else which is then showing on top of the color and the border radius you've set for the .page-canvas class.

 

So first remove this using

 
.canvas .thepage .content {background-color:transparent;} 

Then add

 

 
.page-canvas {

    background-color: rgba(255, 255, 255, 0.81);
    border-radius: 20px 20px 20px 20px;
}

Which will give this affect - http://screencast.com/t/xVY5TYK463

 



#9 sedique

sedique

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 03 May 2013 - 12:48 AM

I don't see ".canvas .thepage .content {background-color:transparent;}". I don't see it in my custom css.



#10 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 03 May 2013 - 01:29 AM

Sorry when I wrote 'first remove this using' i meant it in the sense of that code will remove color which is currently showing on top of the page canvas. So add that code to your css and it will remove the white bg which is causing the square edges.

 

Then add the next code snippet to add the white back in to the page canvas area with the rounded corners.







Also tagged with one or more of these keywords: Round Corners, Header