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 an own folder in the 'themes' directory of your installation. It contains two sub-folders:

 

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], TeamCal Pro will read the default.css file, then add all appropriate styles for holidays and absence and then create/overwrite a file named tcpro.css in the same directory. This file is the only one that TeamCal Pro reads to load the theme styles. 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 creates the theme style sheet.

Images

All images that TeamCal Pro uses reside in the 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 the 'tcpro' directory in the 'themes' folder giving it a new name. This name is 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.

 

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.

menu.css

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.

calendar.css

This file contains the styles of the calendar picker popup that is used on several pages in TeamCal Pro. 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. jsCalendar 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.

 

Now pull up the TeamCal Pro Configuration page, select your new theme and click [Apply]. You settings will be loaded instantly. Some browsers need a few page refreshes to load all styles correctly. 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 apply the configuration again to activate them.

TeamCal Pro Themes

TeamCal Pro comes with two themes, "tcpro", the classic design that everybody knows, and "deviant", a new design based on some darker colors presenting a more neutral impression.