Advertisements

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. “TouchStyles.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;

Advertisements

3 Responses

  1. congratulations on going public… now everyone can read!

  2. I sure look forward to seeing your updates to Themes for WP6.1 this year in Nashville!!

  3. oh no! i’m worried that this blog posting was not some sort of elaborate joke. what happened to the angela with the brother p-touch word processor that took 3 minutes to print 1 page????

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: