| Subcribe via RSS

Quick Guide to Rebranding SailPoint IIQ

January 18th, 2012 Posted in IdM Engagement, Vendor Specific

So you’ve got Sailpoint IIQ all installed and humming on your enterprise servers, and your boss walks in and says “My boss says the CIO wants this rebranded for better internal look and feel, to keep confusion down for identity self-service requests. Can you have it done by Monday?!”

Your answer, even if it’s Friday, should be “Yes, sir!!” Here’s how you can do it, covering just the basics. In this exercise, we’ll cover rebranding:

  • The login banner page
  • The IIQ headers on each page, and…
  • The overall CSS colors on each page providing the final L&F

Let’s get started.

Overview

The tools and “skillz” you will need (as they say) will actually lean more on the graphics side than on the Java or HTML development side for this exercise. In fact, other than careful and proper placement of the resulting graphics files inside your deployed application and application server file system, graphical capabilities and understanding of CSS are going to be your primary concerns. If you are not very good at handling a graphical editor like Adobe Photoshop or GIMP, now’s the time to call your friend, Sally, over in Marketing to lend you a hand.

Assuming you know where Sailpoint IIQ is “rooted” on your application server, we’re going to graphically reconstitute a few files. We’ll assume a Tomcat installation here, which should carry over quite nicely for a JBoss AS installation as well. WebSphere, Glassfish, WebLogic and you other app server flavored peeps out there, try to follow along.

For Tomcat, assuming an installed/deployed path of /srv/tomcat6/webapps, you should/would have /srv/tomcat6/webapps/identityiq for your application root. So then, we’re going to graphically reconstitute:

  • $APP_ROOT/images/login.gif
  • All the header*.gif files in $APP_ROOT/images and…
  • identityIIQ-logo.gif

Furthermore, we’re going to, at a bare minimum, twiddle the background-color CSS attribute on five (5) CSS files. We’ll detail all that when we get to the section on CSS.

Approach

First of all, you’ll want to be able to be able to go backwards and restore the original files if ever the need arises. One such need could be your friend Sally in Marketing doesn’t get things exactly right on one of these graphics files and needs a place to start fresh again. I would recommend renaming all files affected with a -orig extension.

Even if you have your files committed to a source code management system (SCMS) of some sort such as Subversion, having your originals spiked out as such can be a handy feature. If additional tweaks are required for the files you originally tweaked, then they can be committed to a higher version in your SCMS and you can still go back as far as you want and identify pretty easily your original files that came bundled with Sailpoint IIQ.

Once we’re done (1) making copies of the original files and tweaking them (2) we’ll create a ZIP package here — or you can use an Apache Ant or Apache Maven script if you want to pull these out of your SCMS and deploy in a CI situation — to deploy the rebranding in one step to your Sailpoint IIQ app server application root.

So you can roll this into a vendor branch in your SCMS and deploy CI as I already stated, or you can unzip the package manually or via a IBM Tivoli Deployment or BMC Deployment or some internally created post-deploy mechanism to your Sailpoint IIQ application root, purposefully over-writing the correct files and you’ll be… rebranded. You and the boss and his boss will look like heros when the CIO logins in to check Monday morning.

Graphically Reconstituting Your Image Files

Okay, so, this isn’t a guide nor a primer on how to change colors, backgrounds, borders, sizes and add logos to graphics files. You’re on your own for that one.

The Sailpoint IIQ “watermark”, “IdentityIQ” and Sailpoint logo are all in the login.gif file. If you want, you can generate an entirely new file using the same size (and name, of course) and the right colors and logo(s) for your company.

Just realize you’re mainly going to have to (1) leave some kind of “white box” in the same place the existing one is in since this is where the username and password text fields as well as the buttons will land when the page is rendered, and (2) make sure your overall graphic is the same size. The rest is up to you. I’ve actually redrawn the white box myself as a larger size as a quick way of getting rid of the “Sailpoint blue” box trim — merely placing the bigger box center over where the original one is. And (3) make sure you save the file as a GIF. For the look and feel, you’ll have to use your own — or Sally’s — ingenuity here.

The identityIIQ-logo.gif is where the “IdentityIQ” logo shows up in the top left-hand corner of every Sailpoint IIQ page. This is a great place to place your own company logo if you can make it fit. For this particular file, actually, your logo does NOT have to be the same size, but… you don’t want to go too disproportionate either. You’ll probably have to play with it some. Another approach is just to make this file a solid color, the same color as your intended background (to be done via CSS), and thereby have the “IdentityIQ” logo disappear altogether. Again, the options are up to you.

