You are on page 1of 6

   

 

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"> <!-- this div is needed as a holder for rounded styles because we do not want them on the <span> --> <div style="height: 36px"> <span>&#169; #{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  

Customizing  background  colors  for  the  application   3.   1.  headerSPLine.xhtml  file  affects  the  detail  pages.xhtml  file  affects  the  main-­‐menu   application  pages  while  the  extAppPage.     The  same  changes  should  be  made  in  both  html  files.jpg.       NOTE:  The  Powered  by  SailPoint  IdentityIQ  logo  can  be  downloaded  from  Compass  as  a  JPG. Modifying  the  appearance  of  the  login  window   The  changes  required  to  implement  these  appearance  modifications  are  described  in  this  document.xhtml  and  extAppPage.jpg.com/documents/product-­‐resources/implementation-­‐notes/identityiq-­‐ customization-­‐logos.     The  default  image  files  (headerSPLogo.  GIF. Save  your  own  custom  images  into  the  [IdentityIQ  installation  directory]/images  directory.  though  exact  size  matches  are  not  required.  Be  aware  that  the  image   heights  will  affect  the  vertical  offset  of  the  rest  of  the  IdentityIQ  application  page.   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. Change  the  image  filenames  in  the  appPage.  the  appPage.jpg)  can  be  used  as   guides  for  image  dimensions. Changing  the  logo  banner  that  appears  at  the  top  of  the  application  window     2.xhtml  files  to  point  to  your  image   files.   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   .  and  headerSPLeft.     2.  or  PNG  file   from  https://community.sailpoint.   Basic  Branding   The  most  common  branding  customizations  are:   1.

