Sample CSS Document

The default cascade style sheet is called SRRSchedule.CSS. It is automatically overwritten every time a schedule is displayed from the current report settings. The sample provide here is based on the settings that I was using at the time. So your default file will have different values.

Notes IconYou should never try to change the contents of this file yourself as your changes will be overwritten.

I have provided this sample so that you can see what all the class names are. It is beyond the scope of this help topic to provide details information about CSS files. Read more.

body {
    font-family: 'Arial Narrow';
    font-size: 8pt;
    text-align: left;
    color: #000000;
    background-color: #ffffff;
}
.textReportTitle {
    font-family: 'MS Sans Serif';
    font-size: 12pt;
    font-weight: 700;
    text-align: center;
    color: #000000;
    background-color: #ffffff;
}
.cellHeading {
    font-family: 'MS Sans Serif';
    font-size: 12pt;
    font-weight: 700;
    text-align: left;
    color: #000000;
    background-color: #804040;
}
.cellSpecialEvent {
    font-family: 'MS Sans Serif';
    font-size: 12pt;
    font-style: italic;
    text-align: center;
    color: #000000;
    background-color: #ffffff;
}
.cellNote {
    font-family: 'MS Sans Serif';
    font-size: 12pt;
    font-weight: 700;
    text-align: center;
    color: #000000;
    background-color: #ffffff;
}
table {
    border: 1px solid #000000;
    border-spacing: 0mm;
    border-collapse: collapse;
    width: 100%;
}
table td {
    border: 1px solid #000000;
    padding: 1mm;
}
.cellGap {
    max-height: none;
    padding: 0;
    height: 5mm;
    background-color: #808040;
}
.cellDate {
    text-transform: uppercase;
    background-color: #ffff80;
}
.cellHighlight {
    background-color: #00ffff;
}
/* Use this class if you do want to display any conflicts of assignment */
.cellConflict {
    /* background-color: #ff0000; */
}
.rowOdd {
    background-color: #ff8000;
}
.rowEven {
    background-color: #ff0000;
}
.cellEmpty {
    background-color: #ffffff;
}

How do you customize the CSS styles?

This is a good question and I will try to answer it as best as I can. There are two reasons why you would want to add customization:

  1. You are including custom content on your schedule and you created new classes.
  2. You want to enhance an existing class in a way that the Report Settings window does not support.

Worked Example

Task: You want to set a background colour and surrounding border for the Report Title. These settings are not exposed on the Report Settings window (scenario 2).

Step 1

Using File Explorer navigate to the following folder:

%appdata%\Meeting Schedule Assistant

Step 2

Create a new text file called SRRSchedule-XXX.CSS (replace XXX with some suitable phrase) and open it with Notepad or NotePad++.

Step 3

Add the following class to the new document:

.textReportTitle {
    background-color: #ffa500;
    border: 1px solid #000000;
}

The above class with set the background colour to orange and add a 1 pixel solid black border around it. You can read all about HTML colours here.

Notes IconMake sure you save the text file as UTF8 encoded.

Step 4

Locate the file SRRSchedule.XSL and copy it. Rename your new copy as SRRSchedule-XXX.XSL (replace XXX with some suitable phrase).

Notes IconYou should never try to change the contents of the default template.

Step 5

Right-click your duplicate file and remove the read-only attribute so that you can make changes to the file.

Step 6

Open the file with Notepad or Notepad++. Personally I use Microsoft Visual Studio which is free. But for this small change using Notepad++ (also free) is ideal. Locate line 16:

<link rel="stylesheet" type="text/css" href="SRRSchedule.css"/>

Duplicate this line and change the file name, so that you end up with:

<link rel="stylesheet" type="text/css" href="SRRSchedule.css"/>
<link rel="stylesheet" type="text/css" href="SRRSchedule-XXX.css"/>

Save your file.

Step 7

Finally, go to the Report Settings window and select your template in the Style dropdown list. That should be it!