Table of Contents

How to implement a customized layout in ILIAS..................................................................................... 3 Getting Started ........................................................................................................................................ 3 Login Screen ............................................................................................................................................ 5 Logout Screen .......................................................................................................................................... 6 User Agreement ...................................................................................................................................... 7 Registration Page..................................................................................................................................... 8 Registered Page ..................................................................................................................................... 10 Registration Conrmation Email ........................................................................................................... 11 Header Style .......................................................................................................................................... 12 Styles General........................................................................................................................................ 15 Google Analytics .................................................................................................................................... 15 Favicon .................................................................................................................................................. 15 How to add HTML text block to repository ........................................................................................... 16

How to implement a customized layout in ILIAS

Original Author: Andrew Molloy, Aerospace Consulting & Services Ltd. (U.K.) License: Creative Commons (by-nc-sa), some rights reserved
Folder path or lename Text/code within le Text/names to be chosen/customized

Download example templates at leer.thuiz.com

Getting Started
1. Create folder structure for new skin: Customizing\global\skin\skin name.

2. Copy Images folder, template.xml and delos.css les from template\default\ to directory above

3. Rename new delos.css to style name.css.

4. Edit template.xml and replace name = Delos to name = stylename and name = ILIAS to name = skinname.

5. Enter ILIAS, go to the Administration, go to Style and Layout, in System Styles choose the new skin as default and transfer any existing users to it.

Login Screen

1 2

1. Logo a.

Replace HeaderIcon.png (or add new graphic name) in Customizing\global\skin\skin name\Images. b. Copy le Services\Init\templates\default\tpl.login.html to Customizing\global\skin\skin name\Services\Init\tpl.login.html c. Edit le and change src for HeaderIcon to ./Customizing/global/skin/skin name/images/HeaderIcon.png

2. Login Text a. New le copied from lang\ but with all entries after <!-- language le start --> deleted: Customizing\global\lang\ilias_language e.g. en.lang.local b. Add line common#:#login_to_ilias#:#Login Text to above le c. After you have added an adapted language le, open the ILIAS setup setup/ setup.php, click on the client, that should use this le, then enter the Languages section. Activate the checkbox in column Include Local. After that, enter ILIAS, go to the administration, open section Languages and hit Refresh Languages. Now the adapted texts should be presented in ILIAS.

Logout Screen

3 4

3. Logo a.

Replace HeaderIcon.png (or add new graphic name) in Customizing\global\skin\skin name\Images. b. Copy le Services\Init\templates\default\tpl.logout.html to Customizing\global\skin\skin name\Services\Init\tpl.logout.html c. Edit le and change src for HeaderIcon to ./Customizing/global/skin/skin name/images/HeaderIcon.png

4. Login Text a. Customizing\global\lang\ilias_language e.g. en.lang.local b. Add line common#:#logout_ilias#:#Logged Off Text to above le c. Go to the administration, open section Languages and hit Refresh Languages

User Agreement

5 6

5.

Logo a. Replace HeaderIcon.png (or add new graphic name) in Customizing\global\skin\skin name\Images. b. Copy le Services\Init\templates\default\tpl.view_usr_agreement.html to Customizing\global\skin\skin name\Services\Init\tpl.view_usr_agreement.html c. Edit le and change src for HeaderIcon to ./Customizing/global/skin/skin name/images/HeaderIcon.png

6. Agreement Text a. These texts are stored in html files located in the Customizing/global/agreement directory. The format of the filename is: Customizing/global/agreement/agreement_<language_code>.html b. It is also possible to provide user agreements per client. These are stored in the directory Customizing/clients/<client_name>/agreement.

Registration Page

7 8

7. Logo a. Replace HeaderIcon.png (or add new graphic name) in Customizing\global\skin\skin name\Images. b. Copy le templates\default\tpl.usr_registration.html to Customizing\global\skin\skin name\ tpl.usr_registration.html c. Edit le and change src for HeaderIcon to ./Customizing/global/skin/skin name/images/HeaderIcon.png 8. Referral Text d. Customizing\global\lang\ilias_language e.g. en.lang.local e. Add line common#:#referral_comment#:#How did you hear text etc to above le f. Go to the administration, open section Languages and hit Refresh Languages

9. Agreement Text a. These texts are stored in html files located in the Customizing/global/agreement directory. The format of the filename is: Customizing/global/agreement/agreement_<language_code>.html b. It is also possible to provide user agreements per client. These are stored in the directory Customizing/clients/<client_name>/agreement.

Registered Page

10 11

