Changing the look of FIM SSPR portals: an example style sheet for password reset portal

AMARSIGLIA

Microsoft

Nov 01, 2019

First published on MSDN on Jan 23, 2015

Introduction :

Chrome, shadows, and gradients are relics of the early 2000s. "Flat" design has made its way through all modern user interfaces, and typically organizations wish to use their own branding and color scheme to match other corporate websites. Luckily, there is an easy way to modify the FIM Portals to make them more beautiful and clean.

The below example style.css file alters the look and feel of the FIM Password Reset portals. For a walk-through guide see the Test Lab Guide for FIM Password Reset or reference the FIM 2010 R2 Portal Customization TechNet article. A useful trick to see what can be edited is to search core.css for "/* Customizable */".

Style.css Edits:


input[type=text]:focus, input[type=password]:focus 
{
    border: #8B0000 2px solid; /* Changes Cursor highlight color */
}
h2, h3 
{
    color: #8B0000 /* changes "Password Reset: text color" */
}
.title-block /* changes 2px line beneath banner image */
{
    border-bottom: 2px solid #8B0000
}
.title-block 
{
    background:url("../Customizations/contoso.png") no-repeat scroll 0 0 transparent; /* Changes banner image */
}
#container 
{
    background: repeat-x 100% 100% transparent /* Removes bottom gradient */
}
#wrapper 
{
    background: repeat-x 100% 100% white /* Removes top gradient */
}
body
{
    background-color: #E6E6E6 /* sets background to light gray */
    font-size: 16px;
}
body
{
    background-color: #E6E6E6 /* sets background to light gray */
}
.loginDescriptionText
{
    font-style: normal; /* uses normal font (not italics) */
    color: #B9B900 */darkens text */
}
@media only screen and (max-width: 480px)
{
  .title-block
  {
      background: url("../Customizations/contoso_phone.png") no-repeat scroll 0 0 transparent;
  }
}