Customizable GUI Skins
| APPLICATION AREAS |
|---|
|
|
| PROJECTS |
|
Research- and Metadata Handling Corporate & Interface Design (under Rework) |
| edit |
Preparation of the eSciDoc Installation[edit]
Since version 5.x PubMan supports customizable stylesheets. A dedicated installtion of PubMan is required to 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]
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
/*GENERAL*/
/*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
-----------------------------------------------
|[ Logo ] [ Meta Menu ]|
| [ Breadcrumb ]|
|[ Main Menu ] [ Title ]|
|[ Options ] |
|[ Actions ] |
|[ Message ] |
-----------------------------------------------
*/
/*HEADER*/
/*H1*/
h1 {
color: red; font-weight: normal;
}
...
a, a:visited {
color: red; text-decoration: none;
}
/*COMPONENT RELATED COLORING*/
/*GENERAL*/
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
/*SEPERATORS*/
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 FOR ALL MENU INPUTS AND LABELS*/
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
To change all menus towards green underlined links that appear bold on hover values would look like this:
.metaMenu input, .metaMenu button, .metaMenu a, .quickSearchMenu a, .advancedSearchMenu input, .advancedSearchMenu, .organisationSearchMenu, .organisationSearchMenu a, .mainMenu input, .mainMenu a, .contentMenu input, contentMenu a {
background-color: #EAF4F7;
color: green;
text-decoration: underline;
}
.metaMenu input:hover, .metaMenu input:focus, .metaMenu button:hover, .metaMenu button:focus, .metaMenu a:hover, .metaMenu a:focus, .quickSearchMenu input:hover, .quickSearchMenu input:focus, .quckSearchMenu a:hover, .quckSearchMenu a:focus, .quickSearchCheckBoxMenu label:hover, .quickSearchCheckBoxMenu label:focus, .advancedSearchMenu input:hover, .advancedSearchMenu input:focus, .advancedSearchMenu a:hover, .advancedSearchMenu a:focus, .organisationSearchMenu input:hover, .organisationSearchMenu input:focus, .organisationSearchMenu a:hover, .organisationSearchMenu a:focus, .mainMenu input:hover, .mainMenu input:focus, .mainMenu a:hover, .mainMenu a:focus, .contentMenu input:hover, .contentMenu input:focus, contentMenu a:hover, contentMenu a:focus {
color: #524240;
font-weight: bold;
text-decoration: none;
/* CONTENT ----------------------------------------------- | [ Paginator ] | | | |[ Lists & Full Item ] | | | | [ Footer ] | -----------------------------------------------*/
Paginator[edit]
/*EXT. PAGINATOR*/
Contains two parts:
- 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 the pseudoclass :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 destinctive styling for text content on the startpage (logged in and not logged in)
TBD
Lists & Full Item[edit]
The classes of /*LISTS & FULL ITEM*/ span list display and metadata display starting with 'wrapper' classes that define a leading bold line and a background (Please mind, that font color is defined to appear on bright background).
.itemList, .fullItem
Pre-Header (TBD)
/*LIST HEADER*/
Both list varieties (bibliographic, grid) starts with a bold line and a header with leading labels. To influence this header the following class is used:
.listHeader
/*SELECT MENU*/
The select menu is a 'non standard' pulldown menu on the left with separate border and background definitions.
List header of grid lists need some more classes due to sorting functionality:
.statusArea .listBackground
Each can change to indicate sorting direction:
.ascSort .desSort
/*LIST ITEM*/
List display (bibliographic and table) contains items line by line, formatted with
.listItems .itemHeadline
For each item border-top-color is defined and the first line of a list item is called .itemHeadline and varies in font-size. The class .searchHit gives a highlight for fulltext hits in medium view. The header class is also used in full item view and easy submission.
To change the list item hover effect refer to (:hover is not used here to work around an IE bug)
.preListHeader, .fullItem, .tiledList, .listBackground, .listBackground .seperator {
background-color: #FFFFFF;
}
/*FULL ITEM (HEADER + BOCK)*/
Classes here distinguish between the upper and the lower part of the detail view.
.fullItem .fullItemControls a .itemHeadline
sets the stage with a border-top-color, background-color and a menu on the right. The title of an item has elevated font-size (16px).
The lower part is similar to an item list with a defined hierarchy of line separated metadata display. The ordering is as following:
.fullItem .itemBlock, .fullItem .itemHeader -> formats the leading lines .fullItem li, .itemBlock .itemLine -> formats all metadata with light lines .itemBlock -> is explicity formatted with different border-top-color
.voidBlock is used additionally to format a section label with no meta data. Another special class is .affHover. It formats author names and highlights the corresponding affiliations via JavaScript. Classes like .add, .remove, .groupButton are used here to ensure a proper display of the cursor in IE6 and IE7.
/*SINGLE ELEMENTS*/
Classes are relevant to align the following elements:
- JavaScript framework jQuery
- Preparation of cusom controls (Dropdowns, Upload, ...)
- other JavaScript components (Autosuggest)
/*FORM BUTTONS*/
Formats buttons following the primary/secondary button approach where one active button is emphasized.
.cancelButton
.activeButton
/*MESSAGE AREAS*/
Message that usually contain more than line (e.g. item validation) are displayed in boxes. For validation messages a box with position:fixed is used in order to keep the output while the viewport scrolls:
.messageArea .absoluteMessageArea
Depending on status they appear in different colors:
.infoMessageArea .errorMessageArea
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. All images are available in different states:
- Active - Deactivated - Static - Error - Success
The image naming convention is as following:
$Solution$_$FunctionalArea$_$Resolution_Status$.gif
/*HEADER*/
For the logo display a print condition and some extra classes are defined:
.themePark
The class is used to allows additional overlays for logos (claims, seasonal decoration). To make sure the logo will not be changed can be used more flexible. An image with identical dimensions and proper alpha channel is necessary to be placed on top of the logo image.
.overlayDev .overlayTest .overlayQA
Used internally for testing purpose.