Jump to content

custom footer divider using a svg

By gab, in Customize with code

Go to solution Solved by Web_Solutions,

Recommended Posts

gab Level 5

gab

Posted
Posted

Hello everyone,

I would like to apply this code (written for custom section dividers using a svg image) on the footer of a website.
Does anyone knows how to modify the selectors for that?

 

//Custom Section Divider//
#siteWrapper [data-section-id="650d5074e0ed013d7b087264"] {
  .section-background {
  overflow: visible;
  &:before {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: inherit;
  -webkit-mask: url(https://static1.squarespace.com/static/650d5073e0ed013d7b08723e/t/650f07edb846d85a6d29d505/1695483885650/GRASS.svg) bottom no-repeat;
    mask: url(https://static1.squarespace.com/static/650d5073e0ed013d7b08723e/t/650f07edb846d85a6d29d505/1695483885650/GRASS.svg) bottom no-repeat;
    margin-top: 1px;
    transform: translateY(-100%);
    position: absolute;
    pointer-events: none!important;

    @media screen and (max-width: 800px) {
      -webkit-mask-size: 300% 50%;
              mask-size: 300% 50%;
    }}}
}

  • Replies 18
  • Views 2.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Web_Solutions
Web_Solutions

Just footer.sections not #siteWrapper [data-section-id="650d5074e0ed013d7b087264"]  like this  footer.sections {   .section-background {   overflow: visible;   &:before {     content:

Web_Solutions
Web_Solutions

Can you add this code and let me know if it work? #page { z-index: 0 !important; }  

Posted Images

gab Level 5

gab

Posted
  • Author
Posted
On 10/6/2023 at 10:28 AM, tuanphan said:

Can you share site url? We can check footer code easier

sure: plantoga.de

gab Level 5

gab

Posted
  • Author
Posted
On 10/12/2023 at 10:45 AM, tuanphan said:

Try changing this ID

#siteWrapper [data-section-id="650d5074e0ed013d7b087264"] 

to

footer.sections

like this?:

#siteWrapper [data-section-id="footer.sections"] 

gab Level 5

gab

Posted
  • Author
Posted
On 10/12/2023 at 10:45 AM, tuanphan said:

Try changing this ID

#siteWrapper [data-section-id="650d5074e0ed013d7b087264"] 

to

footer.sections

it doesn't work 😞

Web_Solutions Level 12

Web_Solutions

Posted
Posted
22 minutes ago, gab said:

it doesn't work 😞

Just footer.sections not #siteWrapper [data-section-id="650d5074e0ed013d7b087264"]  like this 

footer.sections {
  .section-background {
  overflow: visible;
  &:before {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: inherit;
  -webkit-mask: url(https://static1.squarespace.com/static/650d5073e0ed013d7b08723e/t/650f07edb846d85a6d29d505/1695483885650/GRASS.svg) bottom no-repeat;
    mask: url(https://static1.squarespace.com/static/650d5073e0ed013d7b08723e/t/650f07edb846d85a6d29d505/1695483885650/GRASS.svg) bottom no-repeat;
    margin-top: 1px;
    transform: translateY(-100%);
    position: absolute;
    pointer-events: none!important;

    @media screen and (max-width: 800px) {
      -webkit-mask-size: 300% 50%;
              mask-size: 300% 50%;
    }}}
}

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer
☕Am I helpful? Want to offer me a coffee?
✉ Send me a message if needed any help. I'll try to reply as soon as possible.


 

gab Level 5

gab

Posted
  • Author
Posted
13 hours ago, Web_Solutions said:

Just footer.sections not #siteWrapper [data-section-id="650d5074e0ed013d7b087264"]  like this 

footer.sections {
  .section-background {
  overflow: visible;
  &:before {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: inherit;
  -webkit-mask: url(https://static1.squarespace.com/static/650d5073e0ed013d7b08723e/t/650f07edb846d85a6d29d505/1695483885650/GRASS.svg) bottom no-repeat;
    mask: url(https://static1.squarespace.com/static/650d5073e0ed013d7b08723e/t/650f07edb846d85a6d29d505/1695483885650/GRASS.svg) bottom no-repeat;
    margin-top: 1px;
    transform: translateY(-100%);
    position: absolute;
    pointer-events: none!important;

    @media screen and (max-width: 800px) {
      -webkit-mask-size: 300% 50%;
              mask-size: 300% 50%;
    }}}
}

thank you very much... but still doesn't work

  • 4 weeks later...
gab Level 5

gab

Posted
  • Author
Posted
On 10/15/2023 at 7:13 PM, Web_Solutions said:

Just footer.sections not #siteWrapper [data-section-id="650d5074e0ed013d7b087264"]  like this 

footer.sections {
  .section-background {
  overflow: visible;
  &:before {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: inherit;
  -webkit-mask: url(https://static1.squarespace.com/static/650d5073e0ed013d7b08723e/t/650f07edb846d85a6d29d505/1695483885650/GRASS.svg) bottom no-repeat;
    mask: url(https://static1.squarespace.com/static/650d5073e0ed013d7b08723e/t/650f07edb846d85a6d29d505/1695483885650/GRASS.svg) bottom no-repeat;
    margin-top: 1px;
    transform: translateY(-100%);
    position: absolute;
    pointer-events: none!important;

    @media screen and (max-width: 800px) {
      -webkit-mask-size: 300% 50%;
              mask-size: 300% 50%;
    }}}
}

it doesn't work

gab Level 5

gab

Posted
  • Author
Posted
On 10/18/2023 at 4:45 AM, tuanphan said:

no

replacing

#siteWrapper [data-section-id="650d5074e0ed013d7b087264"] 

with

footer.sections

it doesn't work

gab Level 5

gab

Posted
  • Author
Posted
21 hours ago, Web_Solutions said:

You have added this code. Please remove it. 

#page {
    z-index: 9;
}

 

Screenshot_363.png

thank you, but I cannot find that code you tell me to remve, where are you seeing it?

Web_Solutions Level 12

Web_Solutions

Posted
Posted
Just now, gab said:

thank you, but I cannot find that code you tell me to remve, where are you seeing it?

Can you share all of the code on the Custom CSS section?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer
☕Am I helpful? Want to offer me a coffee?
✉ Send me a message if needed any help. I'll try to reply as soon as possible.


 

gab Level 5

gab

Posted
  • Author
Posted
5 hours ago, Web_Solutions said:

Can you share all of the code on the Custom CSS section?

sure:

 

//Custom Section Divider//
footer.sections {
  .section-background {
  overflow: visible;
  &:before {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: inherit;
  -webkit-mask: url(https://static1.squarespace.com/static/650d5073e0ed013d7b08723e/t/650f07edb846d85a6d29d505/1695483885650/GRASS.svg) bottom no-repeat;
    mask: url(https://static1.squarespace.com/static/650d5073e0ed013d7b08723e/t/650f07edb846d85a6d29d505/1695483885650/GRASS.svg) bottom no-repeat;
    margin-top: 1px;
    transform: translateY(-100%);
    position: absolute;
    pointer-events: none!important;

    @media screen and (max-width: 800px) {
      -webkit-mask-size: 300% 50%;
              mask-size: 300% 50%;
    }}}
}

  • Solution
Web_Solutions Level 12

Web_Solutions

Posted
  • Solution
Posted
6 minutes ago, gab said:

sure:

 

//Custom Section Divider//
footer.sections {
  .section-background {
  overflow: visible;
  &:before {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: inherit;
  -webkit-mask: url(https://static1.squarespace.com/static/650d5073e0ed013d7b08723e/t/650f07edb846d85a6d29d505/1695483885650/GRASS.svg) bottom no-repeat;
    mask: url(https://static1.squarespace.com/static/650d5073e0ed013d7b08723e/t/650f07edb846d85a6d29d505/1695483885650/GRASS.svg) bottom no-repeat;
    margin-top: 1px;
    transform: translateY(-100%);
    position: absolute;
    pointer-events: none!important;

    @media screen and (max-width: 800px) {
      -webkit-mask-size: 300% 50%;
              mask-size: 300% 50%;
    }}}
}

Can you add this code and let me know if it work? 

#page {
    z-index: 0 !important;
}

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer
☕Am I helpful? Want to offer me a coffee?
✉ Send me a message if needed any help. I'll try to reply as soon as possible.


 

gab Level 5

gab

Posted
  • Author
Posted
On 11/10/2023 at 3:19 PM, Web_Solutions said:

Can you add this code and let me know if it work? 

#page {
    z-index: 0 !important;
}

 

yes, thank you so much!!! 🙂

Just for curiosity, would you please tell me what that code does?

Web_Solutions Level 12

Web_Solutions

Posted
Posted
1 hour ago, gab said:

yes, thank you so much!!! 🙂

Just for curiosity, would you please tell me what that code does?

You can learn about it here

https://www.w3schools.com/cssref/pr_pos_z-index.php

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer
☕Am I helpful? Want to offer me a coffee?
✉ Send me a message if needed any help. I'll try to reply as soon as possible.


 

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources