Introduction to Configuring and Customizing the FIM Portal

Applies To: Forefront Identity Manager 2010

You can easily customize and configure the layout and design of the Microsoft® Forefront® Identity Manager (FIM) 2010 Portal to better match your particular work environment. By customizing configuration resources in the FIM Portal, you can:

• Change the wording and logo on the banner.

• Add, modify, or delete items on the navigation bar.

• Add, modify, or delete items on the home page.

• Add, modify, or delete search scopes for both default and custom resources.

• Create or modify the Resource Control Display Configuration (RCDC) for a resource to customize how the resource and its properties are displayed in the FIM Portal.

You can change the theme and style of the FIM Portal by taking advantage of the existing Windows SharePoint® Services functionality.

What This Document Covers

This document shows you how to:

• Modify the banner layout.

• Add an item to the navigation bar.

• Add an item to the home page.

• Create a new search scope.

• Grant users permissions to view certain user interface (UI) configurations

• Customize the FIM Portal theme and style by modifying the associated cascading style sheet.

• Modify the XML configuration of an existing RCDC.

• Create a new RCDC for a custom resource.

For an overview of FIM 2010 documentation and guidance for using it, see the Documentation Roadmap.

Prerequisite Knowledge

This document assumes that you have a basic understanding of, and some experience with, the following:

• The FIM Portal

• Theme selection in SharePoint’s Site Settings

• HTML or cascading style sheet basics

• XML document structure, if you are editing an RCDC or a cascading style sheet.

• FIM schema structure. For more information, see Introduction to Custom Resource and Attribute Management in the FIM documentation.

Audience

This document is intended for information technology (IT) planners, systems administrators, technology decision-makers, consultants, infrastructure planners, and IT personnel.

Time Requirements

The procedures in this document take about three hours to complete.

Scenario Description

Fabrikam, a fictitious corporation, wants to:

• Customize the FIM Portal to display the company name on the banner.

• Add a custom resource, Computer, to the navigation bar, homepage, and search scope.

• Enable a certain set of users to see the new UI to manage Computer resources.

• Create a new RCDC to display details of a Computer resource in FIM Portal.

• Modify the user detail page to include a link to Computer resources.

• Customize the Sharepoint theme to match their internal Web sites.

Testing Environment

To perform the procedures in this document, your environment must have the following characteristics:

• A server that is a member of the Fabrikam forest and that hosts the FIM 2010 server components. For more information, see the Installation Guide in the FIM documentation.

• A custom resource type named Computer, with at least two instances created. The Computer resource type should have the following attributes bound to it:

  • OperatingSystem

    • System Name: OperatingSystem

    • Display Name: Operating System

    • Data type: String

  • Memory

    • System Name: Memory

    • Display Name: Memory

    • Data type: String

  • Processor

    • System Name: Processor

    • Display Name: Processor

    • Data type: String

  For more information about creating a custom resource, see Introduction to Custom Resource and Attribute Management in the FIM documentation.

• Access to an HTML editor or a text editor, such as Notepad.

Modify the Banner

The FIM Portal banner contains the text and graphics that appear at the top of every page in the FIM Portal. In this procedure, you modify the text and, optionally, the graphics of the banner.

To modify the banner

1. Log on to the FIM Portal as Administrator.

2. On the navigation bar, click Administration.

3. On the Administration page, click Portal Configuration.

4. On the Extended Attributes tab, in Branding Center Text, type Fabrikam Identity Management Portal.

5. Optionally, to change the image on the right side of the banner, in Branding Right Image, replace the default URL ~/_layouts/images/MSILM2/banner.png with a different image, ~/_layouts/images/MSILM2/newevent.png.

   To use a custom image, copy the image to the following folder on each server running Windows SharePoint Services that is hosting the FIM Portal:

   %programfiles%\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\IMAGES\MSILM2

   You can also create subfolders of the MSILM2 folder to place custom images and still reference them by using the relative link, for example, ~/_layouts/images/MSILM2/Custom/yourCompanyLogo.gif.

6. Click OK, and then click Submit.

7. Click Start, click Run, and then type iisreset.

8. Click OK, and then, to refresh the page, press F5.

Modify the Banner in the Password Portal

If you have modified the banner in the FIM Portal banner and are installing the Password Portal in an environment where the users are not authenticated, the modifications will not be visible in the Password Portal to the user. In this scenario, you can ensure the banner modifications will visible by modifying the web.config file for the Sharepoint portal where FIM is installed.

To modify the banner in the Password Portal

1. Open the web.config file for editing. By default, this is located in c:\inetpub\wwwroot\wss\VirtualDirectories\80.

2. In the appSettings section, modify the following values:

   • <add key ="PasswordPortalBrandingBarRightImageUrl" value ="~/_layouts/images/MSILM2/banner.png"/>

   • <add key ="PasswordPortalBrandingBarCenterText" value =""/>

   • <add key ="PasswordPortalBrandingBarLeftImageUrl" value ="~/_layouts/images/MSILM2/logo.png"/>

3. Save the web.config file, click Start, click Run, and then type iisreset.

Add an Item to the Navigation Bar

The navigation bar is the vertical menu on the left side of the FIM Portal. In this procedure, you add an item to the navigation bar named Computers that displays all the computer resources in the system.

To add an item to the navigation bar

1. From the home page, under Administration, click All Resources.

2. In the list of resources, click Computer.

3. On the Computer page, copy the full URL.

   This is the target of the new navigation bar item.

4. Click Home, and then under Administration, click Navigation Bar Resources.

   Note that each item in the navigation bar has a corresponding navigation bar resource.

5. Click New. In Display Name, type Computers.

6. In Usage Keyword, type BasicUI.

7. Click Next.

8. In Parent Order, type 100, and in Order, type 0.

   Note

   The high number of the Parent Order ensures that it appears at the bottom of the navigation bar, and the Order number of 0 specifies that it is a parent item. You should use a larger number when appending items to the bottom of the list so that it leaves room for future navigation bar items to be inserted between the existing items. If you change the Parent Order to be 1 and Order to be 100, you will see this navigation bar resource show up as the last item under Distribution Groups (DGs) parent node.

9. Click Next.

10. In Navigation URL, paste the URL that you copied from the Computer resource page, for example, ~/identitymanagement/aspx/customized/CustomizedObjects.aspx?type=Computer&display=Computer.

    Important

    Unless the Navigation URL is unique among all navigation bar resources and is expressed as a relative path, the navigation bar resource is not shown.

11. Click Finish, and then click Submit.

12. Click Start, click Run, and then type iisreset.

13. Click OK.

14. To refresh the page, press F5.

Verify that the new navigation bar item, Computers, appears directly beneath Administration.

Add an Item to the Home Page

In this procedure, you add a new Home page item called Computers on the Home Page.

To add a new item to the home page

1. From the home page, click Computers in the navigation bar.

2. Copy the URL of the Computers page.

3. From the home page, under Administration, click Home Page Resources.

4. Click New.

5. In Display Name, type All Computers.

6. In Usage Keyword, type BasicUI.

7. Click Next.

8. In Region, select Right region of home page and Administration page.

9. In Parent Order, type 1.

10. In Order, type 99.

    This adds the All Computers link to the Administration section and ensures that it appears at the bottom of the list.

11. Click Next.

12. In Navigation URL, paste the URL of the Computers page that you copied in step 2.

    Note

    The URL can be expressed as a relative or absolute path, for example, ~/IdentityManagement/aspx/customized/CustomizedObjects.aspx?type=Computer&display=Computer or https://www.microsoft.com/fim.

13. Click Finish, and then click Submit.

14. Click Start, click Run, and then type iisreset.

15. Click OK, and then click Home.

The All Computers item now appears in the Requests section of the home page.

Creating a Search Scope

A search scope is a customizable resource in FIM 2010 that determines what resources are displayed in the list view of a Portal page and appears in the Search within: list box on FIM Portal pages.

In the following procedure, you create a search scope to make All Computers available when you select group members.

To create a search scope

1. From the home page, under Administration, click Search Scopes.

2. On the Search Scope page, click New.

3. In Display Name, type All Computers.

4. In Usage Keywords, type Security.

   This specifies that this search scope should appear in the group selection page for Security Groups.

5. In Order, type 99.

   Note

   Setting the Order to 99 ensures that All Computers appears at the bottom of the drop-down list and leaves enough room for future search scopes to be added in between the existing search scopes.

6. Click Next.

