Customization of the Next Gen Theme for IBM Connections

As Luis Benitez blogged about, there is a new IBM Connections Theme which looks pretty nice.

I just installed it on our production server but of course I had to customize it to our corporate needs. Unfortunately I had no luck doing this through changing CSS style definitions as described here. Solution was to edit the com.ibm.social.gen4.theme_4.0.0.20130627-1409.jar directly.

If you installed 4.5.0.0-IC-Multi-LO75951 (as recommended) on the IBM Next Gen Theme for IBM Connections download site you have to change the jar file in 2 directories!

-> WAS_PROFILE/installedApps/CELL/Common.ear/connections.web.resources.war/WEB-INF/eclipse/plugins/

-> <CONNECTIONS_PROVISION_PATH>/webresources/

Now our Connections interface looks like this:

NectGEn

Comments

Adam Brown
Reply

Nice work Klaus. I was wondering about customising this new theme. Only one thing you are missing though……..Kudos Badges!

Klaus Bild
Reply

Good idea Adam, I think I have to speak to the supplier of Kudos badges soon 😉

Jared
Reply

I’ve applied this Theme but the cool little icons next to the menu do not show up for me…
how are these icons applied?

Klaus Bild
Reply

Do you have a customized header.jsp?

Jared
Reply

Yes – modified it for Kudos Badges.

Klaus Bild
Reply

I would recommend to test the theme without the header customization, just to test if issue comes from your customization.

Jared
Reply

Yes I performed a test without the modified header.jsp – but still no icons. Do you think it may have something to do with the fact I migrated from v4.0 ?
cheers 🙂

Jose
Reply

Thanks! This was really helpful

Isn’t it enough changing the files in WAS_PROFILE/installedApps/CELL/Common.ear/connections.web.resources.war/WEB-INF/eclipse/plugins/

Why is it needed to change the files here?
/webresources/

Andrew
Reply

Hi Klaus,

How did you apply the changes to the JAR file? Did you add a custom.css and images to resources/css/defaultTheme ? Or did you alter defaultTheme.css?

Also, did you copy the JAR to WAS_PROFILE/installedApps/CELL/Common.ear/connections.web.resources.war/WEB-INF/eclipse/plugins/ ? We don’t have the JAR file there, just in /webresources/

Cheers,

Andrew.

Klaus Bild
Reply

Hi Andrew,
right, I added the changes directly to defaultTheme.css
I didn’t copy the jar file to WAS_PROFILE/installedApps/CELL/Common.ear/connections.web.resources.war/WEB-INF/eclipse/plugins/ , it was actually already there after the CR1/4.5.0.0-IC-Multi-LO75951 installation.
Cheers
Klaus

Robert Farstad (@robertfarstad)
Reply

In my case, the jar file was not in the folder
–> WAS_PROFILE/installedApps/CELL/Common.ear/connections.web.resources.war/WEB-INF/eclipse/plugins/

So the only place I changed the defaultTheme.css, was in the jar file in the folder
–> /webresources/

Klaus Bild
Reply

Same on my environment after applying CR2, the jar is now only in the webresources path (com.ibm.social.gen4.theme_4.0.0.20130627-1409.jar) but still works.
Btw., if you want to circumvent the unpacking/packing of the jar file just create a folder with the jar file name (com.ibm.social.gen4.theme_4.0.0.20130627-1409.jar), unpack the jar there and test your customizations, you don’t have to repack

Jared
Reply

Has anyone successfully replaced the IBM Connections logo in this theme? I can do it live in Firebug playing around with the CSS. But if I make the same changes to the jar file itself, restart Connections, my theme gets all messed up! Any ideas?

Klaus Bild
Reply

Yes, I did. Sounds like you have a prob repacking the jar -> don’t repack it, test it extracted as I mentioned in the last comment.

Jared
Reply

I actually didn’t unpack it in the first place – I’ve just been opening the jar file with WinRAR or an equivalent.. and editing the CSS files directly… it’s been working for me for all other customisations – just not the logo. I’ve been placing the code under “.lotusui30 .lotusBanner .lotusLogo”.

Klaus Bild
Reply

I do the same, I use “.lotusui30 .lotusBanner .lotusLogo” and add the background image “/com.ibm.social.gen4.theme/sprite/belsoftlogo.png” and copy the image to “…provision/webresources/com.ibm.social.gen4theme_4.0.0.20130627-1409.jar/resources/sprite/”

Jared

hmm – not sure what I am doing wrong here…
1. I have the logo image called “DNLogo.png” in the .jar file under the “sprite” folder
2. I have modified “defaultTheme.css” – adding the following…

.lotusui30 .lotusBanner .lotusLogo {
background-image: url(“/com.ibm.social.gen4.theme/sprite/DNLogo.png”);
background-position: 0px 12px; height: 38px; width: 155px;
}

I placed the above AFTER “.lotusui30 div.lotusBanner .lotusLogo .lotusAltText”
(I placed display: none; inside this)

3. copied the jar file to both “CONNECTIONS_PROVISION_PATH/webresources/” and “WAS_PROFILE/installedApps/CELL/Common.ear/connections.web.resources.war/WEB-INF/eclipse/plugins/”
(I am running CR1)

4. I have installed required update APARLO75951

5. Checked out the config and made appropriate changes, cleared temp files and restarted WAS

Still the logo does not appear! My brain is hurting trying to figure this one out!
Any help/experience would be appreciated!

Anuj
Reply

Hi All, i have a question, how can i apply the same changes with other color themes which is placed in customization/theme folder.?
Thanks in advance.

Nacho (@nachoenjuto)
Reply

Hi guys,

I am trying to apply the New Gen Theme. So far is good, but when it comes to change the community theme, it keeps taking the old theme, as it happens on Greenhouse. I know that every community theme has its own theme folder, and I doubt that the New Gen Theme has been done to support community themes…. am I right?? did you manage to configure the New Gen Theme for all different community themes?
Thanks a happy new year 🙂

Leave a Reply

%d bloggers like this: