Branding IBM Connections 3

Para alterar as cores básicas do IBM Connections, basta incluir um arquivo chamado custom.css no seguinte local:

connections_home/data/shared/customization/common/nav/common/styles/defaultTheme/

Veja abaixo as linhas e propriedades que devem ser copiadas do defaultTheme.css e colocadas no custom.css para trocar as cores básicas do IBM Connections(no exemplo abaixo, utilizaremos as cores prata e branco):

/*Linha73*/
ul.lotusList li.lotusSelected{background-color:#f2f2f2}
/*Linha85*/
.lotusMenu li.lotusSelected a, .portlet-menu li.lotusSelected a, .lotusMenu h3.lotusSelected, .portlet-menu h3.lotusSelected{color:#000 !important;margin:0;padding-left:20px;background-color:#f2f2f2;background-image:-moz-linear-gradient(#f6f6f6 0%, #c2c2c2 100%);background-image:-webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#c2c2c2));border-width:1px 0;border-color:#919191;}
/*Linha108*/
.lotusPalette .lotusMenu li.lotusSelected a{background-color:#f2f2f2;}
/*Linha119*/
.lotusSearch .lotusScope:hover, .lotusSearch .lotusScope:focus{background-color:#f2f2f2}
/*Linha154*/
.lotusVCard .lotusActionMenu a:hover, .lotusVCard .lotusActionMenu a:focus, .lotusVCard .lotusActionMenu a:active{color:#fff !important;background-color:#f2f2f2;}
/*Linha169*/
body.lotusui {color:#222;background-color:#fff;}
/*Linha174*/
.lotusBanner ul.lotusUtility a, .lotusBanner ul.lotusUtility a:visited, .lotusBanner ul.lotusUtility a:active, .lotusBanner ul.lotusUtility a:hover{color:#000}
/*Linha175*/
.lotusBanner ul.lotusLinks a, .lotusBanner ul.lotusLinks a:visited, .lotusBanner ul.lotusLinks a:active, .lotusBanner ul.lotusLinks a:hover{color:#000}
/*Linha177*/
.lotusBanner{padding:0 10px;background-color:#fff;background-image:-moz-linear-gradient(top, #ffffff 0%, #ffffff 100%);-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff));}
/*Linha182*/
.lotusBanner ul.lotusInlinelist li a, .lotusBanner ul li span.lotusUser{border-width:1px 1px 0 1px;border-style:solid;border-color:transparent;color:#000;font-weight:bold;display:block}
/*Linha217*/
.lotusTitleBar {margin:0;border-bottom:8px solid #fff;background-color:#f2f2f2;background-image:-moz-linear-gradient(#f7f7f7 0, #f7f7f7 1px, #f6f6f6 1px, #f3f3f3 50%, #e6e6e6 50%, #c2c2c2 100%);background-image:-webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#c2c2c2), color-stop(.03, #f7f7f7), color-stop(.03, #f6f6f6), color-stop(50%, #f3f3f3), color-stop(50%, #e6e6e6), color-stop(100%, #c2c2c2));-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;}
/*Linha219*/
.lotusTitleBar .lotusRightCorner {border-bottom:1px solid #919191;}
/*Linha220*/
.lotusTitleBar .lotusSearch .lotusText, .lotusTitleBar .lotusSearch .lotusScope, .lotusTitleBar .lotusSearch .lotusBtnImg, .lotusTitleBar .lotusTabs li{border-color:#919191;}
/*Linha221*/
.lotusTitleBar .lotusTabs li{border-bottom-color:#919191;background-color:#c2c2c2;}
/*Linha222*/
.lotusTitleBar .lotusSearch .lotusScope, .lotusTitleBar .lotusSearch .lotusBtnImg{background-color:#c2c2c2;color:#000;}
/*Linha224*/
.lotusTitleBar .lotusTabs li.lotusSelected{border-color:#919191;border-bottom-color:#fff;}
/*Linha227*/
.lotusTitleBar h2{color:#000;padding-top:8px;padding-left:20px;}
/*Linha229*/
.lotusTitleBar .lotusTabs li a{color:#000;}
/*Linha230*/
.lotusTitleBar .lotusTabs li a:hover, .lotusTitleBar .lotusTabs li a:focus, .lotusTitleBar .lotusTabs li a:active{color:#000 !important;}
/*Linha236*/
.lotusImagesOff .lotusTitleBar .lotusBtnImg .lotusAltText{color:#000;}

Para alterar o logo do Connections, crie um arquivo chamado logo.png(o nome e extensão devem ser estes) na seguinte pasta:

connections_home/data/shared/customization/common/nav/common/styles/images/

Caso alguma pasta não exista, basta criá-la.

Se o seu logo for maior que o logo default, copie os arquivos login.jsp e header.jsp para a pasta:

connections_home/data/shared/customization/common/templates/

Altere a linha de DIV do logo para que fique algo parecido com a TAG abaixo:

div class="lotusLogo" id="lotusLogo" style="height: 62px; width: 130px;"

Note que a propriedade "style" é que define o tamanho da região onde o logo fica.

Mais informaçães sobre customização no Connections, utilize o infocenter:

http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Customizing_the_user_interface_ic301