7. In Attribute Searched, type DisplayName.

   Important

   If an invalid attribute name is specified in Attribute Searched, the search scope cannot be displayed.

8. In Search Scope Filter, type /Computer.

9. Click Next.

   This XPath returns all computer resources. The search scope filter takes an XPath expression that is supported by FIM.

10. In Resource Type, select Computer.

11. In Attribute, type DisplayName.

12. Click Finish, and then click Submit.

To verify the search scope

1. Click Start, click Run, and then type iisreset.

2. Click OK.

3. Press F5 to refresh the page.

4. In the navigation bar, click Security Groups (SGs).

5. Click New.

6. In Display Name, type Search Group.

7. In Account Name, type SearchGroup.

8. Then, click Next.

9. From the Search within list, select All Computers, and then click the Search icon.

You will now be able to see all the computer resources in FIM.

Grant Permissions to a certain Set of Users to Different UI Configuration Resources

In the previous procedures, you created various FIM UI configuration resources. In this part, you see how to allow users who are not members of Administrators Set to see them.

To use Keywords to make security groups visible to nonadministrators

1. Log on to the FIM Portal as Administrator.

2. Under Administration, click Navigation Bar Resources.

3. Click Security Groups (SGs).

4. In Usage Keywords, type BasicUI.

5. Click OK, and then click Submit.

To use Keywords with Sets and MPRs that control permissions

1. Log on to the FIM Portal as Administrator.

2. Under Administration, click Navigation Bar Resources.

3. Click Computers.

4. In Usage Keyword, type AllComputers.

5. Click OK, and then click Submit.

6. Repeat steps 2 through 5 for the Homepage Resource and Search Scope that you have created in previous sections.

7. On the home page, in the navigation bar, under Management Policy Rules, click Sets.

8. Click New.

9. In Display name, type Computer UI.

10. Click Next.

11. Ensure that Enable criteria-based membership in current set is selected.

12. Click All resources, and then select navigation bar resource.

13. Click Add Statement, click Click to select attribute, and then select Usage Keyword.

14. Ensure that contains is displayed.

15. Click Click to select value, and then type AllComputers.

16. Click View Members.

17. Verify that Computers is displayed in the list, click Finish, and then click Submit.

18. In the Sets page, click New.

19. In Display Name, type Computer Administrators.

20. Click Next.

21. Ensure that Enable criteria-based membership in current set is not selected, and then click Next.

22. In Members to add, click the Browse icon, select the users you want to add to the Set, and then click OK.

    Note

    You can also add any other resource type to the Set, not just users.

23. Click Finish, and then click Submit.

24. In the navigation bar, click Management Policy Rules.

25. Click New.

26. In Display name, type Computer Administrators can read Security Groups.

27. In Type, ensure that Request is selected, and then click Next.

28. In Requestors, select Specific Set of Requestors, click the Browse icon, and then select Computer Administrators.

29. In Operation, click Read resource.

30. Click Grants permission, and then click Next.

31. In Target Resource Definition Before Request, click the Browse icon, and then click All Security Groups.

32. In Resource Attributes, ensure that All Attributes is selected.

33. Click Finish, and then click Submit.

34. On the Management Policy Rules page, click New.

35. In Display name, type Computer Administrators can read Computer UI.

36. In Type, ensure that Request is selected, and then click Next.

37. In Requestors, select Specific Set of Requestors, click the Browse icon, and then select Computer Administrators.

38. In Operation, click Read resource.

39. Click Grants permission, and then click Next.

40. In Target Resource Definition Before Request, click the Browse icon, and then click Computer UI.

41. In Resource Attributes, ensure that All Attributes is selected.

42. Click Finish, and then click Submit.

To verify the scenario

1. Run iisreset to refresh the FIM Portal cache.

2. Log on as one of the users that you added to Computer Administrators.

3. Verify that you can see the Computer entry at the bottom of the navigation bar on the left side of the screen, the Computer entry in the Homepage, and the search scope on the Security Groups page.

Creating a New RCDC

FIM 2010 provides RCDCs for the default resource types in the FIM Service database. When you create a custom resource type, FIM does not have any RCDCs for the new resource type; instead, the resources of that type use a generic RCDC. Therefore, if you create a custom resource type for your organization, you may want to create new RCDCs to customize how the resources of that type are created, edited, and displayed. If you want to add custom attribute types for an existing resource type, before modifying the RCDC, you must create and bind the new attributes to the resource type by using Schema Management. In this procedure, you create a new RCDC for the Computer resource type.

