Thursday, January 19, 2017

IBM Connections 5.5 - Make top header/menu sticky

Update: Now also supports Safari on Mac. I got a comment on this blog-entry from Stanislav Shvachko, who pointed out that it does not work on Safari on Mac.
I went through the code and fixed it. So no it also works for Safari, Internet Explorer 11, Firefox and Chrome.

Original Blog:

I had this challenge given to me from a customer;
"Can you make the top menu/header always visible when scrolling the pages downwards in Connections?"

Originally, my answer was NO, because this is not an out-of-the-box option.

But, being the html/css enthusiast as I am, I started looking into it.

I played around a bit with it in Firefox using Firebug. And I noticed that when I put in a "position: fixed" css property on the correct Divs, I was actually getting somewhere.

Along the way, I tested all the different apps in Connections, and in some of the apps, like Homepage, Files and the Profiles Directory Search, there were already some elements that was "sticky" when you were scrolling down.

Plus, when I tried accessing the top-menus in Connections, after I put the header in sticky-mode, the drop-down menus needed some tweaking regarding it´s position.

So, in the end, here´s the custom.css that I came up with.

I can not promise that I´ve covered all the areas and that this will work in all browsers, in all scenarios. But this one worked in my Connections 5.5 CR2 server in Firefox, Internet Explorer 11 and in Chrome.

NOTE that if you have a logo already present in the custom.css, as described here you need to edit my css regarding the "top" and the "margin-top" pixel sizes. Because if you have a logo which is larger in height and is pushing the header-height downwards a bit, you need to add more pixels in those 2 css properties.

Ok, if you don´t have a "custom.css" already in place in you Connections installation, create this file in the "shared\customization\themes\hikariTheme" directory. (You might have to create this directory structure if it´s not already there)

Then, using your favorite text-editor, paste this into it:

/* Header code */
.lotusui30 .lotusBanner {
    background: #325c80 none repeat scroll 0 0;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 11;
    overflow: visible;
    text-align: left;

/* The top header/banner/menu - added position and width. The rest is default values. */
.lotusui30 div.lotusBanner .lotusRightCorner {
    background: #325c80 none repeat scroll 0 0;
    height: 44px;
    overflow: hidden;
    padding-bottom: 1px;
    position: fixed; /*NEW*/
    width: 100%; /*NEW*/

/* The body below the header/banner/menu, needs top padding of 42px */
.lotusui30 .lotusTitleBar, .lotusui30 .lotusTitleBar2 {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    border-radius: 0;
    margin: 0;
    padding: 42px 0 0; /*NEW*/

/* Fix for Files app - lefmenu which is already sticky. Adding some top margin */
.files-independent-scrollbars-compatible .lotusui30_body .lotusMain {
    padding-left: 50px;
    padding-right: 0;
    top: 42px;

/* Fix for the Homepage "what do you want to share" box, which was already sticky. Added som top margin */
.lotusStream #activityStreamMain.lotusWidgetBody .streamHeaderWrapper.isSticky {
    margin-top: 42px; /*NEW*/
    position: fixed; /*NEW*/
    top: 0;
    z-index: 2;

/* Fix for the homepage left-hand side menu, which was already sticky. Added some top margin */
#homepageLeftNavigationMenuContainer.isSticky {
    margin-top: 42px !important; /*NEW*/
    position: fixed; /*NEW*/
    top: 10px;
    width: 215px;

/* Fix for the dropdown menus in the banner. Needed 42px top margin */
.dijitPopup {
    background-color: transparent;
    border: 0 none;
/*    margin: 42px 0 0; /*NEW*/ */
    padding: 0;
    position: absolute;

/* Fix for the sticky grey search bar in Directory Search. Needed 45px top */
.lotusui30 .lconn_directoryPage .lconn_searchNode.fixed {
    background-color: #f0f0f0;
    padding-top: 15px;
    position: fixed; /*NEW*/
    top: 45px !important; /*NEW*/
    z-index: 900;

/* Thanks to @robertfarstad I now have a sticky top banner in Connections */

And then, a simple restart of the "Common" application should suffice, in order for you to see the changes. (Perhaps a browser cache wipe as well).

If you have issues with the fact that custom.css is not being picked up at all by Connections, you might find some tips here:

I ask of you. If you try this, could you please notify me if there´s anything that I´ve missed regarding sticky stuff? Positioning of other widgets, menus and such is something that can be tuned in this css, but I need to know which page/app you see that it´s not working on.
If you have a test server, it´s real simple to test this out. So please do and let me know the result, good or bad :-)

I have some fellow IBM Connections friends on Skype that is going to test this. I will update this blog post with their findings and results as well.

Oh, yeah... Here´s the result on "my profile" page:


Unknown said...

waouh! great tip

Thanks Robert

Unknown said...

Works great ! Thanks for this.

Unknown said...

Glad to hear it.

I´ll update this blog-entry if there´s some new custom.css code that needs to be a part of it. So it´s important that if you see something that´s not in it´s correct position, let me know :-)

Unknown said...

Could you please check why this great trick does not work on Mac in Safari?

Unknown said...

You are absolutely correct. It looks crap in Safari. Being a Mac user myself, I have no Idea why I didn't´t test this browser.

I´ll look into it :-)

Unknown said...

Stanislav, I think I fixed it for Safari as well now. Keep me updated on how it goes :-)

This is a huge hornets nest for me to post. When I wrote this blog-entry I kept thinking.. "Robert... This is css design and the browsers out there don´t speak the same language... You might be setting yourself out for a big fall here...."
But hey, he who don´t dares :-)

Unknown said...

Hi Robert,
I installed updated version of .CSS and looks like it works!

Good job!

Unknown said...

That´s good to hear :-) Thanks!

Unknown said...

Thanks Robert, added the CSS to my existing custom.css file and it works great!

Unknown said...

Fabulous :-)