Jump to content

Change font/colour in lockscreen with CSS

Recommended Posts

Site URL: http://www.nutrilee.nl

Hi guys,

I just tried to edit the design of my lockscreen in the design panel, but it'll only let me change the design of the page border and the password element. Clicking the text element which says "coming soon" and the text after that does not change anything in the design panel.. neither does clicking "show all".

So I'm not sure if this is a bug, or a browser thing.. but which CSS code can I use to change the font and color of that text? And also remove the overlay on the background image?

I have little to no experience with CSS coding, but I'm the kind of person who can manage the basics by watching YT videos.

I tried to find the CSS part by inspecting the page, but changing in the CSS panel does not change my lockscreen. Any tips?

.sqs-slide-wrapper[data-slide-type="lock-screen"] [data-slice-type="body"] p, .sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-modal-lightbox-content .lightbox-inner .lightbox-content .form-wrapper p {
    font-family: 'futura-pt';
    font-weight: 400;
    font-size: 26px;
    letter-spacing: .5px;
    font-family: "Helvetica Neue",Arial,sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 14px;
    line-height: 1.3em;
    text-transform: none;
    letter-spacing: .05em;
    color: #3a3a3a;
}

 

designpanel.png

lockscreen.png

Link to comment
  • Replies 3
  • Views 1.8k
  • Created
  • Last Reply
  • 2 months later...

I'm struggling with this as well. From what I understand, there is no other way to edit these elements on a lock page other than using CSS. To use CSS on a lock page, you have to enter it via Code Injection in the "Lock Page" section. To get to Code Injection... Go to menu -  'Settings', 'Advanced', 'Code Injection'.

As far as the right code to enter, well good luck to you. I'm still trying to figure out how to enlarge my logo without overlapping the 'Headline'.

Sooooooooo frustrating. Lol

Link to comment
On 6/4/2021 at 5:12 AM, cltexan said:

I'm struggling with this as well. From what I understand, there is no other way to edit these elements on a lock page other than using CSS. To use CSS on a lock page, you have to enter it via Code Injection in the "Lock Page" section. To get to Code Injection... Go to menu -  'Settings', 'Advanced', 'Code Injection'.

As far as the right code to enter, well good luck to you. I'm still trying to figure out how to enlarge my logo without overlapping the 'Headline'.

Sooooooooo frustrating. Lol

Can you share link to lock page on your site? We can take a look

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.