To create a new RCDC to manage Computer resources

1. Log on to the FIM Portal as Administrator.

2. On the FIM 2010 home page, under Administration, click Resource Control Display Configurations.

3. On the Resource Control Display Configuration page, click New.

4. In Display name, type Configuration for Computer

5. In Target Resource Type, select Computer.

6. In Configuration Data, click Download default create mode template.

7. Click Save, and save the file as Create_Computer.xml, then click Close.

   Note

   To easily revert back to the original configuration after making the following changes, you should make a backup copy of this file, for example Create_Computer_backup.xml.

8. By using an XML editor, open Create_Computer.xml.

9. To stop the Creator field from being displayed in the Create Computer page, highlight and delete the following code segment:

   <my:Control my:Name="Creator" my:TypeName="UocIdentityPicker" my:Caption="{Binding Source=schema, Path=Creator.DisplayName}" my:Description="{Binding Source=schema, Path=Creator.Description}" my:RightsLevel="{Binding Source=rights, Path=Creator}">
        <my:Properties>
             <my:Property my:Name="Required" my:Value="{Binding Source=schema, Path=Creator.Required}" />
             <my:Property my:Name="ColumnsToDisplay" my:Value="DisplayName, ObjectType" />
             <my:Property my:Name="AttributesToSearch" my:Value="DisplayName" />
             <my:Property my:Name="Value" my:Value="{Binding Source=object, Path=Creator, Mode=TwoWay}" />
             <my:Property my:Name="UsageKeywords" my:Value="Global,customized" />
             <my:Property my:Name="ListViewTitle" my:Value="Select an Object" />
             <my:Property my:Name="Hint" my:Value="{Binding Source=schema, Path=Creator.Hint}" />
        </my:Properties>
   </my:Control>
   

   Note

   Be careful to delete only the content between the <my:Control> and </my:Control> tags, inclusive.

10. Repeat this step to remove the following controls:

    • Detected Rules List

    • Expected Rules List

    • Expiration Time

    • Locale

    • MV Resource ID

    • Resource Time

    • Resource Type

11. Save Create_Computer.xml.

12. In Configuration Data, click Browse, and select the Create_Computer.xml file from the previous step.

    Note

    In this release, if the system name of the attribute that is bound to the resource type contains characters that are not ASCII letters or digits, such as hyphens or underscores, you must manually remove all of these characters from the control name before uploading the new XML file. Configuration Data is automatically generated, and it uses the same attribute name as the RCDC control name. The control name, however, supports only ASCII letters and digits. Importing these default files without first removing any non-letter or digit character from all control names causes a display error in Resource Control.

13. Select Applies to Create, Applies to Edit, and Applies to View. This applies the configuration to create, edit, and view modes in one step. You can create an RCDC for each mode. However, you cannot have multiple RCDCs that all apply to the same mode. Click Next.

14. On the Localization tab, in Language, select Neutral.

15. Click Finish, and then click Submit.

16. Click Start, click Run, type iisreset, and then click OK to refresh the FIM Portal cache.

17. To view the new configuration for the Computer resource type, on the FIM home page, under Administration click All Resources, click Computers, and then click New.

Modify RCDC Configuration Data

For this scenario, you modify the default Configuration for User Creation to display an input box that will allow the user to specify the Computer resources in the FIM Service database that are related to this user.

To modify the configuration for user creation

1. Log on to the FIM Portal as Administrator.

2. On the FIM home page, under Administration, click Resource Control Display Configurations.

3. On the Resource Control Display Configuration page, click Configuration for User Creation.

4. On the Configuration for User Creation page, click Export configuration, and then save the file as Create_User_backup.xml. Minimize the FIM Portal.

5. Copy the Create_User_backup.xml configuration file, and then save it as Create_User_New.xml.

