How to Customize the Member Area Login Link

Aug 26

If you’re using Squarespace member areas, you’ve probably noticed that the login link in your header defaults to saying “Login” or “Account.” But what if you’d rather it say “Sign In,” “VIP Area,” or even “Settings & Billing”? That’s exactly what you’ll learn in this tutorial.

We’ll replace the default login link text for with our own for both the logged out & logged in state. We’ll also use some custom code to change the style of that text, customizing the font size, weight, color, and even the font family.

Watch the video below to see the step-by-step process, then copy the code below so you can add it to your own site.

Pro tip: in the video, I was able to reach my site wide CSS from my pages menu by clicking on custom code at the bottom of the pages menu, and then selecting custom CSS. If that option isn’t available for you, press the / key on your keyboard to open the program search and look for CSS so you can navigate their directly.

How This Works

.unauth targets the logged-out state of the link.
- We set the original text’s font-size to 0, which hides it.
- Then we use the :after pseudo-element to insert our custom wording—in this example, “Sign In”.
- The new text has its own font size (16px) so it displays properly.
.auth targets the logged-in state of the link.
- Again, we hide the original “Account” text with font-size: 0.
- Then we use :after to insert new wording—in this example, “Settings & Billing”.
- We also gave it a readable font size (1rem).

/* customized logged out state - insidethesquare.co */
.user-accounts-text-link .unauth {
  font-size:0!important;
  line-height:1rem;
}

.user-accounts-text-link .unauth:after {
  content:"Sign In";
  font-size:16px!important;
}

/* customized logged in state - insidethesquare.co */
.user-accounts-text-link .auth {
  font-size:0!important;
}

.user-accounts-text-link .auth:after {
  content:"Settings & Billing";
  font-size:1rem!important;
}

Customize It

The best part about this method is that it’s 100% customizable:

Change the content value to whatever you’d like—“Profile,” “VIP Area,” or even an emoji if that fits your brand.
Adjust the font-size to make the text larger or smaller.
Add in properties like font-weight or color to match your site’s style perfectly.