OX6:Gui Theming Description

Introduction

The Open-Xchange application allows you to create your own theme with your own colors and images. This tutorial will explain each step to create such theme.

Tools

A good tool for testing, debugging and experimenting is the Firefox plug-in Firebug. This powerful plug-in can help you to debug your CSS elements on the fly. You also require a image manipulation program like Photoshop, Gimp or Corel Draw.

Understanding CSS

The full layout of each Open-Xchange theme consists of two major parts: the CSS elements (90%) and the layout images (10%). This means, most of the theme is done in CSS. The main structure of the Open-Xchange frontend is done in HTML and combined with a CSS theme and a set of images completes the theme. The CSS elements control the look, size, position and sometimes the effect of a HTML element. If you want to change these attributes of a HTML element, you only need to define a class within you CSS file for this given HTML element. In this class, you can set the color, the size, the position and sometimes the effect of one or more HTML elements.

Some HTML elements have a fixed group of attributes which are set in a CSS file which is not part of the Open-Xchange theme. These fixed parts are required to make the layout work correct. However, you can always override these attributes in your CSS file if you want to or if you need to.

Where to start

All themes will be stored in the following directory of the Open-Xchange Server:

/var/www/ox6/themes/

Per default you will have at least two themes in this directory: a default theme and a alternative theme. The easiest way to start with your own theme is to copy the default theme with:

cp -r /var/www/ox6/themes/default /var/www/ox6/themes/[YOUR_THEME_NAME]

Now, you should start modifying your theme, by editing the stylesheet files in /var/www/ox6/themes/[YOUR_THEME_NAME]/css, and exchanging the images from /var/www/ox6/themes/[YOUR_THEME_NAME]/images. The following screenshots will give you an overview of the stylesheet structure, and which tags have to be modified in order to get your theme customized

Version 6.18.2

Setup description

After you have created your theme, you should make this theme available in the configuration interface for users of the Open-Xchange Server. To do that, you only have to manifest your theme in the following server configuration file, afterwards your users can select your theme:

groupware/settings/themes.properties

You will find at least two already existing themes there. Just add your new theme. We call our new theme "Mantis" which is also the path within the theme folder of the GUI.

modules/themes/mantis=Mantis

Afterwards, restart the Open-Xchange service groupware. Your users can now select your theme.

Getting started, the background and the shadow

Lets start with the basics, the background and the shadows. Open the global.css and change the background color:

body {
 background-color: #f1f1f1;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 9pt;
 color:#000;
}

Save the file and reload your theme.

Background

In this screenshot, you can see that the background is now brighter but the corners of the subwindows are still blue. These blue elements are images which provide the shadow of the subwindows. In the next step we will replace this image with a new one which fits our colors. Open the image for the left shadow which can be found here

/themes/[YOUR_THEME_NAME]/img/border/cpbody-r.png

Basicly, this image is only 4 pixel wide and infinite heigh. It doesn't matter if you cut it down to 1x4 pixel or make a 500x4 pixel version. It will be unlimited repeated. A easy way to add a shadow, is to use a gradient tool and make a 4 pixel gradient from a dark gray to a lighter gray.

You also have to add a extra line to your global.css CSS file which looks like this.

#ox-sidesplit {
 right: 1px !important;
}

Just add it to the bottom of your file.

Take your new cpbody-r.png file and copy it into the same folder and overwrite the cpbody-l.png file. Then open it and rotate it for 180°. The left shadow is the same as the right one which means you can easily copy these files.

Another quick CSS change is needed to fix some custom elements. Open

/themes/[YOUR_THEME_NAME]/css/bgimages.css

and change this line for the new created cpbody-l.png file.

.cpheader-l {
 background-image: url("../img/border/cpbody-l.png");
 background-position: 0% 0%;
 background-repeat: repeat-y;
}

The last thing you have to do, is to change the panel-switcher or sometimes called panel toggler. It is the little arrow in the upper left corner if you have closed the folder panel. You have to change the background shadow, too. The file is located here:

/themes/[YOUR_THEME_NAME]/img/border/spback.gif

You also have to make a minor change in the bgimages.css file. Add the last line to this class which reduces the right position from -10 to -8.

.sp-toggle
{
 background-image:url(../img/border/spback.gif);
 right: -8px !important;
}

At this point, you are done with all shadows and borders and the background.

Panels and bars

We start with the "module name bar" and the navigation panel. For this example, we change the background color with a image, a gradient image. Create a image you like and place it within your theme folder.

/themes/[YOUR_THEME_NAME]/img/

Now we have to add this image to our CSS files. Both bars or panels get their entries in the global.css. You can replace the existing entries with a new one.

.topHeaderBG, .topheader-color {
 background-image: url("../img/background_g.png");
}

and

div.oxTabControl {
 background-color: #dae1e6;
 background-image: url(../img/background_g.png);
 background-position: 100% 0;
 background-repeat: no-repeat;
}

You might need to change your font color for these bars in case you switched to a brighter background image or color. Both is set in the global.css

.ox-sidepanel-title {
 color: black;
}

and

div.oxTabControl td.oxTab:hover, div.oxTabControl td.oxTabLast:hover {
 background-color: #555;
}

You also might change the hover effect of the panel bar to fit the new colors:

