Stylesheets

Template and Page Styles

Savvy CM sites embeds a stylesheet to all templates.  By default this is stye.css.  It is used to alter the style of your pages and also used to within the editor to preview styles. 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.

Navigation

The navigation object also uses a style sheet.  This style is specified by the nav object by naming the folder that style is in.

/actionfiles/dnav/cssmenues/skins/[stylefolder]

The style sheets can be complex.  We have provided a handfull of samples you may use as is, or modify to suit your needs.  In addition you can create your own CSS files for the nav object.

To create a new style sheet copy an existing skin folder such as arktic_orange and paste it in with a new name.  Next open the menu.css file and search/replace the text 'arktic_orange' with your new skin name.  Make sure the new folder name and skin name is the same.  As an example, if you copied arktic_orange and made a new skin you could name the new folder 'brilliant_yellow', then in the menu.css file, search and replace 'arktic_orange' with 'brilliant_yellow' and you are all set.   Next modify the CSS at will. 

The nav object renders each nav item as a list item (LI).  As such there are many classes applied based on the state of the navigation elements.  Below is a sample that shows you what classes you can find and use/style.

Example Nav CSS from www.besavvy.com/products.cfm

Note the classes lev1, first, haschildren, and selected.  These classes among others help you control how the navigation looks at all times.  You can customize colors based on order of elements, if they are selected (products.cfm is labeled selected as that is the page we are viewing), if they have children (for down arrows or other visual cues), etc.  

A useful tool to further analyze what classes are applied to elements is Firebug, a FireFox addon.  Firebug will slow your browser down a lot when run, so only enable it when you want to inspect style elements of a site.

<div class="kthorizontal ktopts_showtimeout_100 ktopts_hidetimeout_100 ktopts_imgreplace_no ktopts_imgreplacestyle_img ktopts_imgdir_ ktopts_imgnames_" style="width: 649px; height: 26px;">

<ul class="lev1 clearfix" style="width: 649px; height: 26px;">

<li class="lev1 pos1 lev1_pos1 first lev1_first">

<a class="lev1 pos1 lev1_pos1 first lev1_first" target="_self" href="/client_list.cfm">Client List</a>

</li>

<li class="lev1 pos2 lev1_pos2 haschildren lev1_haschildren">

<a class="lev1 pos2 lev1_pos2 haschildren lev1_haschildren" target="_self" href="/why_savvy.cfm">Why Savvy</a>

<ul>

<li>

<a target="_self" href="/testimonials.cfm">Testimonials</a>

</li>

<li>

<a target="_self" href="/case_studies.cfm">Case Studies</a>

</li>

</ul>

</li>

<li class="selected lev1 pos3 lev1_pos3 haschildren lev1_haschildren lev1_selected">

<a class="lev1 pos3 lev1_pos3 haschildren lev1_haschildren selected lev1_selected" target="_self" href="/products.cfm">Products</a>

<ul>

<li>

<a target="_self" href="/screenshots.cfm">Screenshots</a>

</li>

<li>

<a target="_self" href="/system_requirements.cfm">System Requirements</a>

</li>

<li>

<a target="_self" href="/Demo_info.cfm">Demos</a>

</li>

<li>

<a target="_self" href="/pricing.cfm">Pricing</a>

</li>

</ul>

</li>

<li class="lev1 pos4 lev1_pos4">

</li>

<li class="lev1 pos5 lev1_pos5 last lev1_last haschildren lev1_haschildren">

</li>

</ul>

</div>

Calendar

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;}