How to customise ADFS on Server 2012 R2 to look like the Azure AD Experience (ADFS 3.0)

Jump to:

Last week, after almost 12 years of using the old logo and branding, we have undergone a full rebrand at Hallam Medical. Being an active part of the rebrand process was a great experience and it was a lot of fun working with the Marketing Team and the Web Developer, especially trying to keep things under wraps in an open plan office!

One of the things that IT were tasked with was to update the logos on all of the services that we use. Simple task to be honest, except that we underestimated the amount of areas and formats that the logo existed in. Off the top of my head, there was the Service Desk, Mailchimp, Office 365, Sharepoint, Geckoboard, Email signatures, Echosign…

Updating Branding in Azure Active Directory

Azure was pretty straight forward, Just log onto the Azure Portal and go to Azure Active Directory > Company Branding. We only needed 3 different versions:

  • Banner Logo, 280x60px, 10KB Max Size, Transparent PNG Preferable
  • Square Logo (light theme), 240x240px, 10KB Max Size, Transparent PNG Preferable
  • Square Logo (dark theme), 240x240px, 10KB Max Size, Transparent PNG Preferable
Setting the logos for Azure AD

Once changed, don’t forget to hit Save at the top of the page.

Updating ADFS to look like the Azure AD Experience

In the back end of 2017, Microsoft changed the way the users experienced the login interface of Office 365 and Azure to a more centered and consistent way. Initially this was a bit of a shock to users as it broke a few things and I thought that there was no real reasoning to this update until I read the post a few months later on the Microsoft Blog.

Image result for azure ad sign in
The old ADFS sign in experience

Fast forward to now, in the progress of updating the logo on our ADFS servers and I thought to myself, surely there is a newer template that mimics the new sign in experience? Luckily there is!

All you need are two files that Microsoft have kindly published onto their GitHub repository – https://github.com/Microsoft/adfsWebCustomization/tree/master/centeredUi. Simply swing by to the repository and download the stylesheet, ThemeCenterBrand.css and the JavaScript file, paginatedOnload.js

Save these two files along with your company logo and a background image to your ADFS server in some place such as “C:\ADFS\CenteredUI”

Now that you have the files saved, we can start to customise your ADFS sign in page.

  1. First we will make a new template so that we can revert back if needed and end users won’t see us tinkering until we switch to the new view.
  2. Set the Stylesheet and Javascript File
  3. Update the new logo to the template (24x256px Transparent PNG)
  4. Add a background image to the template
  5. Tell ADFS to start using the new theme

The Code

Log onto the ADFS Server and fire up an administrative powershell window perform the following commands

#Create new theme called "CenteredUI" and set stylesheet
New-AdfsWebTheme -Name CenteredUI -SourceName default -StyleSheet @{path="C:\ADFS\CenteredUI\ThemeCenterBrand.css"}
#Add javascript file as additional resource
Set-AdfsWebTheme -TargetName CenteredUI -AdditionalFileResource @{Uri="/adfs/portal/script/onload.js"; path="C:\ADFS\CenteredUI\paginatedOnload.js"}
#Set the new logo
Set-AdfsWebTheme -TargetName CenteredUI -Logo @{Path="C:\ADFS\CenteredUI\NewLogo.png"}
#Set the new background image
Set-AdfsWebTheme -TargetName CenteredUI -Illustration @{Path="C:\ADFS\CenteredUI\NewBackground.jpg"}
#Activate the theme
Set-AdfsWebConfig -ActiveThemeName CenteredUI

If you have SSO set up you might find it difficult to see the new theme working, as the signing and redirect are pretty snappy.

To see the theme, go to https://your.ADFSserver.com/adfs/ls/idpinitiatedsignon.aspx

Our new sign in page with updated branding!

Leave a Reply

Your e-mail address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.