custom footer divider using a svg

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

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

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

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

sure: plantoga.de

Try changing this ID

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

to

footer.sections

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"] 

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 😞

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

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

On 10/14/2023 at 11:14 PM, gab said:

like this?:

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

no

replacing

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

with

footer.sections

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

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

no

replacing

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

with

footer.sections

it doesn't work

2 hours ago, gab said:

it doesn't work

You have added this code. Please remove it.

#page {
    z-index: 9;
}

21 hours ago, Web_Solutions said:

You have added this code. Please remove it.

#page {
    z-index: 9;
}

 

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

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?

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

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?

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

On 11/11/2023 at 4:48 PM, Web_Solutions said:

You can learn about it here

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

thank you!