OX6:Gui Theming Description: Difference between revisions

From Open-Xchange
 
(11 intermediate revisions by 6 users not shown)
Line 1: Line 1:
== Introduction ==
= Introduction =


Open-Xchange SP4 will support theming functionality, so that you will be able to create own themes and make them available in the configuration frontend of the Open-Xchange Webinterface. The stylesheet files have been modified with SP4, so that everything that should affect the theming functionality can now be configured within an own theme. Besides also the images can be replaced per theme.
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.


== Creating an Open-Xchange 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:
All themes will be stored in the following directory of the Open-Xchange Server:
Line 9: Line 19:
  /var/www/ox6/themes/
  /var/www/ox6/themes/


Per default you will have at least three themes in this directory: darkseagreen, default and ochre. The easiest way to start with your own theme is to copy the default theme with:
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]
  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:
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.22 and 6.20 =
No changes have been made since 6.18.2
 
= 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.
 
[[Image:Background_theming.png|thumb|150px|none|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.
 
[[Image:Screen_step1.png|thumb|150px|none|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|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("<div/>").css({ position: "absolute", right: "10px", lineHeight: "35px" }).append(
            jQuery("<div/>").css({ float: "right", color: "#449ccf", cursor: "pointer" }).text("Legal").click(function() { alert("Clicked on Legal") })
      ).append(
              jQuery("<div/>").css({ float: "right", width: "30px", color: "#999999", textAlign: "center" }).text("|")
      ).append(
              jQuery("<div/>").css({ float: "right", color: "#449ccf", cursor: "pointer" }).text("FAQs").click(function() { alert("Clicked on FAQs") })
      ).append(
              jQuery("<div/>").css({ float: "right", width: "30px", color: "#999999", textAlign: "center" }).text("|")
      ).append(
              jQuery("<div/>").css({ float: "right", color: "#449ccf", cursor: "pointer" }).text("Contact").click(function() { alert("Clicked on Contact") })
      )
).append(
      jQuery("<div/>").css({ position: "absolute", height: "35px", width: "221px", left: "50%", marginLeft: "-110px", background: "url(" + ox.gui.themePath + "img/brand_middle.png)" })
);
 
[[Image:Example_logo_headline.png|thumb|600px|none|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 ==
== Style ==


Open the Open-Xchange css files for this changes.
Open the Open-Xchange CSS files for this changes.


=== The Portal Page ===
=== The Portal Page ===
Line 129: Line 355:


[[Image:Theme_selection.png]]
[[Image:Theme_selection.png]]
[[Category: OX6]]
= Icon Description =
{| {{table}}
| align="center" style="background:#f0f0f0;"|'''Icon'''
| align="center" style="background:#f0f0f0;"|'''Name'''
| align="center" style="background:#f0f0f0;"|'''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;
|-
| ||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
|-
| ||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
|}

Latest revision as of 12:25, 27 November 2015

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.22 and 6.20

No changes have been made since 6.18.2

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:

Theme selection.png

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;
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
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
Retrieved from "https://wiki.open-xchange.com/wiki/index.php?title=OX6:Gui_Theming_Description&oldid=21037"