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

Preparation of the eSciDoc Installation[edit]

Since version 5.x PubMan supports customizable stylesheets. A dedicated installtion of PubMan is required integrate external stylesheets.

Once the installations is done the pubman properties need to be changed in

/pubman_installer/src/main/resources/configuration/pubman.properties

These settings are usually deployed in:

/jboss/server_eclipse/jboss-4.2.2.GA/server/default/conf/pubman.properties

The following links can be replaced with custom stylesheets (explained below):


<!-- Properties for PubMan standard theme-->
escidoc.pubman.stylesheet.standard.url=./resources/eSciDoc_CSS_v2/themes/skin_PubMan/styles/theme.css
escidoc.pubman.stylesheet.standard.type=stylesheet
escidoc.pubman.stylesheet.standard.apply=true

<!-- Properties for PubMan contrast theme-->
escidoc.pubman.stylesheet.contrast.url=./resources/eSciDoc_CSS_v2/themes/skin_highContrast/styles/theme.css
escidoc.pubman.stylesheet.contrast.type=alternate stylesheet
escidoc.pubman.stylesheet.contrast.apply=true

<!-- Properties for PubMan classic theme-->
escidoc.pubman.stylesheet.classic.url=./resources/eSciDoc_CSS_v2/themes/skin_classic/styles/theme.css
escidoc.pubman.stylesheet.classic.type=alternate stylesheet
escidoc.pubman.stylesheet.classic.apply=true

External style sheets can thus be fetched by URL. To be able to recognize the change after deployment without reload it is useful to change the cookie version number to any other value.

<!-- version of the pubman cookie (has to be changed if style information is changed)-->
escidoc.pubman.cookie.version=1.0

Additionally the favicon can be fetched the same way.

<!-- URL of the favicon-->
escidoc.pubman.favicon.url=./resources/pubman_favicon.ico
escidoc.pubman.favicon.apply=true

External and Internal Stylesheets[edit]

The internal stylesheet(s) are deployed to the jBoss whereas an external can be fetched elswhere with the topmost CSS layer only. The structure of this external CSS should look like this:

../skin_name
	./images
	./styles
		appearance.css
		images.css
		theme.css

Customizing the Topmost CSS Layer[edit]

It is not recommended to change the underlying CSS layers because dimensions and positions might change in a unexpeced manner.

appearance.css[edit]

This part holds any coloring and font related appearance separately. The file is structured as following:

CDDL HEADER START
Color Table (useful for keeping an overview on replaced stuff)
General Definitions (Fonts, Elements)
Component Related Definitions

HTML Elements in General[edit]

Headlines

H1 {color, font-weight} is used as main title on the right side of the application layout H2 is used as headline for start page content H6 TBD

Font Related

font-family for output text is applied to

body, label, input, textarea, select, button, input.numberLabel, h2, h3, h6, a

H1, H4, H5

and can be can be defined separately from input text:

input[type=text], textarea

To change a main color that changes page title and all links to red color the changes would look like that:

	/*HEADER*/

		/*H1*/

		h1 {
				color: red; font-weight: normal;
	       	}
...

	        a, a:visited {
		                color: red; text-decoration: none;
	        }

Component Related Coloring

Dimensions and Positions of interface components are defined in the lower css layer. Coloring and style that affect look and feel are accessible here. Please do not apply any positioning and resizing to them:

Input

As input elements are treated differently accross browsers, coloring, background, border are defined separately.

States

a, input, button can have 3 states:

active/visited
hover/focus (cursor needs to be forced to be default for browser compatibility)
disabled
.actual is used to change any class to disabled

Separators

Menu entries and header entries are devided by vertical lines using the background-color of a span. Separators for menu types and header types can be defined separately. Some dynamic components below - like the paginator - do have a separator class attached as well.

Header (top persistent area)[edit]

Coloring and font-weight can be applied to any section of the header plus focus/hover behaviour:

.metaMenu
.mainMenu
.advandedSearchMenu
.organisationSearchMenu
.contentMenu
.breadcrumb

For accessibility there is also some format applied to the logo area:

.logoAlternate

Paginator[edit]

The paginator section contains two sections:

Range selector (only used if custom controls are applied)
Page Browser

The main class .pageBrowser affects three elements:

.pageBrowser input, .pageBrowser button, .pageBrowser a

Three conditions are prepared: hover/focus, .actual and :disabled if there is only one page. .actual is used to format the deactivated current page. The paginator comes with separators between page numbers (see documentation above).

Info Page[edit]

Info page classes define some styling for text content on the startpage (logged in and not logged in)

TBD

Lists & Full Item[edit]

The following classes span list display starting with header sections:

Pre-Header (TBD

List Header

Any list (bibliographic as well as grid) starts with a bold line and a header with leading labels. To influence this header the following class is important:

.listHeader

/*SELECT MENU*/

images.css[edit]

Images are defined as background images and can be found here separately pointing to the image folder next to the style folder.

Customizable GUI Skins

Contents