div.oxTabControl td.oxTab:hover, div.oxTabControl td.oxTabLast:hover {
 background-color: #ccc;
}

Icons

Since version 8.18.2 the Open-Xchange GUI comes with a new icon set. The old icons where a common 16x16 pixel GIF file. The new set comes in three different sizes, 16x16 pixel, 24x24 pixel and 34x34 pixel. Right now, only the 16x16 and 24x24 pixel icons are used. However, some of the new icons still exists as a old GIF file. If you take a closer look at the folder structure, you will see that all the new icons can be found at:

/themes/[YOUR_THEME_NAME]/icons/

The old icons can be found in the folder

/themes/[YOUR_THEME_NAME]/img/

With the help of Firebug you can easily get the correct path for the icon you want to change. For this example, we changed the top navigation icons for the Open-Xchange modules like mail, calendar, contacts aso.

In the following screenshot, you can see the results after all changes we made so far which includes some new icons, a modified background and shadows and some new bars and panels.

Background

Branding, get your logo into the frontend

The new version 6.18.2 comes without a branding icon or logo in the upper area like in version 6.18.1 and earlier versions. To get a logo back into the top area just follow this small tutorial.

1. Go to your theme folder e.g. themes/${name}/css/

2. Expand the file "concat.cssz" using gzip: "gzip -d -S .cssz concat.cssz"

3. Open the file "concat" using a text editor (e.g. vim concat)

4. Search for the tag '#branding'.
 Please note: Further details how-to enable the logo or how to change
 the height of the logo area, can be found in the comments.

5. After editing the file, save your work and compress it again:
 "gzip -S .cssz concat" 

To test your modifications, clear your browser cache and hit the reload button of your browser.

Please note:
You will have to re-apply these changes on each update you install.

Branding, customize the headline area

If you enabled the area with your logo on top of the page you may want to add additional html components like own buttons, links or additional images. This short how-to gives you an small example to add some text links and an additional image to this section.

First create a new UI plugin like described in the article Gui_Plugin_Development. Open the register.js of your plugin and add this example code:

