Enabling UI customization support
With IBM® 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
The steps to enable the customized Docs CSS in the config file concord-config.json
Procedure
Example
/**
* 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;
}