Jump to content

Squarespace 7.1 - Site Credits Pop-Up in Footer

Go to solution Solved by tuanphan,

Recommended Posts

19 hours ago, skalison said:

This will require some steps with code

First, add a Site Credit Text in Footer

Next, add a new section in Footer > Design your popup layout

In this new section, add a Code Block with this code

<div id="close">Close</div>

Next, we will test some script code, to achieve effect similar the example site

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
10 hours ago, tuanphan said:

This will require some steps with code

First, add a Site Credit Text in Footer

Next, add a new section in Footer > Design your popup layout

In this new section, add a Code Block with this code

<div id="close">Close</div>

Next, we will test some script code, to achieve effect similar the example site

@tuanphan Thank you!! I've made these updates to the site.

Link to comment

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function(){ $("div#block-6a656a3f7fd668c4aae9 p").click(function(){
    $('footer.sections').toggleClass('show-credit');
});
});
</script>
<style>
  footer.sections section:first-child {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999999;
    transform: translatey(100%);
    transition: transform 0.3s ease;
}
footer.sections {
    z-index: 99999 !important;
}
  .show-credit section:first-child {
    transform: translatey(0) !important;
    transition: transform 0.3s ease;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
7 hours ago, tuanphan said:

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function(){ $("div#block-6a656a3f7fd668c4aae9 p").click(function(){
    $('footer.sections').toggleClass('show-credit');
});
});
</script>
<style>
  footer.sections section:first-child {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999999;
    transform: translatey(100%);
    transition: transform 0.3s ease;
}
footer.sections {
    z-index: 99999 !important;
}
  .show-credit section:first-child {
    transform: translatey(0) !important;
    transition: transform 0.3s ease;
}
</style>

 

@tuanphan INCREDIBLE. Thank you!! I think I'm just missing how to close the pop-up once it's open.

Edited by skalison
Link to comment
  • Solution
On 4/29/2023 at 9:48 PM, skalison said:

@tuanphan INCREDIBLE. Thank you!! I think I'm just missing how to close the pop-up once it's open.

Change to this new code

<script>
  $(document).ready(function(){ $("div#block-6a656a3f7fd668c4aae9 p").click(function(){
    $('footer.sections').toggleClass('show-credit');
    $('div#close').click(function(){
    	$('footer.sections').removeClass('show-credit');
    });
});
});
</script>
<style>
  footer.sections section:first-child {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999999;
    transform: translatey(100%);
    transition: transform 0.3s ease;
}
footer.sections {
    z-index: 99999 !important;
}
  .show-credit section:first-child {
    transform: translatey(0) !important;
    transition: transform 0.3s ease;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
13 hours ago, tuanphan said:

Change to this new code

<script>
  $(document).ready(function(){ $("div#block-6a656a3f7fd668c4aae9 p").click(function(){
    $('footer.sections').toggleClass('show-credit');
    $('div#close').click(function(){
    	$('footer.sections').removeClass('show-credit');
    });
});
});
</script>
<style>
  footer.sections section:first-child {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999999;
    transform: translatey(100%);
    transition: transform 0.3s ease;
}
footer.sections {
    z-index: 99999 !important;
}
  .show-credit section:first-child {
    transform: translatey(0) !important;
    transition: transform 0.3s ease;
}
</style>

 

@tuanphan Thank you SO much!!!

Link to comment
  • 1 year later...
On 6/11/2024 at 5:35 AM, zooeythecat said:

I am also trying to achieve this, but am having some trouble! Appreciate your help 🙂

site: https://reed-cello-jl2j.squarespace.com/
pw: beginanyhow

created the site credit text in the footer, added the close code block, but still stuck. what should the #div link to in the code injection footer bit of the code?

 

 

Use this

<script>
  $(document).ready(function(){ $("div#block-60c9bdc662f22632c504").click(function(){
    $('footer.sections').toggleClass('show-credit');
    $('div#close').click(function(){
    	$('footer.sections').removeClass('show-credit');
    });
});
});
</script>
<style>
  footer.sections section:nth-child(2) {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999999;
    transform: translatey(100%);
    transition: transform 0.3s ease;
}
footer.sections {
    z-index: 99999 !important;
}
  .show-credit section:nth-child(2){
    transform: translatey(0) !important;
    transition: transform 0.3s ease;
}
</style>

You can also use custom Popup plugin (referral link) to achieve this easier. If you need a guide, let me know, I can do a quick guide for you.

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

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

Hire a Designer

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