Calendar 0.7.13 Layout Help (UPDATED)

[BobX]

Hi all,

I'm using the latest version of Calendar (0.7.9) on CMS Made Simple 1.2.3. and I'm struggling with the layout, particularly with the Big Calendar and the Detail page. The Calendar CSS  is attached to my Template.

First, I'd like to make the entire background of an "Event Cell" a color (#cccccc for instance). My Big Calender has white "cells", except for today's date. I would like the events to show up better on the big calendar grid, so a background color would do the trick.

2nd, for the Details of any given event, it seems I'm stuck with "courier" type font, and it's very small. How do I go about stylizing the Details page?
(UPDATE: Resolved: There were surrounding my Smarty tag? I got rid of them and the courier crap is gone)

Also, how do I change the Date/month/Year Format to be Month, Date, Year... I've tried various attempts in the Templates, but nothing seems to work.
UPDATE: Semi-Resolved in one of the List template,

{/if}{$month_names[$month]} {if $day > 0}{$day}  {$year}

but still reads wrong in the details... can't figure out where to change it or how to change it...Events Template?

http://www.where2mag.com/cms_test/index ... -england-3 is the link
WARNING: The link above is clean, but other pages may contain adult material and/or nudity

Thanks in advance for any help
Bob

/*
Example stylesheet for Calendar module

For using this "big"-class insert something like this in your page
or template;

{cms_module module='Calendar' table_id='big'}

*/



/* make all links red */
.calendar tr td a
{
  color: white;
  background-color: red;
  font-size: 1.3em;
  font-weight: bold;
}
.calendar tr td a:hover
{
  color: red;
  background-color: white;
  font-size: 1.3em;
  font-weight: bold;
}

/* highlight "today" for the small calendar */
.calendar-today
{
  font-weight: bold;
}

/* display the "upcominglist" as one line per entry (assuming table_id='cal-upcominglist') */
#cal-upcominglist .calendar-date-title
,#cal-upcominglist .calendar-summary-title
{
  display: none;
}

#cal-upcominglist h2
,#cal-upcominglist .calendar-date
,#cal-upcominglist .calendar-summary
{
  display: inline;
  margin-right: 5px;
}

/* tidy up text sizes for lists */
#cal-list h1, #cal-upcominglist h1
{
  color: red;
  font-size: 130%;
}
#cal-list h2, cal-upcominglist h2
{
  font-size: 120%;
}

/** large calendar rules (assuming table_id='big') **/
/* border on for #big */
#big{
  margin: 0px;
  border-collapse:    collapse;
  border: 1px solid black;
}

/* nice squares for the #big table */
#big th
{
  border: 1px solid black;
  padding: 3px;
  width: 75px;
}

#big td {
  border: 1px solid black;
  vertical-align: top;
  padding: 3px;
  height: 75px;
  width: 75px;
}

/* format summaries nicely in #big */
#big ul
{
  margin: 0px;
  padding: 0px;
  padding-left: 5px;
}

#big li
{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

/* background colours for #big */
#big td
{
  background-color: #cccccc;
}

#big .calendar-day
{
  background-color: #ffffff;
}

#big .calendar-today
{
  font-weight: normal;
  background-color: #6699cc;
}


.calendar-event .calendar-date-title,
.calendar-event .calendar-summary-title,
.calendar-event .calendar-details-title
{
  font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
  display: none;
}

/* CALENDAR HEADINGS */

div#calendar {
  text-align: left;
  font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
  font-size: 1.1em;
  line-height: 1.2em;

}
div#calendar h1 {
  font-size: 2em; /* font size for h1 */
  color: #ffffff;
  background-color: #003366;
  padding-left: 0.5em;
  line-height: 1em;
  margin: 0;
}
div#calendar h2 {
  color: #ffffff;
  background-color: #336699;
  font-size: 1.5em;
  text-align: left;
/* some air around the text */
  padding-left: 0.5em;
  padding-bottom: 1px;
/* set borders around header */
  border-bottom: 1px solid #003366;
  border-left: 1.1em solid #003366;
  line-height: 1.5em;
/* and some air under the border */
  margin: 0 0 0.5em 0;
}
div#calendar h3 {
  color: #003366;
  font-size: 1.3em;
  line-height: 1.3em;
  margin: 0 0 0.5em 0;
}
div#calendar h4 {
  color: #003366;
  font-size: 1.2em;
  line-height: 1.3em;
  margin: 0 0 0.25em 0;
}
div#calendar h5 {
  color: #003366;
  font-size: 1.1em;
  line-height: 1.3em;
  margin: 0 0 0.25em 0;
}
h6 {
  color: #003366;
  font-size: 1em;
  line-height: 1.3em;
  margin: 0 0 0.25em 0;
}
/* END CALENDAR HEADINGS */

[dacue]

First, I'd like to make the entire background of an "Event Cell" a color (#cccccc for instance). My Big Calender has white "cells", except for today's date. I would like the events to show up better on the big calendar grid, so a background color would do the trick.

/.../

#big td {
  border: 1px solid black;
  vertical-align: top;
  padding: 3px;
  height: 75px;
  width: 75px;
}

I guess you probably found this out already  , but if not, add

Code: Select all

  background-color:#cccccc;

to #big td.

/dacue