Round Top Corners of Header

[sedique 0]

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

[James B 436]

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.com/cssref/css3_pr_border-radius.asp

 

If you're not used css inside the framework before please see - http://support.pagelines.me/docs/customization/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.

[sedique 0]

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?

[James B 436]

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

[sedique 0]

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

 

Any other ideas.

[James B 436]

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.

[sedique 0]

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

[James B 436]

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

 

[sedique 0]

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

[James B 436]

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.

[jagipson+ 10]

James B 

 

We couldn't get this to work we got it to work with this.  headercustom is a custom class added in section.

 

.page-canvas{

 margin-top:45px !important;

 background-color: transparent;

  border-radius: 30px;

}

 

 

.headercustom{

  border-radius: 30px 30px 0px 0px;

}

 

.pl-region-wrap .pl-content .thepage .canvas{

   background-color: transparent;

}

 

body.display-boxed .boxed-wrap {

border-radius: 30px;

}

[Danny+ 1,327]

jagipson - Can you create your own topic please, as this topic is over a year old. 

[jagipson+ 10]

Danny I ran across the post with an issue that i was having and thought everyone could benefit from something that actually worked.