Change heading on login page

Knack Community
1

On the default login pages, when used, the first box says “Email Address” - on one app we use made up login names for access rather than the person’s actual email - does anyone know how to change the heading “Email Address” so I can put “username” instead?
(the field in users has already been changed to “username” but this is not shown on the login form.

image

2

Hi @andrewstee38626,

Thank you for asking and sharing your question!

There is currently no way to change the header for “Email Address” within the Login view’s settings as you probably have already noticed.

However, many Knack users utilize CSS to change the look and feel of elements within their Live App pages. If you choose to use CSS, here is our developer doc guide on this topic: Using CSS with Knack

If you have any questions about utilizing CSS, our API & Customization - Ask Developers category here in the forum is a great resource: Ask Developers

3

@andrewstee38626 - I’m not a coder but after a bit of digging around in the document object model of the browser I located the label. With some help from Chat GPT I was able to change the label with some CSS. I’m sure there are neater and more efficient ways of achieving this, possibly globally, but I got it to work on a view by view basis.

Just replace the view number in the below code and update your label text.

#view_122 > div > div > div.kn-login-form > form > div:nth-child(1) > label {
    display: none; /* Hides the original label */
}

#view_122> div > div > div.kn-login-form > form > div:nth-child(1)::before {
    content: "Username"; /* New label text */
    display: block; /* Makes it behave like a label */
    font-weight: bold; /* Add any styling you want */
    margin-bottom: 5px; /* Space between label and input */
}

image
image670×572 31.2 KB

If you have multiple login pages then you can adapt the code adding the additional views. However, I’d strongly recommend using a home page redirect to manage multiple login locations so you just have one URL to share app wide.

/* Hide the original label in both views */
#view_122 > div > div > div.kn-login-form > form > div:nth-child(1) > label,
#view_123 > div > div > div.kn-login-form > form > div:nth-child(1) > label {
    display: none; /* Hides the original label */
}

/* Create a new label for both views using the pseudo-element */
#view_122 > div > div > div.kn-login-form > form > div:nth-child(1)::before,
#view_123 > div > div > div.kn-login-form > form > div:nth-child(1)::before {
    content: "Username"; /* New label text */
    display: block; /* Makes it behave like a label */
    font-weight: bold; /* Add any styling you want */
    margin-bottom: 5px; /* Space between new label and input */
}

Once you have this working you can add additional styling to the CSS, such as colour:

/* Create a new label for view_122 with red text */
#view_122 > div > div > div.kn-login-form > form > div:nth-child(1)::before {
    content: "Username goes here"; /* New label text */
    display: block; /* Makes it behave like a label */
    font-weight: bold; /* Add any styling you want */
    margin-bottom: 5px; /* Space between new label and input */
    color: red; /* Change text color to red */
}

image
image666×570 31.4 KB

4

Wow Carl,

thanks so much. I’ll give that a try:)

1 Like
5

Cool, if it works please mark the thread as a solution, I appreciate that a coder may have a better answer.