 |  |
| | |
OLAT uses a component based web application framework that has specially be created for the LMS OLAT. Component based means, that a page consists of many components that do work completely independent of each other.
To glue all the components on a page together to a HTML page we use the Velocity templating engine. This is called a container: an arrangement of components using HTML. Such a velocity container can now be used as a component itself.
As a result of this conceptual approach the reuse of code is very high which helps maintaining the system. On the other hand things must be designed generic, when changing something here it will also change on the other places where the changed component ist used. A viewable page generated by OLAT is a hierarchical tree of components and containers.
CSS is used to do most of the layout, however due to some limitations of CSS OLAT still uses tables for layouting on some places.
The easiest way to change the look and feel is to modify the CSS files.
#cd olat3/webapp/static/css/ #ls #jscalendar-small.css mktree-normal.css olat-default-large.css olat-printview.css #jscalendar.css.in mktree.css mktree-small.css olat-default-normal.css #jscalendar.css.out mktree.css.in olat-default.css olat-default-small.css #jscalendar-large.css mktree.css.out olat-default.css.in olat-editor.css #jscalendar-normal.css mktree-large.css olat-default.css.out olat-preview.css #olat-error.css olat-help.css olat-home.css olat-printview.css
Have a look at the olat-default.css.in file. Change it as you desire. Then run ant config-all. This will generate the the files olat-default-small.css, olat-default-normal.css and olat-default-large.css using correct pathes for embedded images and using the font sizes defined in your olat3/build.properties file. Do not modify the files olat-default-small.css, olat-default-normal.css and olat-default-large.css, your modifications will be lost next time you run ant config-all.
Starting with the Olat release 5.0 you can have your css as well in the source code folder structure or even in a jar which represents an olat extension. Therefore some css files are new spreaded in the sourcecode folder structure. Make a search to find them all (located in the _static folders) if you with to adjust them.
Change the other CSS files if you need: jscalender for the date chooser popup, mktree for the javascript based menu (currently not used). The olat-editor.css, olat-preview.css and olat-printview.css are loaded after the olat default CSS file and can be used to override some definitions, e.g. to set an editor background image or to disable input fields in the print view.
Many images used in OLAT can be changed using the CSS. This is still work in progress. Some images need to be replaced to be changed. Have a look at olat3/webapp/static/images/.
Since OLAT uses a component based approach it is not so easy to modify the layout. If the possibilites via CSS are not enough you can modify the files found in the sourcecode folder structure in the _content folder. Be aware that you need to redo this changes every time a new OLAT release comes out. If you see better approaches in some files that would make your life easier, please send us your patch via the developer mailinglist and we might integrate it into the distribution.
The following is a list of the most important layout files:
webapp/WEB-INF/src/org/olat/_content/dmzLayout.html
Main layout when in the not logged in state. Uses the footer.html
webapp/WEB-INF/src/org/olat/core/commons/chiefcontrollers/_content/fullLayout.html
Main layout when logged in. Uses the fullHeader.header and the footer.html
webapp/WEB-INF/src/org/olat/core/commons/chiefcontrollers/_content/popupLayout.html
Main layout for popup windows. Uses the footer.html.
webapp/WEB-INF/src/org/olat/core/commons/chiefcontrollers/_content/printingLayout.html
Main layout for the printing view
webapp/WEB-INF/src/org/olat/core/commons/chiefcontrollers/_content/fullHeader.html
Layout for the top navigation header: sites, dynamic tabs and top navigation tools.
webapp/WEB-INF/src/org/olat/core/commons/chiefcontrollers/_content/footer.html
The footer used everywhere. List of users, OLAT version and powerd by icon.
./core/gui/control/_content/modalDialog.html
Content layout when something is displayed as a modal dialog (no menu, no tools, just fullscreen)
./core/gui/control/generic/layout/_content/menuandtool.html
Content layout with three columns: menu - content - toolboxes
./core/gui/control/generic/layout/_content/menuonly.html
Content layout with two column: menu - content
./core/gui/control/generic/layout/_content/contentonly.html
Content layout with only content, no menu and no toolboxes
During a development phase it makes sense to set the flag velocity.cache.pages=false in the olat3/build.properties file so see changes you make immediately. Do not set this property to true in a production environment since this reloads the file from disk for every request and can result in out of memory exception due to a velocity cache bug in certain conditions. Additionaly it makes the system slow.
Sometimes it is difficult for a novice to understand which component or container is displayed when and where. Or the other way around you often want to know which component is responsible for this element on a specific OLAT screen. The answer to this question is the very cool OLAT GUI debug mode.
Here is what you need to do to enable the debug mode:
Set the property olat.debug=true in olat3/build.properties
Run ant config-all
Restart tomcat
Below the top Navigation of every page you can now enable / disable the debug mode. Choose the mini debug mode
Don't do this on a productive setup, the debug mode is visible to all logged in users !
If you like to change more than some colors and html fragments you need some java experience. Go to the developer documentation or the OLAT javadoc
| |  | |
 |