Theme Me Up Scotty: The Clearspace Edition

It was bound to happen. I mean I couldn’t hold out forever. I have now been at Jive for over thirty days and thus feel it is safe for me to start waxing eloquent on the ways of Clearspace, you know to my two non-technical followers. (Hi Mom!! Hi Dad!) I also got a kick out of the title of this post. No one at Jive will get it (nor will Ma Self unfortunately) but maybe some of you IBMers might.  And no, I didn’t “go there” because IBM still owes me $53.84 on my Amex card.  $53.84 that I am sure they would have collected from me of course!  Okay, well maybe I did, just kinda ☺

Let me first hit on some of the basic steps that I have mastered here at Jive in a little “how to” with just a few “shout outs*” on the Clearspace side.

First, let me begin by prepping for a little theme development. Oh wait, I don’t have to locate some obscure .xmi file hidden deep within the confines of WebSphere to disable caching first?  Hmmm. Nor do I have to wait the eighteen minutes while Portal restarts?  This just seems too foreign to me.  I don’t gotta do nothin’.

So first on the Clearspace side and step number eighty-five on the WebSphere Portal side I am going to change the logo in the top left corner of the page.  Here’s the kicker! In Clearspace I don’t ever have to touch the file system. I can do this all though a web UI. (Granted yes, okay Portal now has that “Theme Builder Portlet” and Jive has the “Theme Builder Plugin” so I think they can both just cancel each other out there. I’m talking about ‘theme-ing’ for the hardcore users here!) So here are the steps:

1. Log into the Admin Console of the Clearspace instance.
2. Navigate to System -> Management -> System Properties.
3. At the bottom choose to Add a New Property.  Name the property skin.default.headerHTML
4. Set the following value with a link to your own Branding image.  In this example I just linked to an image I had uploaded to Clearspace. You know why I can do this? Because every file upload, blog, discussion, etc. has its own unique addressable URL.  Weird how that works, huh? ☺

<table cellspacing=”10px”>
<tr><td><img src=”http://eval2.jivesoftware.com/xyz/servlet/JiveServlet/downloadBody/1001-102-2-1004/banner.png”&gt;
</td></tr>
</table>

Next I want to change the way the top banner renders. Now let me remember, I need to find the banner.jspf file, the topNav.jspf file, a CSS file that is actually a set of three JSPs….nope, not with Clearspace!!! Heck, I don’t even need access to the file system, once again! Instead I have the ability to create a “custom css” template that can be used to override the default CSS settings.  Here is all I need to do:

1. Log into the Admin Console of Clearspace.
2. Navigate to System -> Settings -> Themes.
3. For this example I will just edit the custom theme available out of the box. So click Edit next to this theme.
4. Select the template from the dropdown named /template/global/custom-css.ftl. Click Create New Template.

(Now using firebug you were probably able to figure out which class definitions you needed to include to change the banner but I will list them below.)

5.  For the Template Value enter the following with your color, width, etc. specifications.

/* custom-css */
#jive-userbar {
background:#EF4846;
clear:both;
height:44px;
position:relative;
width:1034px;
}

Do the same with any other CSS Class definitions that you find.  Next all we need to do is handle the Theme mapping aspect. Yes, this part is just like the “Color Palette” option in Portal but without all the steps.

6.    Back on the main Themes page in the Administration console under Global Theme Map, select custom. That’s it. Refresh your page and you have a new theme.

So before I end, and I know this has been a long one. I do want to point out something particularly interesting about this Theme Mapping aspect. Here you have the ability to map a custom theme at a Space level, sub-space level or even to a particular blog. All in one location!

* Note: all “Shout Outs” will be subtly highlighted throughout this post.

Advertisement

Modifying the Quickr 8.1 DE Default Place

Okay, I am far from a regular Quickplace/Domino user or developer. But because I have made it my point to customize all software products IBM I was roped into one of the biggest challenges of my career (and no, it wasn’t installing WebSphere Portal Server!) – modifying the default Place in Quickr for Domino.

So in order to spare you many a sleepless night here is how I did it:

1. Create a new Quickr Place. Let’s name this new Quickr Place “Team Aniston”
   Launch Domino Designer 8.
2. Open the Main Quickr Place in the Designer by selecting File -> Application -> Open and browsing to something like C:\Domino|data\LotusQuickr\lotusquickr\Main.nsf.
3. At the same time follow these steps to open the “Team Aniston” Main Place at C:\Domino\data\LotusQuickr\teamaniston\Main.nsf.
4. Now copy two forms in the \teamaniston\Main.nsf to \lotusquickr\Main.nsf by expanding Forms and copying over QDK_h_Page and QDK_h_SubRoom.
5. Next open a Notes Client and again open both the “Team Aniston” Quickr Place by selecting File -> Open -> Application and navigating to C:\Domino\data\LotusQuickr\teamaniston\Main.nsf and the Quickr one at C:\Domino\data\LotusQuickr\Main.nsf.
6. Copy all the documents from the System/Customize view of teamaniston to the main quickr place. Also copy the Customize document from teamaniston System/Table of Contents to the main quickr place.

Now all you need to do is restart the Quickr Server! Now when you access the Default Quickr Place you should see a Customize option like you do on “Team Aniston” or other Quickr Places that you create. You can then click that button and taken to a screen that will let you upload new .htm files following the standard steps for editting a Theme.

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;