Jump to content

Add custom code to "Accsess Denied Screen"

Recommended Posts

  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

6 hours ago, Sahil007 said:

I'm trying to add some custom code that will only affect the "Access Denied Screen". Specifically I'm trying to change the header color.

I'm not sure I understand.

You can add custom code to the Lock Page by adding it to Settings > Advanced > Code Injection > Lock Page. However, the Lock Page does not have a header.

Edited by paul2009

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
2 hours ago, paul2009 said:

You can add custom code to the Lock Page by adding it to Settings > Advanced > Code Injection > Lock Page. However, the Lock Page does not have a header.

I'm trying to change the header color for the access denied screen when people try to access a members only page. I'll give this trick a go.

Link to comment

looks like you can use #sqs-member-access-page-root to access the div that contains the messages, as I can't see that id appearing in normal member pages, looks like it's just on that page. The components are

  • #sqs-member-access-page-root h2#headline
  • #sqs-member-access-page-root p#description
  • #sqs-member-access-page-root button.join-button
  • #sqs-member-access-page-root button.sign-in-button

image.thumb.png.545fa20e2c4377bf05fceb83f71289b2.png

so you can add something to your css like this:

 

#sqs-member-access-page-root h2#headline {
  color:red;
}
#sqs-member-access-page-root p#description {
  color:blue;
}
#sqs-member-access-page-root button.join-button {
  color:yellow;
}
#sqs-member-access-page-root button.sign-in-button {
  color:green;
}

image.png.6af73cd78161e80417c4d5933b6425dd.png

give it a try and see how you get on.

 

 

 

Dave Hart. Software/Technology Consultant living in London

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.