Seriously, get someone to review the look and feel as you work with these components if you don’t have a good eye for this kind of detail graphically. These need to be transparent GIFs and that’s an intermediate graphics skill, getting those looking professional and not having any bit-level bleed-thru on the edges (due to “feathering”), etc.

All the header*.gif files are used to piece together the top header in Sailpoint IIQ. These again need to be tweaked with your company colors more than anything — you’ll be doing color translations here and then, again, saving as GIFs using the original names.

CSS Tweaking

With Sally over in Marketing working diligently on the actual graphics files, you, as a development bit-head, feel much better tweaking code, even if it’s declarative code like CSS. At the bare minimum, to set your company’s colors as the background colors for various aspects of IIQ presentation (you’re using hot pink, right?!), you’ll need to tweak the background-color of the following files, found in $APP_ROOT/css:

  • login.css
  • extjs-override.css
  • style.css
  • tag-override.css
  • enduser-custom.css

At this point, notice the enduser-custom.css file. Supposedly, this is where you can over-ride all in one place, the overall look and feel of Sailpoint IIQ (eg. the color scheme). However, I never found this to work as advertised (look in the file and you will see the advertisement!); I had to modify the background-color attribute in all of the above files. The background-color attribute had to be added to enduser-custom.css in the body DOM object as well since it’s not in the body DOM at all. The other files had to have all instances of background-color tweaked with the proper RGB settings.

NOTE: Maybe the single stop enduser-custom.css actually works for Sailpoint IIQ v5.5 — the last time I rebranded was using Sailpoint IIQ 5.2.

Obviously, the CSS files above are where you would concentrate if you had more exacting needs for rebranding such as button look and feel, etc. Any more than background color is out of scope for this guide, but you’ve been pointed to all the relevant files, for the most part. There are more in the CSS directory — you’re on your own from here. :-)

Package

At this point, we’ve tweaked everything we need to do the rebranding. Sally’s earned herself a free latte from you for her work on the graphics. Now it’s time to deploy to Sailpoint IIQ. In this simple example, we’ll create a ZIP file that has all the CSS and graphic elements. If we take the ZIP file and unzip it to $APP_ROOT, our unzip should over-write the necessary files, and we’ll be… rebranded.

So we’ll, go to some scratch area on our development hard drive and:

(1) Create an “images” directory (eg. mkdir images)
(2) Create a “css” directory (eg. mkdir css)
(3) Drop our modified CSS and GIF files into the proper places and…
(4) Create the ZIP with relative (not absolute!) pathing (eg. zip -r rebranding-package.zip images css)
(5) Unzip to your app server app root and you should be set! (eg. unzip -d $APP_ROOT rebranding-package.zip)

Here’s a peek at the unzip -v output so we can see the elements and the package pathing structure:

chris@matrix-dhcp-198:~/Arbeit/Projekte/Qubera/AjaxCo> unzip -v ajaxco-rebranding-package.zip 
Archive:  ajaxco-rebranding-package.zip
 Length   Method    Size  Ratio   Date   Time   CRC-32    Name
--------  ------  ------- -----   ----   ----   ------    ----
       0  Stored        0   0%  09-14-11 23:13  00000000  css/
    2803  Defl:N     1128  60%  09-14-11 23:01  85d1654f  css/login.css
   60389  Defl:N    12069  80%  09-14-11 23:01  d021b5ef  css/style.css
    2000  Defl:N      888  56%  09-14-11 23:01  0ca8218a  css/tag-override.css
       0  Stored        0   0%  09-14-11 23:03  00000000  images/
     807  Defl:N      608  25%  09-14-11 23:02  3a25dfa4  images/headerSPLeft.jpg
     776  Defl:N      573  26%  09-14-11 23:02  fe72fae0  images/headerSPLine.jpg
    3159  Defl:N     2845  10%  09-14-11 23:02  790ae598  images/headerSPLogo.jpg
    5616  Defl:N     5474   3%  09-14-11 23:02  e57575fc  images/identityIQ-logo.gif
   46449  Defl:N    46113   1%  09-14-11 23:02  be72d9bd  images/login.gif
   13087  Defl:N     3347  74%  09-14-11 23:12  91fe4760  css/extjs-override.css
     410  Defl:N      271  34%  09-14-11 23:13  44d09f38  css/end-user-custom.css
--------          -------  ---                            -------
  135496            73316  46%                            12 files

Of course, writing Apache Ant or Apache Maven to go after these elements from SCMS is just as likely a scenario. But you get the idea!

Good luck!

Comments are closed.