Stylesheets

Savvy CM sites use a style sheet to determine all font and link properties. Feel free to modify the style sheet to suit the design needs of your web site. There are a few specific items required in the calendar style sheet if you are using calendar objects.

The style sheet is found in the PrimaryTemplateFiles folder and is by default named style.css. You can alter this file and name to suit your needs. If you change the name of this file, be sure to change the header object parameter for the stylesheet to match the new name of the file.

Note: You may have more than one style sheet.  If you use CSS positioning you may want to have the CSS file with the layout code done externally as you would normally do (outside of Savvy).  Place the text, link and other presentation styles you want previewed in the editor into the style listed in the header object.  This way your layout styles are not previewed in the editor.

A sample style sheet is included in your installation in the template folder (style.css).

The below properties apply to all copy within the site.

BODY, TABLE, TD, TH, DL, UL, OL, FORM, BLOCKQUOTE, CAPTION

The below properties apply to normal, visited, active and hover links throughout the site.

A:link    {text-decoration: none; color: #996600;}

A:visited {text-decoration: underline; color: #996600;}

A:active  {text-decoration: underline; color: #996600;}

A:hover   {text-decoration: underline; color: #660000;}

 

The stylesheet code for calendar display is specified in stylecalendar.css by default.  The following are the options available in that stylesheet.

The following property applies to the calendar days of the week as they appear horizontally above the calendar

.defaultcalendarHeader {COLOR: #CCCCCC; BACKGROUND-COLOR: #006699; FONT-SIZE: 10px;}

The following property applies to the color of the calendar day if there are events on that day.

.defaultcalendarCurrentDay {BACKGROUND-COLOR: #6699CC; FONT-SIZE: 10px;}

The following property applies to the color of the calendar day if there are no events on that day

.defaultcalendarOffDay {BACKGROUND-COLOR: #CED1D8; FONT-SIZE: 10px;}

The following property applies to the background color of the event detail description.

.defaultcalendarEvent {BACKGROUND-COLOR: #eeeeee; FONT-SIZE: 10px; border: 1px solid#cccccc;}

The following properties apply to the month forward and backward links.

.defaultcalendarForwardBackLink:link,

.defaultcalendarForwardBackLink:visited,

.defaultcalendarForwardBackLink:active {COLOR: #000099}

.defaultcalendarForwardBackLink:hover {COLOR: #3333cc}

The following properties apply to the event links within the calendar.

.defaultcalendarLink:link,

.defaultcalendarLink:visited,

.defaultcalendarLink:active {COLOR: #000099; FONT-SIZE: 10px;}

.defaultcalendarLink:hover {COLOR: #3333cc; FONT-SIZE: 10px;}