Commands on the HTML menu control options related to HTML output.

The HTML output can be customized by altering the style sheets created by OTD. See Customizing HTML Output.

HTML Output Directory...

Use this command to set or change the output directory for HTML files.

This directory is used for the "regular" output of the program when it is written to HTML files, but it does not control the location of HTML files that are created by the Make Calendar for Year command.

Make Calendar for Year

Use this command to create a year's worth of monthly calendars. The calendars include links to each other, as well as links to an index.

The monthly calendar output is very similar to the standard form produced when you choose HTML output.

OTD will prompt you to choose a directory for the HTML output files. Don't use the same folder as the folder you use for standard daily, weekly, or monthly output when Output Type is HTML. The monthly files produced by the Make Calendar for Year command include links to each other and to the index file, whereas the standard monthly files do not.

This feature is designed to handle about 10,000 events, which is probably more than you want to put in a calendar anyway. Handling more would take a little more effort.

Customizing HTML Output

The first time OTD writes an HTML report to a particular directory, it also writes a style sheet in a ".CSS" file. There is one .CSS file for each type of report: Day, Week, and Month.

You may control some of the appearance of the HTML output by customizing the ".CSS" file. It may sound difficult, but it isn't, especially for simple changes.

First, you need to change the proper file. The file name for the Day report is "otd_d001.css". The file name for the Week report is "otd_w001.css". The file name for the Month report is otd_m001.css.

(The "001" part of the names may change when the program is updated)

The text below is the entire contents of otd_m001.css.

  BODY {
    font-family: Arial,Helvetica;
    font-size: 16pt;
    background-color: #FFFFCC;
  }
  .MonthTitle {
    font-family: Arial,Helvetica;
    font-size: 18pt;
    font-weight: bold;
    background-color: gray;
  }
  .MonthPrevNext {
    font-family: Arial,Helvetica;
    font-size: 12pt;
    font-weight: bold;
    background-color: gray;
  }
  .MonthLink {
    font-family: Arial,Helvetica;
    font-size: 9pt;
    text-decoration: none;
  }
  .DayHeading {
    font-family: Arial,Helvetica;
    font-size: 12pt;
    font-weight: bold;
    background-color: gray;
  }
  .DayNumber {
    font-family: Arial,Helvetica;
    font-size: 9pt;
    font-weight: bold;
    text-align: right;
  }
  .Event {
    font-family: Arial,Helvetica;
    font-size: 9pt;
    background-color: silver;
  }
  .Empty {
    font-family: Arial,Helvetica;
    font-size: 9pt;
    background-color: gray;
  }
  .Name {
    font-family: Arial,Helvetica;
    font-size: 9pt;
    color: blue;
  }
  .Surname {
    font-family: Arial,Helvetica;
    font-size: 9pt;
    font-weight: bold;
    color: blue;
  }
  .Normal {
    font-family: Arial,Helvetica;
    font-size: 9pt;
  }

There are a number of different styles defined in the file. Each style defines the appearance of a different portion of the report.

BODY controls the appearance of the overall page
MonthTitle controls the appearance of the month and year that appear at the top of the calendar
MonthPrevNext controls the appearance of the previous and next months that appear in the title bar, and that link to a different month
MonthLink controls the appearance of the list of months at the bottom of the page that link to any month in the year
DayHeading controls the appearance of the day names (Sunday, Monday, etc.)
DayNumber controls the appearance of the day number (1, 2, 3, etc.)
Event controls the appearance of a box that represents a day
Empty controls the appearance of a box that is not used in the current month
Name controls the appearance of the title, givenname, and suffix parts of a name
Surname controls the appearance of the surname part of a name
Normal controls the appearance of all other text in the display of an event

You can customize the font family, font size, color (font color), background color, and font weight. The "font-family" attribute allows you to specify more than one font; the browser will use the first font in the list that is found in the font library of the user's machine.

Experiment; you can't really hurt anything. If you want to get back to the default settings, delete the file or move it outside the HTML Output directory.

For more information about style sheets, see the CSS Tutorial at w3schools.