GUI Skins

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

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:

<link rel="stylesheet" type="text/css" href="" />

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:

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

Cascading Style Sheets

User Interface Engineering

Hypertext Markup Language

JavaServer Faces

Collaboration Laboratory

Enhanced Scientific Documentation

Open source Java EE-based application server

Enterprise Archive File Formate

National Institute for Materials Science Japan