6. Open the Create_User_New.xml configuration file, and make the following changes:

   • To add a new Control named Computers, locate the following XML segment:

     <my:Control my:Name="CostCenterName" my:TypeName="UocTextBox" my:Caption="{Binding Source=schema, Path=CostCenterName.DisplayName}" my:Description="">
          <my:Properties>
               <my:Property my:Name="Required" my:Value="{Binding Source=schema, Path=CostCenterName.Required}"/>
               <my:Property my:Name="Columns" my:Value="34"/>
               <my:Property my:Name="MaxLength" my:Value="128"/>
               <my:Property my:Name="Text" my:Value="{Binding Source=object, Path=CostCenterName, Mode=TwoWay}"/>
          </my:Properties>
     </my:Control>
     

     After the previous segment, insert the following XML segment:

     <my:Control my:Name="Computers" my:TypeName="UocIdentityPicker" my:Caption="%SYMBOL_ComputersCaption_END%" my:Description="%SYMBOL_ComputersDescription_END%" my:RightsLevel="{Binding Source=rights, Path=Computers}">
          <my:Properties>
               <my:Property my:Name="ColumnsToDisplay" my:Value="DisplayName,ObjectType "/>
               <my:Property my:Name="Mode" my:Value="MultipleResult"/>
               <my:Property my:Name="Rows" my:Value="10"/>
               <my:Property my:Name="ObjectTypes" my:Value="Computer"/>
               <my:Property my:Name="ColumnsToDisplay" my:Value="DisplayName "/>
               <my:Property my:Name="AttributesToSearch" my:Value="DisplayName "/>
               <my:Property my:Name="Value" my:Value="{Binding Source=object, Path=Computers, Mode=TwoWay}"/>
               <my:Property my:Name="UsageKeywords" my:Value="AllComputers"/>
               <my:Property my:Name="ResultObjectType" my:Value="Computer"/>
                              </my:Properties>
     </my:Control>
     

   • Save the configuration file. You have just added an Identity Picker control for the user to input multiple Computer resources.

7. Restore the FIM Portal, and in Configuration Data, click Browse.

8. Select the Create_User_New.xml configuration file that you just modified, and then click Open.

9. Click OK, and then click Submit.

10. Click Start, click Run, type iisreset, and then click OK.

To ensure that the new Computers attribute can also be edited and viewed, you must also complete the previous steps to modify the Configuration for User Editing and the Configuration for User Viewing.

To verify the configuration changes

1. From the FIM 2010 home page, click Users.

2. Click New, and then verify that the following modification appears:

   • A new Identity Picker control named Computers has been added.

3. Fill in the Computers and Display Name fields, click Finish, and then click Submit.

Adding New RCDC String Resources

String Resources are dynamic text that can appear in an RCDC based on the user’s locale preference.

To define a symbol variable in RCDC Configuration Data

1. In the previous example, we have already created the symbol variables %SYMBOL_ComputersCaption_END% and %SYMBOL_ComputersDescription_END%.

   <my:Control my:Name="Computers" my:TypeName="UocIdentityPicker" my:Caption="%SYMBOL_ComputersCaption_END%"my:Description="%SYMBOL_ComputersDescription_END%" my:RightsLevel="{Binding Source=rights, Path=Computers}">
        <my:Properties>
             <my:Property my:Name="ColumnsToDisplay" my:Value="DisplayName,ObjectType "/>
             <my:Property my:Name="Mode" my:Value="MultipleResult"/>
             <my:Property my:Name="Rows" my:Value="10"/>
             <my:Property my:Name="ObjectTypes" my:Value="Computer"/>
             <my:Property my:Name="ColumnsToDisplay" my:Value="DisplayName "/>
             <my:Property my:Name="AttributesToSearch" my:Value="DisplayName "/>
             <my:Property my:Name="Value" my:Value="{Binding Source=object, Path=Computers, Mode=TwoWay}"/>
             <my:Property my:Name="UsageKeywords" my:Value="AllComputers"/>
             <my:Property my:Name="ResultObjectType" my:Value="Computer"/>
                            </my:Properties>
   </my:Control>
   

To define String Resources

1. On the Resource Control Display Configuration page, click Configuration for User Editing.

2. Click the Localization tab.

3. On this tab, in the Language control, select the locale in which you want modify the label. For this example, select English.

   Note

   During the creation of a new RCDC or when you upload the first String Resource file for the first locale, you must make sure that a Neutral String Resource file is defined. You can do this by choosing Neutral in the Language box and uploading a String Resource file that you want to be your default file if the end user locale is not supported. If you do not supply a Neutral String Resource file, the String Resource files appear to not be accessible in subsequent editing. If this happens, you can upload a file for the Neutral locale. This restores your ability to retrieve all String Resource files in different non-Neutral locales.

