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;
}
}
|
Results:
And the old version for comparison:
Download article