2 if ( empty ( $PHP_SELF ) && ! empty ( $_SERVER ) &&
3 ! empty ( $_SERVER['PHP_SELF'] ) ) {
4 $PHP_SELF = $_SERVER['PHP_SELF'];
6 if ( ! empty ( $PHP_SELF ) && preg_match ( "/\/includes\//", $PHP_SELF ) ) {
7 die ( "You can't access this file directly!" );
12 HOW TO READ THIS DOCUMENT
14 Below are CSS styles used in WebCalendar.
15 There are two main parts to every CSS style: 'selector' & 'declaration'
20 The selector in the example above is 'body', while its
21 declaration is 'color: red;'
22 Each declaration has two parts: 'property' & 'value'
24 In the example above, there is only one declaraion ("color: red;")
25 For that declaration, the PROPERTY is "color" and the VALUE is "red"
27 NOTE: Each property must be followed by a colon (:),
28 and each value must be followed by a semi-colon (;)
30 Each selector can contain multiple declarations
35 background-color: black;
37 In the example above, there are three declarations:
40 background-color: black;
42 NOTE: The declarations for a given style must be contained within
45 VARIABLES USED TO STYLE WEBCALENDAR
47 TEXTCOLOR - default text color
48 FONTS - default font-family
49 BGCOLOR - background-color for the page
50 TABLEBG - background-color for tables
51 (typically used when the table also has cellspacing, thereby
52 creating a border effect)
53 CELLBG - background-color for normal cells
54 (not weekends, today, or any other types of cells)
55 TODAYCELLBG - background-color for cells that make up today's date
56 WEEKENDBG - background-color for cells that make up the weekend
57 THFG - text color for table headers
58 THBG - background-color for table headers
59 POPUP_FG - text color for event popups
60 POPUP_BG - background-color for event popups
61 H2COLOR - text color for text within h2 tags
64 <style type="text/css">
66 <?php /*==================== SECTION A ===============================
68 The CSS for WebCalendar is broken down into several sections.
69 This should make it easier to understand, debug & understand the
70 logical sequence of how the style system is built.
71 Each page in WebCalendar is assigned a unique ID. This unique ID is
72 determined by taking the name of the page & removing any underscores (_).
73 For a complete list of and their IDs, see includes/init.php or
74 docs/WebCalendar-StyleSystem.html.
76 The following sections appear below:
77 Section A - basic, required elements that affect WebCalendar as a whole
78 Section B - more specific to select areas of WebCalendar, yet still
79 affects many areas of WebCalendar
80 Section C - classes specific to certain pages, but that affect either
81 the page as a whole, or large areas within that page
82 Section D - the "nitty gritty" of classes. Used specifically for
83 fine-tuning elements within a specific page
88 color: <?php echo $GLOBALS['TEXTCOLOR']; ?>;
89 font-family: <?php echo $GLOBALS['FONTS']; ?>;
91 background-color: <?php echo $GLOBALS['BGCOLOR']; ?>;
93 <?php //links that don't have a specific class
94 //NOTE: these must appear ABOVE the 'printer' & all other
95 //link-related classes for those classes to work
97 color: <?php echo $GLOBALS['TEXTCOLOR']; ?>;
98 text-decoration: none;
108 #editnonusershandler {
109 background-color: #F8F8FF;
114 border: 2px groove #C0C0C0;
116 background-color: #F8F8FF;
119 padding: 0.2em 0.2em 0.07em 0.2em;
120 margin: 0px 0.2em 0px 0.8em;
121 border-top: 2px ridge #C0C0C0;
122 border-left: 2px ridge #C0C0C0;
123 border-right: 2px ridge #C0C0C0;
124 border-bottom: 2px solid #F8F8FF;
125 background-color: #F8F8FF;
127 text-decoration: none;
131 padding: 0.2em 0.2em 0px 0.2em;
132 margin: 0 0.2em 0 0.8em;
133 border-top: 2px ridge #C0C0C0;
134 border-left: 2px ridge #C0C0C0;
135 border-right: 2px ridge #C0C0C0;
136 background-color: #E0E0E0;
138 text-decoration: none;
143 #tabscontent_nonuser,
147 #tabscontent_participants,
151 #tabscontent_nonusers,
161 border-style: groove;
163 <?php //week number in monthview & such
168 text-decoration: none;
170 <?php //transparent images used for visual color-selection
176 <?php //display:none; is unhidden by includes/print_styles.css for printer-friendly pages
188 border-top: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
213 color: <?php echo $GLOBALS['TEXTCOLOR']; ?>;
214 text-decoration: none;
220 <?php //link to webcalendar site -- NOTE: by modifying this style, you can make this link disappear
225 <?php //printer-friendly links
228 color: <?php echo $GLOBALS['TEXTCOLOR']; ?>;
229 text-decoration: none;
234 <?php //new event icon (i.e. '+' symbol)
239 <?php //links to unapproved entries/events
243 text-decoration: none;
249 <?php //links to entries/events on layers
253 text-decoration: none;
256 <?php //links to entries/events
260 text-decoration: none;
263 <?php //event (or bullet) icon; NOTE: must appear AFTER the .entry, .layerentry, and .unapprovedentry classes
266 .unapprovedentry img {
271 <?php //numerical date links in main calendars
276 text-decoration: none;
277 border-top-width: 0px;
278 border-left-width: 0px;
279 border-right: 1px solid #888888;
280 border-bottom: 1px solid #888888;
281 padding: 0px 2px 0px 3px;
283 <?php //numerical date links in main calendars on hover
284 ?>.dayofmonth:hover {
286 border-right: 1px solid #0000FF;
287 border-bottom: 1px solid #0000FF;
289 <?php //left arrow images
296 <?php //right arrow images
311 <?php //left arrow image in day.php
317 <?php //right arrow image in day.php
323 <?php //left arrow image in day.php
324 ?>#day .monthnav .prev img {
329 <?php //right arrow image in day.php
330 ?>#day .monthnav .next img {
338 text-decoration: none;
340 background-color: <?php echo $GLOBALS['THBG']; ?>;
345 background-color: <?php echo $GLOBALS['CELLBG']; ?>;
346 vertical-align: middle;
350 background-color: #000000;
363 border-left: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
364 border-right: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
375 border: 1px solid #000000;
384 color: <?php echo $GLOBALS['TEXTCOLOR']; ?>;
385 text-decoration: none;
389 color: <?php echo $GLOBALS['POPUP_FG']; ?>;
390 <?php echo background_css ( $GLOBALS['POPUP_BG'], 200 ); ?>
391 text-decoration: none;
397 border: 1px solid <?php echo $GLOBALS['POPUP_FG']; ?>;
414 text-decoration: none;
419 text-decoration: none;
425 color: <?php echo $GLOBALS['H2COLOR']; ?>;
441 color: <?php echo $GLOBALS['H2COLOR']; ?>;
446 color: <?php echo $GLOBALS['H2COLOR']; ?>;
449 <?php //left column in help sections
454 <?php //question mark img linking to help sections
459 <?php //standard table appearing mainly in prefs.php & admin.php
461 border: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
462 background-color: <?php echo $GLOBALS['CELLBG']; ?>;
466 color: <?php echo $GLOBALS['THFG']; ?>;
467 <?php echo background_css ( $GLOBALS['THBG'], 30 ); ?>
470 border-bottom: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
472 <?php //Styles for minicalendars
473 //keep font-size:12px for IE6
476 border-collapse: collapse;
477 margin: 0px 0px 5px 0px;
483 .minical caption a:hover {
486 <?php //formats the day name (i.e. Sun, Mon, etc) in minicals
489 color: <?php echo $GLOBALS['TEXTCOLOR']; ?>;
491 background-color: <?php echo $GLOBALS['BGCOLOR']; ?>;
495 border: 1px solid <?php echo $GLOBALS['BGCOLOR']; ?>;
503 .minical td.weekend {
504 background-color: <?php echo $GLOBALS['WEEKENDBG']; ?>;
507 background-color: <?php echo $GLOBALS['TODAYCELLBG']; ?>;
509 .minical td.hasevents {
510 background-color: #DDDDFF;
516 border-bottom: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
517 border-right: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
522 background-color: #FFFFFF;
526 background-color: #EEEEEE;
531 color: <?php echo $GLOBALS['THFG']; ?>;
532 background-color: <?php echo $GLOBALS['THBG']; ?>;
533 border-top: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
534 border-left: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
535 border-bottom: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
542 #activitylog th.action,
543 .embactlog th.action {
548 border-left: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
551 #day div.minicalcontainer {
553 border: 1px solid #000000;
556 <?php //the really big number above the minicalendar in day.php
557 ?>#day .minical caption {
560 color: <?php echo $GLOBALS['THFG']; ?>;
561 background-color: <?php echo $GLOBALS['THBG']; ?>;
564 #day .minical td.selectedday {
565 border: 2px solid <?php echo $GLOBALS['TABLEBG']; ?>;
569 color: <?php echo $GLOBALS['THFG']; ?>;
570 background-color: <?php echo $GLOBALS['THBG']; ?>;
575 border-bottom: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
576 border-right: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
580 border-top: 1px solid <?php echo $GLOBALS['BGCOLOR']; ?>;
581 border-left: 1px solid <?php echo $GLOBALS['BGCOLOR']; ?>;
582 background-color: <?php echo $GLOBALS['BGCOLOR']; ?>;
585 border-top: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
586 border-left: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
589 color: <?php echo $GLOBALS['THFG']; ?>;
591 background-color: <?php echo $GLOBALS['THBG']; ?>;
596 <?php echo background_css ( $GLOBALS['CELLBG'], 50 ); ?>
597 border-top: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
598 border-left: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
601 <?php //display: none; is unhidden by includes/print_styles.css for printer-friendly pages
621 border-bottom: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
622 border-right: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
626 <?php //contains ALL months
632 color: <?php echo $GLOBALS['THFG']; ?>;
633 background-color: <?php echo $GLOBALS['THBG']; ?>;
638 border-top: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
639 border-left: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
640 <?php echo background_css ( $GLOBALS['THBG'], 15 ); ?>
645 border-top: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
646 border-left: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
650 border-top: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
651 border-left: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
653 <?php //participants cell
655 border-right: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
658 #viewv .main th.empty,
659 #viewm .main th.empty,
660 #vieww .main th.empty,
661 #week .main th.empty {
662 background-color: <?php echo $GLOBALS['BGCOLOR']; ?>;
663 border-top: 1px solid <?php echo $GLOBALS['BGCOLOR']; ?>;
664 border-left: 1px solid <?php echo $GLOBALS['BGCOLOR']; ?>;
677 border-top: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
678 border-left: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
680 #viewd .main th.row {
681 border-right-width: 0px;
684 #vieww .main th.today,
685 #viewm .main th.today,
686 #viewv .main th.today,
687 #viewt .main th.today {
689 <?php echo background_css ( $GLOBALS['TODAYCELLBG'], 100 ); ?>
690 border-top: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
691 border-left: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
694 #week .main th.today {
695 <?php echo background_css ( $GLOBALS['TODAYCELLBG'], 100 ); ?>
696 border-top: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
697 border-left: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
700 #week .main td.hasevents,
701 #day .glance td.hasevents {
702 <?php echo background_css ( $GLOBALS['TODAYCELLBG'], 100 ); ?>
705 #weekdetails .main th a {
706 color: <?php echo $GLOBALS['THFG']; ?>;
708 #week .main th a:hover,
709 #weekdetails .main th a:hover {
720 border-top: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
721 border-left: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
722 <?php echo background_css ( $GLOBALS['CELLBG'], 100 ); ?>
730 <?php echo background_css ( $GLOBALS['CELLBG'], 100 ); ?>
732 border-top: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
733 border-left: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
736 #viewl .main td.weekend,
737 #month .main td.weekend,
738 #viewm .main td.weekend,
739 #viewv .main td.weekend,
740 #vieww .main td.weekend,
741 #week .main td.weekend {
742 <?php echo background_css ( $GLOBALS['WEEKENDBG'], 100 ); ?>
743 border-top: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
744 border-left: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
746 #viewl .main td.today,
747 #month .main td.today,
748 #viewm .main td.today,
749 #vieww .main td.today,
750 #viewv .main td.today {
751 <?php echo background_css ( $GLOBALS['TODAYCELLBG'], 100 ); ?>
752 border-top: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
753 border-left: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
764 #month .minical caption,
765 #viewl .minical caption {
768 <?php //keep font-size:12px; for IE6 rendering
769 //display: block; keeps the caption vertically close to the day names
774 #year .minical caption {
782 <?php echo background_css ( $GLOBALS['CELLBG'], 100 ); ?>
783 border-top: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
784 border-left: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
800 color: <?php echo $GLOBALS['H2COLOR']; ?>;
804 color: <?php echo $GLOBALS['H2COLOR']; ?>;
811 color: <?php echo $GLOBALS['H2COLOR']; ?>;
815 border-right: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
816 border-bottom: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
819 #weekdetails .main th {
821 color: <?php echo $GLOBALS['THFG']; ?>;
822 <?php echo background_css ( $GLOBALS['THBG'], 100 ); ?>
823 border-left: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
824 border-top: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
828 #weekdetails .main td {
829 border-left: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
830 border-top: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
831 <?php echo background_css ( $GLOBALS['CELLBG'], 100 ); ?>
835 <?php /* must appear after th & td declarations
836 optionally, you can change this to read "#weekdetails td.today" to
837 color today's cell instead of the header
838 to color both the cell & the header with this style, simply remove
840 */?>#weekdetails .main th.today {
841 <?php echo background_css ( $GLOBALS['TODAYCELLBG'], 100 ); ?>
843 <?php /* must appear after th & td declarations
844 optionally, you can change this to read "#weekdetails th.weekend" to
845 color the weekend headers instead of the cells
846 to color both the cell & the header with this style, simply remove
848 */?>#weekdetails .main td.weekend {
849 <?php echo background_css ( $GLOBALS['WEEKENDBG'], 100 ); ?>
852 border-collapse: collapse;
861 background-color: #FFFFFF;
871 #viewt .yardstick td {
872 background-color: #FFFFFF;
873 border: 1px solid #CCCCCC;
880 #viewt .entrycont td {
887 #viewt .entrybar td.entry {
889 background-color: #F5DEB3;
890 border: 1px solid #000000;
894 <?php echo background_css ( $GLOBALS['WEEKENDBG'], 100 ); ?>
895 border-top: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
896 border-left: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
901 <?php echo background_css ( $GLOBALS['TODAYCELLBG'], 100 ); ?>
902 border-left: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
903 border-top: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
907 color: <?php echo $GLOBALS['THFG']; ?>;
908 <?php echo background_css ( $GLOBALS['TODAYCELLBG'], 100 ); ?>
909 border-left: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
910 border-top: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
919 border: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;
920 <?php echo background_css ( $GLOBALS['CELLBG'], 200 ); ?>
927 color: <?php echo $GLOBALS['THFG']; ?>;
928 <?php echo background_css ( $GLOBALS['THBG'], 100 ); ?>
931 border-bottom: 1px solid <?php echo $GLOBALS['TABLEBG']; ?>;