4. Click Click here to view the value of this attribute.

5. Click Save to save the file, ensuring that the extension is .xml. Save it as StringResource_backup.xml.

   Note

   After clicking the hyperlink, you may see an Internet Explorer window open with the XML content. In that case, you must copy and paste the content in Notepad or another XML Editor. Remove the starting hyphen (-) at the beginning of the file and save it as your_file_name.xml.

6. Copy StringResource_backup.xml as StringResource_New.xml.

7. Open StringResource_New.xml, and then insert the following line anywhere between the <SymbolResourcePairs> and </SymbolResourcePairs> tags.

   <SymbolResourcePair Symbol="ComputersCaption" ResourceString="Computers" />
   <SymbolResourcePair Symbol="ComputersDescription" ResourceString="Computers that belong to this user." />
   

8. Save the file.

9. Restore the FIM Portal. Click Browse beside the Upload control for String Resource attribute. Select the StringResource_New.xml file to upload.

10. Click OK, and then on the Summary page, click Submit.

FIM Portal Visual Theme Customization

This section describes how you can modify your installation of FIM 2010 to display your own customization by creating a new SharePoint Theme. The look and feel of SharePoint themes are defined by cascading style sheet files, which you can modify in any cascading style sheet editing tool, such as Notepad or Visual Studio.

