Customizing IBM Connections

IBM Connections allows customization of the user interface, for example the login page, themes, new tabs, headers, etc. which is important for example to apply a corporate look and feel.

There is already quite a number of good resources out there that explain this functionality in great detail and I’m not going to repeat all of this. Instead I just want to give you some pointers and write about some things that I discovered when doing my first customization.

The redbook is probably the most detailed documentation about customization. There is also product documentation and an older developerWorks article that might still contain some useful information.

Additionally Sharon Bellamy has created a great deck giving a (quick) overview of customization:

Sharon also provides some sample files used in the deck above.

I played around with customization recently. After you understand things like the customization directory, debug variable, application file structure, etc. it seems pretty straight forward. Below are just some minor findings which might be useful for other people.

– Clear your browser cache every time you change something. A browser refresh often doesn’t work or only too late. This might be obvious but for me as an XPages developer I didn’t discover this when defining styles in my XPages directly (and not via css).

– Understand the directory and applications structure. I took me some time to understand that I had to do my css changes for example for the header in multiple files redundantly, once per application.

– As Sharon also wrote (slide 14) customization should be done in the custom.css file so that it doesn’t get overwritten when updating IBM Connections. For my simple sample however where I only changed the logo and positioning in the header I had to change defaultTheme.css since for some reason the defaultTheme.css was loaded after the custom.css and not even an !important could change this.