| [ Index ] |
|
Code source de WebCalendar 1.0.5 |
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"> 5 <head> 6 <title>WebCalendar Styling HOWTO</title> 7 <style type="text/css"> 8 body { 9 background-color: #FFFFFF; 10 font-family: arial, sans-serif; 11 padding: 0px 40px; 12 } 13 h1, h2 { 14 margin-left: -20px; 15 } 16 p { 17 text-indent: 3ex; 18 } 19 code { 20 font-weight: bold; 21 } 22 dt { 23 font-family: monospace; 24 font-weight: bold; 25 } 26 div.example { 27 width: 350px; 28 margin: 0px auto; 29 } 30 div.example pre { 31 border: 1px solid blue; 32 background-color: #EEEEFF; 33 padding: 5px; 34 margin: 0px; 35 } 36 div.example p { 37 text-align: center; 38 font-style: italic; 39 font-size: small; 40 margin: 0px; 41 } 42 table { 43 margin: 0px auto; 44 border-collapse: collapse; 45 } 46 td, th { 47 padding: 3px; 48 border: 1px solid gray; 49 } 50 td { 51 font-family: monospace; 52 } 53 </style> 54 </head> 55 <body> 56 <h1>WebCalendar Styling HOWTO</h1> 57 58 <strong>NOTE:</strong> THIS DOCUMENTATION IS STILL UNDER CONSTRUCTION.<br /> 59 60 <h2><a id="toc">Table of Contents</a></h2> 61 62 <ol><li> 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> 67 </li></ol> 68 69 <h2><a id="intro" href="#toc">Introduction</a></h2> 70 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> 72 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> 76 <ul><li> 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> 79 </li></ul> 80 81 <h2><a id="classes" href="#toc">Trinity</a></h2> 82 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> 84 85 <h3>Structure</h3> 86 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> 88 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> 90 <a id="bodyids"></a> 91 <table> 92 <tr><th> 93 Page</th><th> 94 Body ID 95 </th></tr> 96 <tr><td> 97 activity_log.php</td><td> 98 activitylog 99 </td></tr> 100 <tr><td> 101 add_entry.php</td><td> 102 addentry 103 </td></tr> 104 <tr><td> 105 admin.php</td><td> 106 admin 107 </td></tr> 108 <tr><td> 109 adminhome.php</td><td> 110 adminhome 111 </td></tr> 112 <tr><td> 113 approve_entry.php</td><td> 114 approveentry 115 </td></tr> 116 <tr><td> 117 assistant_edit.php</td><td> 118 assistantedit 119 </td></tr> 120 <tr><td> 121 category.php</td><td> 122 category 123 </td></tr> 124 <tr><td> 125 day.php</td><td> 126 day 127 </td></tr> 128 <tr><td> 129 del_entry.php</td><td> 130 delentry 131 </td></tr> 132 <tr><td> 133 del_layer.php</td><td> 134 dellayer 135 </td></tr> 136 <tr><td> 137 edit_entry.php</td><td> 138 editentry 139 </td></tr> 140 <tr><td> 141 edit_layer.php</td><td> 142 editlayer 143 </td></tr> 144 <tr><td> 145 edit_report.php</td><td> 146 editreport 147 </td></tr> 148 <tr><td> 149 edit_template.php</td><td> 150 edittemplate 151 </td></tr> 152 <tr><td> 153 edit_user.php</td><td> 154 edituser 155 </td></tr> 156 <tr><td> 157 export.php</td><td> 158 export 159 </td></tr> 160 <tr><td> 161 group_edit.php</td><td> 162 groupedit 163 </td></tr> 164 <tr><td> 165 groups.php</td><td> 166 groups 167 </td></tr> 168 <tr><td> 169 help_admin.php</td><td> 170 helpadmin 171 </td></tr> 172 <tr><td> 173 help_bug.php</td><td> 174 helpbug 175 </td></tr> 176 <tr><td> 177 help_edit_entry.php</td><td> 178 helpeditentry 179 </td></tr> 180 <tr><td> 181 help_import.php</td><td> 182 helpimport 183 </td></tr> 184 <tr><td> 185 help_index.php</td><td> 186 helpindex 187 </td></tr> 188 <tr><td> 189 help_layers.php</td><td> 190 helplayers 191 </td></tr> 192 <tr><td> 193 help_pref.php</td><td> 194 helppref 195 </td></tr> 196 <tr><td> 197 import.php</td><td> 198 import 199 </td></tr> 200 <tr><td> 201 index.php</td><td> 202 index 203 </td></tr> 204 <tr><td> 205 layers.php</td><td> 206 layers 207 </td></tr> 208 <tr><td> 209 layers_toggle.php</td><td> 210 layerstoggle 211 </td></tr> 212 <tr><td> 213 list_unapproved.php</td><td> 214 listunapproved 215 </td></tr> 216 <tr><td> 217 login.php</td><td> 218 login 219 </td></tr> 220 <tr><td> 221 month.php</td><td> 222 month 223 </td></tr> 224 <tr><td> 225 nonusers.php</td><td> 226 nonusers 227 </td></tr> 228 <tr><td> 229 pref.php</td><td> 230 pref 231 </td></tr> 232 <tr><td> 233 publish.php</td><td> 234 publish 235 </td></tr> 236 <tr><td> 237 purge.php</td><td> 238 purge 239 </td></tr> 240 <tr><td> 241 reject_entry.php</td><td> 242 rejectentry 243 </td></tr> 244 <tr><td> 245 report.php</td><td> 246 report 247 </td></tr> 248 <tr><td> 249 search.php</td><td> 250 search 251 </td></tr> 252 <tr><td> 253 select_user.php</td><td> 254 selectuser 255 </td></tr> 256 <tr><td> 257 set_entry_cat.php</td><td> 258 setentrycat 259 </td></tr> 260 <tr><td> 261 upcoming.php</td><td> 262 upcoming 263 </td></tr> 264 <tr><td> 265 users.php</td><td> 266 users 267 </td></tr> 268 <tr><td> 269 usersel.php</td><td> 270 usersel 271 </td></tr> 272 <tr><td> 273 view_d.php</td><td> 274 viewd 275 </td></tr> 276 <tr><td> 277 view_entry.php</td><td> 278 viewentry 279 </td></tr> 280 <tr><td> 281 view_l.php</td><td> 282 viewl 283 </td></tr> 284 <tr><td> 285 view_m.php</td><td> 286 viewm 287 </td></tr> 288 <tr><td> 289 view_t.php</td><td> 290 viewt 291 </td></tr> 292 <tr><td> 293 view_v.php</td><td> 294 viewv 295 </td></tr> 296 <tr><td> 297 view_w.php</td><td> 298 vieww 299 </td></tr> 300 <tr><td> 301 views.php</td><td> 302 views 303 </td></tr> 304 <tr><td> 305 views_edit.php</td><td> 306 viewsedit 307 </td></tr> 308 <tr><td> 309 week.php</td><td> 310 week 311 </td></tr> 312 <tr><td> 313 week_details.php</td><td> 314 weekdetails 315 </td></tr> 316 <tr><td> 317 year.php</td><td> 318 year 319 </td></tr> 320 </table> 321 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: 323 <ul><li> 324 weeknumber</li><li> 325 view</li><li> 326 date 327 </li></ul> 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"> 331 <a id="ex1"></a> 332 <pre><div class="title"> 333 <span class="weeknumber"></span> 334 <span class="view"></span> 335 <span class="date"></span> 336 </div> 337 </pre> 338 <p>Example 1</p> 339 </div> 340 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"> 345 <a id="ex1"></a> 346 <pre>#month td.today { 347 background-color: red; 348 }</pre> 349 <p>Example 1</p> 350 </div> 351 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"> 354 <a id="ex2"></a> 355 <pre>#month td.weekend { 356 border: 1px solid black; 357 padding: 10px; 358 }</pre> 359 <p>Example 2</p> 360 </div> 361 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> 363 364 <p>Now say the styles had looked like this:</p> 365 <div class="example"> 366 <a id="ex2"></a> 367 <pre>.today { 368 background-color: red; 369 } 370 371 .weekend { 372 border: 1px solid black; 373 padding: 10px; 374 <em>background-color: blue;</em> 375 } 376 377 .hasevents { 378 font-weight: bold; 379 }</pre> 380 <p>Example 2</p> 381 </div> 382 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> 384 385 <h2><a id="order" href="#toc">Styling Order of Precedence</a></h2> 386 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> 388 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> 393 <code>empty</code> 394 </li></ol> 395 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> 397 </body> 398 </html>
titre
Description
Corps
titre
Description
Corps
titre
Description
Corps
titre
Corps
| Généré le : Fri Nov 30 19:09:19 2007 | par Balluche grâce à PHPXref 0.7 |
|
|