Table of Contents
In ORSEE you can change the look and feel of the HTML output by employing
styles. You can use different styles for the public and the administration area.
All styles are located in the
styles/ directory in ORSEE's system root. Every subdirectory represents a style. To create a new style, just copy one of the old ones and edit the new directory.
cd styles cp -r oldstyle newstyle
In the following we describe the files which are taken for HTML output. The colors in ORSEE can be directly configured in Options/Colors.
For each style, there are the following files which deal with HTML-Output:
stylesheet.css: This is the standard file which will be linked in the
<HEAD>section of almost all HTML pages.
HTML headers and footers
The idea here is the following: When generating a HTML page, ORSEE first processes some code, then prints out the
<HTML> tag, the
<HEAD> section and the starting
<BODY> tag. Right after it will include the
html_header.php file and print it out. The header file should include the navigation menu (see below). Then, ORSEE generates its system output. Right after that, it includes the
html_footer.php file, and concludes with printing the closing
html_header.php you will have to use include a placeholder for the navigation menu. You can use one the the following two placeholders:
#navigation#: This will display a vertical navigations, with all menu items in a list.
#navigation_horizontal#This will display a horizontal navigation, with all menu items in two rows (one row for the main items, one row for the subitems).
From two styles that are shipped with ORSEE,
Further, you can use placeholders for colors. In particular, the default styles shipped with ORSEE use the color placeholders
#html_header_menu_background#, which can be set in Options/Colors.
Other style files
Further, the style folder contains the ORSEE logos. You might want to put your laboratory and universities logos here and include to them as images in the
Other files that affect the layout in ORSEE
For icons, ORSEE uses the beautiful Font Awesome icons set (http://fortawesome.github.io/Font-Awesome/). The respective files are included in folder
icons.fa.ttf etc. (These are different formats preferred by different browsers.)
ORSEE uses jQuery and a number of jQuery modules for displaying form elements. Each jQuery module comes with a
.css file that includes the stylesheets used in that module. (E.g., jquery.mobile.css is the stylesheet used on the experiment enrollment page for mobile devices.) All these
.css files are located in the folder
tagsets/jquery/. Changing the stylesheets will affect the display of the respective form fields within ORSEE.