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.  

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  

   

 

NOTE:  The  Powered  by  SailPoint  IdentityIQ  logo  can  be  downloaded  from  Compass  as  a  JPG,  GIF,  or  PNG  file   from  https://community.sailpoint.com/documents/product-­‐resources/implementation-­‐notes/identityiq-­‐ customization-­‐logos.  

Basic  Branding   The  most  common  branding  customizations  are:   1. Changing  the  logo  banner  that  appears  at  the  top  of  the  application  window     2. Customizing  background  colors  for  the  application   3. Modifying  the  appearance  of  the  login  window   The  changes  required  to  implement  these  appearance  modifications  are  described  in  this  document.  

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.   1. Save  your  own  custom  images  into  the  [IdentityIQ  installation  directory]/images  directory.     The  default  image  files  (headerSPLogo.jpg,  headerSPLine.jpg,  and  headerSPLeft.jpg)  can  be  used  as   guides  for  image  dimensions,  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.     2. Change  the  image  filenames  in  the  appPage.xhtml  and  extAppPage.xhtml  files  to  point  to  your  image   files.     The  same  changes  should  be  made  in  both  html  files;  the  appPage.xhtml  file  affects  the  main-­‐menu   application  pages  while  the  extAppPage.xhtml  file  affects  the  detail  pages.   The  html  segment  to  modify  in  each  file  looks  like  this  (the  values  to  modify  are  highlighted):   Branding  of  SailPoint  IdentityIQ    

Page  2  of  6  

   

 

  SailPoint  uses  a  three-­‐part  banner  displayed  as  a  table  through  the  html.  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.  If  your  company  uses  a  three-­‐part  banner,  simply  substitute  your  file  names  in   the  appropriate  html  tags.    

 

   

However,  the  banner  does  not  necessarily  have  to  be  structured  in  three  parts.  For  example,  to  create  a   solid-­‐colored  banner  with  a  single  logo  image  displayed  at  the  far  right,  specify  the  desired  banner  color   as  the  “background”  value  and  specify  your  image  file  in  the  ‘td  align=”right”’  tag.  Then  delete  the  other   unneeded  tags  and  style  attributes  in  the  table  definition.  The  html  to  create  the  banner  shown  in  the   custom  branding  example  in  this  document  looks  like  this:      

  3. If  desired,  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.xhtml  and   extAppPage.xhtml).  This  logo  can  also  be  removed  or  replaced  with  a  custom  application  name  image.  

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.css.  Some  of  the  modifiable  selectors,  such  as  body  and  .borderCell,  are  included  as   stubs  in  that  file  out  of  the  box.  Others,  such  as  #headerText,  can  be  added  to  the  file  to  achieve  the  desired   application  appearance.     For  a  list  of  html  color  codes  and  names  to  use  in  altering  the  background  and  text  colors,  refer  to   http://www.w3schools.com/html/html_colors.asp  and  http://www.w3schools.com/css/css_colornames.asp.   The  table  below  lists  some  of  the  commonly  modified  css  selectors  and  indicates  which  parts  of  the  user   interface  they  will  affect.   Branding  of  SailPoint  IdentityIQ    

Page  3  of  6  

   

  CSS  Selector   body   .borderCell  

Effect  of  Properties  Set  Within  the  Selector   Controls  main  menu  windows’  page  background   Controls  page  background  on  detail  windows;  should  be  set  to  same   values  as  body   Controls  appearance  of  static  header  text  (i.e.  “Logged  in  as…”)   Controls  appearance  of  link  header  text  (i.e.  “Help”  and  “Logout”)  

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

Branding  of  SailPoint  IdentityIQ    

Page  4  of  6  

   

  } #headerText a, #headerText a:visited, #headerText a:hover { color: black; } #bodyDivTitle { color: #777777; } .bodyDiv, #bodyContentTd, #bodyBottomTd { background: #DDDDDD; } #bodyDivFooter { background: #000000; color: #FFFFFF; }

Customize  the  Login  Window   The  Login  window  is  controlled  by  a  separate  css  file  and  its  own  html  file,  but  it  can  still  be  modified  to  match   the  appearance  of  other  customized  IdentityIQ  windows.    The  primary  files  used  to  create  the  Login  window  are:     • • •

[IdentityIQ  installation  directory]/css/login.css     [IdentityIQ  installation  directory]/login.xhtml   [IdentityIQ  installation  directory]/images/login.gif  

The  login.gif  file  contains  an  image  that  makes  up  the  majority  of  what  is  displayed  on  the  login  window,   including  the  Sailpoint  background  image  and  the  box  surrounding  the  username  and  password  entry  form.    To   change  these  elements,  create  a  new  custom  image  and  point  the  body  background  url  property  in  the  login.css   file  to  that  image  file.     body { background: #007080 url(../images/login.gif) 0 28px no-repeat; }

Figure  3:  Login.gif  Image  

 

This  table  describes  the  login.css  file’s  main  available  css  selectors  and  the  effects  they  have  on  the  login   window.   Branding  of  SailPoint  IdentityIQ    

Page  5  of  6  

   

  CSS  Selector   body   .version   #login  table   #login  input.loginFormText   #login  .error   a:xxxx.loginButton   a.loginButton,   a.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,  color,  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,  visited,  active)   Build  the  login  button  from  two  background  image  files  plus  text;   to  change  button  appearance,  replace  images  or  point  these   selectors’  “background”  properties  to  different  images;     other  attributes  can  change  text  appearance  

Advanced  Branding   Customers  seeking  more  advanced  branding  may  consider  modifying  other  .xhtml  files  in  the  IdentityIQ   installation  directory,  as  well  as  files  in  the  /css  and  /images  sub-­‐directories.  Change  these  files  to  alter  text   labels,  fonts,  colors,  font  sizes,  and  even  the  appearance  of  buttons  and  icons  in  IdentityIQ.    These  alterations   should  only  be  undertaken  by  an  experienced  html  developer.   For  maintainability,  it  is  recommended  that  all  css  changes  (aside  from  the  login.css  file  changes)  be  made  in  the   iiq-­‐custom.css  file  and  that  the  other  css  files  be  used  only  as  a  resource  for  identifying  other  selectors.   Properties  set  in  the  iiq-­‐custom.css  file  override  other  css  files’  properties,  so  keeping  all  these  customizations   together  in  one  file  can  simplify  change  tracking.  

Branding  of  SailPoint  IdentityIQ    

Page  6  of  6