# WebCalendar Styling HOWTO

NOTE: THIS DOCUMENTATION IS STILL UNDER CONSTRUCTION.

## Table of Contents

1. Introduction
2. Classes
3. Styling Order of Precedence
4. Styling for Individual Pages

## Introduction

WebCalendar offers an easy-to-use method for customizing colors via the Admin Panel. This document provides a more technical, in depth analysis of WebCalendar's styling system. Please note: The WebCalendar styling system is still under construction. We plan on continuing to enhance functionality, and available options in the future.

WebCalendar uses CSS to format its content. For an introduction to CSS, you may wish to read Starting with HTML + CSS, and/or Dave Raggett's Introduction to CSS. The technical specifications are available at the W3C:

- CSS 1
- CSS 2.1

## Classes

WebCalendar's style system is built to be flexible, standardized, and clear. Understanding how each of these components work in conjunction with one another, as well as individually is key to gaining the full benefit of the ability to customize the look & feel of your WebCalendar without having to modify any PHP, or HTML. The remainder of this document will provide you with the information necessary to fully understand each of these components, and how they work together.

### Structure

WebCalendar can be easily customized site-wide, or page-by-page. In other words, you can easily make every page in WebCalendar look similar to one another, or completely different from one another. WebCalendar achieves this effect by uniquely identifying each page.Each page in WebCalendar (obviously) has a filename. WebCalendar automatically takes each filename, removes any underscores (_), as well as the extension (.php), and assigns the resulting value as an ID attribute on that page's body tag. For example, the page "edit_entry.php" would have the following body tag: <body id="editentry">. If you don't want to customize individual pages, you can disregard this information.

WebCalendar has two basic types of calendars: full-sized calendars, and mini-calendars. Each of these types use a specific structure. Full-sized calendars are organized using the structure outlined below. The header of the page is a div with the "title" class (i.e. `<div class="title">`). Within that div, there are several spans each with its own class. These classes include:

- weeknumber
- view
- date

Also within this div are the left & right navigation arrows. The left arrow link has the "prev" class, and the right arrow link has the "next" class. Pages that have mini-calendars in place of the arrows use "prevmonth" and "nextmonth" with the ID attribute.

Structurally, the header of pages with a full-sized calendar will look similar to:

    <div class="title">
      <span class="weeknumber"></span>
      <span class="view"></span>
      <span class="date"></span>
    </div>

Example 1

Below the "title" div is a table with the "main" class. This is the full-size calendar itself. There are a variety of options available in styling the calendar. First, there are two types of cells in a table: tableheaders (`<th>` tags), and tablecells (`<td>` tags). WebCalendar distinguishes between column tableheaders & row tableheaders. Headers containing dates, or days of the week utilize the classes today, and weekend. To style tableheaders for Monday through Friday, while today is Days of the week that are not Saturday or Sunday, and that are also not today's date, can be styled by simply referring to the "th" tag itself. Alternatively, if you don't want to style tableheaders according to the weekend, or today colors, you can simply omit this style from the stylesheet. Row tableheaders (when they don't contain dates) are always styled using the class, "row".

Tablecells (td tags) within the "main" calendar table follow the same structure as tableheaders with dates, or days. Therefore, tablecells that fall on the weekend, will have the "weekend" class. If the cell is on today's date, but it's not on Saturday or Sunday, the cell will have the "today" class. If the cell is not on the weekend, nor today's date, it doesn't get a class (in this case, style these cells similar to how you styled tableheaders without a class). If the cell is both on the weekend, and on today's date, it has "weekend today" as the value for the class attribute. Below are some examples to help illustrate.

If you're customizing month.php & want tablecells (td tags) on today's date to have a red background, you would use:

    #month td.today {
      background-color: red;
    }

Example 2

Similarly, if customizing month.php & you want tablecells occurring on the weekend to have a thin black border with 10 pixels of padding on each side, you would use:

    #month td.weekend {
      border: 1px solid black;
      padding: 10px;
    }

Example 3

Clearly there will be times when tablecells will be both on the weekend, as well as on today's date. In such an instance, styles from each of the classes are combined. For example, if today is a Saturday, the HTML for that cell would be `<td class="weekend today">`. Using the classes from examples one & two above, this cell would have a red background, with a thin black border, and 10 pixels of padding on each side.

Now say the styles had looked like this:

    .today {
      background-color: red;
    }
    .weekend {
      border: 1px solid black;
      padding: 10px;
      background-color: blue;
    }
    .hasevents {
      font-weight: bold;
    }

Example 4

Note that both the `today` class and the `weekend` class have a `background-color` definition. So does our example `<td>` (which belongs to both the `today` and `weekend` classes) end up with a red background or a blue one? This conflict is decided by the Styling Order of Precedence.

## Styling Order of Precedence

When conflicts arise between styles (as in Example 4 above), the definition from the class with the highest precedence is chosen. The order of precedence is currently:

1. empty
2. weekend
3. hasevents
4. today

This says that styles defined for the `today` class will be chosen over styles for the `hasevents` class when there is a conflict, styles for the `hasevents` class will be chosen over styles for the `weekend` class, and so on. When `hasevents` is identical to normal table cell color, it will be ignored.
This is determined by the order the class is specified on the tag; last one takes precedence.
`<td class="weekend today">` will be red while
`<td class="today weekend">` would be blue.

## Styling for Individual Pages

There are two ways to customize the look of a single page in WebCalendar.

- Either prefix all selectors for that page with its `<body>`'s `id in` includes/css/styles.css. For example, to create styles that only apply to `month.php`, simply prefix all the selectors with `#month`, for `edit_entry.php`, prefix all the selectors with `#editentry`.
- Alternately, make a separate file for the page; such as about.css for the about.php page. Be sure to link to it in the appropriate <head>.