For information about configuring Windows SharePoint Services, see Windows SharePoint Services (https://go.microsoft.com/fwlink/?LinkId=88899).

What part of the user interface do you want to change?

Simple changes can include adding your logo or team name to display at the top of each FIM Portal page. More advanced changes can include changing the colors of background and the text on the screen as well as modifications to the layout and spacing of elements on the screen.

Changing the colors, details and style of the user interface

The UI theme includes specifications for all the colors in the FIM Portal UI, such as colors for backgrounds, border lines, and UI text. The theme is determined by a cascading style sheet. The cascading style sheet also determines certain aspects of the layout and the spacing of UI elements, such as margins. In the following procedures, you modify various background colors, font colors and sizes, and margin layouts.

User Interface Themes

Windows SharePoint Services includes several themes of its own, and FIM 2010 includes its own unique theme in the SharePoint themes list.

To select a UI theme by using the SharePoint controls

1. In the FIM Portal UI, select Site Actions, and then click Site Settings.

2. In the Site Settings page, locate and click Site Theme.

3. In the Site Theme page, in the list of SharePoint themes, click a theme.

Copying the FIM theme to edit as your new theme

First, copy the existing FIM theme files, rename this new theme, edit and customize the new theme, and then add it into the selectable themes list in the SharePoint control panel. You must perform the following procedures on the server where the FIM Portal and Windows SharePoint Services are installed.

To locate the FIM theme files

1. The default path for the existing FIM theme folder and files is as follows:

   C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES

2. In the THEMES folder, locate the FIM folder. This contains the files for the FIM theme.

To copy and rename the FIM theme folder

1. Make a copy of the FIM folder that you located in the previous step.

2. Rename the copied folder by using letters and numbers, but do not use spaces. You may include the hyphen or underscore characters, for example, FIM_CUSTOM-1.

To rename and edit the FIM.inf file

1. Inside the new folder that you copied and renamed, locate the FIM.inf file.

2. Rename this .inf file with the same name as the copied folder, but keep the .inf extension, for example, FIM-CUSTOM-1.inf.

3. Open the renamed .inf file by using a text editor, such as Notepad. Change the titles that are indicated in the file to match the new theme name.

   Note

   The entries in the [titles] section specify the code pages and the translated name of the theme for each supported language. Save the file with the .inf extension intact.

To add your new theme to the list of themes in the SharePoint control panel

1. Locate the SPThemes.xml file. The default path is as follows:

   C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\

2. Open the SPThemes.xml file in an XML editor or a text editor. Add a <Template> element for the new theme as it exists in the file for the current themes. A <Template> element includes the following:

       - <Templates>
       <TemplateID>YourThemeFolderName</TemplateID> 
       <DisplayName>Your Theme’s Name</DisplayName> 
       <Description>This is our team’s custom Identity Portal theme</Description> 
       <Thumbnail>../images/sample.png</Thumbnail> 
        <Preview>../images/sample.gif</Preview> 
        </Templates>
   

3. Edit each line of the <Template> element specifically for your new theme:

   • <TemplateID>: the exact name of your theme’s folder.

   • <DisplayName>: a name for the theme that appears in the SharePoint control panel list of themes. It may include spaces.

   • <Description>: an optional, longer description that you can include that appears in the SharePoint control panel adjacent to the list when your theme is selected.

   • <Thumbnail>: a small graphic file that is displayed in controls for selecting your theme.

   • <Preview>: a graphic file that you indicate to be displayed in the SharePoint control panel adjacent to the theme list when your theme is selected. This is commonly a screenshot showing what the applied theme looks like.

   For both the <Thumbnail> and <Preview> graphics files, you also must upload each file into the SharePoint Images folder and include the relative path and filename of each, as shown in the previous example. The default location of the Images folder is as follows:

   C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGE All Computers S

4. Save the SPThemes.xml file with your edits in place.

Later, after you edit the details in your theme file, you can select it from the SharePoint themes control panel list to see the changes that are applied in the FIM Portal UI.

Modifying your new theme

After you have copied the FIM theme and you have your new files ready from completing the previous procedure, you can begin to make the modifications to create your new UI theme.

Change a background color

To demonstrate editing the cascading style sheet file to modify a theme, complete the task of changing the background color of the navigation bar.

The navigation bar is the common navigation control that appears on all main browser window pages in the FIM Portal. It is located on the left side of the portal window, and it contains the main navigation links.

To edit the background color of the navigation bar resource

1. Open the .css file inside the theme folder that you copied and renamed.

   Note

   You can open the .css file by using a basic text editor, such as Notepad. Be careful to leave the file’s .css file name extension intact when you save your changes.

2. In the .css file, locate .ms-nav.

3. Note the attributes that are included with the .ms-nav tag:

   .ms-nav td,.ms-nav .ms-SPZoneLabel
   {
   font-size: 8pt;
   background-color: #EAF3FF;
   }
   

   The second attribute, background-color, is where the background color is indicated. The value that is specified is an HTML hexadecimal number for a color. You can edit this value to change the color that appears.

4. Edit the color value. You can type a new value into a simple text editor. For example, #DDDDDD produces a light gray color in place of the previous color.

   If you are using an HTML editor, you may be able to select the color visually by using the color palette that applies the appropriate hexadecimal value.

   Important

   Ensure that the # character remains at the beginning of the value, and that the ; character remains at the end of the label-value line.

5. Save the file with the edited color value.

How to view your changes in the UI

After saving your changes to the cascading style sheet file, open the portal, click Site Actions, click Site Settings, click Site themes, and then select your new theme in the list. Go back to the FIM Portal UI to see the new theme. You may have to refresh your browser to see the theme immediately.

Change text colors, font face, and size

Example task: Change the navigation bar resource text link colors.

To edit the text color inside the navigation bar resource

1. Open the .css file inside the theme folder that you copied and renamed.

2. In the .css file, locate both of the following tags: .ms-navheader a and .ms-navItem a.

3. Note the attributes that are included with each tag:

   .ms-navheader a,.ms-navheader2 a
   {
   font-weight: bold;
   color: #336baf /* navigation bar parent color */
   text-decoration: none;
   }
   .ms-navItem a
   {
   color: #336baf /* navigation bar child color */
   text-decoration: none;
   }
   

   The first tag is the tag for the header of each grouping in the navigation bar (Home, Distribution Groups, and Users in the previous illustration). The second tag is for the items under each header.

4. Edit the color values the same way that you did in step 4 of the previous task. You can use a dark gray color, such as #333333.

   Important

   Ensure that the # character remains at the beginning of the value and that the ; character remains at the end of the label-value line.

5. Save the file with the edited color values.

Light-to-dark gradients and shadow effects

As you change background colors in the theme, you may also need to change a shadow effect that appears on that color. The provided FIM theme has a shadow effect appearing below the branding bar. Shadow effects are rendered by a specific graphics file that is referenced in the cascading style sheet file.

To achieve the visual effect that you want in your theme, you can use your own shadow graphics file that is prepared with colors to match the colors that you specify for that area’s background color.

Advanced editing

Beyond editing color, you can also use the cascading style sheet to adjust the layout and spacing of various elements to, for example, display parts of the UI closer together or to space them further apart.

Alignment, spacing, and margins

Changing the layout can affect how different elements on the page align relative to each other.

Example task: Change the navigation bar resource vertical depth (vertical spacing among the text items). You can edit the margins above and below the navigation bar resource subheading, items under the subheadings, and the horizontal lines separating the subhead groupings.

The navigation bar resource subheadings tag:

.ms-navheader 
{
margin-bottom: 4px;
}

The navigation bar resource tag for items under each subheading:

.ms-navitem 
{
margin-top: 4px;
}

The horizontal line tag includes top and bottom margin values:

.navbarhr 
{
width: 135px; 
border-style: dotted; 
margin-top: -2px; 
margin-bottom: 5px; 
text-align: left;
}

An example modification would be to reduce each margin value by 1. This causes the content of the navigation bar resource to display slightly closer vertical alignment.

What cascading style sheets do and do not control

Much of the general page layout is controlled by the application’s code and not by the cascading style sheet. The cascading style sheet is used primarily for style. For making page layout changes that go beyond what is determined with the cascading style sheet, you can use an application such as Sharepoint Designer.

Reverting back to the original FIM theme

If you have followed the steps earlier in this topic about how to copy the original FIM folder, you see that the original FIM theme is still available in the SharePoint list of themes. In that list, you can select the FIM theme. For more information, see the section User Interface Themes in this document.

Using SharePoint Designer

You can avoid typing errors into the lines of cascading style sheet code by using SharePoint Designer to edit the theme cascading style sheet. SharePoint Designer highlights the start and end tags to indicate when something is missing.

Summary

In this section, you learned about SharePoint theme files and modified the appearance of the FIM Portal by modifying the cascading style sheet file.

Appendix 1: Cascading Style Sheet Tags

The following is a list of tags from the cascading style sheets file, with notes for typical editing. These are several of the tags that are mostly likely to be edited when you customize the more visual elements in the UI theme.

The cascading style sheet file also includes commented text within the code, as shown in the following table, to help you understand what some tags control. And, in many cases, the tag’s name indicates specifically what it controls.

.ms-nav-shade
{
background-image: url("/_layouts/images/MSILM2/homepage_shade_corporate.png");  
background-repeat: repeat-x;
}

.ms-pagetitleShade
{
background-image: url("/_layouts/images/MSILM2/homepage_shade.png"); 
background-repeat: repeat-x;
}

.ms-pagetitleareaframe 
{
background-color: #eaf3ff;
}

.ms-formdescription
{
font-family: "Segoe UI", "Arial", "Verdana", "Sans-Serif", "Helvetica";
font-size: 12px;
color: #727272;
text-align: left;
}

.ms-navheader a,.ms-navheader2 a
{
font-weight: bold;
color: #336baf; /* navigation bar parent color */
text-decoration: none;
}

.ms-navheader a:hover,.ms-navheader2 a:hover
{
color: #FF6600; 
text-decoration: none;
}

.ms-navheader a:active,.ms-navheader2 a:active
{
color: #FF8B3D; 
text-decoration: none;
}

.ms-navItem a
{
color: #336baf; /* navigation bar child color */
text-decoration: none !important;
}

.ms-navItem a:hover
{
text-decoration: none;
color: #FF6600;  
}

.ms-navItem a:active
{
text-decoration: none;
color: #FF8B3D; 
}

.ms-pagetitle
{
font-family: "Segoe UI", "Arial", "Verdana", "Sans-Serif", "Helvetica";
font-size: 18pt;
color: #718395;
font-weight: normal;
margin-left: 18px;
}

TABLE.ms-toolbar
{
border: 0;
background-image:url("/_layouts/images/MSILM2/listview_toolbar.png");
background-repeat: repeat-x;
border-top: 0px transparent;
}

BODY, SELECT, TABLE
{
scrollbar-face-color: #ECECEC;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #D6D3CE;
scrollbar-shadow-color: #FFFFFF;
scrollbar-darkshadow-color: #848284;
scrollbar-arrow-color: #848284;
scrollbar-track-color: #EAEAEA;
}