ShowTable of Contents
Overview
The idea for this article came from a customer need. The company had different brands on the market and wanted a different "look & feel" for every brand in their IBM Connections environment. This solution also applies in the case of a company that wants a different UI for different departments on their intranet.
In this scenario, Brand-1 is the main company and social.ondemand.it is the host name of the IBM Connections system. We also have another brand, Net2Action, with host name social.net2action.ondemand.it. We want to use Connections services for both brands, as shown in the following architectural diagram.
To achieve a solution for this scenario, we must define a virtual host for this sub-domain as described in the following sections.
Setting up the HTTP Server
In the IBM HTTP Server (IHS) configuration directory, you must create different configuration files, one for each domain. In this example, we need only one for social.net2action.ondemand.it to be included it in your httpd.conf file.
# ----------
<VirtualHost 172.24.254.17:80>
ServerName social.net2action.ondemand.it
DocumentRoot "D:\IBM\HTTPServer\www\n2a" #create this directory manually
ErrorDocument 404 /e404.html
ErrorDocument 500 /e500.html
ErrorLog D:\IBM\HTTPServer\logs\www\n2a\error.log #create this directory manually
CustomLog D:\IBM\HTTPServer\logs\www\n2a\access.log common #create this directory manually
RewriteEngine on
RewriteLog D:\IBM\HTTPServer\logs\www\n2a\rewrite.log
RewriteLogLevel 9
#------- rewrite for HomePage -----------------
RewriteCond %{REQUEST_URI} ^(/)?$
RewriteRule ^(/)?$ https://social.ondemand.it/homepage/login [L,R=302]
</VirtualHost>
<VirtualHost 172.24.254.17:443>
SSLEnable
SSLClientAuth Optional
SSLServerCert ondemand.it
SSLProxyEngine on
ServerName social.net2action.ondemand.it
DocumentRoot "D:\IBM\HTTPServer\www\n2a"
ErrorDocument 404 /e404.html
ErrorDocument 500 /e500.html
ErrorLog D:\IBM\HTTPServer\logs\www\n2a\error.log
CustomLog D:\IBM\HTTPServer\logs\www\n2a\access.log common
RewriteEngine on
RewriteLog D:\IBM\HTTPServer\logs\www\n2a\rewrite.log
RewriteLogLevel 0
#------- rewrite for HomePage -----------------
RewriteCond %{REQUEST_URI} ^(/)?$
RewriteRule ^(/)?$ https://social.ondemand.it/homepage/login [L,R=302]
</VirtualHost>
Defining a Virtual Host
We also need to define a virtual host for social.ondemand.it as follows:
<VirtualHost *:80>
DocumentRoot "e:\IBM\HTTPServer\www\social" #create this directory manually
ServerName social.ondemand.it
AllowEncodedSlashes On
</VirtualHost>
<VirtualHost *:443>
SSLEnable
SSLClientAuth none
SSLServerCert ondemand.it
ServerName social.ondemand.it
DocumentRoot "e:\IBM\HTTPServer\www\social"
AllowEncodedSlashes On
</VirtualHost>
Customizing IBM Connections Themes
IBM Connections need to load different stylesheets depending from where the request comes, social.ondemand.it or social.net2action.ondemand.it. To do so, we use a parameter in the query string that defines the origin of the request. In our case, the parameter name is
skin.
We want to customize the login page for each domain, changing the "Welcome to IBM Connections" message to something different.
Copy the file com.ibm.lconn.core.strings.templates.properties from the lc.util.web-3.0.jar file found in the <application_name>.ear/<war>/WEB-INF/lib directories in <customization_dir>/strings directory.
Add the following lines:
# custom title
custom.themes.brand1=Welcome to Social Zone
custom.themes.n2a=Welcome to con.nect2action
# this Agreement
agreement.condition1=1.Not publish sensitive information
agreement.condition2=2.Abide by all ethical policies
agreement.condition3=3.All content may be monitored
agreement.condition4=4.No inflammatory or derogatory comments
agreement.condition5=5.No profanity to be used
agreement.condition6=6.All content must be accurate to best of knowledge
agreement.accepttext=I agree to terms and conditions
agreement.title=Usage Agreement
agreement.title.terms=Terms of Agreement
Start modifying the login page. To do so, follow the instructions in the IBM Connections wiki at:
http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_the_user_interface_ic301.
Copy the login.jsp into <installdir>\data\shared\customization\common\nav\templates
Edit the login.jsp.
Find the line <body class="lotusui lotusLogin2 <lc-ui:languageClassname />" onload="checkHighContrast(); load();"> and add the following code:
<div style="display:none">
<h1 id="brand1"><fmt:message key="custom.themes.brand1" /></h1>
<h1 id="n2a"><fmt:message key="custom.themes.n2a" /></h1>
</div>
<script type="text/javascript">
var app = document.location.href.split('/');
var brand = "noskin";
var queryString = window.location.search.substring(1).toLowerCase();
var parameters = new Array();
parameters = queryString.split('&');
for(var i = 0; i < parameters.length; i++) {
if (parameters[i].indexOf("skin")>=0) {
var parameterValue = new Array();
parameterValue = parameters[i].split('=');
brand = parameterValue[1];
}
}
if (brand=="noskin"){
var nameEQ = "Brand" + "=";
var brand = "std";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) {
brand = c.substring(nameEQ.length,c.length);
}
}
}
if (brand != "std") {
var filename = '/'+app[3]+'/nav/styles/'+brand.toLowerCase()+'.css';
var customTitle = document.getElementById(brand.toLowerCase());
document.cookie = "Brand="+brand+"; path=/;";
//alert(filename);
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename);
if (typeof fileref!="undefined"){
document.getElementsByTagName("head")[0].appendChild(fileref);
}
}
var nameEQ = "WASReqURL" + "=";
var uri = "std";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0)
uri = c.substring(nameEQ.length,c.length);
}
var url = window.location.pathname;
var myPageName = url.substring(url.indexOf('/')+1,url.lastIndexOf('/'));
var uriDest = "/"+myPageName+"/";
if (brand != "std") {
uriDest = uriDest + brand.toLowerCase();
}
if (myPageName=="blogs") {
document.cookie = "WASReqURL="+uriDest+"; path=/;"
}
</script>
</script>
Find the line <div class="lotusLoginContent"> and add the following code:
<script type="text/javascript">
if (brand == "std"){
document.write(" <div class=\"agreement\" style=\"display: none;\"> } ");
}
else {
document.write("<div class=\"agreement\">");
}
</script>
<h1><fmt:message key="agreement.title" /></h1>
<div style="height: 190px;">
<table class="lotusLayout">
<tr>
<td>
<h4><fmt:message key="agreement.title.terms" /></h4>
<p><fmt:message key="agreement.condition1" /></p>
<p><fmt:message key="agreement.condition2" /></p>
<p><fmt:message key="agreement.condition3" /></p>
<p><fmt:message key="agreement.condition4" /></p>
<p><fmt:message key="agreement.condition5" /></p>
<p><fmt:message key="agreement.condition6" /></p>
</td>
</tr>
</table>
</div>
<input id="acceptCondition" type="checkbox" onchange="activateLogin()" class="lotusCheckbox" style="margin-top: 10px;">
<fmt:message key="agreement.accepttext" />
</input>
</div>
</div>
Find the line <form class="lotusForm2 lotusLoginForm" role="main" method="post" action="<c:out value="${loginPostUri}" />"> and add the following code:
<script type="text/javascript">
if (brand == "std"){
document.write('<h1 id="boxTitle"><fmt:message key="login.title" /></h1>');
}
else {
document.write('<h1 id="boxTitle">'+customTitle.innerHTML+'</h1>');
}
</script>
Creating the Style Sheets
We now need to create the style sheets for the two domains social.ondemand.it and social.net2action.ondemand.it: sk_brand1.css and sk_n2a.css.
These are the two files we used:
Brand1 CSS
/* ----------------------------------------------------------------------
CSS
---------------------------------------------------------------------- */
.lotusui .lotusLogo, .lotusLoginLogo {
background-image: url("/activities/nav/styles/images/brand1/logo.png");
background-repeat: no-repeat;
height: 80px;
width: 250px;
float: left;
}
.myLogo, .myLogo {
background-image: url("/activities/nav/styles/images/brand1/logo.png");
background-repeat: no-repeat;
float: left;
height: 80px;
width: 250px;
}
.lotusBanner ul.lotusInlinelist li a, .lotusBanner ul li span.lotusUser {
color: #00000F;
}
.lotusBanner ul.lotusLinks a, .lotusBanner ul.lotusLinks a:visited, .lotusBanner ul.lotusLinks a:active, .lotusBanner ul.lotusLinks a:hover {
color: #00000F;
}
.lotusBanner {
background-color: #FFFFFF !important;
background-image: none !important;
}
.lotusBanner ul.lotusInlinelist li a, .lotusBanner ul li span.lotusUser {
color: #00000F !important;
}
.lotusTitleBar {
background-color: #11221A !important;
background-image: none !important;
}
.lotusBanner ul.lotusInlinelist li a:visited, .lotusBanner ul.lotusInlinelist li a:hover, .lotusBanner ul.lotusInlinelist li a:active {
color: #00000F !important;
}
.lotusFrame {
width: 1000px;
}
body.lotusui {
background: url("/blogs/nav/styles/images/brand1/master-bg.jpg") repeat scroll 0 0 transparent;
color: #5A5A5A;
}
.lotusMain {
background-color: #FFFFFF !important;
}
.lotusTitleBar .lotusTabs li {
background-color: #00000F !important;
}
.lotusTitleBar .lotusSearch .lotusScope, .lotusTitleBar .lotusSearch .lotusBtnImg {
background-color: #00000F;
}
.lotusTitleBar .lotusRightCorner {
}
.lotusTitleBar .lotusTabs li.lotusSelected {
}
.lotusTitleBar .lotusSearch .lotusText, .lotusTitleBar .lotusSearch .lotusScope, .lotusTitleBar .lotusSearch .lotusBtnImg, .lotusTitleBar .lotusTabs li {
}
.lotusFooter {
background-image: none;
margin: 0;
}
.lotusFooter table td ul a, .lotusFooter table td ul a:active, .lotusFooter table td ul a:hover, .lotusFooter table td ul a:visited {
color: #FFFFFF;
}
.lotusui a, .lotusui a:visited, .lotusui a:hover {
color: #00000F;
}
.lotusNavMenu {
}
.lotusFrame {
min-width: 90px;
}
.lotusTitleBar .lotusTabs li.lotusSelected a, .lotusTitleBar .lotusTabs li.lotusSelected a:visited, .lotusTitleBar .lotusTabs li.lotusSelected a:hover, .lotusTitleBar .lotusTabs li.lotusSelected a:active {
color: #00000F !important;
}
.lotusSection h2, .dijitTitlePaneTitle, .portlet-section h2 {
background-color: #5A5A5A;
background-image: none;
border-color: #317BE1;
border-radius: 3px 3px 3px 3px;
border-width: 1px 0;
box-shadow: 0 3px 3px #B4B0B0;
color: #FFFFFF !important;
margin: 0;
padding-left: 20px;
}
.lotusBanner ul.lotusInlinelist li.lotusHover a {
}
.lotusBanner ul.lotusInlinelist li {
margin-top: 65px;
}
.lotusMenu li.lotusSelected a, .portlet-menu li.lotusSelected a, .lotusMenu h3.lotusSelected, .portlet-menu h3.lotusSelected {
background-color: #5A5A5A !important;
background-image: none !important;
border-color: #317BE1 !important;
border-radius: 3px 3px 3px 3px !important;
border-width: 1px 0 !important;
box-shadow: 0 3px 3px #B4B0B0 !important;
color: #FFFFFF !important;
margin: 0 !important;
padding-left: 20px !important;
width: 180px;
}
.lotusWidget2 h2 {
background-color: #5A5A5A !important;
background-image: none !important;
border-color: #317BE1 !important;
border-radius: 3px 3px 3px 3px !important;
border-width: 1px 0 !important;
box-shadow: 0 3px 5px #B4B0B0 !important;
color: #FFFFFF !important;
margin: 0 !important;
padding-left: 20px !important;
}
.lotusBlue .Section .dijitTitlePaneTitle {
background-color: #A4A4BF;
border-top: 2px solid #CCCBCB;
font-size: 1.2em;
font-weight: bold;
}
.lotusMenu .lotusTree .dijitTreeRow.lotusSelected {
background-color: #5A5A5A !important;
background-image: none !important;
border-color: #317BE1 !important;
border-radius: 3px 3px 3px 3px !important;
border-width: 1px 0 !important;
box-shadow: 0 3px 5px #B4B0B0 !important;
color: #FFFFFF !important;
margin: 0 !important;
padding-left: 20px !important;
}
/***************************** CSS *************************************/
n2a CSS
/* ----------------------------------------------------------------------
CSS
---------------------------------------------------------------------- */
#lotusFooter, .lotusFooter {
border-radius: 0 0 14px 14px;
overflow: visible;
}
.lotusui .lotusLogo, .lotusLoginLogo {
background-image: url("/homepage/nav/styles/images/n2a/logo.jpg");
background-repeat: no-repeat;
height: 50px;
width: 95px;
float: left;
}
.lotusTitleBar {
background-image: url("/homepage/nav/styles/images/n2a/back07.gif");
}
.myLogo, .myLogo {
background-image: url("/homepage/nav/styles/images/n2a/logo.jpg");
background-repeat: no-repeat;
height: 50px;
width: 95px;
float: left;
margin-top:10px;
}
.lotusBanner ul.lotusInlinelist li a, .lotusBanner ul li span.lotusUser {
color: #259191;
}
.lotusBanner ul.lotusLinks a, .lotusBanner ul.lotusLinks a:visited, .lotusBanner ul.lotusLinks a:active, .lotusBanner ul.lotusLinks a:hover {
color: #259191;
}
.lotusBanner {
background-color: #FFFFFF;
background-image: none;
border-radius: 14px 14px 0 0;
height: 70px;
}
.lotusBanner ul.lotusInlinelist li a, .lotusBanner ul li span.lotusUser{color:#259191;}
.lotusTitleBar {
background-color: #9D1498;
background-image: none;
}
.lotusBanner ul.lotusInlinelist li a:visited, .lotusBanner ul.lotusInlinelist li a:hover, .lotusBanner ul.lotusInlinelist li a:active {
color: #259191;
}
.lotusFrame {
width: 920px;
}
body.lotusui {
/*background-color: #F4F5F6;*/
color: #5A5A5A;
background: url("/homepage/nav/styles/images/cosmo/sfondo-intranet.gif") repeat scroll 0 0 transparent;
}
.lotusMain {
background-color: #FFFFFF;
}
.lotusTitleBar .lotusTabs li {
background-color: #259191 !important;
border-bottom-color: #9D1498;
}
.lotusTitleBar .lotusSearch .lotusScope, .lotusTitleBar .lotusSearch .lotusBtnImg {
background-color: #259191;
}
.lotusTitleBar .lotusRightCorner {
border-bottom: #9D1498;
}
.lotusTitleBar .lotusTabs li.lotusSelected {
border-color: #9D1498 #9D1498 #9D1498;padding
}
.lotusTitleBar .lotusSearch .lotusText, .lotusTitleBar .lotusSearch .lotusScope, .lotusTitleBar .lotusSearch .lotusBtnImg, .lotusTitleBar .lotusTabs li {
border-color: #9D1498;
}
.lotusFooter {
background-color: #9D1498;
background-image: none;
margin: 0;
}
.lotusFooter table td ul a, .lotusFooter table td ul a:active, .lotusFooter table td ul a:hover, .lotusFooter table td ul a:visited {color: #FFFFFF;}
.lotusui a, .lotusui a:visited, .lotusui a:hover {color: #259191;}
.lotusNavMenu {border-color: #9D1498;}
/**bordi stondati**/
.wrapHat {
background-image: url("../images/hat.png");
background-position: center;
background-repeat: no-repeat;
height: 22px;
}
.wrapBoot {
background-image: url("../images/boot.png");
background-position: center;
background-repeat: no-repeat;
height: 11px;
margin: 0 0 30px;
}
.lotusFrame {min-width: 90px;}
.lotusTitleBar .lotusTabs li.lotusSelected a, .lotusTitleBar .lotusTabs li.lotusSelected a:visited, .lotusTitleBar .lotusTabs li.lotusSelected a:hover, .lotusTitleBar .lotusTabs li.lotusSelected a:active{
color: #259191 !important;
}
.lotusBanner ul.lotusInlinelist li.lotusHover a{border-color:#EE5734;}
.lotusBanner ul.lotusInlinelist li {margin-top: 10px;}
.lotusMenu li.lotusSelected a, .portlet-menu li.lotusSelected a, .lotusMenu h3.lotusSelected, .portlet-menu h3.lotusSelected .lotusSelected {
background-color: #9D1498;
background-image: none;
border-color: #EF5A36;
border-radius: 3px 3px 3px 3px;
border-width: 1px 0;
color: #FFFFFF !important;
margin: 0;
width: 120px;
}
.lotusMenu .lotusTree .dijitTreeRow.lotusSelected {
background-color: #9D1498;
background-image: none;
border-color: #EF5A36;
border-radius: 3px 3px 3px 3px;
border-width: 1px 0;
color: #FFFFFF !important;
margin: 0;
width: 120px;
}
.lotusMenu li.lotusSelected a, .portlet-menu li.lotusSelected a, .lotusMenu h3.lotusSelected, .portlet-menu h3.lotusSelected {
background-color: #9D1498 !important;
background-image: none !important;
border-color: #9D1498 !important;
border-radius: 3px 3px 3px 3px !important;
border-width: 1px 0 !important;
box-shadow: 0 3px 3px #B4B0B0 !important;
color: #FFFFFF !important;
margin: 0 !important;
padding-left: 20px !important;
width: 180px;
}
.lotusWidget2 h2 {
background-color: #9D1498 !important;
background-image: none !important;
border-color:#9D1498 !important;
border-radius: 3px 3px 3px 3px !important;
border-width: 1px 0 !important;
box-shadow: 0 3px 5px #B4B0B0 !important;
color: #FFFFFF !important;
margin: 0 !important;
padding-left: 20px !important;
}
.lotusBlue .Section .dijitTitlePaneTitle {
background-color:#9D1498;
border-top: 2px solid #CCCBCB;
font-size: 1.2em;
font-weight: bold;
}
.lotusSection h2, .dijitTitlePaneTitle, .portlet-section h2 {
background-color: #9D1498 !important;
background-image: none !important;
border-color: #9D1498 !important;
background-position: left top;
border: 1px solid #CCCCCC;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
box-shadow: 0 3px 5px #EEEEEE;
color: #FFFFFF !important;
font-size: 1em;
margin-bottom: 0;
padding: 4px 5px 6px;
}
/***************************** CSS *************************************/
The Result
This is the result:
Editing the header.jsp File
Now copy the header.jsp from one of the features from one of the WAR files located in
<WAS_home>/profiles/<profile_name>/installedApps/<cell_name>/<application_name.ear>/<application_name.war>
where:
* <WAS_home> is the directory where you installed IBM WebSphere Application Server.
* <profile_name> is the profile where you installed one of the IBM Connections applications.
* <cell_name> is the cell where you installed the application.
* <application_name.ear> is the EAR file name for the application.
* <application_name.war> is one of the following file names:
Application | File name |
Activities | oawebui.war |
Blogs | blogs.war |
Bookmarks | dogear.webui.war |
Communities | comm.web.war |
Files | qkr.share.files.war |
Forums | forum.web.war |
Home page | homepage.war |
Profiles | lc.profiles.app.war |
Search | search.war |
Wikis | qkr.share.wiki.war |
In $CONNECTIONS_CUSTOMIZATION_PATH/common/nav/templates, edit the header.jsp.
Find the line <div class="lotusInner"> and add the following code:
<script type="text/javascript">
// trasformo il parametro in un cookie
// skin=<nomeBrand>;
var brand = "noskin";
var queryString = window.location.search.substring(1).toLowerCase();
//alert(queryString);
//if (queryString.length==0) {return "null";}
var parameters = new Array();
parameters = queryString.split('&');
for(var i = 0; i < parameters.length; i++) {
//alert(parameters[i]);
//alert(parameters[i].indexOf(parameterName));
if (parameters[i].indexOf("skin")>=0) {
//alert(parameters[i]);
var parameterValue = new Array();
parameterValue = parameters[i].split('=');
brand = parameterValue[1];
}
}
var link = document.location.href.split('/');
//alert(link[3]);
if (brand=="noskin"){
brand="std";
var nameEQ = "Brand" + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0)
brand = c.substring(nameEQ.length,c.length);
}
}
if (brand!="std"){
document.write('<div class="myLogo" id="myLogo"><span class="lotusAltText">IBM Connections</span></div>');
document.cookie = "Brand="+brand+"; path=/;";
var filename = '/'+link[3]+'/nav/styles/sk_'+brand.toLowerCase()+'.css';
//var customTitle = document.getElementById(brand);
//alert(filename);
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename);
if (typeof fileref!="undefined"){
document.getElementsByTagName("head")[0].appendChild(fileref);
}
}
else{
document.write('<div class="lotusLogo" id="lotusLogo"><span class="lotusAltText">IBM Connections</span></div>');
}
</script>
Customizing the Blog Theme
To customize the blog theme, follow instructions in the IBM Connections wiki at:
http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_a_blog_theme_ic301
Now we need to change the header for Blogs.
Create a "themes" directory in $CONNECTIONS_CUSTOMIZATION_PATH/blogs/
Create a subdirectory for each brand in $CONNECTIONS_CUSTOMIZATION_PATH/blogs/themes/
Copy again the header.jsp in each subdirectory naming it _header.vm
Edit the _header.vm file.
Find the line #authCheck301($model.weblog.id false)#end and add the following code:
<script type="text/javascript">
var brand = "std";
var queryString = window.location.search.substring(1).toLowerCase();
var parameters = new Array();
parameters = queryString.split('&');
for(var i = 0; i < parameters.length; i++) {
if (parameters[i].indexOf("skin")>=0) {
var parameterValue = new Array();
parameterValue = parameters[i].split('=');
brand = parameterValue[1];
}
}
if (brand!="std"){
document.cookie = "Brand="+brand+"; path=/;";
}
</script>
Stop and restart IBM Connections.
Go back in the IHS configuration directory and edit the two configuration files we created at the beginning of this article.
Find the line:
RewriteRule ^(/)?$ https://social.ondemand.it/homepage/login/
and replace it with:
RewriteRule ^(/)?$ https://social.ondemand.it/homepage/login/?skin=<brand>
where brand in our example can be brand1 or n2a.
Stop and start IHS.
The Result
The result looks like this:
About the Authors
- Roberto Boccadoro is an IT Specialist in the Lotus Client Technical Professional team. You can reach him at roberto.boccadoro@it.ibm.com
- Andrea Fontana currently works as a System Architect, defining, organizing, and configuring complex IBM product-based solutions. In particular he works with WebSphere Portal and its collaborative environment including Domino 8.0.x, 8.5, IBM Connections 3.01, Lotus Quickr 8.0.x, and IBM Sametime, with respect to setting up SSO Kerberos integration solutions and configuring systems with a r-proxy solution with SSL integration. His past experience includes roles as an Application Developer, Database Administrator, and Project Manager in a wide variety of business applications. He graduated from the ITIS Zuccante C., Mestre (Venice), specializing in Industrial Electronics. You can reach Andrea at a.fontana@net2action.com.