Table of Contents
Styles
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
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> tag.
In 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, orsee uses #navigation# and orsee2 uses #navigation_horizontal#.
Further, you can use placeholders for colors. In particular, the default styles shipped with ORSEE use the color placeholders #html_header_top_bar_background#,
#html_header_logo_bar_background#, and #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 html_header.php file.
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 tagsets as icons.fa.css, 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.