10. Logo a. Replace HeaderIcon.png (or add new graphic name) in Customizing\global\skin\skin name\Images. b. Copy le templates\default\tpl.usr_registered.html to Customizing\global\skin\skin name\ tpl.usr_ registered.html c. Edit le and change src for HeaderIcon to ./Customizing/global/skin/skin name/images/HeaderIcon.png 11. Successful Registration Text a. Customizing\global\lang\ilias_language e.g. en.lang.local b. Add line common#:#txt_registered#:# You successfully registered etc to above le c. Go to the administration, open section Languages and hit Refresh Languages

Registration Conrmation Email

12 13

12. Email Header a. Customizing\global\lang\ilias_language e.g. en.lang.local b. Add line common#:#reg_mail_subject#:#Subject line of email to above le and go to the administration, open section Languages and hit Refresh Languages 13. Email Body a. Customizing\global\lang\ilias_language e.g. en.lang.local b. Add lines to above le and go to the administration, open section Languages and hit Refresh Languages. i. common#:#reg_mail_body_text1#:#Welcome to. ii. common#:#reg_mail_body_text2#:#To access Alternatively type your own custom message with variables in Administration, User Accounts, Settings, New Account Mail.

Header Style

17

14

16

18
14. Header Background Colour a. Create new graphic based upon images/head_back.gif and name head_back_new.gif b. In the style name.css le:
div.ilFrameH { background-image: url(images/head_back_new.gif); background-repeat: repeat-x; background-color: #C4FBCA; }

c. Background colour is hex (RGB) value of the bottom of gradient in head_back_green.gif

Note: the rounded corners may no longer match or stand out and so the les tl.gif and tr.gif will need to be amended/replaced (referenced in div.ilFrameTL and div.ilFrameTR). 15. Header Text Style a. In the style name.css le:
div.ilTopTitle { font-size: 300%; color: #335599; letter-spacing: 0.05em; word-spacing: -0.1em; white-space: nowrap;

padding-top: 12px }

b. Change font-size, colour etc. The text content itself can be edited directly in ILIAS: Administration, General Settings, Header Title.

16. Main Menu Style a. Create new graphic based upon images/MainMenuBack.gif and name MainMenuBack_new.gif b. In the style name.css le:
div.ilMainMenu { background-image: url(images/MainMenuBack_new.gif); background-repeat: repeat-x; background-position: bottom; margin: 0px; padding: 1px 0px 6px 20px; line-height: normal; clear: both; }

c. To change the colour of the selected section text:

a.MMActive:link, a.MMActive:visited { color: #007740; padding: 0px 0px; font-size: 90%; text-decoration:none; margin: 0px 15px 5px 0px; font-weight: normal; white-space: nowrap; } d.

For the mouseover colour of section text:

a.MMInactive:hover { color: #007740; text-decoration:none; }

17. Logo a. Replace HeaderIcon.png (or add new graphic name) in Customizing\global\skin\skin name\Images. b. Copy le Services\Main Menu\templates\default\tpl.main_menu.html to Customizing\global\skin\skin name \Services\Main Menu\ c. tpl.main_menu.html d. Edit le and change src for HeaderIcon to ./Customizing/global/skin/skin name/images/HeaderIcon.png 18. Footer

a. Copy le templates\default\tpl.footer.html to Customizing\global\skin\skin name\ tpl.footer.html b. Change text/links/images between <div class="il_Footer"> and {TRANSLATION_LINK} exclusive. Do not alter/delete code outside this range.

Styles General
Most colour/styles can be changed with the style name.css le. View the source of the page in question and determine the class name of the object to be changed. There may also be a related repeated .gif etc that will have to be changed or recreated in a graphics package.

Google Analytics
Tracker code a. Copy templates\default\tpl.main.html to Customizing\global\skin\skin name \tpl.main.html b. Edit le and add before the </body> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-12029326-5']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script>

Favicon
Favorites Icon a. Add new graphic name in Customizing\global\skin\skin name\. b. Copy templates\default\tpl.main.html to Customizing\global\skin\skin name \tpl.main.html c. Edit le and change src for favicon.ico to ./Customizing/global/skin/skin name/ favicon.ico d. Copy templates\default\ tpl.frameset.html to Customizing\global\skin\skin name \ tpl.frameset.html e. Edit le and change src for favicon.ico to ./Customizing/global/skin/skin name/ favicon.ico

How to add HTML text block to repository

a. You need to activate the editor in
Administration > Advanced Editing > Repository Settings

b. Additionally, you should generate a new style for your website in

Administration > Style and Layout > Content Styles

c. And you need to choose this style in every repository page to use these style sheet settings. d. Now in the repository there is a submenu below the tab "content":
View, Manage, (Sort), Text/Media Editor

e. You have to click "Text/Media Editor".