Can I modify the text on the sign-in page using CSS? (I need to change it to the local language)
Thank you 
@NoCodeAndy Do we support localization for this? I feel like things that are not editable on this screen should be localized.
2 Likes
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.
1 Like
Do you really need it and want to try it?
Yes, I want to give it a try if itâs enough to solve the issue.
Thank you for the advice
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.
First Dialog Modal
/* 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
/* 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;
}
3 Likes
The CSS code doesnât work with âUse compiled CSSâ, right? I tried it, and it didnât show any changes.
Or did I miss something? 
Yes, by enabling âCompiled CSS,â you are only limited to overriding component styles. Just turn off that toggle.
1 Like
I tried the code, but it doesnât get updated in the actual app, although it changes in https://go.glideapps.com/ (as shown in the picture). Did I misconfigure anything? I havenât enabled âUse Compiled CSSâ.
In the actual app page.
Thank you very much for the advice.
The Agreement section has not been given CSS. You can directly fill it in here.
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
/* 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
/* 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;
}
1 Like
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.
1 Like
What about the âcontinueâ button?
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.
/* 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;
}
1 Like
Yeah, thatâs weird. My same settings still result in âsign-inâ.
1 Like
@l3oy8231, I made a slight revision by removing the â:notâ pseudo from the Second Dialog Modal section, as it would interfere with other elements.
1 Like