Jump to content

Archived

This topic is now archived and is closed to further replies.

sedique

Round Top Corners of Header

Recommended Posts

sedique    0
sedique

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
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
sedique    0
sedique

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
James B    436
James B

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

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
sedique    0
sedique

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
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
sedique    0
sedique

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

Share this post


Link to post
Share on other sites
James B    436
James B

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

 


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
sedique    0
sedique

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
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
jagipson+    10
jagipson

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
Danny    1,327
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jagipson+    10
jagipson

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

  • Similar Content

    • flourishdesignstudio
      By flourishdesignstudio
      Hello,
      I have an older site that was built using PageLines several years ago (prior to the release of DMS). I wanted to leverage some of the power of your new PL5 plugin but the theme prevents be from adding any generated custom sidebars to the theme (through the drag and drop interface) and does not allow me to add any PL5 sections/containers/etc to the header or footer. Is there any way to easily override that or am I stuck only using PL5 in the content areas of the site?
      Thanks so much for the help!
    • JP
      By JP+
      Hello,
      How can you set the translations with platform5, the parts that are not in pages or posts? Texts and images…
    • romanondrasek
      By romanondrasek
      hi all, I have some trouble using PL5 on my site. 
      I used plugins for event calendar (event on) and plugin (timetable responsive scheduler for WP) for schedule (classes) in the gym.
      The problem is, that post from this 2 plugins are shown without menu in header and footer. (I setup header and footer) in the page editor for all type of page. 
      When I create a lesson, it creates posts with slug (I have a slug "lekce" & event for events).
      I try to edit the post with PL editor, but editor is not opening on the post.

      Do you have some idea where should be some problem? Thanx so much.
      here are links for the sites :
      site with schedule :
      http://www.myfit.cz/rozvrh/
      site of one of the class (pilates)
      http://www.myfit.cz/lekce/pilates/
      site with calendar :
      http://www.myfit.cz/kalendar/
      7 side with one event from the calendar :
      http://www.myfit.cz/event/pilates-instruktor-akreditovana-licence/?ri=1
      when I have my site on DMS2 it was working :-(
       
       
    • Barnaby Skinner
      By Barnaby Skinner+
      Hey team,
      Really simple question: where would I add code to a specific page header? I can see in the settings I can add code to the global header, but can't see how to do it for a single specific page. It's related to facebook pixel tracking
      Cheers
    • Le Chef Est Une Femme
      By Le Chef Est Une Femme+
      Hey everyone
      I am very sorry if this question has a "deja vu"  taste but I have been looking for more than 2 hours a way to add a phone number in the top right corner of my header website.
      Before asking that, I have read many of the questions related to that subject, from hooks and action map to function.php and hooker plugin but I am very lost. Plus many links kindly given by some of you are now 404 pages
      Is there anyone willing to help me find the easiest way to add this number please ? 
      In advance, thank you 
      www.upgrad.paris
×