Curved border for footer

[wbishop]

We need to create a curved border between the footer and main area of the page as illustrated in the image attached (horizontal line is for illustration only, should not appear in live site). We can do this on any individual page by adding a row and including this custom css:

content: ”; height: 4.75em; width: 100%; position: relative; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; bottom: -3em; z-index:9;

We need to add the curved border site-wide. We experimented with defining border radii for #main, .contain-wrap, and .main-color but this does not yield the gentle curve we’re looking for.

Could you suggest a solution? Perhaps more effective css, a function, an addition to the child header.php file or something else?

Just FYI, we searched the forums & web, and reviewed the recommended topics but were unable to find a solution.

Thanks!

Attachments:

You must be logged in to view attached files.

[wbishop]

PS – Not sure why image above is truncated on both ends, but perhaps you can still see & understand our goal…

[Laura]

Hello, can you share a link to your website? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[wbishop]

Hi Laura,

Thanks for your reply! Wish I could offer a link but this effort is on an offline development environment.

I was thinking maybe we could simply insert a <div class=”curve”> kind of thing into the footer.php file and lay some css on it as per above…but thought you’d probably have other/better ideas?

Really sorry I can’t offer access, but it’s out of my hands. Any suggestions/thoughts you might have in the abstract would be very welcome!

Thanks!

[Laura]

Hello, do not worry at all, i will test it in my own site and let you know 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Laura]

Hello, you could try with

COPY CODE

div#socket {
  border-bottom-left-radius: 960px 330px !important;
  border-bottom-right-radius: 960px 330px;
  width: 1531px;
  margin-left: 26px;
  margin-top: -6px;
}
#footer {
  font-weight: 300;
  border-bottom-left-radius: 30px 390px !important;
  border-bottom-right-radius: 30px 390px !important;
}

And play with the numbers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[wbishop]

Thank you very much Laura!

I gave this a shot. The result is that the bottom corners of the footer curve, rather than a curve at the top of the footer.

What I’m really looking for is a very gently curved bottom border of the main section that would then overlap into the footer. Does that make sense?

It’s easy enough to put a curve on the top corners of the footer, but that then curves in the wrong direction. I tried curving the bottom of the main section using:

.container-wrap {
position: relative;
background-color: #fafbf9;
border: 1px;
z-index: 9;
border-bottom-left-radius: 25%;
border-bottom-right-radius: 25%;
bottom: -3em;
}

and toyed with different radii, but wasn’t able to get the continuous gentle curve effect you see in the image I posted above – the height of the area affected by the .container-wrap is too great to get the curve right.

I thought if I could simply put a “row” (as in the Kleo Backend editor) into the header, at the very top, I could use the css I’d used before (it’s in my original post), but I don’t quite know how to best do that.

Thanks again for your help and I’ll welcome other ideas!

[wbishop]

Sorry – s/h/b, “…into the footer,”

[wbishop]

Sorry again – just re-read my initial post and see I again mis-spoke: it should have said, “… an addition to the child footer.php file…”

[wbishop]

Hi-

Just to close the loop, I added:

<section id=”footer-curve” class=”container-wrap main-color no-col-gap border-bottom text-center” style=”background-color: #fbfaf9;padding-top: 0em;padding-bottom: 0em;min-height: 4em;content: ''; height: 5.3em; width: 100%; position: relative; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; bottom: -2.5em; z-index:9;”><div class=”section-container container-full”><div class=”row”>
<div class=”col-sm-12 wpb_column column_container <!– vc_custom_1436391843917–>”>
<div class=”wpb_wrapper”>

</div>
</div>
</div></div></section><!– end section –>

To footer.php in kleo-child after <!– #main –> and it seems to work.

Can you see anything wrong with doing it this way?

Thanks!

[Laura]

Hello, its a good way if you do it in child theme 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[wbishop]

Thanks, Laura, I appreciate the validation!

Cheers!

[Author]

Posts