Theme Me Up Scotty: The Banner Image

Note from Self. I am not a “Star Track” fan (ha ha. Get it?!?)  I just thought this was a funny title.  

For those of you who have been living under a rock for the last few years (or at least not an attendee of one of my numerous (and yes, I am trying to see how long I can ride out the “theme” thing here) Lotusphere or Portal Technical Conference presentations; a Portal Theme provides us the “Look and Feel” for our Portal. I could wax eloquent on how important the Theme is to a portal project and how little emphasis we put on all things end user experience at IBM but that will be left for another topic. Due to the lack of, shall we say adequate, documentation on the subject (Theme development) I decided to publish “The Unofficial Guide to Portal Theme Development” – totally uncensoredJ.

So let’s start with the basics. The most common of all requests…change the banner image and ditching that nasty “Launch” menu.

Part that happens before Part One: Disable Theme Caching:

This one seems to cause lots of people lots of problems. Here is how ya do it. And don’t argue on this one. It works – I know it works. So none of this “my portal is messed up because it caches stuff even when I tell it not to” crap. Edit the correct file and be done with it.
Set reloadingEnabled=”true” in the file ibm-web-ext.xmi located under: 

<WASPROFILE_ROOT>\profiles\<profile_name>\config\cells\<cell_name>\applications\wps.ear\deployments\wps\wps.war\WEB-INF\ibm-web-ext.xmi

Restart WebSphere_Portal.

After that is done you can “touch” (force recompile) Default.jsp (for all layout type changes) AND Styles.jsp (color palettes and Style files) – or both if you have no idea what I am talking about here, when you make changes to the theme. This will clear the cache. I promise.

Part One: Adding a Banner to the top left corner of a Portal 6 Theme

Navigate to:

<WASPROFILE_ROOT>\profiles\<profile_name>\installedApps\<cell_name>\wps.ear\wps.war\themes\html\<theme_name> (Yes, I know this one is a doozy!)

Under the subdirectory /colors open the file default.properties (I will go into color palettes and the use of in a different entry – stay tuned!)

Look for the following text – you will mostly be paying attention to the part in radical red.

#banner bannerText=#3161A5
bannerBackground=#E8EBF1
bannerBackgroundImage=url(./colors/default/banner_background.gif) repeat-x
bannerBorder=#3161A5

Place your banner image in:

<WASPROFILE_ROOT>\profiles\<profile_name>\installedApps\<cell_name>\wps.ear\wps.war\themes\html\<theme_name>\colors\default

Change the value for bannerBackgroundImage to reflect your image name. Set the repeat-x to no-repeat. It should look like below:

bannerBackgroundImage=url(./colors/default/newBanner.gif) no-repeat

If you were to view the Theme again through the Web Browser at this point, your new Banner is most likely hidden behind that pesky “Launch” menu. We now need to adjust the height of the row that contains the “banner image” to be able to see our image. (We probably also want to move the Launch menu – we will get to that in a minute)

Open the file styles_theme.jspf under:

<WASPROFILE_ROOT>\profiles\<profile_name>\installedApps\<cell_name>\wps.ear\wps.war\themes\html\<theme_name>.

Search for the following entry and add a value for the height. (brilliant blue below)

.banner { color: ${colors.bannerText};
background: ${colors.bannerBackgroundImage};
background-color: ${colors.bannerBackground}; border-bottom: 1px solid;
border-bottom-color: ${colors.bannerBorder};
margin: 0px; padding: 0px;
height: 40px;
}

Save your files. “Touch” Styles.jsp to refresh the cache and view your changes through the Web Browser.

Part Two: Moving the “Launch” button

Once again open the file styles_theme.jspf under:

<WASPROFILE_ROOT>\profiles\<profile_name>\installedApps\<cell_name>\wps.ear\wps.war\themes\html\<theme_name>.

Look for the definition of the “launch” class. Change the position to be “absolute” and then add specific pixel locations (top, right, left, etc) as to where you want the “Launch” button to sit.

.launch {
float:${requestScope.cssRules.bidiLeft};
position: absolute;
top: 53px;
border: 0px;