HowTos/Theming Kit

Prerequisites

On Debian-based systems, you must have dpkg installed. This is normally present.

On RPM-based systems, you must have the rpmbuild program present. This is normally not installed. It is probably in a package called rpm-build, which can be installed with the package maintenance program for your Linux distribution.

Installing the Software

The Theming Kit software is included in release 11.4.1 and more recent.

After upgrading your Scalix server, you will find the theming kit software in

<current version>/extras/swa/theming-kit/swa-theming-kit-<version>.tar.gz

For example: /root/scalix-11.4.1-U1-GA/extras/swa/theming-kit/swa-theming-kit-11.4.1-11592

gunzip and tar -xvf the file.

The swa-theming-kit-<version> contains the following directories:

README.txt - instructions on how to use the Theming kit. This article is largely based on the README.
package-theme.sh - used to build a new RPM or DEB from your theme files, to be installed on your SWA server.
src - this is where you will put the files for your new theme; it also contains sample files from the Scalix Default theme that you can use as a basis for building your new theme.
samples - contains the files for the Scalix Classic and Default themes.
packages directory contains files used to build your theme package (the .rpm or .deb file); these files should not be altered.

Creating a Theme

In the src directory, create a subdirectory with the name that you want your theme to have, for example, 'src/sunset'. Spaces are not allowed in the directory name.
Copy the contents of one of the sample directories in "samples/" into your

new directory. Alternatively, you can copy the files from src/scalix-sample into your new directory.

# cp -r samples/scalix-default/* src/sunset

or

# cp -r src/scalix-sample/* src/sunset

Edit the files but DO NOT CHANGE THEIR NAMES. These images are taken from the src/scalix-sample or the samples/scalix-classic directories (they are the same).

Building the Package

In the folder where the package-theme.sh script is installed, run package-theme.sh <theme>

./package-theme sunset

This will create a "deb" or "rpm" package in the current directory.

Checking the Package

RPMs:
rpm -qlp <package-file> - List all the files in the package

scalix-swa-theme-sunset-11.4.1-11592.noarch.rpm

rpm -ql --dump <package-file> - List verbose information about all the files in the package

rpm -ql --dump scalix-swa-theme-sunset-11.4.1-11592.noarch.rpm

DEBs:
dpkg -x <package-file> <path> - unpacks the data files as if the path named was "root" - does not execute any of the scripts, such as preinst, postinst - you can look at the files to see if they are in the right folders

mkdir out
dpkg -x scalix-theme-sunset-11.4.1-123_all.deb out

Installing the New Theme

Copy the package to the first Scalix SWA server where you wish to install it. The first server might be an SWA-only server that is used only for testing.
Install it. One way is to use the GUI-based package maintenance program for your Linux distribution. Look for documentation on installing packages that are on your hard drive and not in your repository.
Another way is to use the "rpm" or "dpkg" commands. These are documented with "man" or "info".

rpm -i  scalix-swa-theme-sunset-11.4.1-11592.noarch.rpm

Restart SWA on that server.

service scalix-tomcat restart

Test on that server to make sure that it behaves as you expect.
Repeat for all the Scalix servers that have SWA installed on them.

Activating the New Theme

The user must activate the new theme in their own profile. Perform the following steps:

If the user had an SWA client window open on their desktop while SWA was restarted on the server, close the window and log in again.
Click on the following:

- Tools
- Options

Select the "Themes" tab in the bar on the left.
From the drop down "Themes" list, select the new theme, i.e. 'sunset'.
Click "OK"
The user may need to close SWA and login again for the changes to take effect.

Files You can Modify

- <theme>/img/app
  - alarm.gif - displayed when there is a reminder set on an appointment or meeting
  - meeting.gif - used in calendar view to indicate a meeting rather than an appointment
  - meeting_organizer.gif - appears beside the organizer's name in the list of meeting attendees
  - meeting_resource.gif - displayed when an invitee is a resource
  - misc_icons.gif -
  - month_cal_overflow.gif -
  - optional_attendee.gif - appears beside optional attendees' names in the list of meeting attendees
  - private.gif - appears in calendar view to show an appointment or meeting is private
  - repeat.gif - appears in calendar view to show an appointment or meeting is recurring
  - repeat_ex.gif - used to indicate a recurring appointment or meeting for which one instance has been edited (recurring exception)
  - required_attendee.gif - appears beside required attendees' names in the list of meeting attendees
- <theme>/img/app/md5
  - calpop.gif - used when creating an appointment or meeting, or setting a contact's birthday or anniversary; when you want to pop-up a calendar from which to select a date
  - divider_d.gif - used to divide left hand panes from right hand panes (for example, mailbox list, upcoming events, date navigator from message list and preview)
  - freebusy_info_bg.gif - used when free/busy info is not available
  - folderIcons.gif - used beside list of folders to indicate inbox, outbox, drafts, calendar, etc.
  - hoveroverstick.gif
  - indicator.gif
  - labels.gif - used to label appointment or meeting (Important, Business, Personal, Vacation...)
  - logo.gif - used on login screen
  - menuBar_d.gif - the background behind the text menu and the logo
  - misc_icons.gif
  - modebar.gif - indicates whether you're looking at messages or calendars (bottom left corner)
  - modebar_bg.gif - background for mode bar
  - partner_logo.gif - logo in top right corner of SWA client
  - preferencesIcons.gif - used for the Tools->Options menu
  - search_relevance_off.gif - used in search results window to indicate relevance
  - search_relevance_on.gif - used in search results window to indicate relevance
  - tableIcons.gif - used in the list of messages to indicate new message, attachment, follow-up flag, meeting request accepted, non-delivery, etc.
  - toolbar.gif - icons used in the toolbar (context-senstitive horizontal icons, just below the menu)
  - toolbar_d.gif - icons used in the toolbar (context-senstitive horizontal icons, just below the menu)
  - tree_background.gif - used for the background of panes; use this to shade from white top to gray bottom, for example
- <theme>/css
  - calendar.css - controls calendar; uses tree_background.gif, labels.gif
  - fonts.css - fonts used with calendar
  - modebar.css - controls the area where you pick mail/calendar view; uses modebar.gif, modebar_bg.gif, and indicator.gif
  - tableview.css - ; uses folderIcons.gif
  - treeview.css - controls the folder list area; uses tree_background.gif, folderIcons.gif
  - colors.css - colors used in the other .css files
  - grid.css - ; uses folderIcons.gif
  - shpants.css - controls panes in SWA client; uses calpop.gif, folderIcons.gif, hoveroverstick.gif, misc_icons.gif, search_relevance_off.gif, search_relevance_on.gif, toolbar.gif, tree_background.gif
  - tabs.css
  - wnd_ComposeAppt.css - controls the appointment window; uses freebusy_info_bg.gif, calpop.gif, tableIcons.gif
  - dragdrop.css - controls drag-and-drop; uses folderIcons.gif
  - menu.css - controls menu (File, Edit, View...) and the context dependent icon menu below that in all windows; uses menuBar_d.gif, toolbar.gif, misc_icons.gif
  - slider.css - controls the slider
  - toolbar.css - controls the context dependent icon menus; uses toolbar_d.gif, toolbar.gif, labels.gif, misc_icons.gif