GUI Skins

=Introduction=

A more detailed documentation of the customizable CSS part can be found here.

Interface components by UIE support the use of a dedicated "appearance" stylesheet. It keeps CSS definitions that doesn't affect the general behaviour and position of interface components but offer a possibility to customize its 'look and feel'

Additional stylesheets are invoked by (defined in the head section of the HTML page)

Browsers which don't offer an alternative stylesheet just take what is defined as:



In future the linking of different stylesheets are controlled by JSF and can be set during installation. New stylesheets should be imported from an external folder as well without any need to make a new deploy of the application.

As soon as the functionality "user preferences" is available. An alternative style can be chosen in all browsers.

=Workshop Demo=

Einführung
CoLab: CSS architecture

http://colab.mpdl.mpg.de/mediawiki/Interface_Development

Einfache Einführung und Unterscheidung in Core und Top-Layer


 * 1) Core CSS: Größen und Positionen sind im Core fest gelegt (eSciDoc_core_em.css)
 * 2) Component CSS: Wiederverwendbare Komponenten sind separate CSS Dateien (fullItem.css, lists, ...)
 * 3) Top-Layer: Farben, Rahmen, Bilder und Typographie sind als externes CSS ausgelagert um Skins zu ermöglichen (appearance.css, images.css)
 * 4) Example for user-selection of styles: http://www.w3.org/Style/

Live Demo des Top-Layers
Firefox

Gegenstand Listenansicht SearchResultListPage.jsp

Demo auf dev-pubman

Developer Toolbar/Edit CSS


 * 1) Die core.css wird gelöscht: Positionen und Größen gehen verloren, Farben, Schriftarten, Bilder (der Skin) bleiben erhalten.
 * 2) appearance.css wird gelöscht: Das Applikationslayout bleibt erhalten, der Skin geht verloren.

Die eSciDoc_core_em.css zeigen: /pubman_presentation/src/main/webapp/resources/eSciDoc_CSS_v2/eSciDoc_global_css/eSciDoc_core_em.css

Die eSciDoc_core_em.css ist in CoLab dokumentiert: User_Interface_Components

Interne Skins als Beispiel Siehe CoLab: Customizable_GUI_Skins

Hauptteil
Ein Skin wird erzeugt:

Demo: Pfad für temporäres CSS in Jboss ist: jboss/server/default/tmp/deploy/tmpXXXpubman_earXXX.ear-contents/pubman_presentation-XXX-exp.war/resources/eSciDoc_CSS_v2

NIMS Skin
Taken from: http://www.nims.go.jp/eng/

Austauschen von 3 Farbwerten: appearance.CSS


 * 1) Hintergrundfarbe: #EAF4F7 wird ersetzt durch #FFFFFF
 * 2) Die Link-Farbe : #147DA2 wird ersetzt durch #205DBB
 * 3) Die Input-Felder: #F3F8FA wird ersetzt durch #FFFFFF

Austauschen von Grafiken: images.CSS

Hintergrundgrafik: Element body wird ergänzt
body { background-image: url('http://colab.mpdl.mpg.de/mediawiki/images/0/0a/Bg_html1.gif'); background-repeat:repeat-x; }

Logo: Logografik wird ausgetauscht
.headerLogo { background-image: url('../images/Logo_pubman_nims.gif'); background-repeat: no-repeat; background-position: center center; }		/*PUT IN HEADER LOGO FOR PRINT DISPLAY HERE*/ @media print { .contentMenu { list-style-image: url('../images/Logo_pubman_nims.gif'); }		}

Changes in CSS files
Appearance + Images

Custom Images
Logo:

Decoration

Body Backgound:

Input Backgound:

Alternative skin
Austauschen von 3 Farbwerten: appearance.CSS


 * 1) Hintergrundfarbe: #EAF4F7 wird ersetzt durch #FFFFFF
 * 2) Die Link-Farbe : #147DA2 wird ersetzt durch #867D61
 * 3) Die Input-Felder: #F3F8FA wird ersetzt durch #FFFFFF


 * 1) Dann in images.css body hinzufügen:

background-image: url('http://colab.mpdl.mpg.de/mediawiki/images/0/09/Rect2816.png'); background-repeat: repeat-x;

ODER Input Backgound:


 * 1) Body Background: [[Image:Rect2816.png]]

Integrating external Stylesheets
Pubman supports three CSS skins. They can be changed by replacing the URLs in pubman.properties (Restart after change required). The URLs must point to a suitable theme.css.
 * 1) escidoc.pubman.stylesheet.standard.url
 * 2) escidoc.pubman.stylesheet.contrast.url
 * 3) escidoc.pubman.stylesheet.classic.url

Example for an external stylesheet url: http://qa-pubman.mpdl.mpg.de/skins/skin_AEI/styles/theme.css (adapted to: http://www.aei.mpg.de/english/contemporaryIssues/home/index.php)

or

http://qa-pubman.mpdl.mpg.de/skins/skin_MPG/styles/theme.css