This is tutorial three (of what now looks like four) showing you how to install and customize a multi-user calendar on your web server/site. In this tutorial I will show you how to edit the CSS files to match the site calendar to your web site more exactly. For installation tips see tutorial 1 (installing) and 2 (adding to your web page).

As I recommended in part two of this tutorial, duplicate the .CSS files that you will be editing. For those unfamiliar with CSS, it is basically used to control the look (background, text, borders, links, roll overs, etc.) of the elements of your web page. It is especially useful because all of the styles for an entire web site can be contained within one or two files.

I would recommend using a CSS editor. I’m using Adobe GoLive CS, which has a built in CSS editor. The benefit of a program like this is that you can visually see how the changes you are making will look. Macromedia Dreamweaver, and most other commercial web page design programs have a CSS editor included. If you are hand coding, you can download a CSS editor. A quick google search will provide a number of results.

The CSS file that we will edit is default.css (see code below).

 

As you can see in the code above, the different parts of the code indicate what will be effected by the changes that we make. (note - Any of the items in the code above can be changed to suit your needs or purposes.) We are going to focus specifically on the cells for the days of the week (see code below).

/*** * color and size of calendar cells. *** */

.day_cell { background-color:#EDECD8; height:80; width: 95; }

.empty_day_cell { background-color:#EEEEEE; height:80; width: 95; }

.today_cell { background-color:#F5F4ED; height:80; width: 95; }

As you can see, we can change the background color, and the height and width of each of the different cells here.

  • .day_cell (these are the cells for the days of the month.)
    • .empty_day_cell (these are the cells that fill out the beginning and end of the month but are empty [no date].)

      • .today_cell (this is, well, todays cell.) </ul> I want to make the cells match the color scheme of the site I am using it for (Berkeley Baptist Church Calendar) so I will leave the cell sizes as they are and focus on the background colors.

        If you are coding by hand and need the web color palette, you may want to visit the Visibone site for their 216-Color Webmaster’s Palette. You can use it to find the colors you want, and simply type its value into the CSS code, in place of the bold text.

        .day_cell { background-color:#EDECD8; height:80; width: 95; }

        Here is the code for the colors that I chose:

        /*** * color and size of calendar cells. *** */

        .day_cell { background-color: #fffaf0; width: 95; height: 80 }

        .empty_day_cell { background-color: #f5f5f5; width: 95; height: 80 }

        .today_cell { background-color: #b0c4de; width: 95; height: 80 }

        Next, you’ll probably want to change the column header. This includes the blue header and the text for the days of the week. We can change the background color, font size, font family and font color.

        .column_header { color: #ffffff; font-size: 12px; font-family: arial, helvetica; font-weight: bold; background-color: #7cb3d2 }

        Some other items you may want to change are as follows:

        • date_header - bold black text that indicates which month you are currently viewing.
          • day_number - the small number in the upper left of each day cell.

            • title_txt - the text that is displayed when a user adds an item to the calendar. You will probably want to edit the .title_txt A:link, .title_txt A:active, .title_txt A:visited, and .title_txt A:hover code as well. </ul> As you can see from the before and after images (below) there are a number of changes that can be made by simply modifying a few lines of code in the default.css file.

              In the next part of this tutorial, we’ll modify the pop up windows that users see when logging in and viewing event information.

              Extra Resources:

Have a question? Found this useful? Let me know at .