DayPilot Knowledge Base

AJAX Calendar/Scheduling Controls
DayPilot Pro (AJAX Calendar Control)
» DayPilot AJAX Calendar
DayPilot Pro (AJAX Monthly Calendar Control)
» DayPilot AJAX Monthly Calendar
DayPilot Pro (AJAX Scheduler Control)
» DayPilot AJAX Scheduler
DayPilot » Knowledge Base » Sample Navigator CSS Theme

Sample Navigator CSS Theme

Last revision: Mar 20, 2013

 A sample navigator CSS theme. Uses CSS3 features (gradients). You can find this theme in the DayPilot Pro package (Demo/Themes/navigator_green.css).

See Also

Theme Source (scheduler_green.css)

/* navigator styles */

.navigator_green_main 
{
	border-left: 1px solid #A0A0A0;
	border-right: 1px solid #A0A0A0;
	border-bottom: 1px solid #A0A0A0;
    background-color: white;
    color: #000000;
}

.navigator_green_month {
    font-family: Tahoma;
    font-size: 8pt;
    /*border: 1px solid black;*/
}
.navigator_green_day {
    color: black;
    /*background-color: white;*/
}
.navigator_green_weekend {
    background-color: #f0f0f0;
}
.navigator_green_dayheader {
    color: black;
}

.navigator_green_line 
{
	border-bottom: 1px solid #A0A0A0;
}

.navigator_green_dayother {
    color: gray;
}
.navigator_green_todaybox
{
	border: 1px solid red;
}

.navigator_green_select 
{
    background-color: #ddd;
}
.navigator_green_title, .navigator_green_titleleft, .navigator_green_titleright {
    border-top: 1px solid #A0A0A0;

	color: #ffffff;
	background: #666;
	background: -moz-linear-gradient(
		top,
		#777 0%,
		#666);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#777),
		to(#666));
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#777777", endColorStr="#666666");
	text-shadow:
		0px -1px 1px rgba(000,000,000,0.2),
		0px 1px 0px rgba(255,255,255,0.3);

}
.navigator_green_busy {
	font-weight: bold;
}

Related

Sample Monthly Calendar CSS Theme
Sample Calendar CSS Theme
Sample Scheduler CSS Theme
Default Bubble CSS Theme