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.

Customizing Lotus Connection look and feel

One of the common requirements of Lotus Connection would be to customize the look and feel so that it confirms to the overall look and feel of the client. I wanted to figure out how to customize the default lotus connection look and feel by adding few lines of text in header(Basic idea was to figure out which .jsp file gets picked up) and i followed these steps. Please note that i used Customizing the user interface document for instructions on what steps to follow

Every feature in lotus connection is separate .ear file and you can either change look and feel for each feature or you can change look and feel for all the features. By default every feature .war file has nav directory that contains the look and feel information like this



The nav directory has set of jsp such as header, footer, login that decides how the header or footer should look like, you can directly change the .jsp file in the .war file ex. WebSphere\AppServer\profiles\AppSrv01\installedApps\wpconnectionsCell01\Homepage.ear\homepage.war\nav\templates\header.jsp for changing the header of HomePage and the changes get reflected on the UI, but this approach wont work in the multi-node environment and also your changes could get overwritten when you apply fix pack to your server. Instead we are supposed to store our changes in the customization directory (It is shared directory that is used across the nodes). If you dont remember the shared directory path that you set during the installation then you can find it out using WAS Admin Console, its stored in CONNECTIONS_CUSTOMIZATION_PATH websphere environment variable path.



In my case its value is E:\IBM\LotusConnections\data\shared\customization, when i went to that directory i can see one empty directory for each of the feature. In my case i want to change the header to add one line of text to header so i copied the E:\IBM\WebSphere\AppServer\profiles\AppSrv01\installedApps\wpconnectionsCell01\Homepage.ear\homepage.war\nav\templates\header.jsp to the E:\IBM\LotusConnections\data\shared\customization\common\nav\templates directory like this



I did change the header.jsp to add this one line of text to it at the end

<h3>Sample text in homepage.ear\header.jsp</h3>


Then i went to connections page to see if the changes were effected and this is what i see




Then i copied the header.jsp to E:\IBM\LotusConnections\data\shared\customization\homepage\nav\templates to see if i can have customized header at HomePage level, i change the line in it to


<h3>Sample Text in homepage\nav\templates\header.jsp</h3>


After saving the changes i went to home page and this is what i see