GUI Skins

From MPDLMediaWiki
Jump to navigation Jump to search

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:

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

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

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

  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[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: NIMS Logo


Decoration

Body Backgound: Body Backgound

Input Backgound: Input Backgound


Alternative skin[edit]

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


  1. Body Background: Rect2816.png

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.

  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