UI element modifications

[Innocent_Nwaukwa]

Hi,

Is there a way to change the color of the inner text in the password text box for the password change page?

Also, what social media icons are already available for use? I don’t know if there’s a help page that shows the list of icon ids for different social media platforms because I’m looking for a TikTok and X icon but don’t know what the id for them would be in the UI builder.

Thank You,
Innocent.

[Volodymyr_Ialovyi]

Hello @Innocent_Nwaukwa

@Innocent_Nwaukwa

Is there a way to change the color of the inner text in the password text box for the password change page?

@Innocent_Nwaukwa

icons are already available for use

Do you mean icons for Icon Button?

Regards,
Volodymyr

[Innocent_Nwaukwa]

Not exactly.

1. I’m referring to the PASSWORD and CONFIRM PASSWORD text boxes. They don’t have that color modification option on the right.
   

   

2. These social media icons I’m referring to are different from the typical icons and don’t give the option of changing icons.
   

   

Either way, the icon list on Backendless does not have the social media icons like Snapchat and Instagram that I’m looking for. So, is there any guideline on creating custom icons?

Innocent.

[Andriy_Konoz]

Hi @Innocent_Nwaukwa ,

1. To change inputs color you can add a CSS class and specifying it for inputs. About how to add custom CSS elements you can check this link How To Add Customized Styles To Your App | Backendless

Possible CSS classes:

.password-input input {
  color: #fff000;
}
.password-input input::placeholder {
  color: #000222;
} 

Regards, Andriy

[Innocent_Nwaukwa]

What about for a form input field?
Can we change the label color pre and post focus?
There doesn’t seem to be a color option.

Thank You,
Innocent.

[Zahar_Mychka]

Hi @Innocent_Nwaukwa , it’s not possible to change the color of the label before and after focus

Regards,
Zahar

[Innocent_Nwaukwa]

Alright, thank you.
Any possible suggestion on a customizable form field?
Otherwise, I can just go ahead with changing the color scheme.

Thank You,
Innocent.

[Zahar_Mychka]

I can suggest you to create an extension and try changing the color of the input label there, as shown in the screenshot.

.bl-input-label {
  color: red !important;
}

.bl-input-label--focused {
  color: green !important;
}

Please note that these changes will be applied to all input fields.
Let me know if you want label color changes to occur only for individual inputs.

[Innocent_Nwaukwa]

How would the CSS look for an individual field?
Could I assign the element a class and modify it in the CSS?

[Zahar_Mychka]

1. Add some class to the desired inputs
   

   

2. Fix the CSS

.custom-class .bl-input-label {
  color: red !important;
}

.custom-class .bl-input-label--focused {
  color: green !important;
}