# 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

## Trinity

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.

If you want to customize the look of a single page in WebCalendar, prefix all selectors for that page with its `<body>`'s `id`. For example, to create styles that only apply to `month.php`, simply prefix all the selectors with `#month`. The `id` for each page is shown below.

Page | Body ID
--- | ---
activity_log.php | activitylog
add_entry.php | addentry
admin.php | admin
adminhome.php | adminhome
approve_entry.php | approveentry
assistant_edit.php | assistantedit
category.php | category
day.php | day
del_entry.php | delentry
del_layer.php | dellayer
edit_entry.php | editentry
edit_layer.php | editlayer
edit_report.php | editreport
edit_template.php | edittemplate
edit_user.php | edituser
export.php | export
group_edit.php | groupedit
groups.php | groups
help_admin.php | helpadmin
help_bug.php | helpbug
help_edit_entry.php | helpeditentry
help_import.php | helpimport
help_index.php | helpindex
help_layers.php | helplayers
help_pref.php | helppref
import.php | import
index.php | index
layers.php | layers
layers_toggle.php | layerstoggle
list_unapproved.php | listunapproved
login.php | login
month.php | month
nonusers.php | nonusers
pref.php | pref
publish.php | publish
purge.php | purge
reject_entry.php | rejectentry
report.php | report
search.php | search
select_user.php | selectuser
set_entry_cat.php | setentrycat
upcoming.php | upcoming
users.php | users
usersel.php | usersel
view_d.php | viewd
view_entry.php | viewentry
view_l.php | viewl
view_m.php | viewm
view_t.php | viewt
view_v.php | viewv
view_w.php | vieww
views.php | views
views_edit.php | viewsedit
week.php | week
week_details.php | weekdetails
year.php | year

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 eDays 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 1

Similarly, if customizing month.php & you want tablecells occuring 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 2

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 2

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 2 above), the definition from the class with the highest precedence is chosen. The order of precedence is:

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

This says that styles defined for the `today` class will be chosen 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.