Jump to content

Edit the "Login" window

Recommended Posts

Hi, 

For some reason I haven't been able to edit the "Login" window in any way, even with the !important tags. 
I haven't had any problems editing the other pages in CSS, but this one doesn't cooperate with me. Not sure if it's locked or if it's something I'm doing wrong. 
 

This is what I've written, I have tested multiple variations of this: 

//Login/Registration
//Window
.Dialog-container-uCx0n {
    background-color: #080808 !important;
}

//Title
.Dialog-container-uCx0n h1 {
    color: #FFF !important;
}

//Sign in button 
.Button-container-BtFfe {
    background-color: #FFF !important; 
    color: #000000 !important;
}

//Bottom text 
.Dialog-container-uCx0n footer a {
    color: #FFF !important;
}

//Input fields
.Input-container-1PpPx input {
    font-family: 'Clarkson', 'Proxima Nova', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #FFF !important;
    background-color: #000000 !important;
}

//Hide header "login button"
.user-accounts-link.loaded .user-accounts-text-link {
  display: none;
}

Thank you!

 

 

 

 

Window.PNG

Inspector.PNG

Link to comment
  • 2 years later...

Folks. I tackled changing the title of the login successfully. So I imagine that it may be possible to make further customizations.

The code has some downsides. It depends on SS dynamic classes which can change at anytime. So you need to add a routine check of your site to see when things break and fix.

It does require JavaScript to work. The JavaScript can work because the login dialog is added via an iframe on the same domain as your site. So it is possible to cross the document boundary with JavaScript.

2076475514_ScreenShot2022-11-27at1_15_59PM.png.14e24b9ccacc821b27e542d9f172a0b4.png

I can't say for sure what you want to accomplish can be done but if you are interested I might be able to modify the code to add the ability to include some custom CSS.

Let me know if you are interested.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 1 month later...
On 11/28/2022 at 2:16 AM, creedon said:

Folks. I tackled changing the title of the login successfully. So I imagine that it may be possible to make further customizations.

The code has some downsides. It depends on SS dynamic classes which can change at anytime. So you need to add a routine check of your site to see when things break and fix.

It does require JavaScript to work. The JavaScript can work because the login dialog is added via an iframe on the same domain as your site. So it is possible to cross the document boundary with JavaScript.

2076475514_ScreenShot2022-11-27at1_15_59PM.png.14e24b9ccacc821b27e542d9f172a0b4.png

I can't say for sure what you want to accomplish can be done but if you are interested I might be able to modify the code to add the ability to include some custom CSS.

Let me know if you are interested.

Can you give me any example of javascript to add text please so i can do it also 🙂

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.