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

Site URL: https://www.tandemvintage.com/account/login

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.

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!

19 hours ago, TheSquareSpacer said:

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!

How will you do this? I think it is in iframe and we can't style it.

6 hours ago, tuanphan said:

How will you do this? I think it is in iframe and we can't style it.

I think like this, I have styled it many time, also changed the text on it with Jquery before.

Hi there!

I would LOVE to customize the same things!

Background color, custom font, inputs, custom text, etc.

Any help is highly appreciated! 😃

www.thebraveleap.com
Password: g

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.

Thank you Creedon!

I have been struggling understanding the values I'm supposed to modify, and how to go about it... I have a fair understanding of CSS but JavaScript is still beyond me at this point (but I for sure would like to learn).

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>

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

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!🙏


 

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.

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.

 

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.

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. ☺️

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;
  
  }

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!