Template Style Sheet Classes
Style sheets are the preferred way to set the presentation of information on a web site. Since one goal of a content management system is to separate the information from the 'look and feel', style sheets provide a great deal of power in acheiving this goal.
Style sheet are also ideal since they 'fail gracefully' - the contents are still available to older browsers or other technology that does not support style sheets. A good style sheet editor, such as TopStyle (even the free Lite version) is strongly recommended.
Section headers are enclosed in "h2" tags.
Contentor uses the following style sheet classes within the program code:
calendar-table - the table used in the small calendar
calendar-bg - the background table (forms the borders via cell spacing of calendar table)
calendar-title - the header and link of the small calendar
calendar-head - the days of the week cells on both calendars
calendar-day - a cell in the large (single month) calendar table
calendar-cell - a cell in the small calendar (in year view)
calendar-date - the date numerals as links in the large calendar. Also used for previous & next month/year links
In 'edit configuration' settings, several style sheet classes are used by default, and can be edited during setup:
breadcrumbs - used for the page navigation breadcrumbs
sidebar - for the sidebar table and the table cell that hold the section text
sidehead - for the top cell holding the header
The deafult menu program uses these classes:
menu - for the main table and regular menu entries
menuSel - for the selected main menu item (and usually hover as well)
subMenu - for a regular sub menu entry
subMenuSel - for the currently-selected sub menu item
See the simulated roll-over tip for ways to enhace the menu.
The edit mode screen also uses the style sheet '/util/editsupport.css'.
The optional photo "show" program use the style class "photo" to display the images and captions.
(added v.0.955) The membership list is displayeed in a table with a class of "memberList" and the list navigation line is enclosed in a "div" tag with an id of "memberListNav". The membership lists themselves are defined in the setup table in the database, with the default listings using table cells with the following classes: memberName, memberLabel, and memberInfo.
Example
Here's an example style sheet from the default template:
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
border : 0;
margin : 0;
padding : 0;
font-size : .8em;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
li {
margin-left: 3px;
}
a {
text-decoration: none;
color : #000099;
font-weight : bold;
}
a:hover {
text-decoration: underline;
color: #000099;
font-weight : bold;
}
.calendar-bg {
background-color: #000099;
}
.tableheader, th, .calendar-head {
font-weight: bold;
color: #FFFFFF;
background-color : #000099;
border-color : #7C7CC7;
}
.calendar-day {
background-color: #FFFFFF;
height : 5em;
vertical-align : top;
font-size : 80%;
}
.calendar-date {
background-color: #FFFFFF;
font-size : 90%;
}
.calendar-cell {
background-color: #FFFFFF;
}
a.calendar-cell {
background-color: #FFFFFF;
font-weight: bold;
}
p {
font-family: Arial, Helvetica, sans-serif;
text-align : justify;
}
h2 {
font-size: 120%;
font-weight: bold;
color: Black;
}
.menu, .calendar-title {
font-weight: bold;
color: White;
text-decoration: none;
background-color: #000099;
}
a.menu, a.calendar-title {
font-weight: bold;
color: White;
text-decoration: none;
background-color: #000099;
text-indent : .5em;
}
.menu:hover, .menuSel, .menuSel:hover, .calendar-title:hover {
font-weight: bold;
color: #FF9900;
text-decoration: none;
background-color: #000099;
text-indent : .5em;
}
.subMenu {
color: White;
font-weight: bold;
text-decoration : none;
font-size : 85%;
background-color: #000099;
}
.subMenu:hover, .subMenuSel:hover {
color: #FF9900;
font-weight: bold;
text-decoration: underline;
font-size : 85%;
background-color: #000099;
}
.subMenuSel {
color: #FF9900;
font-weight: bold;
text-decoration : none;
font-size : 85%;
background-color: #000099;
}
.sidehead {
background-color : #000099;
color : White;
font-weight : bold;
margin-bottom : .18em;
padding-top : .18em;
padding-bottom : .18em;
padding-left : .4em;
font-size: 105%;
}
.sidehead:hover {
color: #FF9900;
text-decoration: none;
}
.sidebar {
color : Black;
background-color : White;
padding-left : .4em;
padding-right : .4em;
width : 190px;
}
.folder {
list-style-type: none;
margin-left: 6px;
padding-left: 6px;
}
.folder-dir {
list-style-type: none;
list-style-image: url(util/foldericon.gif);
}
.folder-file {
list-style-position: outside;
list-style-image: url(util/preview.gif);
list-style-type: none;
}