GUI Skins

From MPDLMediaWiki
Jump to: navigation, search
APPLICATION AREAS

Home


Interface Conception & DesignUser Interface EvaluationInterface 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 CSSCascading Style Sheets part can be found here.

Interface components by UIEUser Interface Engineering support the use of a dedicated "appearance" stylesheet. It keeps CSSCascading Style Sheets 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 HTMLHypertext Markup Language 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 JSFJavaServer Faces 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

CoLabCollaboration Laboratory: CSSCascading Style Sheets architecture

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

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

  1. Core CSSCascading Style Sheets: Größen und Positionen sind im Core fest gelegt (eSciDocEnhanced Scientific Documentation_core_em.css)
  2. Component CSSCascading Style Sheets: Wiederverwendbare Komponenten sind separate CSSCascading Style Sheets Dateien (fullItem.css, lists, ...)
  3. Top-Layer: Farben, Rahmen, Bilder und Typographie sind als externes CSSCascading Style Sheets 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 CSSCascading Style Sheets

  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 eSciDocEnhanced Scientific Documentation_core_em.css zeigen: /pubman_presentation/src/main/webapp/resources/eSciDocEnhanced Scientific Documentation_CSSCascading Style Sheets_v2/eSciDocEnhanced Scientific Documentation_global_css/eSciDocEnhanced Scientific Documentation_core_em.css

Die eSciDocEnhanced Scientific Documentation_core_em.css ist in CoLabCollaboration Laboratory dokumentiert: User_Interface_Components

Interne Skins als Beispiel Siehe CoLabCollaboration Laboratory: Customizable_GUI_Skins

Hauptteil

Ein Skin wird erzeugt:

Demo: Pfad für temporäres CSSCascading Style Sheets in JbossOpen source Java EE-based application server ist: jboss/server/default/tmp/deploy/tmpXXXpubman_earXXX.earEnterprise Archive File Formate-contents/pubman_presentation-XXX-exp.war/resources/eSciDocEnhanced Scientific Documentation_CSSCascading Style Sheets_v2


NIMSNational Institute for Materials Science Japan Skin

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

Austauschen von 3 Farbwerten: appearance.CSSCascading Style Sheets

  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.CSSCascading Style Sheets

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 CSSCascading Style Sheets files

Appearance + Images

Custom Images

Logo: NIMS Logo


Decoration

Body Backgound: Body Backgound

Input Backgound: Input Backgound


Alternative skin

Austauschen von 3 Farbwerten: appearance.CSSCascading Style Sheets

  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: Input Backgound


  1. Body Background: Rect2816.png

Integrating external Stylesheets

Pubman supports three CSSCascading Style Sheets 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