Calendar stylin'

The Gear is deprecated, use the Help forum or CG Wiki.

Calendar stylin'

Postby PickleJar on Tue Sep 14, 2004 2:44 am

So since I have 16 strips now, I finally decided to spiff up the "navigation" of my comic a little bit. I made some arrow gifs for the "previous", "next", etc, and added a calendar keentag to the template. I also formed a basic HTML table tag to make the "navbar" look a little more like I intended. But I absolutely hate the look of the calendar. I'm assuming that the colors are selected based on those used in the body tag that I formed for the template. How can I choose different colors for just the calendar without messing up the rest of the page?
Image
User avatar
PickleJar
Newbie
 
Posts: 12
Joined: Sun Aug 08, 2004 8:11 am
Location: Summerside, PEI, Canada

Postby Joel Fagin on Tue Sep 14, 2004 3:01 am

I can only guess since I don't have a KS account, but I can see at least one way of doing it. You have to know styles sheets for this, though.

First, you set up a style sheet for tables and table cells to define the look of your calendar. Here's a very quick sample...

Code: Select all
/* Table Cell ruleset */

TD {
   font-family: arial, sans-serif;
   font-size: 8pt;
   font-style: normal;
   font-weight: normal;
   color: #C0C0D9;
}


Unfortunatly, that will change the look of every table on your webpage. You can avoid that by making up a new class of table.

Code: Select all
/* Normal table cell ruleset */

TD.normal {
   font-family: arial, sans-serif;
   font-size: 12pt;
   font-style: normal;
   font-weight: normal;
   color: #000000;
}


Then, whenever you use a table in your HTML, you use the same class of cell.

Code: Select all
<TD CLASS="normal">blah, blah, blah</TD>


It's clumsy and there might be a better way but it should work. If you don't know how yourself, I'm willing to run it up for you if you like and if it works, the technique can be put on the Gear later (if something similar isn't there already).

- Joel Fagin
Image
User avatar
Joel Fagin
nothos adrisor (GTC)
 
Posts: 6015
Joined: Mon Mar 29, 2004 1:15 am
Location: City of Lights

Postby PickleJar on Tue Sep 14, 2004 3:21 am

Joel Fagin wrote:It's clumsy and there might be a better way but it should work. If you don't know how yourself, I'm willing to run it up for you if you like and if it works, the technique can be put on the Gear later (if something similar isn't there already).

yeah, I only know basic HTML, I've never worked with style sheets or anything like that. I'll keep an eye on this thread, and if you can get omething worked out, let me know. keep in mind, I have no problem finding the proper hex codes for the colors I want to use, as long as I'm told what codes to put where.

in the meantime, I've actually decided that changing the body tag would'nt really be such a terrible thing, since the main thing that the link, alink and vlink colors were assigned to before were "first comic", "previous comic", etc., and I now have .gifs for those things, so as long as I leave the main text color alone, I should be fine. so I'll experiment with the colors in that one for a bit, but I think what you're proposing would still be useful for myself and other cadets wanting to tweak the look of their calendar without affecting the rest of the page.
Image
User avatar
PickleJar
Newbie
 
Posts: 12
Joined: Sun Aug 08, 2004 8:11 am
Location: Summerside, PEI, Canada

Postby Joel Fagin on Tue Sep 14, 2004 3:27 am

PickleJar wrote:I think what you're proposing would still be useful for myself and other cadets wanting to tweak the look of their calendar without affecting the rest of the page.


Well, I can only do it if I have a guinnea pig, see. If you let me play around with your templates and upload them - even if only temporarily - so I can see the results, then I'll do it.

Mind you, I might wait a day or so to see if anyone already has a better method they want to mention.

- Joel Fagin
Image
User avatar
Joel Fagin
nothos adrisor (GTC)
 
Posts: 6015
Joined: Mon Mar 29, 2004 1:15 am
Location: City of Lights

Postby PickleJar on Tue Sep 14, 2004 3:41 am

Joel Fagin wrote:Well, I can only do it if I have a guinnea pig, see. If you let me play around with your templates and upload them - even if only temporarily - so I can see the results, then I'll do it.

Mind you, I might wait a day or so to see if anyone already has a better method they want to mention.

Okay, let's wait a bit (it's not urgent, I don't put that much importance in the calendar just yet), and if there's no other method proposed, I'll agree to let you play around with my templates (something about that phrase just sounds so, so wrong).
Image
User avatar
PickleJar
Newbie
 
Posts: 12
Joined: Sun Aug 08, 2004 8:11 am
Location: Summerside, PEI, Canada

Postby Risky on Fri Feb 04, 2005 9:39 pm

Don't listen!!!

Okay, what you really need to do is search the forums for information on the secret hidden magic tag "***csscalendar***". This tag will allow you full control of your calendar, and if you put it in without any CSS, it should follow the regular formatting of your page No Problem!!!

IF you still want to customize your csscalendar afterward, just use CSS with Class names. The class names will appear in your code the first time you update (and that way you'll know if it's ugly or not). You can see how it works at http://theelven.com (since I use a CSS calendar).

This kind of question goes Great with the help forum, and the answers are better there too. I'm answering this here because people should know! I'm surprised this topic is so near the top in Gear (given it's age, for example). Post more gear, peops.
~Scott
Image Image
User avatar
Risky
69
 
Posts: 3824
Joined: Tue May 04, 2004 8:41 am
Location: It's All Rainbows To Me

Postby Faub on Sat Feb 05, 2005 1:58 pm

Code: Select all
.ks_calendar { background:#81a1df; font-size:12pt; font-weight:bold; }
.ks_cal_title { font-size:10pt; }
.ks_cal_title a { vertical-align:super; font-size:10pt; }
.ks_cal_row { background:#a1c1ff; border:1px solid navy; }
.ks_cal_nm_c { background:#6191bf; }
.ks_cal_nm_e { background:#6191bf; }
.ks_cal_c { background:#d0f0d0; }
.ks_cal_e {}
.ks_cal_today { background:#d0d0f0; }
.ks_cal_wk_c { display:none; }
.ks_cal_wk_e { display:none; }
.ks_cal_wk { display:none; }


This is the style settings I'm using for my css calendar. The idea was to get rid of the unused W links.
User avatar
Faub
The Establishment (Moderator)
The Establishment (Moderator)
 
Posts: 3699
Joined: Tue May 20, 2003 2:53 pm
Location: Missouri, USA


 

Return to Gear



Who is online

Users browsing this forum: No registered users and 1 guest