With our customizations.css file you can customize a variety of objects inside of CXO, for example width sizes and colors all through CXO but it's mainly used to maintain custom logo's on top of CXO, logo in the export and colors.

We will need to add a customizations.css file (if it's not there yet) and adjust its content, this file should be located in the (the directory where the website is installed) C:\Program Files\CXO Solutions\CXO-Cockpit\Website\CustomStyles\CustomStyles folder on the CXO application/webserver.

Custom logo

In this example we have only edited only the logo's for on top of CXO and the export files. Here you can download the customizations.css file that gives this layout.

We advice to keep the top logo about 22px high and the the export between 28-32px high for the best results. Do note since the bar on top of CXO is black, dark logo's typically do not look great.

Custom logo, and change of colors throughout CXO

In this example we have edited the colors(to Blue) of the report titles, the menu's, search bar, narrative selector and the logo's on top of cxo and the export logo. Here you can download the customizations.css file that gives this layout.

We advice to keep the top logo about 22px high and the the export between 28-32px high for the best results. Do note since the bar on top of CXO is black, dark logo's typically do not look great.

Technical explanation

 This part asumes you have some HTML knowledge:

 The [PATH] in the examples below should be replaced with the real path to the image. In case of you put it into the images subfolder of the CustomStyles the path will look like   Images/filename.png.

.full-screen-background {  background-image: url([PATH]);  }

.full-screen-background { background-size: contain;  }

 

background-size can have the following values:

 

Value		Description
auto	Default value. The background-image contains its width and height
length	Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto"
percentage	Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto"
cover	Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
contain	Scale the image to the largest size such that both its width and its height can fit inside the content area
initial	Sets this property to its default value.  Read about  initial

 

 

.login-logo {  background-image: url([PATH]);  }

.page-header-logo { 

     background-image: url([PATH]);

     height: 22px;

     width: 128px; 

     margin-top:0px;

}

@media print

{

    .page-header-logo {  

       background-image: url([PATH]); 

       height: 22px;

       width: 128px; 

       margin-top:0px;

     }

}

.report-header, .pov-toggle, .breakdown-selector span.select-value, .box-title, .precision-and-scale-label, .about-label , .narrative-tab, .overlay-dialog-title, .storyboards-container > .scroll-area > h1, .slides-container > h1, .dialog-sub-title, .real-label

{

     text-transform: none;

}

.main-table.textappearance-optimal {font-size: 10px;}

.main-table.textappearance-average {font-size: 12px;}

.main-table.textappearance-subpar {font-size: 11px;}