Enabling UI customization support

With HCL Connections™ Docs, users can create their own custom.css file in which they can modify or add additional CSS code snippets to change Docs' look and feel.

About this task

With a customized Cascading Style Sheet (.css) file, users can define their own font, banner background color, button background color, and other elements of their HCL Docs theme.

The steps to enable the customized Docs CSS in the config file concord-config.json

Procedure

  1. Find the following configuration in the concord-config.json file: 
    "lotusLiveIntegration":{
		"lotuslive_url": "",
		"themeConfig": {
				"enabled": "false",
				"theme_url": "/theming/theme/css/3"
			}		
	},
  2. Change the configuration to the following one: 
    "lotusLiveIntegration": {
      "lotuslive_url": "http://sample.com", //Provide the domain url。
      "themeConfig": {
         "enabled": "true", // To enable the configuration by assign true value 
         "theme_url": "{static}/styles/css/custom.css" // Configured like this
      }
   },
  3. Keeping a backup, add the custom.css file to the specific location on the Docs server, as in the following example:

    /opt/IBM/WebSphere/AppServer/profiles/AppSrv01/installedApps/{docs1Node01Cell}/IBMDocsWebResources.ear/com.ibm.docs.web.resources.war/{version timestamp}/styles/css

  4. Stop and then start the HCL Docs application in WebSphere Application Server console to make above changes take effect.
    Note: The custom.css file gets removed when you upgrade or patch the IBMDocsWebResources application on the Docs server. Make sure that you back up custom.css before upgrading or patching, and put it back afterwords.

Example

The attached custom.css is an example of a customized HCL Docs theme.
/**
 * Licensed Materials - Property of IBM.
 * @messages CKEditor CSS
 * Copyright IBM Corporation 2010. All Rights Reserved.
 * U.S. Government Users Restricted Rights: Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */
.commonsprites{background-image:url('./images/common_sprite20150820.png') !important;background-repeat:no-repeat;display:-moz-inline-box;display:inline-block}
.lotusImagesOff .commonsprites{display:none}

.commonsprites-arrowdown{width:17px;height:9px;background-position:0 0}
.commonsprites-arrowdownResolved{width:17px;height:9px;background-position:0 -9px}
.commonsprites-arrowup{width:17px;height:9px;background-position:0 -18px}
.commonsprites-arrowupResolved{width:17px;height:9px;background-position:0 -27px}
.commonsprites-autosaveSaving{width:14px;height:14px;background-position:0 -36px;margin : 0px 10px;display: inline-block;vertical-align:middle;overflow:hidden;}
.commonsprites-backFiles{width:16px;height:16px;background-position:0 -501px;overflow:hidden;margin-top:9px !important;margin-left:5px;}
.commonsprites-chat16{width:14px;height:16px;background-position:0 -70px;overflow:hidden;}
.commonsprites-chat25{width:21px;height:25px;background-position:0 -86px;overflow:hidden;}
.commonsprites-savedDoc{width:14px;height:14px;background-position:0 -299px;margin : 0px 10px;display: inline-block;vertical-align:middle;overflow:hidden;}
.commonsprites-savedPres{width:14px;height:14px;background-position:0 -313px;margin : 0px 10px;display: inline-block;vertical-align:middle;overflow:hidden;}
.commonsprites-savedSheet{width:14px;height:14px;background-position:0 -327px;margin : 0px 10px;display: inline-block;vertical-align:middle;overflow:hidden;}
.commonsprites-pres16{width:16px !important;height:16px !important;background-position:0 -199px;overflow:hidden;float: left !important;margin-right: 6px !important;display: block !important; margin-top: 9px !important;}
.commonsprites-pres24{width:24px !important;height:24px !important;background-position:0 -215px;overflow:hidden;float: left !important;margin-right: 6px !important;display: block !important;top: 0px !important;}
.commonsprites-pres32{width:32px;height:32px;background-position:0 -239px;overflow:hidden;}
.commonsprites-sheet16{width:16px !important;height:16px !important;background-position:0 -357px;overflow:hidden;float: left !important;margin-right: 6px !important;display: block !important;margin-top: 9px !important;}
.commonsprites-sheet24{width:24px !important;height:24px !important;background-position:0 -373px;overflow:hidden;float: left !important;margin-right: 6px !important;display: block !important;top: 0px !important;}
.commonsprites-sheet32{width:32px;height:32px;background-position:0 -397px;overflow:hidden;}
.commonsprites-doc16{width:16px !important;height:16px !important;background-position:0 -111px;overflow:hidden;float: left !important;margin-right: 6px !important;display: block !important;margin-top: 9px !important;}
.commonsprites-doc24{width:24px !important;height:24px !important;background-position:0 -127px;overflow:hidden;float: left !important;margin-right: 6px !important;display: block !important;top: 0px !important;}
.commonsprites-doc32{width:32px;height:32px;background-position:0 -151px;overflow:hidden;}
.commonsprites-success{width:16px;height:16px;background-position:0 -469px;overflow:hidden;margin-top:2px;}
.commonsprites-warning{width:16px;height:16px;background-position:0 -485px;overflow:hidden;margin-top:2px;}
.commonsprites-error{width:16px;height:16px;background-position:0 -183px;overflow:hidden;margin-top:2px;}
.commonsprites-streamCBtn{width:16px;height:16px;background-position:0 -437px;overflow:hidden;}
.commonsprites-streamOBtn{width:16px;height:16px;background-position:0 -453px;overflow:hidden;}
div[dir="rtl"] .commonsprites-streamCBtn, div[dir="rtl"] .commonsprites-streamOBtn
{
transform: scaleX(-1);
-ms-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
}
.commonsprites-search{width:16px;height:16px;background-position:0 -341px;overflow:hidden;}
.commonsprites-resolvedPhoto{width:28px;height:28px;background-position:0 -271px;overflow:hidden;}
.commonsprites-sortDown8{width:8px;height:8px;background-position:0 -429px}
/* item11 - Pls provide us the above icons: pres16,pres24,pres32;sheet16,sheet24,sheet32;docs16,docs24,docs32 */

