I was playing around with the BladeSystem Matrix creating some new demo videos, and I thought why not dig into the portal skinning features to create a custom look for my system.
The skinning feature is intended to let companies personalize the portal with their logos and product names, replacing the standard HP skin that ships with the product. In this example, my customer is the fictitious Acme Corporation.
Here are the steps I went through:
- Copy C:\Program Files\HP\Insight Orchestration\webapps\hpio-portal.war to my desktop
- Rename to hpio-portal.zip
- Copy hpio-portal.zip to hpio-portal.orig.zip
- Unzip hpio-portal.zip
- Browse to the hpio-portal/skins directory, and create a new folder "acme". You should see the following:
- Copy your new images into the acme directory. The image names, format, and recommended sizes are shown in the table below. I found there is minor flexibility in the sizes of images you create, but in general things look a little nicer if you stick to the sizes shown in the table.
Recommended Size in pixels
(w x h)
90 x 72
408 x 287
42 x 26
300 x 40
- Edit the skinConfig.xml file in the skins directory. Here's my updated content:
<property><key> personalizeMode </key><value>insight</value></property>
<property><key> skinName </key><value>acme</value></property>
<property><key> brandName </key><value>Acme Corporation</value></property>
<property><key> portalName </key><value>Developer Self Service</value></property>
<property><key> bsaURL </key><value></value></property>
rezip hpio-portal directory
Once you have re-zipped hpio-portal, you might want to open it and check that the top component of the zip file is the contents of the hpio-portal folder, and not a folder called "hpio-portal". Windows XP zip default behavior is to create that top level folder in the zip archive. Compare with the contents of hpio-portal.orig.zip to make sure you get this correct. Otherwise your portal won't restart correctly in the later steps.
rename hpio-portal.zip to myportal.war file
Stop the Insight Orchestration service
Rename C:\Program Files\HP\Insight Orchestration\webapps\hpio-portal.war to hpio-portal.war.orig
Copy myportal.war to C:\Program Files\HP\Insight Orchestration\webapps\hpio-portal.war
Start the Insight Orchestration service
Here's my updated login screen to the self service portal, and a zoom in on the updated window bar after login is complete.
The ioconfig command in the C:\Program Files\HP\Insight Orchestration\bin folder is a useful utility that lets you switch between skins, for example: ioconfig --skin insight will change back to original skin. See ioconfig --help for more information on this command and options.
Send your examples
I hope this quick overview is helpful to getting you started. Send me examples of your self-service portal customizations!