Navigation:  How To > How to Customize ... > WebOffice core Client >

Styles (CSS)

Previous pageReturn to chapter overviewNext page

This chapter shows how to customize styles in CSS files.

 

General customizing

The general customizing of the CSS definitions affects all projects within your WebOffice 10.5 SP2 application. There exist two different CSS files that can be used by the WebOffice core client, weboffice_user.css and weboffice_user_rtl.css (C:\Tomcat\webapps\WebOffice\pub\client_core\styles\). The CSS file with _rtl refers to menues designed from right to left. The default CSS definitions can be overwritten in the user defined CSS files for customizing your WebOffice core client projects.

 

Note: By default the folder contains two empty CSS files. To activate them just remove the underline '_' in front of the file name.

 

Project specific customizing

The project specific customizing only affects one single WebOffice core client project. In this case it is also possible to use two different CSS files in C:\Tomcat\webapps\WebOffice\pub\client_core\styles\, <Project-Skin-Name>.css and <Project-Skin-Name>_rtl.css. The default CSS files can be taken and overwritten for project specific customizing.

 

Order of customized CSS files

Basically the CSS files from \pub\client_core\styles\ are loaded in the following order.

 

weboffice_user.css (loaded if available)

weboffice_user_rtl.css (loaded if available and the menu is from right to left)

<Project-Skin-Name>.css (loaded if available and the project skin is configured in the WebOffice 10.5 SP2 project

<Project-Skin-Name>_rtl.css (loaded if available, if the project skin is configured in the WebOffice 10.5 SP2 project and the menu is from right to left)

 

Note: Please find more details for the configuration of the project skin in WebOffice core project in Customer Information.

Note: Please consider that CSS definitions from previous loaded CSS files will be overwritten with recent ones.

 

Default value in weboffice.css

Customized value in weboffice_user.css

Change the background color of the left panel

.leftpane_container {

   /*  z-index: 900; */

   left: 0;

   top: 0;

   width: 100%;

   height: auto;

   padding: 5px;

  background-color: rgba(255, 255, 255, 1);

   border-bottom: 0;

   box-sizing: border-box;

}

howto_core_leftpane01

.leftpane_container {

   /*  z-index: 900; */

   left: 0;

   top: 0;

   width: 100%;

   height: auto;

   padding: 5px;

  background-color: rgba(216,228,232, 1);

   border-bottom: 0;

   box-sizing: border-box;

}

howto_core_leftpane02

Active and inactive tabs

.tundra .dijitTabContainerTop-tabs .dijitTab {

   /*tabs*/

   line-height: normal;

   margin-right: 0;

   padding: 2px 8px 2px 9px;

   border: 0;

}

 

 

.tundra .dijitTabContainerTop-tabs .dijitTabChecked, .tundra .dijitTabContainerLeft-tabs .dijitTabChecked,

   .tundra .dijitTabContainerRight-tabs .dijitTabChecked{

   /*active tabs*/

  color: rgba(0, 114, 198, 1);

}

 

howto_core_leftpane03

howto_core_leftpane04

.tundra .dijitTabContainerTop-tabs .dijitTab {

   /*tabs*/

   line-height: normal;

   margin-right: 0;

   padding: 2px 8px 2px 9px;

   border: 0;

  background-color: rgba(228,241,245, 1);

}

 

.tundra .dijitTabContainerTop-tabs .dijitTabChecked, .tundra .dijitTabContainerLeft-tabs .dijitTabChecked,

   .tundra .dijitTabContainerRight-tabs .dijitTabChecked{

   /*active tabs*/

  color: rgba(0,0,0, 1);

    background-color: rgba(216,228,232, 1);

}

howto_core_leftpane05

howto_core_leftpane06