1
<?xml version="1.0" encoding="iso-8859-1"?>
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3
"DTD/xhtml1-transitional.dtd">
4
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
6
<title>WebCalendar Styling HOWTO</title>
7
<style type="text/css">
9
background-color: #FFFFFF;
10
font-family: arial, sans-serif;
23
font-family: monospace;
31
border: 1px solid blue;
32
background-color: #EEEEFF;
44
border-collapse: collapse;
48
border: 1px solid gray;
51
font-family: monospace;
56
<h1>WebCalendar Styling HOWTO</h1>
58
<strong>NOTE:</strong> THIS DOCUMENTATION IS STILL UNDER CONSTRUCTION.<br />
60
<h2><a id="toc">Table of Contents</a></h2>
63
<a href="#intro">Introduction</a></li><li>
64
<a href="#classes">Classes</a></li><li>
65
<a href="#order">Styling Order of Precedence</a></li><li>
66
<a href="#indiv">Styling for Individual Pages</a>
69
<h2><a id="intro" href="#toc">Introduction</a></h2>
71
<p>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.</p>
73
<p>WebCalendar uses <a title="W3C CSS homepage" href="http://www.w3.org/Style/CSS">CSS</a> to format its content. For an introduction to CSS, you may wish to read
74
<a title="Starting with HTML + CSS" href="http://www.w3.org/Style/Examples/011/firstcss">Starting with HTML + CSS</a>, and/or
75
<a title="Dave Raggett's Introduction to CSS" href="http://www.w3.org/MarkUp/Guide/Style">Dave Raggett's Introduction to CSS</a>. The technical specifications are available at the <abbr title="World Wide Web Consortium">W3C</abbr>:</p>
77
<a href="http://www.w3.org/TR/CSS1" title="Cascading Style Sheets, Level 1">CSS 1</a></li><li>
78
<a href="http://www.w3.org/TR/CSS21" title="Cascading Style Sheets, Level 2 Revision 1">CSS 2.1</a>
81
<h2><a id="classes" href="#toc">Trinity</a></h2>
83
<p>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.</p>
87
<p>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.</p>
89
<p>If you want to customize the look of a single page in WebCalendar, prefix all selectors for that page with its <code><body></code>'s <code>id</code>. For example, to create styles that only apply to <code>month.php</code>, simply prefix all the selectors with <code>#month</code>. The <code>id</code> for each page is shown below.</p>
97
activity_log.php</td><td>
101
add_entry.php</td><td>
109
adminhome.php</td><td>
113
approve_entry.php</td><td>
117
assistant_edit.php</td><td>
121
category.php</td><td>
129
del_entry.php</td><td>
133
del_layer.php</td><td>
137
edit_entry.php</td><td>
141
edit_layer.php</td><td>
145
edit_report.php</td><td>
149
edit_template.php</td><td>
153
edit_user.php</td><td>
161
group_edit.php</td><td>
169
help_admin.php</td><td>
173
help_bug.php</td><td>
177
help_edit_entry.php</td><td>
181
help_import.php</td><td>
185
help_index.php</td><td>
189
help_layers.php</td><td>
193
help_pref.php</td><td>
209
layers_toggle.php</td><td>
213
list_unapproved.php</td><td>
225
nonusers.php</td><td>
241
reject_entry.php</td><td>
253
select_user.php</td><td>
257
set_entry_cat.php</td><td>
261
upcoming.php</td><td>
277
view_entry.php</td><td>
305
views_edit.php</td><td>
313
week_details.php</td><td>
322
<p>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. <code><div class="title"></code>). Within that div, there are several spans each with its own class. These classes include:
328
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.</p>
329
<p>Structurally, the header of pages with a full-sized calendar will look similar to:</p>
330
<div class="example">
332
<pre><div class="title">
333
<span class="weeknumber"></span>
334
<span class="view"></span>
335
<span class="date"></span>
341
<p>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 (<code><th></code> tags), and tablecells (<code><td></code> tags). WebCalendar distinguishes between <em>column</em> tableheaders & <em>row</em> tableheaders. Headers containing dates, or days of the week utilize the classes <em>today</em>, and <em>weekend</em>. 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".</p>
342
<p>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.</p>
343
<p>If you're customizing month.php & want tablecells (td tags) on today's date to have a red background, you would use:</p>
344
<div class="example">
346
<pre>#month td.today {
347
background-color: red;
352
<p>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:</p>
353
<div class="example">
355
<pre>#month td.weekend {
356
border: 1px solid black;
362
<p>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 <code><td class="weekend today"></code>. 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.</p>
364
<p>Now say the styles had looked like this:</p>
365
<div class="example">
368
background-color: red;
372
border: 1px solid black;
374
<em>background-color: blue;</em>
383
<p>Note that both the <code>today</code> class and the <code>weekend</code> class have a <code>background-color</code> definition. So does our example <code><td></code> (which belongs to both the <code>today</code> and <code>weekend</code> classes) end up with a red background or a blue one? This conflict is decided by the <a href="#order">Styling Order of Precedence</a>.</p>
385
<h2><a id="order" href="#toc">Styling Order of Precedence</a></h2>
387
<p>When conflicts arise between styles (as in <a href="#ex2">Example 2</a> above), the definition from the class with the highest precedence is chosen. The order of precedence is:</p>
389
<ol title="Styling Order of Precedence"><li>
390
<code>today</code></li><li>
391
<code>hasevents</code></li><li>
392
<code>weekend</code></li><li>
396
<p>This says that styles defined for the <code>today</code> class will be chosen styles for the <code>hasevents</code> class when there is a conflict, styles for the <code>hasevents</code> class will be chosen over styles for the <code>weekend</code> class, and so on.</p>
added
removed
docs/WebCalendar-Styling.html
