This project provides an ADFS style sheet to allow your ADFS UI to be consistent with the new Azure AD Centered UI experience. It is a fork of the Centered UI project found on Microsoft's AD FS customisations GitHub repository.
Note that this customization comes in two parts. The first is a style sheet, which allows the look-and-feel of your ADFS to match the AAD Centered UI experience. The second is a more advanced customization, using the ADFS JavaScript customization feature to create a front-end paginated sign-in experience.
The following features have been added:
- Integration with Gravatar to render user-specific icons on the 2nd authentication page.
- Showing the Bing image of the day, with image copyright. Based on the excellent work done by Arjan Mensch.
The following things have been changed:
- Stylesheet tweaks to match the experience on Azure AD (e.g. background fade-in)
- Minor tweaks to the Javascript (e.g. language lookup based on the document)
We will break the deployment of this feature into three parts. First, the style sheet to create a consistent look-and-feel. Second, the JavaScript to create a front-end paginated experience. Third, deployment of the Powershell script necessary to change the background image on a daily basis.
-
Download the
ThemeCenterBrand.cssfile to your ADFS server, wherever you host your style sheets. Note: It is recommended that you minify your CSS for a production environment -
Create a custom web theme using the following command in PowerShell:
New-AdfsWebTheme –Name custom -SourceTheme default –StyleSheet @{path=”c:\style\ThemeCenterBrand.css”} -
Apply the new custom web theme using the following command in PowerShell:
Set-AdfsWebConfig -ActiveThemeName custom -
Update the logo and background image. For details and image size recommendations, see this post
-
Download the
paginatedOnload.jsfile to your ADFS server, wherever you host your JavaScript.Note: It is highly recommended that you minify your
paginatedOnload.jsbefore including it in a production environment. There are many popular tools online for minifying JavaScript code. Two popular choices are minifier.org and JSCompress. -
Modify your existing custom web theme from the style sheet deployment to include the new JavaScript. In PowerShell:
Set-AdfsWebTheme –TargetName custom -AdditionalFileResource @{Uri=’/adfs/portal/script/onload.js’; path="c:\paginatedOnload.js"} -
Apply the modified custom web theme using the following command in PowerShell:
Set-AdfsWebConfig -ActiveThemeName custom -
For more information on JavaScript customization, see Advanced ADFS Customization
Follow the steps on Arjan Mensch's weblog to have the ADFS background image updated on a daily basis. Make sure to use the Set-AdfsThemeIllustration.ps1 script from this repository instead of the one from Arjan's weblog.
The JavaScript we provide out-of-the-box does not provide two key features you may want.
- The JavaScript works for deployments in most major languages. However, if you wish to have your pages work under other languages, you will need to follow the steps below in
Supporting Non-English Languages
In order to support non-English languages, you will need to add translated text for the new UI items that are created by the JavaScript.
In the code, you should locate the translation table in the function GetLocalizedStringForElement. You should add translations for the text in the translation table.
Each translation should be mapped to the correct language code. For a reference on language codes, see the ISO 639-1 Code column in the table at this resource.
If you find any problems with the CSS, JavaScript, or docs, please fork and send us your fix. If you don't have a fix, please open an issue, and describe what you are seeing (feel free to include screenshots).
For the full Contributing details, please see the root README.