Branding of SailPoint IdentityIQ

Branding of SailPoint IdentityIQ The IdentityIQ user interface can be customized to include custom corporate branding, giving the application a look and feel that matches other enterprise applications. The files modified to implement custom branding in IdentityIQ are located under the IdentityIQ installation directory. Before altering any of these files, make backup copies of them to facilitate restoration of the original application appearance if needed. The files involved in most branding activities are: • • • • • • appPage.xhtml: controls display of main-‐menu application pages extAppPage.xhtml: controls display of detail pages iiq-‐custom.css: overrides default styles applied to the IdentityIQ html elements login.xhtml: controls display of login window login.css: controls styles applied to login window login.gif: contains image that comprises most of default login window NOTE: The files edited for custom branding will be overwritten when a new version of IdentityIQ is installed, so be sure to save all changes in your source code control system so they can be reapplied later. Minimum SailPoint Branding Requirements To protect SailPoint’s intellectual property rights, IdentityIQ installations are required to include a minimal level of SailPoint branding in the user interface. The copyright notice: (“© 20xx SailPoint Technologies -‐ All rights reserved.”) must be left in the HTML and displayed on every window. Additionally, if the SailPoint or IdentityIQ logos are removed from the page headers, the Powered by SailPoint IdentityIQ logo must be added to every page. (On a customized Login window, the copyright notice must be left intact, but inclusion of the Powered by SailPoint IdentityIQ logo is not required.) The HTML to display the copyright notice is found in the footer division (div id=”bodyDivFooter”) of the appPage.xhtml and extAppPage.xhtml files. (These files are stored in the IdentityIQ installation directory.) The Powered by Sailpoint IdentityIQ logo can be added by modifying those files as shown below. <div id="bodyDivFooter" class="bodyDivFooter">  <div style="height: 36px"> <span>© #{msgs.copy_right} <img src="images/PoweredBySailPointIDIQ.JPG" style="float:right"/></span> </div> </div> Alterations are permitted to the display properties (colors, font size, etc.) of these divisions and additional text may be added around these components as desired. Branding of SailPoint IdentityIQ Page 1 of 6 Figure 1: Standard Application Branding Figure 2: Example of Basic Custom Branding Modify the Banner Logo Complete these steps to change the banner header from SailPoint’s logo to your own corporate logo.xhtml and extAppPage. Basic Branding The most common branding customizations are: 1. Modifying the appearance of the login window The changes required to implement these appearance modifications are described in this document.com/documents/product-‐resources/implementation-‐notes/identityiq-‐ customization-‐logos. and headerSPLeft. the appPage.jpg. The html segment to modify in each file looks like this (the values to modify are highlighted): <table width="100%" cellpadding="0" cellspacing="0"> Branding of SailPoint IdentityIQ Page 2 of 6 .sailpoint.jpg.xhtml file affects the detail pages. or PNG file from https://community. Be aware that the image heights will affect the vertical offset of the rest of the IdentityIQ application page. GIF. Change the image filenames in the appPage.jpg) can be used as guides for image dimensions.xhtml file affects the main-‐menu application pages while the extAppPage.xhtml files to point to your image files. The same changes should be made in both html files. NOTE: The Powered by SailPoint IdentityIQ logo can be downloaded from Compass as a JPG. 1. though exact size matches are not required. headerSPLine. 2. Changing the logo banner that appears at the top of the application window 2. The default image files (headerSPLogo. Save your own custom images into the [IdentityIQ installation directory]/images directory. Customizing background colors for the application 3. The table below lists some of the commonly modified css selectors and indicates which parts of the user interface they will affect. simply substitute your file names in the appropriate html tags. However.w3schools. <tr style="background: #007080 url('#{base. are included as stubs in that file out of the box. Branding of SailPoint IdentityIQ Page 3 of 6 . to create a solid-‐colored banner with a single logo image displayed at the far right."> <td align="left"><img src="#{base. such as body and .jpg') repeat-x. This logo can also be removed or replaced with a custom application name image. Some of the modifiable selectors.jpg"/></td> </tr> </table> 3.css. <span style="float:left.This aligns your image at the far right on a yellow banner --> <tr style="background: #FFFF00”> <td align="right"><img src="#{base. padding: 0px 2px 5px 2px"> <img src="#{base.com/html/html_colors. The html to create the banner shown in the custom branding example in this document looks like this: <table width="100%" cellpadding="0" cellspacing="0"> <!-. For example. If desired. can be added to the file to achieve the desired application appearance. specify the desired banner color as the “background” value and specify your image file in the ‘td align=”right”’ tag.jpg"/></td> </tr> </table> SailPoint uses a three-‐part banner displayed as a table through the html.gif" /> </span> Modify the Page Background and Header Text Colors Change the background and text colors for the application by adding entries to [IdentityIQ installation directory]/css/iiq-‐custom. For a list of html color codes and names to use in altering the background and text colors.asp. refer to http://www.borderCell.requestContextPath}/images/ YourLogo.requestContextPath}/images/identityIQ-logo.w3schools. increase the space between the bottom of the banner and the IdentityIQ logo.com/css/css_colornames.jpg"/></td> <td align="right"><img src="#{base. such as #headerText. If your company uses a three-‐part banner. The two end segments are aligned to the far left and right and the center segment repeats to span the rest of the page width not covered by the two ends.requestContextPath}/images/ headerSPLogo.xhtml and extAppPage. Then delete the other unneeded tags and style attributes in the table definition.requestContextPath}/images/headerSPLine. Modify the padding value associated with the IdentityIQ logo in both html files (appPage.requestContextPath}/images/ headerSPLeft. Others. the banner does not necessarily have to be structured in three parts.xhtml).asp and http://www. CSS Selector body . All Rights Reserved.bodyDiv and #bodyContentTd. “Logged in as…”) Controls appearance of link header text (i. and #bodyBottomTd are modified.borderCell { background: #909090. */ /* IIQ Custom This is used for any custom styles or style overrides used to rebrand IIQ user pages. should be set to same values as body Controls appearance of static header text (i.bodyDiv value overrides the #bodyContentTd value #bodyContentTd Controls appearance of many labels and text items in page bodies.bodyDiv value overrides the #bodyContentTd value #bodyBottomTd Controls appearance of the section of window surrounding the Sailpoint Copyright footer box NOTE: “color” attribute does nothing here since text is within bodyDivFooter. padding: 15px 3px 3px 3px. “Help” and “Logout”) #headerText #headerText a (a:visited.borderCell Effect of Properties Set Within the Selector Controls main menu windows’ page background Controls page background on detail windows. } . “background” attribute affects a block that surrounds and encompasses the . } #headerText { color: black. This is an example of a customized iiq-‐custom.bodyDiv. #bodyContentTd. etc.bodyDiv Controls appearance of many labels and text items on window bodies. Inc. */ body { background: #909090. the best visual result is achieved by treating them all as a unit so they share a uniform set of display properties. but background attribute can alter section color NOTE: In general.bodyDiv section NOTE: If “color” attribute is set on both .e. Branding of SailPoint IdentityIQ Page 4 of 6 .css file (as set to create the basic custom branding example shown in this document): /* (c) Copyright 2008 SailPoint Technologies. the .) #bodyDivTitle Controls appearance of page title (name displayed just below menu bar) #bodyDivFooter Controls appearance of SailPoint Copyright footer section on each page . a:hover.e. The most common styles affecting the overall page look and feel are listed below. the .bodyDiv and #bodyContentTd.. if . “background” attribute here affects small section of window around many pages’ main content block NOTE: If “color” attribute is set on both . #headerText a:visited. but it can still be modified to match the appearance of other customized IdentityIQ windows. create a new custom image and point the body background url property in the login.css [IdentityIQ installation directory]/login. The primary files used to create the Login window are: • • • [IdentityIQ installation directory]/css/login. } #bodyDivFooter { background: #000000. #headerText a:hover { color: black.gif file contains an image that makes up the majority of what is displayed on the login window.gif Image This table describes the login.bodyDiv.gif The login.xhtml [IdentityIQ installation directory]/images/login. } #headerText a. } Customize the Login Window The Login window is controlled by a separate css file and its own html file. Branding of SailPoint IdentityIQ Page 5 of 6 ..css file to that image file. } . #bodyBottomTd { background: #DDDDDD. } Figure 3: Login. including the Sailpoint background image and the box surrounding the username and password entry form. color: #FFFFFF. } #bodyDivTitle { color: #777777.gif) 0 28px no-repeat./images/login. body { background: #007080 url(. To change these elements. #bodyContentTd.css file’s main available css selectors and the effects they have on the login window. xhtml files in the IdentityIQ installation directory. Branding of SailPoint IdentityIQ Page 6 of 6 . active) Build the login button from two background image files plus text. Change these files to alter text labels. a. For maintainability. so keeping all these customizations together in one file can simplify change tracking. Properties set in the iiq-‐custom.loginButton span Effect of Properties Set Within the Selector Changes to the “background” property alter the page background color or image Alters the appearance of the version number and copyright Changes the appearance of the Username and Password labels Changes the font.error a:xxxx. to change button appearance. These alterations should only be undertaken by an experienced html developer. replace images or point these selectors’ “background” properties to different images.loginButton. as well as files in the /css and /images sub-‐directories. CSS Selector body .loginButton a. colors. fonts.loginFormText #login . color.version #login table #login input.css file override other css files’ properties.css file changes) be made in the iiq-‐custom. or size of the input text as it is displayed in the Username and Password entry boxes Changes the appearance of the login failure error message Affects the color of the text on the Login button (xxxx = link. and even the appearance of buttons and icons in IdentityIQ. it is recommended that all css changes (aside from the login. other attributes can change text appearance Advanced Branding Customers seeking more advanced branding may consider modifying other . font sizes.css file and that the other css files be used only as a resource for identifying other selectors. visited.

Comments

Description