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