APPLICATION AREAS
Home Interface Conception & Design User Interface Evaluation Interface Development
PROJECTS
Pattern Library Publication Management Digitization Lifecycle Research- and Metadata Handling Usability Report Corporate & Interface Design (under Rework) Page Index
edit

Introduction[edit]

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[edit]

Einführung[edit]

CoLab: CSS architecture

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

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

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

Live Demo des Top-Layers[edit]

Firefox

Gegenstand Listenansicht SearchResultListPage.jsp

Demo auf dev-pubman

Developer Toolbar/Edit CSS

Die core.css wird gelöscht: Positionen und Größen gehen verloren, Farben, Schriftarten, Bilder (der Skin) bleiben erhalten.
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[edit]

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[edit]

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

Austauschen von 3 Farbwerten: appearance.CSS

Hintergrundfarbe: #EAF4F7 wird ersetzt durch #FFFFFF
Die Link-Farbe : #147DA2 wird ersetzt durch #205DBB
Die Input-Felder: #F3F8FA wird ersetzt durch #FFFFFF

Austauschen von Grafiken: images.CSS

Hintergrundgrafik: Element body wird ergänzt[edit]


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

Logo: Logografik wird ausgetauscht[edit]

	.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[edit]

Appearance + Images

Custom Images[edit]

Logo:

Decoration

Body Backgound:

Input Backgound:

Alternative skin[edit]

Austauschen von 3 Farbwerten: appearance.CSS

Hintergrundfarbe: #EAF4F7 wird ersetzt durch #FFFFFF
Die Link-Farbe : #147DA2 wird ersetzt durch #867D61
Die Input-Felder: #F3F8FA wird ersetzt durch #FFFFFF

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:

Body Background:

Integrating external Stylesheets[edit]

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.

escidoc.pubman.stylesheet.standard.url
escidoc.pubman.stylesheet.contrast.url
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

GUI Skins

Contents