Zum Hauptinhalt gehen

Styles (CSS)

Aktualisiert

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.9 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.9 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;

}

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

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

}

 

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

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

 

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

}

Hintergrundfarbe der Projekteinstellungen

 

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

}

Hintergrundfarbe der Navigationselemente

 

howto_core_leftpane43     howto_core_leftpane44

.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

Verwandte Beiträge

Kommentare

0 Kommentare

Zu diesem Beitrag können keine Kommentare hinterlassen werden.