Skinning IdeaJam by Elguiji Software

One of our clients here at iStudio was looking to have a custom design/ skin applied to an idea management software package they were using called IdeaJam. IdeaJam is a product of Elguji Software, LLC, and is used by a number of big-name companies from around the world.

The concept is amazingly simple, yet extraordinarily powerful: with IdeaJam, people post their ideas on a topic, and others can vote on their agreement or disagreement with the idea by “promoting” or “demoting” it. Additionally, comments can be provided to elaborate ones thoughts on the matter at hand.

Although there is not a whole lot of configurability with the template itself, in the sense that you can’t modify the HTML that makes up the wrapper, it’s been done in a fairly good standards-complaint way that this shouldn’t raise any issues – at least from what I’ve seen so far!

The first course of action I wanted to take was disabling their main style sheet. After a conference call with their team I learned that this would not be an issue. Good news, because trying to compete with existing styles is doable, but a real pain in the neck and makes for a very muddled style sheet.

Besides their default style sheet which gives a basic layout, as seen here, IdeaJam uses YUI Grids CSS for laying out their template in grid-like fashion. I can see only minor tweaking being required – mainly to resize the columns slightly and also increasing the overall width of the wrapper to meet our design requirements.

Opinions and thoughts…

Although skinning this product was fairly painless, there were definitely a few bumps along the way:

• Implementing per-page or per-section custom styling is hard to do when there is no unique ID or class name assigned to the pages. Basically, each page wrapper is identical no matter what section or page you are viewing. My workaround for this was to use JavaScript to check a page for a specific element ID that only would exist in that page and then assign a class name to a high-level <div> element. This seemed to work pretty good.
• For some reason, not much care was given to the HTML that is rendered. For example, section headers are sparatic at best – in some cases they are correctly marked up (with an <h2>) but in a lot of other areas they are not. Primarily when viewing an idea (i.e. http://www.ideajam.net/IdeaJam/P/ij.nsf/0/B3B803C4E36F65768625763C00323BAF?OpenDocument). None of the sub-sections (Comments, Votes, Blog or Embed) are marked up at all – they’re just simply dumped in as plain text, which makes styling them very frustrating.

Best course of action

The following are the steps I took in skinning the site – I recommend you doing the same, unless there is a better way?

• Disable the default style sheet (as referenced above) – default.css
• Use a <base> tag and point to IdeaJam (http://www.ideajam.net).
• Add in the styles necessary to lay the site out per your design’s specifications. In my case I did the styles inline, but you could always use an external style sheet.
• For imagery, ensure that they exist on a publically-accessible server somewhere. Linking to them locally will not work since the <base> tag is forcing all your assets to brought in from ideajam.net (unless you specifically point to a third-party server).

Bugs and workarounds

While skinning the IdeaJam page, I found one bug that mainly affected IE-based browsers. An extra quote (“) in the HTML markup was causing (unknown to me) some of my styles to be ignored. Once I removed the offending quote mark, everything worked as expected. This mystery quote mark was found here (see red bolded text):

<div style="background-color:#336699; color:white;font-weight:bold;padding:10px;-moz-border-radius-bottomleft:4px; -webkit-border-bottom-left-radius:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px;" <span style="color: #ff0000;"><strong>"id="mast"</strong></span>>Have you checked out IQJam our latest product? IQJam is a Question and Answer Community for Notes/Domino. Try it <a href="http://iqjam.net/">now</a> !</div>

Easy to miss, but thinks to the W3C HTML validator I was able to pick it up and remove it.

In case you can’t see the problem in the above code snippet, the issue is with the quote mark immediately before the id attribute.

Five hours later, now that the template skinning is near complete I’ll see how this will work within a live environment. I have a call with one of IdeaJam’s technical resources tomorrow so will have to see how that goes in terms of getting this implemented into their system.