Close Window

Cascade Style Sheet

You can customize almost all display elements for webcalendar through Cascade Style Sheet. This form provides you a mechanism to define your own CSS classes or modify the defalt style sheets.

Create/Edit CSS classes

You need some knowledge of CSS to manipulate CSS classes. To create or edit CSS class, click on the Create/Edit default event font styles link. The CSS editor will popup. The CSS editor consists of sections as shown in the following diagram.

CSS Editor

Each CSS class consists of a class name (the lable field on the CSS editor) and a set of properties (the properties field on the editor). If you are an experienced CSS user, you can just enter the CSS properties, in the correct syntax, in the property field. For example, the following define a class that display text in red using a large italic arial font, underlined.

font-family:arial;
font-size:x-large;
font-weight:700;
text-decoration:underline;
font-style:italic;
color:red;

Make sure you include the trailing ";" for all your CSS statements!

If you're not a CSS guru, a CSS dialogue is also provided for your convenience. To access it, click on the Edit link on the CSS editor. The CSS dialogue looks like the following.

CSS Dialogue
The CSS dialogue only lets you change the few commonly used font properties, like face, weight and decoration. You'll need to learn about CSS to use the more advanced CSS properties.

The classes you create with the CSS editor are a toplevel classes unless it is associated with a HTML tag or just the A tag or one of the H tags. In other words, if you define a CSS class class_name, it will be presented as
.class_name { css_properties;}
in your calendar pages. However, if you define a class TD.class_name or A:hover, it will be presented as is in your calendar pages, possibly overriding the default class attributes. The general rule is that a class is treated as a toplevel CSS class if there is no . present in the class name. You can use this fact to override webcal's default CSS rules. Of course, this is practical only if you wish to alter a few default CSS classes. To achive an extensive make up, you should directly edit one of the default style sheets.


Set Default CSS Styles

Once you have created some CSS classess, you can assign a default style for each of the appointment, todo, meeting and special event types. Just as default colors, the default style will be used to fill in the font-style field on event editors for new events, and the class name is copied as an event attribute to the event database when new events are entered.

The actual CSS properties are not stored in the the event database, the style sheet are generated dynamically. As a result, modifying an exisiting CSS property will affect all exisiting events that uses the style in question.

CSS take procedence over default event colors!

If an event uses a CSS class that include color/background color definitions, then the CSS overrides the default event color on most modern browsers.

Close Window