Difference between revisions of "Customizable GUI Skins"
Jump to navigation
Jump to search
m (New page: {{Template:TemplateUIE_Activities}} <div style="float:left; width:70%; margin-bottom:3em;"> =Preparation of eSciDoc Installation= Since version 5.x PubMan supports customizable stylesheet...) |
m |
||
| Line 2: | Line 2: | ||
<div style="float:left; width:70%; margin-bottom:3em;"> | <div style="float:left; width:70%; margin-bottom:3em;"> | ||
=Preparation of eSciDoc Installation= | =Preparation of the eSciDoc Installation= | ||
Since version 5.x PubMan supports customizable stylesheets. A dedicated installtion of PubMan is required integrate external stylesheets. | 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 | Once the installations is done the pubman properties need to be changed in | ||
<pre> | |||
/pubman_installer/src/main/resources/configuration/pubman.properties | /pubman_installer/src/main/resources/configuration/pubman.properties | ||
</pre> | |||
These settings are usually deployed in: | |||
<pre> | |||
/jboss/server_eclipse/jboss-4.2.2.GA/server/default/conf/pubman.properties | /jboss/server_eclipse/jboss-4.2.2.GA/server/default/conf/pubman.properties | ||
</pre> | |||
The following links can be replaced with custom stylesheets (explained below): | The following links can be replaced with custom stylesheets (explained below): | ||
< | <pre> | ||
<!-- Properties for PubMan standard theme--> | <!-- Properties for PubMan standard theme--> | ||
| Line 32: | Line 36: | ||
escidoc.pubman.stylesheet.classic.apply=true | escidoc.pubman.stylesheet.classic.apply=true | ||
</ | </pre> | ||
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. | 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. | ||
< | <pre> | ||
<!-- version of the pubman cookie (has to be changed if style information is changed)--> | <!-- version of the pubman cookie (has to be changed if style information is changed)--> | ||
escidoc.pubman.cookie.version=1.0 | escidoc.pubman.cookie.version=1.0 | ||
</ | </pre> | ||
Additionally the favicon can be fetched the same way. | Additionally the favicon can be fetched the same way. | ||
< | <pre> | ||
<!-- URL of the favicon--> | <!-- URL of the favicon--> | ||
escidoc.pubman.favicon.url=./resources/pubman_favicon.ico | escidoc.pubman.favicon.url=./resources/pubman_favicon.ico | ||
escidoc.pubman.favicon.apply=true | escidoc.pubman.favicon.apply=true | ||
</ | </pre> | ||
=External and Internal Stylesheets= | =External and Internal Stylesheets= | ||
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 external CSS should look like this: | 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: | ||
< | <pre> | ||
./skin_name | ../skin_name | ||
./images | |||
./styles | |||
appearance.css | appearance.css | ||
images.css | images.css | ||
theme.css | theme.css | ||
</ | </pre> | ||
=Customizing the Topmost CSS Layer= | =Customizing the Topmost CSS Layer= | ||
| Line 76: | Line 80: | ||
==images.css== | ==images.css== | ||
Images are defined as background images and can be found here separately | Images are defined as background images and can be found here separately pointing to the image folder next to the style folder. | ||
</div> | </div> | ||
Revision as of 13:46, 4 January 2010
| 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 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 file 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
Component Related The stylesheet is mostly ordered in functional areas here.
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.