Category / Section
How to add custom CSS in OLAP Client?
1 min read
You can add custom CSS in OLAP Client using the following code example. To enable CustomCss in OLAP Client, set the Autoformat property as “None" and set the CssClass property to a custom class name.
HTML
<head id="Head1" runat="server"> <link href="Styles/FullBlue.css" rel="stylesheet" type="text/css" /> </head> <body> <cc1:OlapClient ID="OlapClient1" runat="server" Height="600px" Width="800px" Autoformat="None" CssClass="FullBlue" /> </body>
Refer to the FullBlue.css file as follows.
CSS
.FullBlue .TabOuterBorder
{
margin:7px;
border: 1px solid blue;
overflow:hidden;
}
.FullBlue .outerpanel
{
width: 100%;
height: 100%;
background: LightSteelBlue;
border: solid 1px blue;
color:Black;
}
.FullBlue .cubepanel
{
float: left;
width: 24%;
background: LightSteelBlue;
margin-left: 7px;
margin-bottom: 2px;
border:solid 1px blue;
padding:2px;
overflow:hidden;
}
.FullBlue .controlspanel
{
float:left;
margin-bottom: 4px;
}
.FullBlue .charttypepopup a, .FullBlue .legendtypepopup a, .FullBlue .toolspanel a, .FullBlue .toolspanel span
{
background-image: url("../styles/images/ToolBoxImages/ToolBarImage.png");
background-repeat: no-repeat;
margin: 4px;
cursor: default;
display: inline-block;
height: 18px;
width: 18px;
}
.FullBlue .normallayoutSelected, .FullBlue .excellayoutSelected, .FullBlue .nosumlayoutSelected, .FullBlue .ThreeDSelected, .FullBlue .legendSelected { background-image: url("../styles/images/ToolBoxImages/ToolsSelected.png")!important; }
.FullBlue .normallayoutSelected{background-position:0 -78px !important;}
.FullBlue .excellayoutSelected{background-position:0 -52px !important;}
.FullBlue .nosumlayoutSelected{background-position:0 -103px !important;}
.FullBlue .ThreeDSelected{background-position:0 0 !important;}
.FullBlue .legendSelected{background-position:0 -26px !important;}
.FullBlue .Seperator
{
background: white none !important;
height:25px !important;
width:1px !important;
margin:0px !important;
float: left;
}
.FullBlue .connectionImg { background-position: center -1065px; }
.FullBlue .newReportImg { background-position: center -572px; }
.FullBlue .loadReportImg { background-position: center -545px; }
.FullBlue .addReportImg { background-position: center 0; }
.FullBlue .pagerImg { background-position: center -389px; }
.FullBlue .pagerOptionImg { background-position: center -364px; }
.FullBlue .removeReportImg { background-position: center -728px; }
.FullBlue .renameReportImg { background-position: center -754px; }
.FullBlue .saveImg { background-position: center -779px; }
.FullBlue .charttypeImg { background-position: center -78px; }
.FullBlue .ThreeDImg { background-position: center -235px; }
.FullBlue .legendImg { background-position: center -832px; }
.FullBlue .legendTypesImg { background-position: center -806px; }
.FullBlue .tooltipImg { background-position: center -1013px; }
.FullBlue .exporttoexcelImg { background-position: center -287px; }
.FullBlue .exporttoPdfImg { background-position: center -1340px; }
.FullBlue .exporttowordImg { background-position: center -337px; }
.FullBlue .headercelltooltipImg { background-position: center -1090px; }
.FullBlue .executeImg { background-position: center -1115px; }
.FullBlue .hyperlinkcellImg { background-position: center -442px; }
.FullBlue .normallayoutImg { background-position: center -650px; }
.FullBlue .excellikelayoutImg { background-position: center -258px; }
.FullBlue .nosummarieslayoutImg { background-position: center -594px; }
.FullBlue .columnImg { background-position: center -128px; }
.FullBlue .stackingcolumnImg { background-position: center -936px; }
.FullBlue .areaImg { background-position: center -25px; }
.FullBlue .splineareaImg { background-position: center -858px; }
.FullBlue .stepareaImg { background-position: center -962px; }
.FullBlue .stackingareaImg { background-position: center -909px; }
.FullBlue .lineImg { background-position: center -495px; }
.FullBlue .splineImg { background-position: center -884px; }
.FullBlue .steplineImg { background-position: center -987px; }
.FullBlue .seriestypeImg { background-position: center -806px; }
.FullBlue .linetypeImg { background-position: center -522px; }
.FullBlue .rectangleImg { background-position: center -700px; }
.FullBlue .circleImg { background-position: center -103px; }
.FullBlue .diamondImg { background-position: center -206px; }
.FullBlue .hexagonImg { background-position: center -416px; }
.FullBlue .pentagonImg { background-position: center -676px; }
.FullBlue .crossImg { background-position: center -182px; }
.FullBlue .triangleImg { background-position: center -1041px; }
.FullBlue .invertedtriangleImg { background-position: center -469px; }
.FullBlue .noneImg { background-position: center -622px; }
.FullBlue .stackingcolumn100Img { background-position: center -1140px; }
.FullBlue .barImg { background-position: center -1165px; }
.FullBlue .stackingbarImg { background-position: center -1190px; }
.FullBlue .stackingbar100Img { background-position: center -1215px; }
.FullBlue .disabled
{
background-color: Transparent !important;
border: none !important;
margin:4px !important;
filter:alpha(opacity=30);
-ms-filter:"alpha(opacity=30)";
opacity:0.3;
}
.FullBlue .connectionImg:hover, .FullBlue .newReportImg:hover, .FullBlue .loadReportImg:hover, .FullBlue .addReportImg:hover, .FullBlue .removeReportImg:hover, .FullBlue .renameReportImg:hover, .FullBlue .saveImg:hover, .FullBlue .charttypeImg:hover, .FullBlue .ThreeDImg:hover, .FullBlue .legendImg:hover, .FullBlue .legendTypesImg:hover, .FullBlue .tooltipImg:hover, .FullBlue .exporttoexcelImg:hover, .FullBlue .exporttowordImg:hover,.FullBlue .exporttoPdfImg:hover, .FullBlue .headercelltooltipImg:hover, .FullBlue .hyperlinkcellImg:hover, .FullBlue .normallayoutImg:hover, .FullBlue .excellikelayoutImg:hover, .FullBlue .nosummarieslayoutImg:hover, .FullBlue .executeImg:hover, .FullBlue .pagerImg:hover, .FullBlue .pagerOptionImg:hover
{
margin: 3px;
background-color: #FEBA40;
border: 1px solid #D99E36;
}
.FullBlue .clientheader
{
line-height:28px;
vertical-align: top;
margin: auto 1px;
overflow:hidden;
}
.FullBlue .headertext
{
margin: 0 auto auto 5px;
color: Black;
font: 12px/28px Verdana;
white-space:nowrap;
}
.FullBlue .cubeselector
{
margin: 3px auto auto 3px;
height: 28px;
width: 100%;
}
.FullBlue .cubedimensionbrowser
{
margin: 0px 1px;
}
.FullBlue .axiselementbuilderpanel{overflow:auto;}
.FullBlue .axiselementbuilder
{
background-color: White;
height: 105px;
overflow: auto;
margin-left: 1px;
margin-right: 1px;
border:solid 1px blue;
}
.FullBlue .axiselementbuilderpanel table
{
width:100%;
}
.FullBlue .axiselementbuilderpanel td
{
width: 31%;
padding: 0 0 0 7px;
}
.FullBlue .axiselementbuilderinnerpanel
{
background-color: Transparent;
border:solid 1px blue;
padding:2px;
}
.FullBlue .ReportList
{
margin:2px;
width: 150px;
color: Black;
}
.FullBlue .toolspanel
{
background-color: Transparent;
border-bottom:1px solid blue;
height: 27px;
margin:0 0 7px;
padding-top: 2px;
width: 100%;
}
.FullBlue .controlstab
{
float: none;
clear: both;
height: 60%;
margin:7px 0 0 7px;
background-color: Transparent;
}
.FullBlue .OlapCubeSelector
{
margin-top: 2px;
width: 100%;
margin-left: -3px;
color: Black;
}
.FullBlue .OlapCubeDimensionBrowser
{
margin-top: 2px;
font: 11px Verdana;
width: 100%;
position: relative;
overflow: auto;
vertical-align: top;
background-color: White;
}
.FullBlue .OlapCubeDimensionBrowser span, .MemberEditorMetaTree span
{
cursor:default;
padding-left: 4px;
font-family:Verdana;
}
.FullBlue .SplitButton, .SplitButton
{
background:url("../styles/images/FullBlue/splitbuttonFullBlue.png") no-repeat 0 0;
width:158px;
height:24px;
cursor:default;
}
.FullBlue .SplitRightHover
{
background:url("../styles/images/FullBlue/splitbuttonFullBlue.png") no-repeat 0 -58px;
width:158px;
height:24px;
display:inline-block;
}
.FullBlue .SplitLeftHover
{
background:url("../styles/images/FullBlue/splitbuttonFullBlue.png") no-repeat 0 -29px;
width:158px;
height:24px;
display:inline-block;
}
.FullBlue .SplitButton .Splitleft, .SplitButton .Splitleft
{
display:inline-block;
padding-left: 5px;
font:11px/24px Verdana;
vertical-align:top;
white-space: nowrap;
width:108px;
height:24px;
outline:none;
overflow:hidden;
text-overflow:ellipsis;
}
.FullBlue .SplitButton .SplitDrop
{
width:22px;
height:24px;
display:inline-block;
cursor:pointer;
outline:none;
}
.FullBlue .SplitButton .SplitRight
{
display:inline-block;
width:20px;
height:24px;
outline:none;
}
.MemberEditorHeader
{
font: bolder .9em/20px Verdana;
width: 100%;
height: 20px;
margin:2px;
}
.MemberEditorMetaTree
{
border:1px solid #78ADDD;
height: 250px;
width: 240px;
font: 10pt Verdana;
margin:2px 2px 0;
background-color:White;
}
.Allow
{
cursor: url("../styles/images/DragDropImages/dragaccept.cur"),move !important;
}
.Deny, .Allow
{
display:inline-block;
height:20px;
}
.Deny
{
cursor: url("../styles/images/DragDropImages/dragdeny.cur"),no-drop !important;
}
.CheckBtn, .UncheckBtn
{
background: url("../styles/images/ControlImages/CheckOptions.png") no-repeat;
width:16px;
height:16px;
display:inline-block;
margin:2px;
}
.UncheckBtn { background-position: 0 -26px; }
.FullBlue .reportingPanel { float: left; }
.FullBlue .saveBtnContainer
{
float: left;
}
.FullBlue .clientControlbtnContainer
{
float: left;
}
.FullBlue .charttypepopup, .FullBlue .legendtypepopup
{
background-color:LightSteelBlue;
border: Solid 1px blue;
border-width: 1px;
}
.FullBlue .charttypepopup a, .FullBlue .legendtypepopup a
{
margin:4px;
}
.FullBlue .charttypepopup a:hover, .FullBlue .legendtypepopup a:hover
{
margin:3px;
background-color: #FEBA40;
border: 1px solid #D99E36;
}
.FullBlue .exportingchartpopup
{
background-color: #DDE7F5;
border-width: 1px;
width: 100px;
height: 60px;
}
.FullBlue .Tab{}
.FullBlue .Tab .tabRootTable .tabRootPanel
{
height:21px;
}
.FullBlue .Tab .tabRoot
{
color:Black;
}
.FullBlue .Tab .tabRootPanel div[class*="tabItem"]
{
padding: 0 5px 0 3px;
width:63px;
cursor:pointer;
}
.FullBlue .Tab .tabRootPanel div table
{
float:right;
}
.FullBlue .Tab .tabItemDisabled
{
color:#91A5B6;
}
.FullBlue .Tab .tabItemDef, .FullBlue .Tab .tabItemDisabled
{
background:url("../styles/images/FullBlue/tabFullBlue.png") no-repeat 0px 0px;
}
.FullBlue .Tab .tabItemHover
{
background:url("../styles/images/FullBlue/tabFullBlue.png") no-repeat 0px -26px;
}
.FullBlue .Tab .tabItemActive, .FullBlue .Tab .tabItemPushed
{
background:url("../styles/images/FullBlue/tabFullBlue.png") no-repeat 0px -51px;
}
.FullBlue .Tab .tabTextCell
{
padding:0 5px;
height:22px;
}
.FullBlue .Tab .tabTextCont
{
font: 11px Verdana;
}
.FullBlue .Tab .tabImgCont
{
display:none;
}
.FullBlue .Tab .tabImgCloseCell
{
padding: 1px 0 0 3px;
}
.FullBlue .ViewPage
{
border: solid 1px blue;
margin: 0 0 5px 0;
overflow:hidden;
}
.SpanButton
{
background-image:url("../styles/images/FullBlue/okcancel.png");
display:inline-block;
width: 60px;
height:24px;
text-decoration:none;
font: 12px/24px Verdana;
text-align:center;
color:Black;
cursor:default;
margin: 2px;
}
.SpanButton:hover
{
background-position:0 -29px;
}
/* Window top path css setting */
.Wnd{ font: 12px Verdana; color: Black; }
.Wnd .WndHeaderCont
{
background-color:LightSteelBlue;
border: solid 1px Blue;
height: 27px;
}
.Wnd .WndHeader
{
vertical-align: middle;
cursor:default;
padding:0px;
}
.Wnd .IconImg{display:none;}
.Wnd .WndHeader .TitleText
{
font: 13px/27px Verdana;
color: Black;
margin: 2px;
padding:0 7px;
}
.Wnd .WndHeader div{height : 27px;}
.Wnd .WndContentCont
{
border: solid 1px Blue;
border-top: none;
background-color:LightSteelBlue;
}
.Wnd .BorderTopRight{width:7px;}
.Wnd .WndStatusCont_WithoutStatus { display:none; }
.Wnd .DlgContent{
padding: 9px 0 7px;
height:21px;
width:100%;
line-height: 21px;
}
.Wnd .DlgContent span{
margin-left: 9px;
float:left;
}
.Wnd .DlgContent input[type=text]{
float:right;
margin: 0 6px 0 0;
width: 180px;
font: 12px Verdana;
}
.Wnd .DlgContent .BtnSplitUp, .Wnd .DlgContent .BtnSplitDown{
background: LightSteelBlue none !important;
}
.Wnd .DlgContent div>table{
border: solid 1px Blue;
}
.clientpopup
{
line-height: 50px;
z-index: 2100 !important;
background-color: white;
height: 50px;
border: solid 1px blue;
height: 50px !important;
background-position: 13% 50% !important;
cursor:default;
}
.clientpopup span
{
font: 11px/50px verdana;
padding-left: 35px;
cursor:default;
color:Black;
}
.FullBlue .clientExecuteContainer
{
float:left;
}
/* Pager */
.FullBlue .ClientPager
{
background: url("../styles/images/FullBlue/header.png")repeat;
background-color: Transparent;
cursor:default;
height:29px;
margin-top:1px;
}
.FullBlue .ClientPager table
{
width:100%;
}
.FullBlue .ClientPager td
{
margin-right:5px;
padding:3px;
border: 1px solid blue;
border-width: 1px 0 0 1px;
}
.FullBlue .ClientPager td:first-child
{
border-left: none;
}
.FullBlue .ClientPager .MovePrev, .ClientPager .MoveNext, .ClientPager .MovePrevDisabled, .ClientPager .MoveNextDisabled
{
padding: 2px 6px;
background-image: url("../styles/images/ControlImages/Pager.png");
background-repeat:no-repeat;
border: 1px solid transparent;
margin: 0 4px;
}
.FullBlue .ClientPager .MovePrev
{
background-position: 0 -22px;
}
.FullBlue .ClientPager .MoveNext
{
background-position: 0 0;
}
.FullBlue .ClientPager .MovePrevDisabled
{
background-position: 0 -65px;
}
.FullBlue .ClientPager .MoveNextDisabled
{
background-position: 0 -43px;
}
.FullBlue .ClientPager .PageBox
{
width:30px;
font-family:Verdana;
font-size:12px;
}
.FullBlue .ClientPager .Text
{
font-family:Verdana;
font-size:12px;
margin:0 5px;
}
.FullBlue .ClientPager .MoveNext:hover, .FullBlue .ClientPager .MovePrev:hover
{
border: 1px solid #D99E36;
background-color: #FEBA40;
}
.VertSplitter
{
background:url('../styles/images/ControlImages/vertgrip.png') no-repeat scroll 2px center transparent;
}
.HortSplitter{}
.SplitterLine
{
position:absolute;
z-index: 999;
ZOOM: 1;
}
.MeasureElement
{
padding-left: 24px;
line-height:18px;
cursor:default;
background:url("../styles/images/TreeIcons/Chart.png") no-repeat 5px center;
font-family:Verdana;
}
.MeasureHover {background-color:#A7CDF0;}
.MeasureClose
{
margin: 9px 10px 8px 0;
width:16px;
cursor:pointer !important;
}
.MeasureHover .MeasureClose
{
background:url("../styles/images/ControlImages/Redclose.png")no-repeat center;
}
