Jump to content

How can I style the customer login pop up, and the customer account drawer?

Recommended Posts

19 minutes ago, AllieDesignCo said:

I don't see a clear way to style the customer login pop up, or the customer account drawer. Is it possible to style these via Squarespace or CSS? My fear is that these may be iframes which means we're stuck with the default.

Hi Allie! you can style these with CSS. Let me know the styles you may need and i will send you the code for that!

Become a contributor to the largest resource for Squarespace and gain recognition from thousands of visitors.

Join us on this exciting journey. Ping us here!.

Link to comment
  • 1 year later...

Please see the following.

 

Please note that these code provide a framework for you to style these elements. They don't do the styling for you, you still have to know CSS and or JavaScript, depending on what you are trying to accomplish, to do more than just the most basic changes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

In my code I try to indicate where you can insert your code for example with my Member Area Log In Dialog Change you'll find the following.

  <x-twc-malidc-style style="display : none;">
  
    [optional, enter css here replacing square brackets]
    
    </x-twc-malidc-style>

To change the background color of the dialog here is an example.

  <x-twc-malidc-style style="display : none;">
  
    .twc-malidc > div > div {
    
      background-color : red;
      
      }
      
    </x-twc-malidc-style>

ScreenShot2023-12-30at8_15_44PM.png.9cda455c90b248d42027c316cb31ad3e.png

You have to know how to examine the structure of the dialog with DevTools to know how to create your CSS.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment


AMAZING!

It worked! 😃 Thank you so much for taking the time to explain it to me. I didn't think it would be this simple to add CSS in your code, I was wrong! This is great!

I would love your help with further modifications if that's ok.

Would you be able to provide CSS (you can write any colour or font-family, and I can change them after) for:

-Custom content for Title

-Custom fonts for Title, Inputs, Button, "forgot password" and "create account" texts.

( I would like 'BRANDON GROTESQUE', but for some reason I cannot seem to make it work with this font, even though it is a part of Squarespace's fonts... for example, I have no problem with 'FUTURA'.)

-Custom color for Button background (and font)

-Custom color for all fonts

I think with this, I should be able to make all the modifications I need. 

Normally I would type the CSS myself, but since this is a little unknown to me, your help would be highly appreciated to make sure I got it right.


THANK YOU CREEDON!🙏


 

Edited by Jmontison
Link to comment
Quote

Normally I would type the CSS myself, but since this is a little unknown to me, your help would be highly appreciated to make sure I got it right.

Maybe I can teach you to fish. Do you know how to use DevTools to examine a normal SS page to figure out the CSS you need?

It works pretty much the same for the dialog. Bring the dialog up. Inspect the dialog. You'll find that the dialog is an iframe ( a document within a document ). The iframe has it's own HTML, BODY, and etc. tags. Any class name and others you find within the iframe can be added to my code to modify the dialog.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment


Ah, Creedon...

This is magical! Thank you SO MUCH!!!!!

I am already figuring out how to make my own modifications, which is so satisfying! For the most part, it works.


I have other questions:


How do I modify content? For example, if I wish to change the title and button contents, where do I find this inside DevTools? I can't seem to find where that is...

What am I missing here?

Also... I understand this is iFrame -I don't understand yet what that means, but I know it's different from 'regular CSS'. 

Why are the custom fonts I uploaded in Squarespace not working in your code?

If I wanted to, would I be able to put 'display: none' for the button or the inputs, so that they are not visible? I have not succeeded.

 

Link to comment
1 hour ago, Jmontison said:

I understand this is iFrame -I don't understand yet what that means'. 

Why are the custom fonts I uploaded in Squarespace not working in your code?

Iframes are a secure method of embedding content. To put it simply, it’s a separate web page inside of your existing web page that is managed completely independently. Squarespace uses an iframe for the login because it protects the login process and keeps it more secure.

As the content of the iframe is being loaded loaded from somewhere else (not from your website), it cannot access custom fonts that you've added to your website. The login has been built to use Squarespace's own 'Clarkson' font, inspired by their roots in New York City.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment


Thank you Paul for all that info, that's great to know! 🙏

Creedon, if you have any code to install my own CSS to modify the 'customer drawer' I would be very grateful for that, too...

I understand I am asking for many things at once, so no pressure.
I'm just grateful for everybody's help on this journey of designing my own website. ☺️

Link to comment
11 hours ago, Jmontison said:

if I wish to change the title

The dialog title can be changed with the setting in my code.

        signIn : '[optional, enter sign in title text here between single quotes replacing square brackets]',

 

Quote

if I wish to change the button contents, where do I find this inside DevTools?

Changing button text can be done with CSS but the result will most likely be unsatisfactory. Doing it with CSS messes up the spacing. JavaScript is a better option. I don't have any code to do this.

In many cases if you context click on the element you want to inspect it will show up in DevTools. If it doesn't then you have to search around the document for it. The find option can be useful in this case.

Quote

Why are the custom fonts I uploaded in Squarespace not working in your code?

As @paul2009 points out you can't just throw a font-family on an element and have it change. You need to define the font-face in the context of the dialog.

@font-face {

  font-family : 'brandon-grotesque';
  src : url( https://static1.squarespace.com/static/63d1e9b20cb2274e46b41daa/t/658d00517916fc62d68cb321/1703739473698/HvDTrial_Brandon_Grotesque_light-BF64a625c93e709.otf );
  
  }

body {

  font-family : brandon-grotesque, Clarkson, Proxima Nova, Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
  
  }

 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment


Creedon,

This is splendid! 👏

Indeed, I missed the section inside your code where you indicate the entry for a custom title. Brilliant! Very thoughtful.

Would you be able to direct me toward a code-dialog-javacript-html (honestly, I'm learning how to differentiate all of those, not sure which one is correct, sorry newbie over here!)

To help me customize the 'customer drawer' window that opens in the "account" section for members? That would be fantastic.

Thank you! 


 

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.