padding: 0px 2px 5px 2px"> <img src="#{base.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.  specify  the  desired  banner  color   as  the  “background”  value  and  specify  your  image  file  in  the  ‘td  align=”right”’  tag.  are  included  as   stubs  in  that  file  out  of  the  box.jpg"/></td> <td align="right"><img src="#{base.borderCell.     For  a  list  of  html  color  codes  and  names  to  use  in  altering  the  background  and  text  colors.w3schools.jpg"/></td> </tr> </table>   SailPoint  uses  a  three-­‐part  banner  displayed  as  a  table  through  the  html.This aligns your image at the far right on a yellow banner --> <tr style="background: #FFFF00”> <td align="right"><img src="#{base.  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"> <!-.  Then  delete  the  other   unneeded  tags  and  style  attributes  in  the  table  definition.  the  banner  does  not  necessarily  have  to  be  structured  in  three  parts.com/html/html_colors.xhtml  and   extAppPage."> <td align="left"><img src="#{base.jpg') repeat-x.asp  and  http://www.css.  to  create  a   solid-­‐colored  banner  with  a  single  logo  image  displayed  at  the  far  right.  Some  of  the  modifiable  selectors.com/css/css_colornames.   Branding  of  SailPoint  IdentityIQ     Page  3  of  6   .requestContextPath}/images/headerSPLine.  Others.       <tr style="background: #007080 url('#{base.           However.  This  logo  can  also  be  removed  or  replaced  with  a  custom  application  name  image.requestContextPath}/images/ YourLogo.jpg"/></td> </tr> </table>   3.w3schools. If  desired.  For  example.  such  as  #headerText.requestContextPath}/images/ headerSPLeft.  simply  substitute  your  file  names  in   the  appropriate  html  tags.  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.  refer  to   http://www.   <span style="float:left.  such  as  body  and  .xhtml).requestContextPath}/images/ headerSPLogo.  can  be  added  to  the  file  to  achieve  the  desired   application  appearance.  If  your  company  uses  a  three-­‐part  banner.requestContextPath}/images/identityIQ-logo.  increase  the  space  between  the  bottom  of  the  banner  and  the  IdentityIQ  logo.     Modify  the  padding  value  associated  with  the  IdentityIQ  logo  in  both  html  files  (appPage.asp.   The  table  below  lists  some  of  the  commonly  modified  css  selectors  and  indicates  which  parts  of  the  user   interface  they  will  affect.

 should  be  set  to  same   values  as  body   Controls  appearance  of  static  header  text  (i. */ body { background: #909090.  #bodyContentTd.  a:hover.  but  background  attribute  can  alter  section  color     NOTE:  In  general. */ /* IIQ Custom This is used for any custom styles or style overrides used to rebrand IIQ user pages.borderCell { background: #909090..bodyDiv  value  overrides  the  #bodyContentTd   value     #bodyContentTd   Controls  appearance  of  many  labels  and  text  items  in  page  bodies. Branding  of  SailPoint  IdentityIQ     Page  4  of  6   .  “Logged  in  as…”)   Controls  appearance  of  link  header  text  (i.  the  .bodyDiv  section   NOTE:  If  “color”  attribute  is  set  on  both  .bodyDiv  and   #bodyContentTd.  the  best  visual  result  is   achieved  by  treating  them  all  as  a  unit  so  they  share  a  uniform  set  of  display  properties. Inc. padding: 15px 3px 3px 3px.bodyDiv  and   #bodyContentTd. } #headerText { color: black.  if  .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.e.   “background”  attribute  here  affects  small  section  of  window  around   many  pages’  main  content  block   NOTE:  If  “color”  attribute  is  set  on  both  .borderCell   Effect  of  Properties  Set  Within  the  Selector   Controls  main  menu  windows’  page  background   Controls  page  background  on  detail  windows. } .css  file  (as  set  to  create  the  basic  custom  branding  example  shown   in  this  document):   /* (c) Copyright 2008 SailPoint Technologies. The most common styles affecting the overall page look and feel are listed below.   “background”  attribute  affects  a  block  that  surrounds  and   encompasses  the  .bodyDiv   Controls  appearance  of  many  labels  and  text  items  on  window  bodies.   This  is  an  example  of  a  customized  iiq-­‐custom.  “Help”  and  “Logout”)     #headerText   #headerText  a     (a:visited.  etc.  the  .  and  #bodyBottomTd  are  modified.e. All Rights Reserved.     CSS  Selector   body   .)   #bodyDivTitle   Controls  appearance  of  page  title  (name  displayed  just  below  menu   bar)   #bodyDivFooter   Controls  appearance  of  SailPoint  Copyright  footer  section  on  each   page   .bodyDiv.

color: #FFFFFF.gif  file  contains  an  image  that  makes  up  the  majority  of  what  is  displayed  on  the  login  window.  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.       } #headerText a.   Branding  of  SailPoint  IdentityIQ     Page  5  of  6   . } #bodyDivFooter { background: #000000.   including  the  Sailpoint  background  image  and  the  box  surrounding  the  username  and  password  entry  form.xhtml   [IdentityIQ  installation  directory]/images/login.gif) 0 28px no-repeat. } Customize  the  Login  Window   The  Login  window  is  controlled  by  a  separate  css  file  and  its  own  html  file. #bodyContentTd.gif  Image     This  table  describes  the  login.gif   The  login.css  file’s  main  available  css  selectors  and  the  effects  they  have  on  the  login   window.    The  primary  files  used  to  create  the  Login  window  are:     • • • [IdentityIQ  installation  directory]/css/login. #bodyBottomTd { background: #DDDDDD.bodyDiv.css     [IdentityIQ  installation  directory]/login.     body { background: #007080 url(. #headerText a:visited.css   file  to  that  image  file. } Figure  3:  Login.. } #bodyDivTitle { color: #777777./images/login. #headerText a:hover { color: black.    To   change  these  elements.

   These  alterations   should  only  be  undertaken  by  an  experienced  html  developer.   Branding  of  SailPoint  IdentityIQ     Page  6  of  6   .   to  change  button  appearance.  and  even  the  appearance  of  buttons  and  icons  in  IdentityIQ.  replace  images  or  point  these   selectors’  “background”  properties  to  different  images.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.css  file  and  that  the  other  css  files  be  used  only  as  a  resource  for  identifying  other  selectors.  fonts.  active)   Build  the  login  button  from  two  background  image  files  plus  text.loginFormText   #login  .  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.  Change  these  files  to  alter  text   labels.loginButton   a.  visited.   a.  color.  it  is  recommended  that  all  css  changes  (aside  from  the  login.  font  sizes.error   a:xxxx.   For  maintainability.loginButton.version   #login  table   #login  input.xhtml  files  in  the  IdentityIQ   installation  directory.  as  well  as  files  in  the  /css  and  /images  sub-­‐directories.css  file  override  other  css  files’  properties.  so  keeping  all  these  customizations   together  in  one  file  can  simplify  change  tracking.     other  attributes  can  change  text  appearance     Advanced  Branding   Customers  seeking  more  advanced  branding  may  consider  modifying  other  .css  file  changes)  be  made  in  the   iiq-­‐custom.     CSS  Selector   body   .  colors.   Properties  set  in  the  iiq-­‐custom.