Board Logo

color used for days with events
bjornkl - 10/18/2008 at 03:16 PM

Hi,

I am new here, and really like the simplicity of this calendar.

I have so far been able to install the calendar, configure it to have the calendar shared among several pages depending on browser, and figured out how to include the stylesheet css commands that control the things like Ccur, Cheader, etc. and modify them to display in a way that is consistent with the look and feel of the pages.

However, there is one value I can't seem to figure out.

There are Class names for just about every foreground object EXCEPT the attribute for days that have events assigned to them.

This would normally be displayed as a black number in bold face, however it seems my page uses white as the default text color, which means that the calendar -- with a white background -- ends up displaying that number in white as well, which obviously ends up invisible.

How do I override this? Is there a special hidden style name I should reference, or should I abandon all hope of using a white background, and completely invert the color scheme of the calendar?

Thanks in advance,

Bjorn Lindstrom
webmaster, Lake Margaret.org


bjornkl - 10/27/2008 at 12:12 AM

Hi,

Well, so far, no response to my question at all ... and it appears to extend not only to the color of text, but also to the background color used for days with events too.

Since there doesn't seem to be anyone that knows how to deal with this problem, I will start looking for another calendar event tool. Sad, since this seemed to have such promise. I should have known though, since it appears this tool hasn't had any updates for about a year now.

Thanks anyway,

Bjorn


kvv - 10/27/2008 at 02:43 PM

Ccur, Cheader etc. is just a name of classes. Default classes you please see here:
.Cheader
{color: #ffffff; font-family: Tahoma, Verdana; font-size: 11px;}
.Cheader2
{color: #ffffff; font-family: Tahoma, Verdana; font-size: 11px;}
.Ccur
{color: #000000; font-family: Tahoma, Verdana; font-size: 11px;}
.Cbody
{color: #000000; font-family: Tahoma, Verdana; font-size: 11px;}
.Cbodyh
{color: #606060; font-family: Tahoma, Verdana; font-size: 11px;}
.Cwe
{color: #000000; font-family: Tahoma, Verdana; font-size: 11px;}
You can use it on your page or write your own classes instead of it.


bjornkl - 10/27/2008 at 03:45 PM

Yes, I found those, and modified them already, and while they helped, none of them appear to control the color of the font used for days that have events. Apparently these would normally display in bold, but the webpage I am trying to use it on already has links defined as white text, so those particular boxes appear "blank", unless you hover, and then only display a red underline. As far as I can tell, none of those classes define that particular attribute.

Thanks for responding,

Bjorn


bjornkl - 10/27/2008 at 03:49 PM

Here is the style sheet I am using:

<!-- Begin with page specific settings -->

.page td, table{
font-family:arial;
font-size:9px;
font-weight:bold;
line-height:12px;
vertical-align:top;
color:#D1D0C9;
}

form { margin:0px; padding:0px}
body { margin:0; padding:0; background-color:#2B2A25}

span { text-transform:uppercase}
span b{ color:ffffff; font-weight:normal}

.list {margin:0px; padding:0px; list-style:none}
.list li{ background-image: none; height:19px}
.list li a{ color:#ffffff; font-family:arial; text-transform:uppercase; font-size:9px; width:126px; text-decoration:none; background:url(images/talling.gif) repeat-x bottom ; padding: 0px; height:18px; }
.list li a:hover {background:none; text-decoration:underline}

.list1 {margin:0px; padding:4px 0 0 0; list-style:none;}
.list1 li{ background-image: none; height:19px}
.list1 li a{ color:#ffffff; text-transform:uppercase; font-size:9px; text-decoration:none;}
.list1 li a:hover {background:url(images/talling.gif) repeat-x bottom}

.list2 {margin:0px; padding:0px; list-style:none; line-height:20px}
.list2 li {width:344px; height:22px; background:url(images/bg_li.gif) top left no-repeat; padding:0 0 0 16px; margin:0px}
.list2 li a {color:#ffffff; text-transform:uppercase; font-size:9px; text-decoration:none}
.list2 li a:hover{text-decoration:underline}


.footer{ color:#696861; font-family:arial; font-size:9px; font-weight:bold; text-transform:uppercase; vertical-align:middle}
.footer a{ color:#696861; text-decoration:none}
.footer a:hover{ text-decoration:underline}

.right{ margin-right:25px}
.right1{ margin-right:20px}
.right2{ margin-right:18px; margin-left:7px}

.cont a{ color:#696861; text-decoration:none}
.cont a:hover{ text-decoration:underline}

span{ font-family:verdana; text-transform:none}

.form input {
width:241px;
height:19px;
font-family:arial;
font-size:9px;
font-weight:bold;
color:#D1D0C9;
padding:2 0 0 6px;
border-color:#22211C;
border-style:solid;
border-width:1px;
background-color:#2B2A25
}

.form textarea {
width:241px;
height:109px;
font-family:arial;
font-size:9px;
font-weight:bold;
color:#D1D0C9;
overflow:hidden;
padding:2 0 0 6px;
border-color:#22211C;
border-style:solid;
border-width:1px;
background-color:#2B2A25
}

<!-- End of page specific settings, begin calendar specific settings -->

a
{color: #0000aa; text-decoration: none; font-family: arial; font-size: 11px}
p, tr, td, ul, li
{color: #000000; font-family: arial; font-size: 11px}
.calendar tr, td
{color: #000000; font-family: arial; font-size: 11px}
form
{margin: 5px;}
.header1, h1
{color: #ffffff; background: #4682B4; font-weight: bold; font-family: arial; font-size: 13px; margin: 0px; padding: 2px;}
.header2, h2
{color: #000000; background: #DBEAF5; font-weight: bold; font-family: arial; font-size: 12px;}
.intd
{color: #000000; font-weight: normal; font-family: arial; font-size: 11px; padding-left: 15px;}
.Cheader
{color: #ffffff; font-family: arial; font-size: 11px;}
.Cheader2
{color: #ffffff; font-family: arial; font-size: 11px;}
.Ccur
{color: #000000; font-weight: normal; font-family: arial; font-size: 11px;}
.Cbody
{color: #000000; font-weight: normal; font-family: arial; font-size: 11px;}
.Cbodyh
{color: #909090; font-weight: normal; font-family: arial; font-size: 11px;}
.Cwe
{color: #000000; font-weight: normal;font-family: arial; font-size: 11px;}

.C2header
{color: #ffffff; font-family: arial; font-size: 11px;}
.C2header2
{color: #ffffff; font-family: arial; font-size: 11px;}
.C2cur
{color: #000000; font-weight: normal; font-family: arial; font-size: 11px;}
.C2body
{color: #000000; font-weight: normal; font-family: arial; font-size: 11px;}
.C2bodyh
{color: #909090; font-weight: normal; font-family: arial; font-size: 11px;}
.C2we
{color: #000000; font-weight: normal; font-family: arial; font-size: 11px;}

<!-- End of Calendar Settings -->


bjornkl - 10/29/2008 at 04:32 PM

Hi,

Since I haven't received any followup responses, I will assume that there is no way to override the background color and font color for days that have events. It's a shame because I really liked this tool.

Does anyone have any recommendations for PHP based calendar tools similar to this one, but that provide COMPLETE CONTROL over ALL attributes?

Thanks in advance,

Bjorn Lindstrom
Webmaster, LakeMargaret.org


Softcomplex: http://www.softcomplex.com/
Back to forum: http://www.softcomplex.com/forum/