Jump to content

Website Link on Lock Screen

Recommended Posts

  • Replies 16
  • Created
  • Last Reply

Top Posters In This Topic

On 3/19/2022 at 11:22 PM, NicolasGS 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

image.thumb.png.8c3750892e6429ebc15672a3f43b50d3.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

image.thumb.png.8c3750892e6429ebc15672a3f43b50d3.png

 

Link to comment
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?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
18 hours ago, NicolasGS said:

bottom center (pls see attachement)1124645739_LinkPositiononLockScreen.thumb.png.6d8d39e7ac08db01bdccc83a543fed51.png

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?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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>

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...

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

Link to comment
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. 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 3 months later...

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

image.thumb.png.8c3750892e6429ebc15672a3f43b50d3.png

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!

Link to comment

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

image.thumb.png.8c3750892e6429ebc15672a3f43b50d3.png

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!

Link to comment
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>

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.