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.9 R4 application.

 

icon_comment

The original *.css files used by the WebOffice core client are located within the WebOffice 10.9 R4 application in the subdirectory \client_core\styles\. The original files may not be changed and should only be used as a help.

 

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 menus 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.

 

icon_comment

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.9 R4 project

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

 

icon_cross-reference

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

icon_comment

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

 

Other important customization options in WebOffice core Client:

 

User-defined values in weboffice_user.css

Description and examples

 

body {

   color: rgb(255, 0, 0);

}

General font color

 

howto_core_leftpane36

howto_core_leftpane37

   .tundra .dijitTabContainerTop-tabs .dijitTabChecked,

   .tundra .dijitTabContainerLeft-tabs .dijitTabChecked,

   .tundra .dijitTabContainerRight-tabs .dijitTabChecked {

       color: rgb(255, 0, 0);

   }    

 

 

font color of the active Ribbons

 

howto_core_leftpane38     howto_core_leftpane39

.tundra .dijitTabContainerTop-dijitContentPane,

.tundra .dijitTabContainerLeft-dijitContentPane,

.tundra .dijitTabContainerBottom-dijitContentPane,

.tundra .dijitTabContainerRight-dijitContentPane,

.tundra .dijitAccordionContainer-dijitContentPane {

   background-color: #FFFF00;

}

Background color of the menu bar

 

howto_core_leftpane07

howto_core_leftpane08

 

.tundra .dijitSelect .dijitButtonContents,

.tundra .dijitSelect,

.tundra .dijitTextBox {

   background: #FFFF00;

}

Background color of the selected parameters in the drop-down menu

 

howto_core_leftpane09         howto_core_leftpane10

.tundra .dijitMenu {

   border: 5px solid rgb(85, 26, 139);

  background-color: rgb(255, 255, 0);

}

Frame color and Frame width as well as background color of the lists of selectable values in the drop-down menus

 

howto_core_leftpane25     howto_core_leftpane26

.tundra .dijitMenuPassive .dijitMenuItemHover, .tundra .dijitComboBoxMenu .dijitMenuItemHover,

   .tundra .dijitMenuItemSelected {

   background-color: rgb(255, 255, 0);

   color: rgb(255, 0, 0);

}

Background color and font color of the object in the drop-down menus on which the mouse cursor is positioned.

 

howto_core_leftpane27     howto_core_leftpane28

.ribbon, .inribbon {

   padding: 5px;

   box-sizing: border-box;

   height: inherit;

   overflow: hidden;

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

}

Background color of the tool forms

 

howto_core_leftpane11

howto_core_leftpane12

.bottombar {

   position: absolute;

   bottom: 0;

   right: 0;

   left: 0;

   height: 26px;

   z-index: 1000;

   border-top: 1px solid rgba(0, 0, 0, 0.25);

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

}

Background color of the Status Bar

 

howto_core_leftpane13

howto_core_leftpane14

#topbar_right {

position: absolute;

background-color: rgb( 255,255,0 );

right: 0;

padding-right: 10px;

padding-left: 10px;

height: 31px;

display: inline-block;

white-space: nowrap;

box-sizing: border-box;

border-bottom: solid 1px rgb( 225,225,225 );

}

Background color of the Project Settings

 

howto_core_leftpane19

howto_core_leftpane20

#mapnavigator_container {

   display: block;

   z-index: 300;

   position: absolute;

   background-color: rgb(255, 255, 0);

   border: 1px solid rgba(0, 0, 0, 0.25);

}

Background color of the Navigation Elements

 

howto_core_leftpane43     howto_core_leftpane44

.maptipWidgetTitleBar {

   min-height: 20px;

   cursor: move;

   background-color: rgb(255, 255, 0);

}

Background color of the title bar of the Maptip window

 

howto_core_leftpane21     howto_core_leftpane22

.maptipWidgetFooterBar {

   min-height: 20px;

   padding-left: 5px;

   padding-bottom: 3px;

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

}

Background color of the footer bar of the Maptip window

 

 

howto_core_leftpane21     howto_core_leftpane23

.maptipWidget {

   position: absolute;

   box-sizing: content-box;

   border: 5px solid #FFFF00;

   z-index: 500;

   min-width: 230px;

   overflow: hidden;

}

Frame color and Frame width of the Maptip window

 

howto_core_leftpane21     howto_core_leftpane24

.tundra .dijitButtonDisabled .dijitButtonNode,

.tundra .dijitToggleButtonDisabled .dijitButtonNode,

.tundra .dijitDropDownButtonDisabled .dijitButtonNode,

.tundra .dijitComboButtonDisabled .dijitButtonNode {

   border: 0;

   background-color: rgb(255, 255, 0);

}

Background color of non selectable buttons

 

howto_core_leftpane29     howto_core_leftpane30

.tundra .dijitDisabled .dijitButtonText {

   color: rgb(255, 0, 0);

}

Font color of non selectable buttons

 

howto_core_leftpane29     howto_core_leftpane31  

.tundra .dijitDialogTitleBar {

   background: rgb(225, 255, 0);

}

Background color of the title bar of dialog boxes

 

howto_core_leftpane32     howto_core_leftpane33

.overview_container {

   display: block;

   z-index: 900;

   position: absolute;

   top: 5px;

   right: 5px;

   overflow: hidden;

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

   border: 1px solid rgba(0, 0, 0, 0.25);

}

Background color of the Overview Map

 

howto_core_leftpane34     howto_core_leftpane35

.zoombox {

   position: absolute;

   top: 0;

   left: 0;

   width: 0;

   height: 0;

   border: 4px solid rgba(255, 255, 0, 0.75);

   display: none;

   box-sizing: border-box;

}

Frame color of the Zoom Box

 

howto_core_leftpane40     howto_core_leftpane41

.zoombox {

   position: absolute;

   top: 0;

   left: 0;

   width: 0;

   height: 0;

   border: 4px solid rgba(255, 255, 0, 0.75);

   background-color: rgba(255, 255, 0, 0.5);

   display: none;

   box-sizing: border-box;

}

 

Background color and opacity of the Zoom Box

 

howto_core_leftpane40     howto_core_leftpane42

.toc_label {

    /*display: inline-block;*/

   padding: 8px;

}

Height of the row of the Table Of Contents in pixels

 

howto_core_leftpane15         howto_core_leftpane16

.toc_outofscale {

   color: rgb( 184, 134, 11 );

}

Map Service in the Table Of Contents outside the scale

 

howto_core_leftpane17         howto_core_leftpane18