Customizing styles used in the Connections

You might want to customize the connections UI by changing the CSS styles, For example by default the lotus banner is black but i wanted to see if i can change it to red. I followed these steps to make the change.


  • I used the firebug to figure out what CSS class has the color definition for the banner and i figure that the lotusBanner defines the background color for the header


    .lotusBanner{
    padding:0 10px;
    background-color:#000000;
    background-image:-moz-linear-gradient(top, #525252 0%,#000000 100%);
    -webkit-gradient(linear, left top, left bottom, from(#525252), to(#000000));
    }

    I did search to find out which css file contains the definition for the lotusBanner css class and in case of Activities application E:\IBM\WebSphere\AppServer\profiles\AppSrv01\installedApps\wpconnectionsCell01\Activities.ear\oawebui.war\nav\common\styles\defaultTheme\defaultTheme.css file defines the lotusBanner class


  • Then i did create a custom.css file under E:\IBM\LotusConnections\data\shared\customization\common\nav\common\styles\defaultTheme, (in my case E:\IBM\LotusConnections\data\shared\customization is lotus shared data directory) and i copied the lotusBanner class in it.

  • I made changes in the lotusBanner class to change value of background color from black to FireBrick red(B22222) so that my lotusBanner css style class looks like this

    .lotusBanner{
    padding:0 10px;
    background-color:#B22222;
    background-image:-moz-linear-gradient(top, #525252 0%,#B22222 100%);
    -webkit-gradient(linear, left top, left bottom, from(#525252), to(#B22222));
    }



After saving my changes i did cleanup my browser cache and when i refreshed the page again i could see the banner being rendered in red like this.

4 comments:

Brian Wert said...

I used firebug to create a custom.css file for Connections 3.0.1. It took me a lot of time to finally get everything looking the way I wanted. Now I upgraded to Connections 4 and all the tags in the CSS file changed. Do you have any tips on modifying my existing custom.css file that had all the color changed for Connections 3.0.1 and making it work for Connections 4 without having to start over with firebug and working from scratch?

srjwebsolutions said...


We are leading responsive website designing and development company in Noida.
We are offering mobile friendly responsive website designing, website development, e-commerce website, seo service and sem services in Noida.

Responsive Website Designing Company in Noida
Website Designing Company in Noida
SEO Services in Noida
SMO Services in Noida

Vikas Chaudhary said...

Battery Mantra is Authorized exide car battery dealer in Noida and Greater Noida. We are providing our service in Indirapuram, Delhi, Ashok Nagar.

Exide Battery Dealer in Noida
Battery Dealer in Noida
Authorized Battery Dealer in Noida
Car Battery Dealer in Noida
Car Battery Dealer
Exide Battery Dealer

EG MEDI said...

Egmedi.com is online medical store pharmacy in laxmi nagar Delhi. You can Order prescription/OTC medicines online.
Cash on Delivery available. Free Home Delivery


Online Pharmacy in Delhi
Buy Online medicine in Delhi
Online Pharmacy in laxmi nagar
Buy Online medicine in laxmi nagar
Onine Medical Store in Delhi
Online Medical store in laxmi nagar
Online medicine store in delhi
online medicine store in laxmi nagar
Purchase Medicine Online
Online Pharmacy India
Online Medical Store