From CGWiki

Contents 1 Archive Calendars 1.1 Non-CSS Calendars by Phalanx 1.2 CSS Calendars 1.2.1 Putting it together

Archive Calendars

Non-CSS Calendars by Phalanx

Big Calendar, small calendar. Oh heck. they're all so simple to do I wonder why I am even bothering to write a guide on how to use them.

But to get down to business, I suppose I should explain the difference between these two. the Calendar option is a complex piece of code, all contained in one simple tag, namely: ***calendar***. It shows all the strips that you've done in the month as links on the calendar itself.

Pretty cool, eh? But how to use it? Egad! It's so simple!

1. Go to indextemplate.html or dailytemplate.html or any other page you want the calendar.
2. Place the ***calendar*** tag.
3. Go to SiteAdmin and trigger an update.

And that's it. Really. Nothing else.

All in the power of a single tag! But how about the BIG calendar? (BTW, the BIG calendar is just like the small calendar, except that it produces lots of little calendars for every strip you've made! Great for that archive page that you don't want to update yourself.

And here's how you do it:

1. Create a html file for your archives, or open it if you have one already.
2. Because the Big Calendar generates a lot of complex code, it's recommended that you give it its own page.
3. Pop in the ***big_calendar*** tag where you want it.
4. Trigger an update

Habis! Done! That's all folks.

Enjoy the intoxicating power of that little tag- and Happy Webcomicking! -Ping

CSS Calendars

The basic calendar generated by the ***calendar*** and ***big_calendar*** tags are pretty plain in appearance. About the only thing customizable on them is the font and link colors and even then, those depend upon your entire page. However, if you know a little CSS, you can highly customize your archive pages to look nearly any way you wish.

The tags are as follows:

• ***csscalendar*** - functions the same as ***calendar***
• ***big_csscalendar*** - nearly the same as the ***big_calendar*** tag

The difference between the regular and CSS calendar tags is that the latter puts class names into the code which can then be referenced from a stylesheet. They are as follows:

• ks_bigcal_title is not displayed on this calendar below, it only appears on the big calendar. This is where the month will be displayed, similar to ks_cal_title.
• ks_calendar which is in yellow below. This affects the overall background of the entire calendar.
• ks_cal_title colored in green. This changes the title of the calendar.
• ks_cal_nm_e is in blue and changes the dates which are not in the month for which the calendar displays. In the example, this means the dates in August and November.
• ks_cal_e is in red and these are the dates in the month which do not have updates.
• ks_cal_wk_e is in navy blue and applies to the Week sections. This is a feature only available for Keenprime subscribers although it is possible to not display it with CSS by using the code {display: none} .
• ks_cal_today is in lime green and applies to the current comic. If, for example, you have the ***csscalendar*** tag on your dailytemplate.html, have a comic on the 31st, and go back to that date in your archives, this is the square which is colored differently.
• ks_cal_wk is the title for the Week section in teal. Again, it is possible to disable this from displaying with {display: none} .

I have melted a box of crayons over color coded a sample calendar from my site for the 31st of October for you to look at:

AUG   October 2005   NOV
25	26	27	28	29	30	1	W
2	3	4	5	6	7	8	W
9	10	11	12	13	14	15	W
16	17	18	19	20	21	22	W
23	24	25	26	27	28	29	W
30	31	1	2	3	4	5	W
							WEEK

Putting it together

In order to apply various effects to your site, you simply have to add in the code either in the head of your HTML pages or place them in a separate .css file.

Here is what my code looks like for my calendars (note that these colors and values do not apply to the display calendar here):

.ks_cal_title { background-color:#ffffff; width: 100%; color: #000000;}
.ks_bigcal_title {background-color: #ffffff; color:#000000;}
.ks_cal_row { background-color:#ffffff;}
.ks_cal_nm_c { background-color:#ffffff; }
.ks_cal_nm_e { background-color:#cccccc; color:#000000;}
.ks_cal_c { background:#ffffff; }
.ks_cal_e {background:#000000; color: #ffffff;}
.ks_cal_today { background:#ffffff;}
.ks_cal_wk_e ,.ks_cal_wk_c, .ks_cal_wk{display:  none}  
 /* This'll nolify the week column */ 

See here for further help on how to use CSS.