/* item5 - font family customization for levono*/
body.oneui30 {
	font: 75% / 1.5 "微软雅黑", "Helvetica Neue", Helvetica, Arial, Roboto, sans-serif;
}

.lotusui30 .lotusWarning {
    background-color: #fdf4c8;  /* item14 - background color and borde-color can be customized here */
    border-color: #e48617;
}

/* item10 - background color for highlighted search result */
.filterhightlight {
    background-color: #BAECFF; 
}

/* item6 - banner background*/
.lotusui30 .lotusTitleBar2 {
    background: none repeat scroll 0 0 #325c80 !important; 
    border: medium none;
}

.onpremise.lotusui30 .lotusTitleBar2 .lotusBtn.dijitButtonNode {
    background-color: #4178be !important; /* item6 - buttons background color on banner*/
    background-image: none !important;
    border: 0 none;
    border-radius: 0;
    box-shadow: none !important;
    color: #ffffff;
    margin: 0;
    outline: medium none;
    padding: 9px 23px;
    text-shadow: none !important;
}

/* item20/item8 - comments dialog background color should be customized here and need to adjust arrow icons */
/* Copied from common.css for customization */
.sticky {
	position:absolute;
	left: -1000px;
	background-color: #fff9dc;  
	border: 2px solid #ffe14f; 
	color: #666;
	font-size: 0.9em;
	line-height: 1.2em;
	text-align:left;
	width: 260px;
	padding: 10px;
	margin-left:0px;
	overflow: visible;
	z-index:10;
	display: block;
}
 
.sticky .btn {
	border: 2px solid #FFE14F; 
    color: #666666 !important;
    display: inline-block;
    line-height: 24px;
    margin-left: 5px;
    padding: 2px 5px;
    cursor: pointer;
}
.sticky .btn a, a:hover, a:visited {
    color: #1970B0;
    text-decoration: none !important;
}
.sticky .delete {
    color: #666666;
}

.sticky .comment a, .sticky .comment a:hover, .sticky .comment a:visited, .docs-stream .message.comment .content a, .docs-stream .message.comment .content a:hover, .docs-stream .message.comment .content a:visited {
    color: #666666;
}

.sticky .arrowdown {
    background-position: 0 0 !important;
    background-image: url('./images/common_sprite20150820.png') !important;
    height: 9px;
    width: 17px;
    position: absolute;
}
.sticky.resolved .arrowdown {
    background-position: 0 -9px !important;
    background-image: url('./images/common_sprite20150820.png') !important;
    height: 9px;
    width: 17px;
    position: absolute;
}
.sticky .arrowup {
    background-position: 0 -18px !important;
    background-image: url('./images/common_sprite20150820.png') !important;
    height: 9px;
    width: 17px;
    position: absolute;
}
.sticky.resolved .arrowup {
    background-position: 0 -27px !important;
    background-image: url('./images/common_sprite20150820.png') !important;
    height: 9px;
    width: 17px;
    position: absolute;
}
 
.sticky .btn {
    border-radius: 1px;
    border-width: 1px;
    line-height: 0.75em; /* Change the line height */
    padding: 6px;
}
 
.sticky .actions, .sticky .actions_resolved {
    color: #808080;
}

.sticky .btn.reopen {
	color: #4178be !important;
    border: 1px solid #4178be;
}

.sticky .btn.reopen:hover, .btn.reopen:focus {
	outline: 1px solid #4178be;
}

.sticky .btn.reopen:active {
	background-color: #ebf3fc !important;
	outline: none;
}

.sticky.resolved {
    background-color: #FCFCFC;
    border: 2px solid #CECECE;
    color: rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}
.sticky .status {
    color: #666666;
}
 
.sticky .scrollbar::-webkit-scrollbar-thumb {
	background-color: #ffe14f;
}
.sticky.resolved .scrollbar::-webkit-scrollbar-thumb {
	background-color: #CECECE;
}