Change login button name

Site URL: http://cephtactics-dental.com

Please can someone advise how to change the word login in the header area to another word.

Thank you :)

Add to Home > Design > Custom CSS

.user-accounts-text-link {
    visibility: hidden;
}
.user-accounts-text-link:before {
    visibility: visible;
    content: "New text";
    position: absolute;
}

Thank you so much :)))))

I did the same. Unfortunately, after a customer logs in the wording of the original login link changes from "Sign in" to "Account". With the CSS change it doesn't do that. 

Any idea how to achieve that the "sign in" wording is changed before a customer is logged in. After the login the adapted wording should disappear and the original Squarespace wording for the "after-login" should be shown?

@tuanphan For some reason I am also still having issues with this. I am able to hide the sign in text with css, however it is not allowing me to transform the text... I am on an older version of SquareSpace. Ideally, I would love to replace the text with a user account login icon that matches the coloration of the site. Any ideas to help? (website is: www.patrickgarr.com). Thanks!

On 11/29/2020 at 9:58 AM, pgcreativedesigns said:

@tuanphan For some reason I am also still having issues with this. I am able to hide the sign in text with css, however it is not allowing me to transform the text... I am on an older version of SquareSpace. Ideally, I would love to replace the text with a user account login icon that matches the coloration of the site. Any ideas to help? (website is: www.patrickgarr.com). Thanks!

I see you solved?

@tuanphanHere is what I made to get it to be a button, I bet if you added an href to the icon that you upload it would work.

 

.user-accounts-link {
  
padding: 5px 20px;
background: #18263B; 

}

@tuanphan Yes - it does look better. I got an icon, however it was extremely small, so I switched it back to the custom text "Members". The issue I'm having now is that on mobile it is slightly off center compared to the other navigation links. Anything I can do to solve this? Thanks for your help! I added a screenshot below. (link: www.patrickgarr.com) 

On 12/4/2020 at 11:19 PM, pgcreativedesigns said:

@tuanphan Yes - it does look better. I got an icon, however it was extremely small, so I switched it back to the custom text "Members". The issue I'm having now is that on mobile it is slightly off center compared to the other navigation links. Anything I can do to solve this? Thanks for your help! I added a screenshot below. (link: www.patrickgarr.com) 

Add left & translate

.user-account-link span.unauth:before {
    visibility: visible;
    content: "MEMBERS";
    font-size: inherit;
    color: #d3aa4a;
    font-family: inherit;
    text-align: inherit;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

@tuanphan Thank you!! I really appreciate this. It did fix it on mobile. However, it then centered behind the site title on desktop. Is there anything I need to do to rearrange that but keep mobile center?

@media screen and (max-width:767px) {
.user-account-link span.unauth:before {
    visibility: visible;
    content: "MEMBERS";
    font-size: inherit;
    color: #d3aa4a;
    font-family: inherit;
    text-align: inherit;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
}

@tuanphan For some reason that took it away completely on desktop... Not sure if it's also because I have the below code to change and hide the "sign in" text that I am replacing.

.user-account-link span.unauth {
    visibility: hidden;
}

Keep your code + insert latest code I sent above

@tuanphan this worked perfectly! Thank you SO much for your help figuring this out. I appreciate it.

The text on mobile is now off-centre.  Any ideas?  I can't send you a link unfortunately.  I can send you all the screenshots you need though.

On 5/27/2020 at 12:11 PM, tuanphan said:

Add to Home > Design > Custom CSS

.user-accounts-text-link {
    visibility: hidden;
}
.user-accounts-text-link:before {
    visibility: visible;
    content: "New text";
    position: absolute;
}

 

1 hour ago, joelygoe said:

The text on mobile is now off-centre.  Any ideas?  I can't send you a link unfortunately.  I can send you all the screenshots you need though.

 

 

 

 

I can't help without checking site code.

On 5/27/2020 at 12:11 PM, tuanphan said:

Add to Home > Design > Custom CSS

.user-accounts-text-link {
    visibility: hidden;
}
.user-accounts-text-link:before {
    visibility: visible;
    content: "New text";
    position: absolute;
}

I used this on my site https://www.midastouch.ie/ however the formatting went askew (see screen shot attached). Any tips on how to get it all align on a single line @tuanphan 🙏🏼

 

On 9/21/2023 at 7:48 PM, DreamrW said:

You can use white-space: nowrap;

.user-accounts-text-link {
    visibility: hidden;
}
.user-accounts-text-link:before {
    visibility: visible;
    content: "New text";
    position: absolute;
    white-space: nowrap;
}