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; }