Azure Entra External ID Custom CSS queries

Question

Azure Entra External ID Custom CSS queries

Harry Lu 10

Hi Microsoft Team,

We are in the process of implementing a custom dark mode sign-in process to align with our website branding using Azure Entra External ID. While configuring the custom CSS, we encountered a few styling elements that seem difficult to modify, and we’d like your guidance on how to proceed.

Input Placeholder Styling:

In the screenshot attached, is it possible to change the color of the input placeholder text? If so, what is the recommended way to achieve this using custom CSS for the sign-in form?
Additionally, when users encounter an error with their entry, can we modify the border color of the input field to match the error message color (as shown above)?

User's image

Identity Banner Styling:

For the identity banner (screenshot attached), can we modify the background color using custom CSS? If yes, could you guide us on how to achieve this?

User's image

Class Inconsistency on Reset Password Page:

In the reset password page, the elements for the title and boilerplate text are structured differently compared to the sign-in and sign-up pages. The reset page lacks the ext-boilerplate-text class (it only uses boilerplate-text), making it difficult to style this page consistently with our other pages, as we only target elements with the ext- prefix.
Is this difference in class names by design, or could it be an oversight? If intentional, what would be the best way to ensure consistent styling across all pages?

User's image

We appreciate your support in resolving these issues and aligning the user experience with our brand. Screenshots are attached for reference.

Akhilesh Vallamkonda 15,320 Reputation points Microsoft External Staff Moderator

2024-11-04T14:30:14.3266667+00:00
Hi @Harry Lu

Thank you for reaching Microsoft Q&A Forum!

I understand you have encountered several styling challenges Input Placeholder Styling, Error Border Color, Identity Banner Styling, Class Inconsistency on Reset Password Page.

1.Input Placeholder Styling:

You can change the placeholder text color using the ::placeholder pseudo-element in your custom CSS:
.ext-input.ext-text-box::placeholder { color: #yourColorCode; }

2.Error Border Color:

To change the border color of the input field when there's an error, you can use the .ext-input.ext-text-box.ext-has-error class:
.ext-input.ext-text-box.ext-has-error { border-color: #yourErrorColorCode; }

3.Identity Banner Styling:

Modify the background color of the identity banner using the .ext-header class:

.ext-header { background-color: #yourBackgroundColorCode; }

4.Class Inconsistency on Reset Password Page:

If the reset password page uses different class names, you can target both classes in your CSS to ensure consistent styling:

.ext-boilerplate-text, .boilerplate-text { /* Your styling here */ }

These adjustments should help you align the sign-in experience with your branding.

Reference: https://learn.microsoft.com/en-us/entra/external-id/customers/concept-branding-customers
Hope this helps. Do let us know if you any further queries by responding in the comments section.

Thanks,

Akhilesh.

If this answers your query, do click Accept Answer and Yes for was this answer helpful. And, if you have any further query do let us know.

Harry Lu 10

Hi @Akhilesh Vallamkonda ,

Thank you for your detailed response and suggestions!

I implemented the changes you provided, but I'm still encountering some issues:

Input Placeholder Styling: The placeholder color change using the ::placeholder element didn't seem to apply correctly. The placeholder text remains the same as before, even after adding the suggested CSS.

Error Border Color: This solution worked perfectly! The error border color now displays as expected when an input field contains an error.

Identity Banner Styling: I applied the .ext-header class for the identity banner background color, but the changes aren't reflecting. The banner still shows the default color, and I'm not sure if I'm missing something or if there’s a conflicting style.

Class Inconsistency on Reset Password Page: Even after adding the CSS to target both .ext-boilerplate-text and .boilerplate-text, the styling on the reset password page remains unchanged. The inconsistent class names seem to be causing an issue.

I've attached the full CSS file for reference. After the changes, the ui still look as the same as the previous screenshots. Could you please advise if there's something specific I need to adjust or if there might be additional overrides I need to account for?

Thanks again for your help, and I look forward to your suggestions!

Best regards,

Harry


body{
background-color: #15202B;
}

.a, a:link{
    color: #fff;;
}

.a:hover{
    color: #fff;
    text-decoration: underline;
}

.a:visited{
    color: #fff;;
}

.ext-sign-in-box{
    padding: 40px 30px;
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;
    height: 100%;
    background-color: #2C3742;
    color: white;
    border: 0;
    border-radius: 10px;
}

.ext-title{
    text-align: center;
    color: #fff;
    margin-top: 30px;
    margin-bottom: 30px;
}

.ext-header-description{
    display: none;
}


.ext-button-item{
    width: 100%;
}

.ext-button.ext-primary{
    margin: 0 auto;
    width: 100%;
    height: 40px;
    background-color: #f0f0f0;
    border-radius: 0.5rem;
    border: none;
    color: #000;
    font-size: 1em;
    font-weight: bold;
}

.ext-button.ext-primary:hover{
    background-color: #ffffff;
}

.ext-button.ext-secondary{
    background: transparent;
    border: 1px solid;
    border-radius: 4px;
    box-shadow: none;
    color: #f3f3f3;
    font-size: 16px;
    font-weight: 600;
    height: auto;
    line-height: 24px;
    min-height: 40px;
    position: static;
}

.ext-error{
    color: #ff7a00;
    text-align: left;
    margin-bottom: 5px;
}

.ext-input.ext-text-box::placeholder {
    color: #ffffff;
}

.ext-input.ext-text-box.ext-has-error {
    border-color: #ff7a00;
}

.ext-header {
    background-color: #2C3742;
}

.ext-boilerplate-text, .boilerplate-text {
    background-color: #2C3742;
    color: white;
    padding-top: 0px;
}

Akhilesh Vallamkonda 15,320 Reputation points Microsoft External Staff Moderator

2024-11-05T10:06:29.48+00:00
Hi @Harry Lu
could you please try using a more specific selector or adding !important as a last resort

Input Placeholder Styling:

input.ext-input::placeholder { color: #yourColor !important; /* Use !important as a last resort */ }

Identity Banner Styling:

.ext-header { background-color: #yourBackgroundColor !important; }

For Class Inconsistency on Reset Password Page use the developer tools to inspect the elements on the reset password page. Check if the classes are being applied correctly and if there are any other styles that might be overriding your CSS.
Harry Lu 10 Reputation points

2024-11-05T20:47:10.65+00:00

Hi @Akhilesh Vallamkonda

Thanks for the prompt response!

I've already tried adding !important to ensure the color isn't overridden, but it still seems to not be working. I inspected the page and confirmed that either

input.ext-input::placeholder`` { ``color``: ``#ffffff`` ``!important``; }

or

.ext-input::placeholder`` { ``color``: ``#ffffff`` ``!important``; }

was not applied. In the <head>, the custom CSS should be placed inside a <style> tag with id="customCssStyle" in the <head>, but this specific style doesn't seem to be added to this file, even though I've uploaded the CSS file in the Company Branding section.

For the identity banner, I have also tried adding !important to the .ext-header but it still seems the banner was not updated. And the banner element I inspected from the page is a div with the class identityBanner, wrapping a button with the class backButton and a div with the class identity and id displayName. I'm not sure if modifying the .ext-header class will apply the expected styling to the identity banner.

Additionally, on the reset password page, I noticed an issue with the class structure. Unlike other pages, the boilerplate-text div in the reset password page has the class wrap-content boilerplate-text, but in other pages, it includes an extra class, ext-boilerplate-text (i.e., wrap-content boilerplate-text ext-boilerplate-text). Without this ext-boilerplate-text class, it's challenging to apply custom styling, and this inconsistency occurs in the WOODGROVE demo as well. I’m unsure why the class is missing in this case, but it limits our ability to style the reset password page.

Any further insights would be greatly appreciated!

Thanks again,

Harry
Harry Lu 10 Reputation points

2024-11-05T20:53:55.44+00:00

~~remove as duplicate comment~~

1 answer

Your answer

Akhilesh Vallamkonda 15,320 Reputation points Microsoft External Staff Moderator

2024-11-04T14:30:14.3266667+00:00

Hi @Harry Lu

Thank you for reaching Microsoft Q&A Forum!

I understand you have encountered several styling challenges Input Placeholder Styling, Error Border Color, Identity Banner Styling, Class Inconsistency on Reset Password Page.

1.Input Placeholder Styling:

You can change the placeholder text color using the ::placeholder pseudo-element in your custom CSS:
.ext-input.ext-text-box::placeholder { color: #yourColorCode; }

2.Error Border Color:

To change the border color of the input field when there's an error, you can use the .ext-input.ext-text-box.ext-has-error class:
.ext-input.ext-text-box.ext-has-error { border-color: #yourErrorColorCode; }

3.Identity Banner Styling:

Modify the background color of the identity banner using the .ext-header class:

.ext-header { background-color: #yourBackgroundColorCode; }

4.Class Inconsistency on Reset Password Page:

If the reset password page uses different class names, you can target both classes in your CSS to ensure consistent styling:

.ext-boilerplate-text, .boilerplate-text { /* Your styling here */ }

These adjustments should help you align the sign-in experience with your branding.

Reference: https://learn.microsoft.com/en-us/entra/external-id/customers/concept-branding-customers
Hope this helps. Do let us know if you any further queries by responding in the comments section.

Thanks,

Akhilesh.

If this answers your query, do click Accept Answer and Yes for was this answer helpful. And, if you have any further query do let us know.
Akhilesh Vallamkonda 15,320 Reputation points Microsoft External Staff Moderator

2024-11-05T10:06:29.48+00:00

Hi @Harry Lu
could you please try using a more specific selector or adding !important as a last resort

Input Placeholder Styling:

input.ext-input::placeholder { color: #yourColor !important; /* Use !important as a last resort */ }

Identity Banner Styling:

.ext-header { background-color: #yourBackgroundColor !important; }

For Class Inconsistency on Reset Password Page use the developer tools to inspect the elements on the reset password page. Check if the classes are being applied correctly and if there are any other styles that might be overriding your CSS.
Harry Lu 10 Reputation points

2024-11-05T20:47:10.65+00:00

Hi @Akhilesh Vallamkonda

Thanks for the prompt response!

I've already tried adding !important to ensure the color isn't overridden, but it still seems to not be working. I inspected the page and confirmed that either

input.ext-input::placeholder`` { ``color``: ``#ffffff`` ``!important``; }

or

.ext-input::placeholder`` { ``color``: ``#ffffff`` ``!important``; }

was not applied. In the <head>, the custom CSS should be placed inside a <style> tag with id="customCssStyle" in the <head>, but this specific style doesn't seem to be added to this file, even though I've uploaded the CSS file in the Company Branding section.

For the identity banner, I have also tried adding !important to the .ext-header but it still seems the banner was not updated. And the banner element I inspected from the page is a div with the class identityBanner, wrapping a button with the class backButton and a div with the class identity and id displayName. I'm not sure if modifying the .ext-header class will apply the expected styling to the identity banner.

Additionally, on the reset password page, I noticed an issue with the class structure. Unlike other pages, the boilerplate-text div in the reset password page has the class wrap-content boilerplate-text, but in other pages, it includes an extra class, ext-boilerplate-text (i.e., wrap-content boilerplate-text ext-boilerplate-text). Without this ext-boilerplate-text class, it's challenging to apply custom styling, and this inconsistency occurs in the WOODGROVE demo as well. I’m unsure why the class is missing in this case, but it limits our ability to style the reset password page.

Any further insights would be greatly appreciated!

Thanks again,

Harry
Harry Lu 10 Reputation points

2024-11-05T20:53:55.44+00:00

~~remove as duplicate comment~~

Answer 1

Allan With Sørensen 5

Hi - I'm looking at this too. Did you ever get any of your issues resolved? I'm interested in both the placeholder and identitybanner, as I'm trying to implement a custom background color for the sign-in box, but then it sticks with a white background for the latter and blueish color for the input...

Thanks!

harry 0 Reputation points

2025-03-05T21:10:17.87+00:00

Hi Allan, unfortunately, we haven’t found a way to fully customize the placeholder and identity banner styling as we wanted. Due to these limitations, we’ve decided to stick with B2C custom policies for now.

Share via

Azure Entra External ID Custom CSS queries

1 answer

Your answer