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.