//selects the branding div and append additional html elements using jQuery
jQuery("#branding").append(

jQuery("

").css({ position: "absolute", right: "10px", lineHeight: "35px" }).append( jQuery("

").css({ float: "right", color: "#449ccf", cursor: "pointer" }).text("Legal").click(function() { alert("Clicked on Legal") })

      ).append(

jQuery("

").css({ float: "right", width: "30px", color: "#999999", textAlign: "center" }).text("|")

      ).append(

jQuery("

").css({ float: "right", color: "#449ccf", cursor: "pointer" }).text("FAQs").click(function() { alert("Clicked on FAQs") })

      ).append(

jQuery("

").css({ float: "right", width: "30px", color: "#999999", textAlign: "center" }).text("|")

      ).append(

jQuery("

").css({ float: "right", color: "#449ccf", cursor: "pointer" }).text("Contact").click(function() { alert("Clicked on Contact") })

      )
).append(

jQuery("

").css({ position: "absolute", height: "35px", width: "221px", left: "50%", marginLeft: "-110px", background: "url(" + ox.gui.themePath + "img/brand_middle.png)" })

);

Example how it looks like

As you can see you can use either use jQuery or the 'normal' document way to add DOM elements. Everything you need is some HTML and JavaScript knowlege.

The Login Page

The very first page you see, called login page, contains only the logo, username and password fields and minor information about the current version. This page is part of the default theme which comes with the Open-Xchange groupware. If you want to customize this page, all changes will also be visible in the default theme for all other elements. This means, the default theme will always look like your login page. If you don't want to touch the default theme, a good way to handle this is to rename your default theme to something else, like ox_theme or old_theme and rename your new created theme to default.

In the previous section Setup description we explained how to set up a new theme which was called mantis. When you change the default theme to something else just open the themes.properties file and change the entries there:

modules/themes/default=Cool Water (Default)
modules/themes/mantis=Mantis

Change this file to something like this:

modules/themes/default=Mantis
modules/themes/old_ox=Cool Water

Don't forget to change the folder names of your themes in your theme folder to the new names.

rename /var/www/ox6/themes/default to /var/www/ox6/themes/old_ox
rename /var/www/ox6/themes/mantis to /var/www/ox6/themes/default

You can choose any name here. Important is the correct name in your themes.properties file which must be the same like the folder names. Otherwise, the client is not able to find them in your GUI folder.

The final changes are quite simple. The upper logo bar is one big image which can be replaced with any other image. The shadows to the left, right and bottom are images, too. Open your bgimages.css CSS file and search for cpbody-l, cpbody-r, cpbottom-l, cpbottom-r (the left and right shadows), cpbottom-b (the bottom shadow) and the two corners to the bottom left and right cpbottom-bl and cpbottom-br. If you remove the background-image in all of these classes, you will see a quick change.

The overall background-color can be set in the global.css and effects the whole theme, too.

body {
 background-color: #f1f1f1;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 9pt;
 color:#000;
}

Version 6.18.0 and lower

Style

Open the Open-Xchange CSS files for this changes.

The Portal Page

The Portal Page

1. <body> .background-color
2. cpbottom-color
3. font-color-disabled
4. font-style-headline
5. background-color-additional-content
6. border-background-default
7. font-color-default
8. font-style-lable
9. font-color-header
10. cpheader-color
11. font-style-headline
12. border-color-design
13. background-color-content
14. font-color-header
15. topHeaderBG

The Calendar Page

The Calendar Page

1. font-color-disabled
2. wholeDayBackground
3. background-color-PMG-selection-elements
4. offTimeBackground
5. strokeCalendar
6. sectionStrokeCalendar
7. border-color-image
8. font-style-big-headline
9. kwSeperationBackGround
10. workTimeBackground

Calendar Month View

Calendar Month View

1. wholeDayBackground
2. appointmentTEMPORARY
3. appointmentRESERVED
4. appointmentABSENT
5. appointmentFREE
6. workTimeBackground
7. offTimeBackground

New Appointment

New Appointment

1. background-color-additional-content
2. font-color-disabled
3. border-color-design
4. border-color-content-default
5. background-color-content
6. font-style-lable
7. background-color-default

New Appointment Series

New Appointment Series

1. popupHeaderBackground
2. popup-header
3. greywrapper
4. background-color-additional-content
5. border-color-design
6. popupBackground

Calendar Week View

Calendar Week View

1. border-color-design
2. font-style-low

Mail View

Mail View

1. selected
2. tr
3. font-style-big-headline
4. font-style-lable
5. border-color-design
6. defaultContainer

Setup description

After you have created and modified your theme, you should make those theme available in the configuration interface for users of the Open-Xchange Server. To do that, you only have to manifest your theme in the following server configuration file, afterwards your users can select your theme:

/opt/open-xchange/etc/groupware/settings/themes.properties

Each key in this property file must be prefixed with the theme bundle identifier. This is "com.openexchange.themes". The prefix must be followed with the unique identifier of a theme. This unique identifier specifies the directory name of the theme on the web server (/var/www/ox6/themes/ per default), too. The value of the property can be any name to described the theme. This name will be displayed in the AJAX GUI for selecting a theme. For example you should add the following line to this configuration file:

com.openexchange.themes.[YOUR_THEME_NAME]=[YOUR_THEME_DESCRIPTION]

Afterwards, restart the Open-Xchange service groupware. Your users can now select your theme.

End user view

After you have created and configured your theme, your users will be able to select it in the configuration frontend:

Icon Description

Icon	Name	Description
ARROWS
	arrow_darkgrey_left.gif	To change month, day, etc.
	arrow_darkgrey_right.gif	To change month, day, etc.
	arrow_double_gray_down.gif	All Modules; Panel; To open the Panel (right side)
	arrow_double_gray_up.gif	All Modules; Panel; To close the Panel (right side)
	arrow_double_gray_left.gif
	arrow_double_gray_right.gif
	arrow_double_white_left.gif
	arrow_gray_down.gif	Alle Modules; Panel; To open a Panel-Section
	arrow_gray_right.gif
	arrow-down.gif
	sort_down.gif	All Modules; Views; To sort the entries
	sort_up.gif	All Modules; Views; To sort the entries
CALENDAR
	btnnew_calendar.gif	Calendar-Module; Panel; To create a new appointment
	calendar.gif	Sidebar; Foldertree; To mark calendar folder
	calendar_series.gif	Calendar-Module; Appointments; To mark series
	calendar16x16.gif	Calendar-Module; Appointments; To mark appointments
	datepicker.gif	Calendar-Module; New Appointment-Dialog; To open a minicalendar
	group.gif	Calendar-Module; Appointments; To mark group-appointments
	mod_calendar_d.gif	Sidebar; Module-Overview; Calendar-Module is disabled
	mod_calendar_sel.gif	Sidebar; Module-Overview; To jump into the calendar (Selected)
	mod_calendar.gif	Sidebar; Module-Overview; To jump into the calendar
	ressourcen.gif	Calendar-Module, Task-Module, E-Mail Module; Address book; To mark ressources
	user_d.gif	Calendar-Module, Task-Module, Address book; To mark contact without E-Mail address
	user_extern.gif	Calendar-Module, Task-Module, E-Mail Module; Address book; To mark none system user
	user.gif	Calendar-Module, Task-Module, E-Mail Module; Address book; To mark system user
	mod_calendar-1_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-1.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-2_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-2.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-3_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-3.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-4_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-4.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-5_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-5.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-6_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-6.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-7_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-7.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-8_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-8.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-9_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-9.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-10_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-10.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-11_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-11.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-12_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-12.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-13_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-13.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-14_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-14.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-15_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-15.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-16_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-16.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-17_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-17.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-18_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-18.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-19_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-19.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-20_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-20.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-21_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-21.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-22_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-22.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-23_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-23.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-24_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-24.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-25_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-25.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-26_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-26.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-27_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-27.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-28_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-28.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-29_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-29.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-30_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-30.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
	mod_calendar-31_sel.gif	Sidebar; Module-Overview; Calendar-Module icon with current date (Selected)
	mod_calendar-31.gif	Sidebar; Module-Overview; Calendar-Module icon with current date
CONFIGURATION
	configuration.gif
	mod_configuration_d.gif	Sidebar; Module-Overview; Configuration is disabled
	mod_configuration_sel.gif	Sidebar; Module-Overview; Configuration (Selected)
	mod_configuration.gif	Sidebar; Module-Overview; Configuration
CONTACTS
	btnnew_contacts.gif	Contact-Module; Panel; To create a new contact
	contacts.gif	Contact-Module; Contacts; To mark contacts
	distributionlist34x34_n.gif	Distributionlist; Panel; To create a new distributionlist
	dummypicture_add.gif	Contact-Module; New contact dialog/Detail view; To upload a new contact picture
	dummypicture_small.gif	Contact-Module; New contact dialog/Detail view; To upload a new contact picture (Small)
	dummypicture.gif	Contact-Module; New contact dialog/Detail view; To upload a new contact picture
	mod_contacts_d.gif	Sidebar; Module-Overview; Contact is disabled
	mod_contacts_sel.gif	Sidebar; Module-Overview; Contact is selected
	mod_contacts.gif	Sidebar; Module-Overview; Contact
FOLDER
	calendar_dis.gif	Foldertree; Calendar-Folder; Disabled; No permissions
	calendar.gif	Foldertree; Calendar-Folder
	contacts_dis.gif	Foldertree; Contact-Folder; Disabled; No permissions
	contacts.gif	Foldertree; Contact-Folder;
	cutfolder_d.gif	Foldertree; RMB-Menue; Cut Folder; Disabled, No permissions
	cutfolder.gif	Foldertree; RMB-Menue; Cut Folder;
	document_locked.gif	InfoStore; Views; Document is locked
	document.gif	InfoStore; Views; Document
	draft_dis.gif	Foldertree; E-Mail; Draftsfolder; Disabled
	draft.gif	Foldertree; E-Mail; Draftsfolder;
	empty_folder_d.gif	Foldertree; RMB-Menue; Empty Folder; Disabled, No permissions
	empty_folder.gif	Foldertree; RMB-Menue; Empty Folder;
	facebook.png
	folder_closed_dis.gif	Foldertree; Folder-Icon; Closed; Disabled; No Permissions
	folder_closed.gif	Foldertree; Folder-Icon; Closed;
	folder_opened_dis.gif	Foldertree; Folder-Icon; Open; Disabled; No Permissions
	folder_opened.gif	Foldertree; Folder-Icon; Open;
	garbage_dis.gif	Foldertree; E-Mail; Trashfolder; Disabled
	garbage.gif	Foldertree; E-Mail; Trashfolder;
	globalsettings_dis.gif	Configuration; Options; Language & Region; Disabled
	ham_dis.gif	Foldertree; E-Mail; Ham; Disabled
	ham.gif	Foldertree; E-Mail; Ham;
	inbox_dis.gif	Foldertree; E-Mail; Inbox; Disabled
	inbox.gif	Foldertree; E-Mail; Inbox;
	infostore_dis.gif	Foldertree; InfoStore; Disabled
	infostore.gif	Foldertree; InfoStore;
	mail_dis.gif	Foldertree; E-Mail; Root-Folder; Disabled
	mail.gif	Foldertree; E-Mail; Root-Folder;
	messaging_dis.gif
	messaging.gif
	mod_foldertree.gif
	myinfostore_dis.gif	Foldertree; InfoStore; Myinfostore Folder; Disabled
	myinfostore.gif	Foldertree; InfoStore; Myinfostore Folder;
	newfolder_d.gif	Foldertree; RMB-Menue; New Folder; Disabled, No permissions
	newfolder.gif	Foldertree; RMB-Menue; New Folder;
	outbox_dis.gif	Foldertree; E-Mail; Sent-Mail Folder; Disabled
	outbox.gif	Foldertree; E-Mail; Sent-Mail Folder;
	pastefolder_d.gif	Foldertree; RMB-Menue; Paste Folder; Disabled, No permissions
	pastefolder.gif	Foldertree; RMB-Menue; Paste Folder;
	propertiesfolder_d.gif	Foldertree; RMB-Menue; Properties; Disabled, No permissions
	propertiesfolder.gif	Foldertree; RMB-Menue; Properties;
	public_dis.gif	Foldertree; Public Folder; Disabled
	public.gif	Foldertree; Public Folder;
	renamefolder_d.gif	Foldertree; RMB-Menue; Rename Folder; Disabled, No permissions
	renamefolder.gif	Foldertree; RMB-Menue; Rename Folder;
	settings_folder_closed.gif	Configuration; Foldertree; Disabled
	settings_folder_open.gif	Configuration; Foldertree;
	settings.gif	Configuration; All pages and Headlines
	shared.gif	Foldertree; Shared Folder
	spam_dis.gif	Foldertree; E-Mail; Spam; Disabled
	spam.gif	Foldertree; E-Mail; Spam;
	tasks_dis.gif	Foldertree; Task; Root-Folder; Disabled
	tasks.gif	Foldertree; Task; Root-Folder;
	twitter.png
	user_dis.gif	Foldertree; UserStore; Disabled
	user.gif	Foldertree; UserStore;
HOVER
	email_kl.gif	E-Mail; Hover; Displaying of E-Mails at the Hover
INFOSTORE
	btnnew_infostore.gif	InfoStore-Module; Panel; To create a new InfoStore-Object
	infostore_save_d.gif	E-Mail; Panel or RMB; Save Attachment into the InfoStore; Disabled
	infostore_save.gif	E-Mail; Panel or RMB; Save Attachment into the InfoStore;
	infostore.gif	Foldertree; InfoStore;
	mod_infostore_d.gif	Sidebar; Module-Overview; InfoStore is disabled
	mod_infostore_sel.gif	Sidebar; Module-Overview; InfoStore is selected
	mod_infostore.gif	Sidebar; Module-Overview; InfoStore
	binary.png	InfoStore; Hover + Views; Mimetypes of Documents
	ical.gif
	empty.png	InfoStore; Hover + Views; Mimetypes of Documents
	image.png	InfoStore; Hover + Views; Mimetypes of Documents
	java_jar.png	InfoStore; Hover + Views; Mimetypes of Documents
	log.png	InfoStore; Hover + Views; Mimetypes of Documents
	ooo_calc.png	InfoStore; Hover + Views; Mimetypes of Documents
	ooo_draw.png	InfoStore; Hover + Views; Mimetypes of Documents
	ooo_writer.png	InfoStore; Hover + Views; Mimetypes of Documents
	pdf.png	InfoStore; Hover + Views; Mimetypes of Documents
	postscript.png	InfoStore; Hover + Views; Mimetypes of Documents
	tar.png	InfoStore; Hover + Views; Mimetypes of Documents
	tgz.png	InfoStore; Hover + Views; Mimetypes of Documents
	txt.png	InfoStore; Hover + Views; Mimetypes of Documents
	vcard.gif
	video.png	InfoStore; Hover + Views; Mimetypes of Documents
MAIL
	mod_mail_d.gif	Sidebar; Module-Overview; E-Mail is disabled
	mark_as.gif	E-Mail; Panel-Function; Mark Mail as
	mark_as_d.gif	E-Mail; Panel-Function; Mark Mail as, Disabled
	mail.gif	Foldertree; E-Mail; Root-Folder;
	image_blocked.gif	E-Mail; Detail view of E-Mails; Blocked image for E-Mails with pictures
	forward.gif	E-Mail; Panel-Function + RMB; Forward
	forward_d.gif	E-Mail; Panel-Function + RMB; Forward, Disabled
	email_priolow.gif	E-Mail; New E-Mail Dialog + E-Mail Views; Priorisation
	email_priolhigh.gif	E-Mail; New E-Mail Dialog + E-Mail Views; Priorisation
	email_priohigh.gif	E-Mail; New E-Mail Dialog + E-Mail Views; Priorisation
	deleted.gif	E-Mail; Panel-Function + RMB; Delete E-Mail
	mod_mail_sel.gif	Sidebar; Module-Overview; E-Mail is selected
	mod_mail.gif	Sidebar; Module-Overview; E-Mail
	noattachment.gif
	open_ISattachment_d.gif	E-Mail; Panel-Function + RMB; Open Attachment; Disabled
	open_ISattachment.gif	E-Mail; Panel-Function + RMB; Open Attachment;
	add_attachment_d.gif	E-Mail; Panel-Function; Add an Attachment; Disabled
	add_attachment.gif	E-Mail; Panel-Function; Add an Attachment;
	attachment.gif	E-Mail; Views; Attachment
	btn_sendmail.gif	E-Mail; New E-Mail dialog; Panel; Send the E-Mail
	btnnew_email.gif	E-Mail; Panel; New E-Mail
	read.gif	E-Mail; Views; E-Mail is read
	remove_attachment_d.gif	E-Mail; Panel-Function + RMB; Delete an Attachment; Disabled
	remove_attachment.gif	E-Mail; Panel-Function + RMB; Delete an Attachment;
	reply_all_d.gif	E-Mail; Panel-Function + RMB + Views; Reply all; Disabled
	reply_all.gif	E-Mail; Panel-Function + RMB + Views; Reply all;
	reply_d.gif	E-Mail; Panel-Function + RMB + Views; Reply; Disabled
	reply_forward.gif	E-Mail; Views; Replyed and Forwarded
	reply.gif	E-Mail; Panel-Function + RMB + Views; Reply
	spam_d.gif	E-Mail; Panel-Function + RMB; Mark as Spam; Disabled
	spam.gif	E-Mail; Panel-Function + RMB; Mark as Spam;
	unread.gif	E-Mail; Views; Unread
	write_mail_d.gif	E-Mail; New E-Mail Dialog; Save as Draft, Disabled
	write_mail.gif	E-Mail; New E-Mail Dialog; Save as Draft,
MENU
	add_appointment_d.gif	Contact; New Contact Dialog; Add a birthday appointment; Disabled
	add_appointment.gif	Contact; New Contact Dialog; Add a birthday appointment;
	add_category_d.gif	Configuration; Tags; Panel; Add Category; Disabled
	add_category.gif	Configuration; Tags; Panel; Add Category;
	add_extview_d.gif	Configuration; Startpage; UWA-Widgets; Panel; Add Widget; Disabled
	add_extview.gif	Configuration; Startpage; UWA-Widgets; Panel; Add Widget;
	add_member_participant_d.gif	Calendar; New Appointment Dialog; Participant Tabulator; Panel; Add new participant; Disabled
	add_member_participant.gif	Calendar; New Appointment Dialog; Participant Tabulator; Panel; Add new participant;
	add_picture_d.gif	Contact; New Contact Dialog; Panel; Add new picture; Disabled
	add_picture.gif	Contact; New Contact Dialog; Panel; Add new picture;
	add_signature_d.gif	Configuration; E-Mail; Signatures; Panel; Add new Signature; Disabled
	add_signature.gif	Configuration; E-Mail; Signatures; Panel; Add new Signature;
	adress1_d.gif	Contact, Views; Route; Disabled
	adress1_n.gif	Contact, Views; Route;
	alsanlagesenden_d.gif	InfoStore; Panel; Send as Attachment; Disabled
	alsanlagesenden.gif	InfoStore; Panel; Send as Attachment;
	attachment_open_d.gif	All Modules; Panel + RMB; Open Attachment; Disabled
	attachment_open.gif	All Modules; Panel + RMB; Open Attachment;
	attachment_save_d.gif	All Modules; Panel + RMB; Save Attachment; Disabled
	attachment_save.gif	All Modules; Panel + RMB; Save Attachment;
	btn_save.gif	Configuration; Panel; Save changes
	calendar_move_d.gif	Calendar; Panel; Move selected appointment; Disabled
	calendar_move.gif	Calendar; Panel; Move selected appointment;
	cancel_clear_d.gif	All Modules; Panel; Search; Clear entries; Disabled
	cancel_clear.gif	All Modules; Panel; Search; Clear entries;
	close_linking.gif
	contact_copy_d.gif	Contact; Panel; Copy selected Contact; Disabled
	contact_copy.gif	Contact; Panel; Copy selected Contact;
	contact_move_d.gif	Contact; Panel; Move selected Contact; Disabled
	contact_move.gif	Contact; Panel; Move selected Contact;
	copy_mail_d.gif	E-Mail; Panel; Copy selected Mail; Disabled
	copy_mail.gif	E-Mail; Panel; Copy selected Mail;
	delete_d.gif	All Modules; Panel; Delete; Disabled
	delete_folder_d.gif	Foldertree; RMB-Menue; Delete Folder; Disabled, No permissions
	delete_folder.gif	Foldertree; RMB-Menue; Delete Folder;
	delete.gif	All Modules; Panel; Delete;
	distributionlist_d.gif
	distributionlist_extcont_d.gif	Distributionlist; Create new List; Panel; Add external Contact; Disabled
	distributionlist_extcontact_d.gif
	distributionlist_extcontact.gif	Distributionlist; Create new List; Panel; Add external Contact;
	distributionlist_intcont_d.gif	Distributionlist; Create new List; Panel; Add internal Contact; Disabled
	distributionlist_intcontact.gif	Distributionlist; Create new List; Panel; Add internal Contact;
	distributionlist_remove_d.gif	Distributionlist; Create new List; Panel; Remove Contact; Disabled
	distributionlist_remove.gif	Distributionlist; Create new List; Panel; Remove Contact;
	distributionlist.gif	Distributionlist; Create new Icon + Views
	duplicate_contacts_d.gif	Contact; Panel; Duplicate selected Contact; Disabled
	duplicate_contacts.gif	Contact; Panel; Duplicate selected Contact;
	edit_d.gif	All Modules; Panel; Edit selected Object; Disabled
	edit_draft_d.gif
	edit_draft.gif	E-Mail; Drafts-Folder; Edit selected Draft Mail
	edit.gif	Configuration; E-Mail; Signatures; Edit selected Signature
	entsperren_d.gif	InfoStore; Panel + RMB; Unlock Object; Disabled
	entsperren.gif	InfoStore; Panel + RMB; Unlock Object;
	externalview_activate_d.gif	Configuration; Startpage; UWA-Module; Panel; Activate UWA; Disabled
	externalview_activate_n.gif	Configuration; Startpage; UWA-Module; Panel; Activate UWA;
	externalview_deactivate_d.gif	Configuration; Startpage; UWA-Module; Panel; Deactivate UWA; Disabled
	externalview_deactivate_n.gif	Configuration; Startpage; UWA-Module; Panel; Deactivate UWA;
	externalview_edit_d.gif	Configuration; Startpage; UWA-Module; Panel; Edit UWA; Disabled
	externalview_edit_n.gif	Configuration; Startpage; UWA-Module; Panel; Edit UWA;
	global_conf_change_d.gif	Calendar + Task; Panel + RMB + Hover; Change confirmation status; Disabled
	global_confirmation_change_d.gif
	global_confirmation_change.gif	Calendar + Task; Panel + RMB + Hover; Change confirmation status;
	ham_d.gif
	ham.gif
	img_import.gif	Configuration; Import; Panel; Import function
	infostorecurrentversion_d.gif
	infostorecurrentversion.gif
	mail_move_d.gif	E-Mail; Panel; Move selected Mail; Disabled
	mail_move.gif	E-Mail; Panel; Move selected Mail;
	move_folder_d.gif	Foldertree; RMB-Menue; Move Folder; Disabled, No permissions
	move_folder.gif	Foldertree; RMB-Menue; Move Folder;
	move_infostoreobject_d.gif	InfoStore; Panel; Move selected Object; Disabled
	move_infostoreobject.gif	InfoStore; Panel; Move selected Object;
	print_d.gif	All Modules; Panel; Print selected Object; Disabled
	print.gif	All Modules; Panel; Print selected Object;
	remove_category_d.gif	Configuration; Tags; Panel; Remove Tag; Disabled
	remove_category.gif	Configuration; Tags; Panel; Remove Tag;
	remove_extview_d.gif	Configuration; Startpage; UWA-Module; Panel; Remove UWA; Disabled
	remove_extview.gif	Configuration; Startpage; UWA-Module; Panel; Remove UWA;
	remove_picture_d.gif	Contact; Views; Panel; Remove contact picture; Disabled
	remove_picture.gif	Contact; Views; Panel; Remove contact picture;
	remove_signature_d.gif	Configuration; E-Mail; Signature; Panel; Remove Signature; Disabled
	remove_signature.gif	Configuration; E-Mail; Signature; Panel; Remove Signature;
	remove_tag_d.gif	All Modules; Panel; Flag; Remove Flag; Disabled
	remove_tag.gif	All Modules; Panel; Flag; Remove Flag;
	remove_teammember_d.gif	Configuration; Calendar; Teams; Panel; Remove Teammember; Disabled
	remove_teammember.gif	Configuration; Calendar; Teams; Panel; Remove Teammember;
	remove_userrights_d.gif	Foldertree; RMB; Properties; Rights-Tabulator; Panel; Remove User; Disabled
	remove_userrights.gif	Foldertree; RMB; Properties; Rights-Tabulator; Panel; Remove User;
	save_as_link_d.gif
	save_as_link.gif
	search-rightpadding_d.gif
	search-rightpadding.gif	All Modules; Panel; Search Section; Start Search
	section_scroll_left_d.gif
	section_scroll_left_dis.gif
	section_scroll_left.gif
	section_scroll_right_d.gif
	section_scroll_right_dis.gif
	section_scroll_right.gif
	sperren_d.gif	InfoStore; Panel + RMB; Lock Object; Disabled
	sperren.gif	InfoStore; Panel + RMB; Lock Object;
	tag_0.gif	All Modules; Panel + Views; Flag-Section;
	tag_1.gif	All Modules; Panel + Views; Flag-Section;
	tag_2.gif	All Modules; Panel + Views; Flag-Section;
	tag_3.gif	All Modules; Panel + Views; Flag-Section;
	tag_4.gif	All Modules; Panel + Views; Flag-Section;
	tag_5.gif	All Modules; Panel + Views; Flag-Section;
	tag_6.gif	All Modules; Panel + Views; Flag-Section;
	tag_7.gif	All Modules; Panel + Views; Flag-Section;
	tag_8.gif	All Modules; Panel + Views; Flag-Section;
	tag_9.gif	All Modules; Panel + Views; Flag-Section;
	tag_10.gif	All Modules; Panel + Views; Flag-Section;
	tag_d.gif	All Modules; Panel + Views; Flag-Section; Disabled
	task_copy_d.gif	Task; Panel + RMB; Use as Template; Disabled
	task_copy.gif	Task; Panel + RMB; Use as Template;
	task_move_d.gif	Task; Panel; Move; Disabled
	task_move.gif	Task; Panel; Move;
	teamchange_d.gif	Calendar; Panel; Team view; Choos Team; Disabled
	teamchange.gif	Calendar; Panel; Team view; Choos Team;
	userrights_d.gif	Foldertree; RMB; Properties; Rights-Tabulator; Panel; Disabled
	userrights.gif	Foldertree; RMB; Properties; Rights-Tabulator; Panel;
	view_emailsource_d.gif	E-Mail; Panel + RMB; View E-Mail Source, Disabled
	view_emailsource.gif	E-Mail; Panel + RMB; View E-Mail Source,
	weiterzuListe.gif	Calendar; All Views; Jump to the list view
PORTAL
	big_portal.png
	btn_close.gif	Portal; Widgets; Close Widgets
	mod_portal_d.gif	Sidebar; Module-Overview; Portal is disabled
	mod_portal_sel.gif	Sidebar; Module-Overview; Portal is selected
	mod_portal.gif	Sidebar; Module-Overview; Portal is
	move_n.gif
SMILIES
	big_smile.gif	E-Mail; Smilies
	cool.gif	E-Mail; Smilies
	hmm.gif	E-Mail; Smilies
	neutral.gif	E-Mail; Smilies
	sad.gif	E-Mail; Smilies
	smile.gif	E-Mail; Smilies
	wink.gif	E-Mail; Smilies
TABS
	free_busy_icon.gif	Calendar; New Appointment; Tab Free/Busy
	history_n.gif
TASKS
	btnnew_task.gif	Task; Panel; New Task
	mod_tasks_d.gif	Sidebar; Module-Overview; Tasks is disabled
	mod_tasks_sel.gif	Sidebar; Module-Overview; Tasks is selected
	mod_tasks.gif	Sidebar; Module-Overview; Tasks
	sequence.gif	Task-Module; Task; To mark series
	taskprio1.gif	Task; New Task; Priorization
	taskprio2.gif	Task; New Task; Priorization
	taskprio3.gif	Task; New Task; Priorization
	tasks.gif	Task-Module; Task; To mark tasks
	tasks16x16.gif	Foldertree; Task
TOOLBAR
	calnder.png	Sidebar; Minicalendar; To jump in the monthview
	configuration.gif	Toolbar; Configuration (NEW)
	help.gif	Toolbar; Help (NEW)
	ox_animated.gif
	ox_logo.gif
	smallwait.gif
	tb_loading.gif	Toolbar; Reload (NEW)
FURTHER ICONS
	bg_disabled.gif
	browsercheck.gif
	dnd_disabled.gif	All Modules; Drag&Drop of Objects isn’t possible
	dnd.gif	All Modules; Drag&Drop of Objects is possible
	grip_bg_horizontal.gif
	grip_bg_vertical.gif
	minus.gif	Foldertree; To close the subfolders
	new_na.png
	new.png	Configuration; Panel; Create new Setting (Mailfilter)
	noplus.gif
	ox_animated_black.gif
	ox_animated_default.gif
	ox_animated_white.gif
	ox_animated_withoutbg.gif
	pg_bg.png
	pg_green.png
	pg_orange.png
	pg_red.png
	plus.gif	Foldertree; To open the subfolders
	private_flag.gif	All Modules; New Dialogs; Set Objects to private
	quota.png
	split_bg_h.gif
	split_bg_v.gif
	split_grip_h.gif
	split_grip_v.gif
	x.png	Confirmation Dialogs; Close this dialogs
ICONS 16x16
	attachment_add.png	Add Attachments
	attachment_open.png	Open Attachments
	attachment_remove.png	Remove Attachments
	calendar_dis.png	Disabled calendar folder icon
	calendar_move.png	Move appointments icon
	calendar.png	A calendar folder icon
	confirmation_change.png	Change confirmation of an appointment
	contact_copy.png	Copy of a contact
	contact_move.png	Move a contact
	contacts_dis.png	Disabled contact folder icon
	contacts.png	Folder icon for contact folder
	current_version.png	Open current version of this infostore document
	delete_folder.png	Delete a folder
	delete.png	Delete icon (sometimes used as close window)
	distributionlist_extcontact.png	Add external contact or email to a distributionlist
	draft_dis.png	Disabled draft folder icon
	draft.png	Draft folder icon
	dummy.gif	A empty icon, sometimes used as placeholder
	duplicate_contacts.png	Duplicate a contact
	facebook.png	The facebook folder icon
	folder_closed_dis.png	Disabled version of a closed folder icon
	folder_closed.png	A closed folder icon
	folder_opened_dis.png	Disabled version of a opened folder icon
	folder_opened.png	A opened folder icon
	forward.png	Forward a mail
	garbage_dis.png	Disabled garbage folder icon
	garbage.png	Garbage folder icon
	ham_dis.png	Disabled ham (opposite to spam) folder icon
	ham.png	A ham folder icon
	inbox_dis.png	Disabled mail Inbox folder icon
	inbox.png	Mail Inbox folder icon
	infostore_dis.png	Disabled Infostore folder icon
	infostore_move.png	Move a infostore element icon
	infostore.png	A infostore folder icon
	lock.png	A closed lock icon (used to lock/unlock infostore items)
	mail_copy.png	Copy a mail
	mail_dis.png	Disabled mail folder icon
	mail_move.png	Move a mail
	mail.png	Mail folder icon
	mail_source.png	View mail sourcecode
	mark_as.png	Mark mail as read/unread
	member_add.png	Add a member to an appointment
	member_remove.png	Remove a member from an appointment
	mod_calendar.png	The calendar module icon
	mod_configuration.png	The configuration module icon
	mod_contacts.png	The contact module icon
	mod_infostore.png	The infostore module icon
	mod_mail.png	The mail module icon
	mod_portal.png	The portal module icon
	mod_tasks.png	The task module icon
	outbox_dis.png	Disabled outbox folder icon
	outbox.png	Outbox folder icon
	print.png	A print icon
	public_dis.png	Disabled public folder icon
	public.png	A public folder icon
	rss.png	RSS folder icon
	save.png	A save icon
	search.png	A search icon
	send_as_attachment.png	Send this infostore item as a mail attachment
	send_as_link.png	Send this infostore item as a link to the infostore
	shared_dis.png	Disabled shared folder icon
	shared_globe.png	A additional shared icon which will be overlaid on other folder icons if they are public or shared
	shared.png	A shared folder icon
	spam_dis.png	Disabled spam folder icon
	spam.png	A spam folder icon
	task_copy.png	Copy a task entry
	task_move.png	Move a task entry
	tasks_dis.png	Disabled task folder icon
	tasks.png	A task folder icon
	teamchange.png	Calendar teamview icon
	twitter.png	The twitter folder icon
	unlock.png	A unlock icon (used to lock/unlock infostore items)
	user_dis.png	Disabled user icon (used in appointments and contacts)
	user.png	A user icon
	userrights_delete.png	The delete rights of a folder
	userrights.png	Add a user to the rights of a folder
	userrights_read.png	The read rights of a folder
	userrights_remove.png	Remove a user from the rights of a folder
	userrights_write.png	The write/modify rights of a folder