Table of Contents
WebCalendar Styling HOWTO
NOTE: THIS DOCUMENTATION IS STILL UNDER CONSTRUCTION.
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:
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:
todayhaseventsweekendempty
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.