Image: Theme setting on the Configuration page

TeamCal Pro supports themes. A theme is a collection of styles and images that makes TeamCal Pro look like it looks.

Each theme resides in its own folder in the 'themes' directory of your installation. It contains two sub-folders:

css
Contains the style sheet of the theme
img
Contains the images of the theme

Style Sheets

Each theme css folder contains a file named default.css. This file contains all standard styles of the application except for those that are defined by the settings of holidays and absence types. When you change the theme on the configuration page and click [Apply] or click [Rebuild style sheet], TeamCal Pro will read the default.css file, then all styles for holidays and absence types from the database. The complete style sheet is then inserted into the database and the HTML page pulls it from there inserting into the code directly. So remember, when you change the default.css file you will not see any change when you refresh your browser. You must apply the configuration page first so TeamCal Pro updates the database with your style changes. Note, that maybe a refresh of your browser's might be necessary depending on your browser's cache behavior.

Images

Nearly all images that TeamCal Pro uses reside in the theme's img directory in the corresponding theme folder. You may change the images but don't change their file names.

Creating an own theme

First, copy one of the theme directories - the one that comes closest to what you want to create - giving it a new name. Your new name will be listed in the drop down box on the configuration page. Let's say you call your theme "mytheme" then you would have a new directory called 'mytheme' in the themes folder. The configuration theme will list 'mytheme' in the drop down box of available themes.

In your directory you will find three style sheets:

default.css

This style sheet contains all basic styles of TeamCal Pro. It does not include the styles for holiday and absence types that you can change in TeamCal Pro itself. Those styles will be automatically added when you apply the configuration page. In this file here change all TeamCal Pro fonts and colors to your liking.

This file contains the styles of the menu. Changes to this file will instantly apply when you refresh. The configuration page does not read this file nor does it create any styles from it. jsCookMenu is a separate applet that I want to keep separate.

img

After that you may want to change certain images in the mytheme/img folder. Create your own images and overwrite the ones in the img directory using the same file name. Changes to the images will instantly apply upon refresh.

This directory contains the images used in the menu. Most of them will be same as the ones in the img folder, however, here you have the chance to change the menu icons independently from the other icons.

Now pull up the TeamCal Pro Configuration page, select your new theme and click [Apply]. You settings will be saved to the database. Refresh your browser. You might have to do that twice or so. What you might want to do after that is to adjust the individual styles of your Holiday types and Absence types so they match the design you have created.

If you make more changes to your default.css you must always apply the configuration again to activate them.

TeamCal Pro Themes

TeamCal Pro comes with three themes, "tcpro", the classic design that everybody knows, "deviant", a design based on some darker colors presenting a more neutral impression, and "metro" borrowing visuals from Windows 8.

Image: Theme "tcpro"

Image: Theme "deviant"

Image: Theme "metro"

Style Sheets

Images

Creating an own theme

default.css

menu.css

img

img/menu

TeamCal Pro Themes

Browser not supported