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.4 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.4 SP2 project
•<Project-Skin-Name>_rtl.css (loaded if availbe, if the project skin is configured in the WebOffice 10.4 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; }
|
.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; }
|
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); }
|
.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); }
|