# Customize text on the Sign-in page

**URL:** https://community.glideapps.com/t/customize-text-on-the-sign-in-page/77127
**Category:** Ask for Help
**Created:** [October 16, 2024, 9:47am UTC](https://community.glideapps.com/t/customize-text-on-the-sign-in-page/77127 "2024-10-16T09:47:30Z")
**Posts on this page:** 15
**Page:** 1

<div class="post-metadata">

### Author: ![l3oy8231](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l3oy8231/32/32303_2.png) [@l3oy8231](https://community.glideapps.com/u/l3oy8231)
#### Post date: [October 16, 2024, 9:47am UTC](https://community.glideapps.com/t/customize-text-on-the-sign-in-page/77127/1 "2024-10-16T09:47:31Z")

</div>

Can I modify the text on the sign-in page using CSS? (I need to change it to the local language)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/6/56eb5345c69d3c870bba42864d96e7bc272afa80.png)

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/f/8feaeb1f38a1802e640fa9765684e0af58b4400e.png)

Thank you 🙏 🙏

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [October 16, 2024, 11:27pm UTC](https://community.glideapps.com/t/customize-text-on-the-sign-in-page/77127/2 "2024-10-16T23:27:48Z")

</div>

@NoCodeAndy Do we support localization for this? I feel like things that are not editable on this screen should be localized.

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [October 17, 2024, 10:26am UTC](https://community.glideapps.com/t/customize-text-on-the-sign-in-page/77127/3 "2024-10-17T10:26:48Z")

</div>

> [@l3oy8231](#):
>
> Can I modify the text on the sign-in page using CSS?

Using CSS might require a lot of code, and I’m not sure it would work well without testing on multiple devices. If it supports localization capabilities, that would be even better.

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [October 17, 2024, 12:23pm UTC](https://community.glideapps.com/t/customize-text-on-the-sign-in-page/77127/4 "2024-10-17T12:23:35Z")

</div>

Do you really need it and want to try it?

---

<div class="post-metadata">

### Author: ![l3oy8231](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l3oy8231/32/32303_2.png) [@l3oy8231](https://community.glideapps.com/u/l3oy8231)
#### Post date: [October 17, 2024, 1:50pm UTC](https://community.glideapps.com/t/customize-text-on-the-sign-in-page/77127/5 "2024-10-17T13:50:32Z")

</div>

Yes, I want to give it a try if it’s enough to solve the issue.

Thank you for the advice 🙏

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [October 17, 2024, 2:03pm UTC](https://community.glideapps.com/t/customize-text-on-the-sign-in-page/77127/6 "2024-10-17T14:03:06Z")

</div>

In your first image, there is a difference in the “Continue” button, and mine shows “Sign In.” I don’t know why there’s a difference. If it shows “Continue” for you, you can just adjust it in the aria-label section.  
I only provided code for the necessary parts. For the title, description, and agreement, everything can be input in the settings section. Let me know if there’s any part that doesn’t work.

 ![Screenshot 2024-10-17 at 21.09.28](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/c/9c3178d5d21bdaa5c556605f3ae532baa23b7753.png)  
 ![Screenshot 2024-10-17 at 12.45.36](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/d/6dd07cd0bfe910993825ee2d801c543d06af2bb3.png)

~~**First Dialog Modal**~~

~~

```auto
/* Enter email - placeholder */
#wire-custom-login:has([placeholder="Enter your email"]) form > label > input::placeholder {
    font-size: 0;
}
#wire-custom-login:has([placeholder="Enter your email"]) form > label:has(input[value=""])::after {
    content: "Masukkan email Anda";
    position: relative; 
    bottom: 36px;
    margin-bottom: -24px;
    left: 14px;
    font-size: var(--text-size-base, 1rem);
    color: darkgray;
}

/* Sign-in-button */
#wire-custom-login [aria-label="Sign In"] > div {
    display:none;
}
#wire-custom-login [aria-label="Sign In"]:before {
content: "Masuk";
    font-size: 1rem;
    line-height: 2rem;
}

/* Sign-in-with-google-button */
#sign-in-with-google-button > div > div:after{
content: "Menggunakan Google";
margin-left: 0.625rem;
}

#sign-in-with-google-button > div > div > label{
display: none;
}

```

~~

**Second Dialog Modal**

```auto
/* Title */
#wire-custom-login:not(:has([placeholder="Enter your email"])) [data-test="app-sign-in-title"]::before {
    content: "Periksa email Anda";
    font-size:1.5rem;
}
#wire-custom-login:not(:has([placeholder="Enter your email"])) h1 {
     font-size:0;
}

/* Description */
#wire-custom-login:not(:has([placeholder="Enter your email"])) p[data-testid="wf-title"]::before {
    content: "Kami telah mengirim pin ke email anda";
    font-size: var(--text-size-sm,0.875rem);
}
#wire-custom-login:not(:has([placeholder="Enter your email"])) p[data-testid="wf-title"] {
    font-size:0;
}

/* "I need another pin" */
#wire-custom-login [aria-label="I need another pin"].md.simple > div::before {
    content: "Saya butuh pin baru";
    font-size: var(--text-size-base,1rem);
}
#wire-custom-login [aria-label="I need another pin"].md.simple > div {
    font-size:0;
}

```

---

<div class="post-metadata">

### Author: ![l3oy8231](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l3oy8231/32/32303_2.png) [@l3oy8231](https://community.glideapps.com/u/l3oy8231)
#### Post date: [October 18, 2024, 2:55am UTC](https://community.glideapps.com/t/customize-text-on-the-sign-in-page/77127/7 "2024-10-18T02:55:04Z")

</div>

The CSS code doesn’t work with “Use compiled CSS”, right? I tried it, and it didn’t show any changes.

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/f/7f40158c9795e4aa39cefec07b9d4b159f898233.png)

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/c/2cea56fd20245153e5e195df8098f4c972bf7c97.png)

Or did I miss something? 😥

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [October 18, 2024, 3:17am UTC](https://community.glideapps.com/t/customize-text-on-the-sign-in-page/77127/8 "2024-10-18T03:17:48Z")

</div>

Yes, by enabling “Compiled CSS,” you are only limited to overriding component styles. Just turn off that toggle.

---

<div class="post-metadata">

### Author: ![l3oy8231](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l3oy8231/32/32303_2.png) [@l3oy8231](https://community.glideapps.com/u/l3oy8231)
#### Post date: [October 21, 2024, 7:09am UTC](https://community.glideapps.com/t/customize-text-on-the-sign-in-page/77127/9 "2024-10-21T07:09:01Z")

</div>

> [@Himaladin](#):
>
> ```auto
> #wire-custom-login:has([placeholder="Enter your email"]) form > label > input::placeholder {
> font-size: 0;
> }
> #wire-custom-login:has([placeholder="Enter your email"]) form > label:has(input[value=""])::after {
> content: "Masukkan email Anda";
> position: relative; 
> bottom: 36px;
> margin-bottom: -24px;
> left: 14px;
> font-size: var(--text-size-base, 1rem);
> color: darkgray;
> }
> 
> ```

I tried the code, but it doesn’t get updated in the actual app, although it changes in [https://go.glideapps.com/](https://go.glideapps.com/) (as shown in the picture). Did I misconfigure anything? I haven’t enabled ‘Use Compiled CSS’.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/b/7b53c10338166a01277fb0a036282a772ce3e8b3.png)

In the actual app page.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/2/328d73cf34483d412eec63532eac6dcd3f5dfd56.png)

Thank you very much for the advice. 🙏

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [October 21, 2024, 11:57am UTC](https://community.glideapps.com/t/customize-text-on-the-sign-in-page/77127/10 "2024-10-21T11:57:15Z")

</div>

The Agreement section has not been given CSS. You can directly fill it in here.

 ![Screenshot 2024-10-21 at 17.53.04](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/1/d1d76cb16134404a7d9e3e741d86920198ce9832.png)

There is a difference in DOM levels here, which results in different outcomes due to the ‘privacy’ settings. If it still doesn’t work, please provide a screenshot of the settings you’ve applied in this section (I still can’t figure out why your ‘sign-in’ button is labeled ‘continue’).

Try using the following CSS code instead:

**First Dialog Modal**

```auto
/* Enter email - placeholder */
#app-root:has([placeholder="Enter your email"]) form > label > input::placeholder {
    font-size: 0;
}
#app-root:has([placeholder="Enter your email"]) form > label:has(input[value=""])::after {
    content: "Masukkan email Anda";
    position: relative; 
    bottom: 36px;
    margin-bottom: -24px;
    left: 14px;
    font-size: 1rem;
    color: darkgray;
}

/* Sign-in-button */
#app-root [aria-label="Sign In"] > div {
    display:none;
}
#app-root [aria-label="Sign In"]:before {
content: "Masuk";
    font-size: 1rem;
    line-height: 2rem;
}

/* Sign-in-with-google-button */
#app-root #sign-in-with-google-button > div > div:after{
content: "Menggunakan Google";
margin-left: 0.625rem;
}

#app-root #sign-in-with-google-button > div > div > label{
display: none;
}

```

**Second Dialog Modal**

```auto
/* Title */
#app-root:has([aria-label="I need another pin"]) h1::before {
    content: "Periksa email Anda";
    font-size:1.5rem;
}
#app-root:has([aria-label="I need another pin"]) h1 {
     font-size:0;
}

/* Description */
#app-root:has([aria-label="I need another pin"]) p[data-testid="wf-title"]::before {
    content: "Kami telah mengirim pin ke email anda";
    font-size: var(--text-size-sm,0.875rem);
}
#app-root:has([aria-label="I need another pin"]) p[data-testid="wf-title"]{
    font-size:0;
}

/* "I need another pin" */
#app-root [aria-label="I need another pin"] > div::before {
    content: "Saya butuh pin baru";
    font-size: var(--text-size-base,1rem);
}
#app-root [aria-label="I need another pin"] > div {
    font-size:0;
}

```

---

<div class="post-metadata">

### Author: ![l3oy8231](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l3oy8231/32/32303_2.png) [@l3oy8231](https://community.glideapps.com/u/l3oy8231)
#### Post date: [October 21, 2024, 12:18pm UTC](https://community.glideapps.com/t/customize-text-on-the-sign-in-page/77127/11 "2024-10-21T12:18:30Z")

</div>

Awesome! The new code works perfectly. Thank you so much for the great advice. 🙏 🙏 🙏

As for the privacy settings, I have configured them like this.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/f/9f5d2b190d9025ef4a4ae6d2eb99caa278eef2c5.png)

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [October 21, 2024, 12:23pm UTC](https://community.glideapps.com/t/customize-text-on-the-sign-in-page/77127/12 "2024-10-21T12:23:55Z")

</div>

What about the “continue” button?

---

<div class="post-metadata">

### Author: ![l3oy8231](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l3oy8231/32/32303_2.png) [@l3oy8231](https://community.glideapps.com/u/l3oy8231)
#### Post date: [October 21, 2024, 12:32pm UTC](https://community.glideapps.com/t/customize-text-on-the-sign-in-page/77127/13 "2024-10-21T12:32:08Z")

</div>

I’m not sure, I have this set up in all my apps and it always shows the Continue button. 😥

I made some minor adjustments to the sending pin css.

```auto
/* Sending pin… button */
#app-root [aria-label="Sending pin…"] > div {
    display:none;
}
#app-root [aria-label="Sending pin…"]:before {
    content: "Mengirim PIN...";
    font-size: 1rem;
    line-height: 2rem;
}

```

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [October 21, 2024, 12:34pm UTC](https://community.glideapps.com/t/customize-text-on-the-sign-in-page/77127/14 "2024-10-21T12:34:15Z")

</div>

Yeah, that’s weird. My same settings still result in “sign-in”.

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [October 22, 2024, 12:33pm UTC](https://community.glideapps.com/t/customize-text-on-the-sign-in-page/77127/15 "2024-10-22T12:33:54Z")

</div>

@l3oy8231, I made a slight revision by removing the “:not” pseudo from the Second Dialog Modal section, as it would interfere with other elements.