Installing Custom Theme for ADFS 3.0 logon page
Place your custom elements
- Unzip your theme package. Copy the package to your ADFS sever system and place it on any drive/folder as you wish.
- Explore the package and go to “images\custom”. This is the place where all custom images stay.
- Replace the logo with your own by replacing the logo.png file. The height of the Logo shouldn’t exceed 80 px. The logo file should not exceed the file size of 10 KB. Otherwise you will end up with error during your installation.
- You can place your own fav icon by replacing favicon.ico file. The dimension of favicon should be 16*16 px.
- Replace your own background by overwriting background.jpg file. The best dimension is 1920 * 1020 px. However you can place the image on any size, but just make your own assessment. The file size of background image should not exceed 200 KB.
- Open the file “\script\onload.js” in a text editor and change the value of Title, LoginTitle and Footertext to yours. The variable Title is the one appears on the browser bar as page title. LoginTitle is the variable holds the value of Login Header text. Footertext is the one you see at bottom of the page. Ref: Image below.
- Right click on the “BCthemeCommands.ps1” file and click Run as Administrator.
- Wait for few seconds and you will be done then.
- The powershell window opens and closes automatically upon the installation.
- Now check your ADFS logon page in your browser.
Important Notes and troubleshoot tips
- The logo file shouldn’t exceed the file size of 10 KB. Please optimize the image accordingly.
- The background image shouldn’t exceed the file size of 200 KB.
- You will end up with errors during the installation if the images sizes crosses the limits specified above.
- If you want to set back the ADFS default theme then open your powershell (open as administrator) and write this command.
Set-AdfsWebConfig -ActiveThemeName “default”
- If you want to remove a custom theme then write this command in powershell. Replace “ThemeName” with your custom theme name, ex: “Bluecorp”.
Remove-AdfsWebTheme -TargetName “ThemeName“