ayeUXR Posted December 28, 2021 Share Posted December 28, 2021 Site URL: https://www.alouciadesigns.com/when-you-land Hi, I would like to add a home button to the lock screen or make the lock image redirect to the home page. I see the code from previous responses but am unsure what to edit for it to work on my site. I'm currently using the Ready template. Link to comment
KwameAndCo Posted December 28, 2021 Share Posted December 28, 2021 You'll need a Business Subscription or higher and would need to write javascript to do this. It would also apply to all lock screens on your website and not just some. Are you happy for that to happen? Work With Me 🖥️💻📱 Please remember to tag me so that I get a notification and respond to your help requests. If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. You can also thank me or make requests by buying me a coffee ☕. (Caffeine fuels me to take more requests) For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials) For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩 Some links may be affiliate/referral links. Link to comment
AshaG Posted July 22 Share Posted July 22 On 12/28/2021 at 11:49 AM, KwameAndCo said: You'll need a Business Subscription or higher and would need to write javascript to do this. It would also apply to all lock screens on your website and not just some. Are you happy for that to happen? I would actually like to know this as well. I have a business account, and understand that it would be the same on all lock pages. Link to comment
tuanphan Posted July 24 Share Posted July 24 On 7/23/2023 at 4:24 AM, AshaG said: I would actually like to know this as well. I have a business account, and understand that it would be the same on all lock pages. Which position? Above or under Password box or? 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
KwameAndCo Posted July 25 Share Posted July 25 On 7/22/2023 at 10:24 PM, AshaG said: I would actually like to know this as well. I have a business account, and understand that it would be the same on all lock pages. As in how to do it? On 7/24/2023 at 2:15 AM, tuanphan said: Which position? Above or under Password box or? Wherever really. They just need to specify. Work With Me 🖥️💻📱 Please remember to tag me so that I get a notification and respond to your help requests. If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. You can also thank me or make requests by buying me a coffee ☕. (Caffeine fuels me to take more requests) For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials) For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩 Some links may be affiliate/referral links. Link to comment
AshaG Posted July 26 Share Posted July 26 On 7/23/2023 at 9:15 PM, tuanphan said: Which position? Above or under Password box or? Above please. Thank you! Link to comment
AshaG Posted July 26 Share Posted July 26 On 7/25/2023 at 6:05 AM, KwameAndCo said: As in how to do it? Wherever really. They just need to specify. Yes, I would like to be able to do this. Link to comment
AshaG Posted July 26 Share Posted July 26 Just now, AshaG said: Yes, I would like to be able to do this. On 7/25/2023 at 6:05 AM, KwameAndCo said: As in how to do it? Wherever really. They just need to specify. Specifically I would like the code that allows me to do this. Thank you so much! Link to comment
tuanphan Posted July 27 Share Posted July 27 16 hours ago, AshaG said: Specifically I would like the code that allows me to do this. Thank you so much! Add to Settings > Developer Tools > Code Injection > Lock Page <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){ $('<a class="lock-button" href="https://google.com">Lock Button Text</a>').insertAfter('.password-form'); }) </script> <style> a.lock-button { background-color: black; color: white; padding: 10px 20px; border-radius: 10px; text-decoration: none; position: relative; top: 50px; } </style> AshaG 1 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
KwameAndCo Posted July 28 Share Posted July 28 On 7/27/2023 at 9:55 AM, tuanphan said: Add to Settings > Developer Tools > Code Injection > Lock Page Nice! You beat me to it bro! Though I would suggest a pure javascript solution like this, so there's no need for jQuery: <script> document.addEventListener('DOMContentLoaded', function() { var lockButton = document.createElement('a'); lockButton.href = '/'; lockButton.className = 'lock-button sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element'; lockButton.textContent = 'Home'; document.querySelector('.password-form').after(lockButton); }); </script> <style> a.lock-button { background-color: black; color: white; padding: .6rem 1.2rem; border-radius: .5rem; text-decoration: none; position: relative; margin-top: 2rem; } </style> (I pretty much copied your styling). Alternatively, @AshaG, if you want the whole background clickable try: <script> document.addEventListener('DOMContentLoaded', function() { var slideLayer = document.querySelector('.sqs-slide-layer.layer-front.full-width-height'); if (slideLayer) { slideLayer.addEventListener('click', function() { window.location.href = '/'; }); } }); </script> I haven't tested it but it should work. tuanphan and AshaG 1 1 Work With Me 🖥️💻📱 Please remember to tag me so that I get a notification and respond to your help requests. If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. You can also thank me or make requests by buying me a coffee ☕. (Caffeine fuels me to take more requests) For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials) For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩 Some links may be affiliate/referral links. Link to comment
AshaG Posted July 31 Share Posted July 31 On 7/27/2023 at 4:55 AM, tuanphan said: Add to Settings > Developer Tools > Code Injection > Lock Page <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){ $('<a class="lock-button" href="https://google.com">Lock Button Text</a>').insertAfter('.password-form'); }) </script> <style> a.lock-button { background-color: black; color: white; padding: 10px 20px; border-radius: 10px; text-decoration: none; position: relative; top: 50px; } </style> Thank you so much! Link to comment
AshaG Posted July 31 Share Posted July 31 On 7/28/2023 at 11:40 AM, KwameAndCo said: Nice! You beat me to it bro! Though I would suggest a pure javascript solution like this, so there's no need for jQuery: <script> document.addEventListener('DOMContentLoaded', function() { var lockButton = document.createElement('a'); lockButton.href = '/'; lockButton.className = 'lock-button sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element'; lockButton.textContent = 'Home'; document.querySelector('.password-form').after(lockButton); }); </script> <style> a.lock-button { background-color: black; color: white; padding: .6rem 1.2rem; border-radius: .5rem; text-decoration: none; position: relative; margin-top: 2rem; } </style> (I pretty much copied your styling). Alternatively, @AshaG, if you want the whole background clickable try: <script> document.addEventListener('DOMContentLoaded', function() { var slideLayer = document.querySelector('.sqs-slide-layer.layer-front.full-width-height'); if (slideLayer) { slideLayer.addEventListener('click', function() { window.location.href = '/'; }); } }); </script> I haven't tested it but it should work. Thank you so much! tuanphan and KwameAndCo 2 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment