Kurzanleitungen > Wie individualisiert man ... > WebOffice core Client > Individualisierung des Layouts

Dieses Kapitel behandelt die individuelle Anpassung der Styles mithilfe CSS-Dateien bzw. deren Einbindungsreihenfolge der WebOffice Benutzer- und Projekt-Skin-Dateien.

Allgemeine Individualisierungen

Bei der allgemeinen Individualisierung kann generell eine Anpassung der CSS-Definitionen für alle WebOffice core Client Projekte innerhalb einer Applikation erfolgen. Dabei werden zwei verschiedene CSS-Dateien vom WebOffice core Client eingebunden.

Hinweis: Die vom WebOffice core Client verwendeten originalen *.css Dateien befinden sich innerhalb der WebOffice 10.7 SP1 Applikation im Unterverzeichnis \client_core\styles\. Die Originaldateien dürfen hierbei nicht verändert werden und sollen nur als Hilfe dienen.

Allgemeine Individualisierungen werden über die Benutzer-Dateien (weboffice_user.css, weboffice_user_rtl.css) innerhalb der WebOffice 10.7 SP1 Applikation im Unterverzeichnis \pub\client_core\styles\ eingebunden. Die CSS-Datei mit dem Zusatz "_rtl" bezieht sich auf Benutzermenüs, welche in der Struktur von Rechts nach Links (beispielhaft für den arabischen Raum) aufgebaut sind. Die standardmäßig definierten CSS-Definitionen können dabei vom Benutzer zur Individualisierung aller WebOffice core Client Projekte überschrieben werden.

Hinweis: Standardmäßig sind in diesem Verzeichnis schon zwei leere CSS-Dateien angelegt. Zur Verwendung dieser CSS-Dateien muss auf jeden Fall der Unterstrich "_" am Beginn des Dateinamen entfernt werden!

Projektspezifische Individualisierungen

Bei der projektspezifischen Individualisierung kann eine Anpassung der CSS-Definitionen für das jeweilige WebOffice core Client Projekt durchgeführt werden. Auch in diesem Fall können zwei verschiedene CSS-Dateien (<Project-Skin-Name>.css und für Rechts nach Links Benutzermenüs <Project-Skin-Name>_rtl.css) im Verzeichnis .\pub\client_core\styles\ angelegt werden. Die standardmäßig definierten CSS-Definitionen können dabei vom Benutzer zur Individualisierung des Projekts überschrieben werden.

Reihenfolge der CSS Individualisierungen

Grundsätzlich werden die folgenden CSS Dateien in der nachfolgenden Reihenfolge im WebOffice Verzeichnis \pub\client_core\styles\ geladen.

•weboffice_user.css (wird geladen falls CSS Datei vorhanden)

•weboffice_user_rtl.css (wird geladen falls CSS Datei vorhanden und es sich um ein Rechts nach Links Benutzermenü handelt)

•<Project-Skin-Name>.css (wird geladen wenn der Projekt-Skin im Projekt definiert ist und die entsprechend benannte CSS-Datei vorhanden ist)

•<Project-Skin-Name>_rtl.css (wird geladen wenn der Projekt-Skin im Projekt definiert ist, die entsprechend benannte CSS-Datei vorhanden ist und es sich um ein Rechts nach Link Benutzermenü handelt)

Hinweis: Nähere Details zur Konfiguration des Project-Skin im WebOffice core Projekt finden Sie im Kapitel Kundeninformationen.

Hinweis: Bitte beachten Sie, dass CSS-Definitionen von früher geladenen CSS-Dateien bei Bedarfsfall durch die neueren CSS-Dateien überschrieben werden.

Standardwerte in weboffice.css	Benutzerdefinierte Werte in weboffice_user.css
Änderung der Hintergrundfarbe des linken Panels
.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; }
Aktive und inaktive 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); }

Weitere wichtige Individualisierungsmöglichkeiten im WebOffice core Client:

Benutzerdefinierte Werte in weboffice_user.css

Beschreibung

body {

color: rgb(255, 0, 0);

}

Allgemeine Schriftfarbe

howto_core_leftpane36

howto_core_leftpane37

.tundra .dijitTabContainerTop-tabs .dijitTabChecked,

.tundra .dijitTabContainerLeft-tabs .dijitTabChecked,

.tundra .dijitTabContainerRight-tabs .dijitTabChecked {

color: rgb(255, 0, 0);

}

Schriftfarbe des aktiven 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;

}

Hintergrundfarbe der Multifunktionsleiste

howto_core_leftpane07

howto_core_leftpane08

.tundra .dijitSelect .dijitButtonContents,

.tundra .dijitSelect,

.tundra .dijitTextBox {

background: #FFFF00;

}

Hintergrundfarbe der selektierten Parameter im Drop-Down Menü

howto_core_leftpane09 howto_core_leftpane10

.tundra .dijitMenu {

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

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

}

Rahmenfarbe und -breite sowie Hintergrundfarbe der Auswahlwertelisten in den Drop-Down Menüs

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

}

Hintergrundfarbe und Schriftfarbe des Objektes der Drop-Down Menüs, auf welchem sich der Mauscursor befindet

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

}

Hintergrundfarbe der Werkzeugformulare

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

}

Hintergrundfarbe der Statusleiste

#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 );

}

Hintergrundfarbe der Projekteinstellungen

#mapnavigator_container {

display: block;

z-index: 300;

position: absolute;

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

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

}

Hintergrundfarbe der Navigationselemente

.maptipWidgetTitleBar {

min-height: 20px;

cursor: move;

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

}

Hintergrundfarbe der Titelleiste des Maptip-Fensters

howto_core_leftpane21 howto_core_leftpane22

.maptipWidgetFooterBar {

min-height: 20px;

padding-left: 5px;

padding-bottom: 3px;

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

}

Hintergrundfarbe der Fußleiste des Maptip-Fensters

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;

}

Rahmenfarbe und -breite des Maptip-Fensters

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

}

Hintergrundfarbe von nicht auswählbaren Buttons

howto_core_leftpane29 howto_core_leftpane30

.tundra .dijitDisabled .dijitButtonText {

color: rgb(255, 0, 0);

}

Schriftfarbe von nicht auswählbaren Buttons

howto_core_leftpane29 howto_core_leftpane31

.tundra .dijitDialogTitleBar {

background: rgb(225, 255, 0);

}

Hintergrundfarbe der Titelleiste von Dialogfenstern

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

}

Hintergrundfarbe der Übersichtskarte

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;

}

Rahemfarbe des Vergrößerungsrahmens

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;

}

Hintergrundfarbe und Deckkraft des Vergrößerungsrahmens

howto_core_leftpane40 howto_core_leftpane42

.toc_label {

/*display: inline-block;*/

padding: 8px;

}

Höhe der Reihe des Themenbaums in Pixeln

howto_core_leftpane15 howto_core_leftpane16

.toc_outofscale {

color: rgb( 184, 134, 11 );

}

Kartendienst im Themenbaum außerhalb des Maßstabs

howto_core_leftpane17 howto_core_leftpane18

Styles (CSS)