ilias 4 branding - how to implement a customised skin

http://creativecommons.org/licenses/by-nc-sa/3.0/

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 Confirmation 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 filename

Text/code within file

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 files 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. Logo

a. Replace HeaderIcon.png (or add new graphic name) in

Customizing\global\skin\”skin name”\Images.

b. Copy file Services\Init\templates\default\tpl.login.html to

Customizing\global\skin\”skin name”\Services\Init\tpl.login.html

c. Edit file and change src for HeaderIcon to ./Customizing/global/skin/”skin

name”/images/HeaderIcon.png

2. Login Text

a. New file copied from lang\ but with all entries after 

deleted: Customizing\global\lang\ilias_”language e.g. en”.lang.local

b. Add line common#:#login_to_ilias#:#”Login Text” to above file

c. After you have added an adapted language file, open the ILIAS setup setup/

setup.php, click on the client, that should use this file, 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.

1

2

Logout Screen

3. Logo



b. Copy file Services\Init\templates\default\tpl.logout.html to

Customizing\global\skin\”skin name”\Services\Init\tpl.logout.html



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 file

c. Go to the administration, open section Languages and hit Refresh Languages

3

4

User Agreement

5. Logo



b. Copy file Services\Init\templates\default\tpl.view_usr_agreement.html to

Customizing\global\skin\”skin name”\Services\Init\tpl.view_usr_agreement.html



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.

5

6

Registration Page

7. Logo



b. Copy file templates\default\tpl.usr_registration.html to

Customizing\global\skin\”skin name”\ tpl.usr_registration.html



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 file

f. Go to the administration, open section Languages and hit Refresh Languages

7

8

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.

9

Registered Page

10. Logo



b. Copy file templates\default\tpl.usr_registered.html to

Customizing\global\skin\”skin name”\ tpl.usr_ registered.html



11. Successful Registration Text


b. Add line common#:#txt_registered#:#” You successfully registered… etc” to

above file

c. Go to the administration, open section Languages and hit Refresh Languages

10

11

Registration Confirmation Email

12. Email Header


b. Add line common#:#reg_mail_subject#:#”Subject line of email” to above file

and go to the administration, open section Languages and hit Refresh

Languages

13. Email Body


b. Add lines to above file 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.

12

13

Header Style

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 file:

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 files 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 file:

div.ilTopTitle

{

font-size: 300%;

color: #335599;

letter-spacing: 0.05em;

word-spacing: -0.1em;

white-space: nowrap;

14 16

17

18

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 file:

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



b. Copy file 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 file and change src for HeaderIcon to ./Customizing/global/skin/”skin


18. Footer

a. Copy file 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 file. 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 file 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 file 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 file 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".

ilias 4 branding - how to implement a customised skin

Documents