Stylizing the Template using CSS
Introduction
The various views for calendar event information (such as list, month, week, day, etc.) contain semantic markup "hooks" to allow a site administrator to customize nearly every facet of the view template.
It is recommended that a site's custom stylesheet be linked in via the header template of the site's brand, should the header template be specified.
This documentation assumes the reader has a comprehensive knowledge of CSS concepts and techniques, in particular, inheritance with cascading and Image Replacement. Please see the Recommended Reading for recommended guides on these concepts.
Some of the CSS class names used are overloaded across the various views. This is because elements exist that semantically repeat over the various views (i.e. one is going to have such things as months, weeks, days in many of the views).
To help disambiguate between different uses of the class, each view
template is enclosed by a <div id="sun-[type]View">,
where [type] can be month, week, day,
year, or miniMonth. With this container,
one may use the descendent selector with div#sun-[type]View as the
parent to unambiguously select an element for stylizing.
Example:
/* ambigous selector */
*.sun-day {
color: white;
}
/* clear and unambiguous */
div#sun-monthView *.sun-day {
color: white;
}
Available View Templates
- Month View
- Week View
- Weekday View - Please see Week View
- Day View
- Year View
- MiniMonth View
- Contextual Header