• 0
Sign in to follow this  
Followers 0

Round Top Corners of Header


Question

Posted · Report post

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

Share this post


Link to post
Share on other sites

12 answers to this question

  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

 

Any other ideas.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

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