Website Link on Lock Screen

Hi,
I have to have a privacy policy and imprint on my lock screen for legal reasons. Ideally, I would like to be able to put a link to a web page with the privacy policy and imprint on the lock screen. Is that possible?

Thanks,

Nicolas

Hi,

What is your site url? We can check easier

https://robin-primrose-ltlj.squarespace.com

Thank you!

On 3/19/2022 at 11:22 PM, NicolasGS said:

https://robin-primrose-ltlj.squarespace.com

 

Thank you!

Add to Settings > Advanced > Code Injection > Lock Page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
$(document).ready(function() { 
		$('<ul class="t-links"><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a></li><li><a href="#">Link 4</a></li></ul>').insertBefore('div.sqs-slice-password');
	});
</script>
<style>
ul.t-links {
    list-style: none;
    padding-left: 0;
    display: flex;
    justify-content: center;
}
ul.t-links li a {
    color: rgba(28,28,28,.5);
    font-family: 'chalfont';
    padding-left: 10px;
    padding-right: 10px;
}
ul.t-links li a:hover {
    color: rgba(0,118,245,.92);
}
</style>

Just tested on my test site

1 hour ago, tuanphan said:

Add to Settings > Advanced > Code Injection > Lock Page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
$(document).ready(function() { 
		$('<ul class="t-links"><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a></li><li><a href="#">Link 4</a></li></ul>').insertBefore('div.sqs-slice-password');
	});
</script>
<style>
ul.t-links {
    list-style: none;
    padding-left: 0;
    display: flex;
    justify-content: center;
}
ul.t-links li a {
    color: rgba(28,28,28,.5);
    font-family: 'chalfont';
    padding-left: 10px;
    padding-right: 10px;
}
ul.t-links li a:hover {
    color: rgba(0,118,245,.92);
}
</style>

Just tested on my test site

15 hours ago, NicolasGS said:

 

What do you mean?

Sorry, I wanted to ask how to position the links at the bottom center of the website?

23 hours ago, NicolasGS said:

Sorry, I wanted to ask how to position the links at the bottom center of the website?

Under password field, or bottom center of screen?

bottom center (pls see attachement)

18 hours ago, NicolasGS said:

bottom center (pls see attachement)

It looks like you used another code to add link. You want to align that link to bottom center, or still use my code + align bottom center?

Your code. Thank you

On 3/24/2022 at 9:02 PM, NicolasGS said:

Your code. Thank you

Add this to bottom of Cover Page Header

<style>
  ul.t-links {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    justify-content: space-between !important;
}
</style>

Thank you!
Now I would like to use the link to refer to a separate webpage without password protection. However, if I have activated the lock screen, all pages of my website are password-protected. Can I somehow exclude a webpage from this? Do you have any ideas on how to do this?

Nicolas

3 hours ago, NicolasGS said:

I have activated the lock screen, all pages of my website are password-protected. Can I somehow exclude a webpage from this?

When your site is password protected, you cannot exclude a page. 

hi 

On 3/21/2022 at 10:17 AM, tuanphan said:

Add to Settings > Advanced > Code Injection > Lock Page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
$(document).ready(function() { 
		$('<ul class="t-links"><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a></li><li><a href="#">Link 4</a></li></ul>').insertBefore('div.sqs-slice-password');
	});
</script>
<style>
ul.t-links {
    list-style: none;
    padding-left: 0;
    display: flex;
    justify-content: center;
}
ul.t-links li a {
    color: rgba(28,28,28,.5);
    font-family: 'chalfont';
    padding-left: 10px;
    padding-right: 10px;
}
ul.t-links li a:hover {
    color: rgba(0,118,245,.92);
}
</style>

Just tested on my test site

hi can you help me do the same thing for my site? i tried to use the code you suggested but it didnt work for me. ideally, i would like to only have 1 link if you can please. thank you!

https://www.charmingoilylife.com/freebies-library/diffuser-blend-cards 

On 3/21/2022 at 10:17 AM, tuanphan said:

Add to Settings > Advanced > Code Injection > Lock Page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
$(document).ready(function() { 
		$('<ul class="t-links"><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a></li><li><a href="#">Link 4</a></li></ul>').insertBefore('div.sqs-slice-password');
	});
</script>
<style>
ul.t-links {
    list-style: none;
    padding-left: 0;
    display: flex;
    justify-content: center;
}
ul.t-links li a {
    color: rgba(28,28,28,.5);
    font-family: 'chalfont';
    padding-left: 10px;
    padding-right: 10px;
}
ul.t-links li a:hover {
    color: rgba(0,118,245,.92);
}
</style>

Just tested on my test site

hi can you help me do the same thing for my site? i tried to use the code you suggested but it didnt work for me. ideally, i would like to only have 1 link if you can please. thank you!

On 9/21/2022 at 9:18 PM, emmabrinker said:

https://www.charmingoilylife.com/freebies-library/diffuser-blend-cards 

hi can you help me do the same thing for my site? i tried to use the code you suggested but it didnt work for me. ideally, i would like to only have 1 link if you can please. thank you!

Use this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('<ul class="t-links"><li><a href="https://google.com">Link 1</a></li></ul>').insertBefore('div.sqs-slice-password');
	});
</script>
<style>
ul.t-links {
    list-style: none;
    padding-left: 0;
    display: flex;
    justify-content: center;
}
ul.t-links li a {
    color: rgba(28,28,28,.5);
    font-family: 'chalfont';
    padding-left: 10px;
    padding-right: 10px;
}
ul.t-links li a:hover {
    color: rgba(0,118,245,.92);
}
</style>