Menu
Webinars Essentials: Navigation & the Calendar
Help Center
back Advanced users can add functionality by adding the following scripts and files to their website:

The Calendar Token

Add to an area of your page and you will get a small monthly calendar that looks simular to this:

June 2017
28 29 30 31 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 1


Use the token without the need for any extra images or CSS if you want this look!

With some extra CSS and some small images, we can change the looks of the calendar token.
 
On a website is a deep purple gackground, the calendar token will look like this:
On a deep brown website the calendar token would look like this:
 

To add color to the calendar token download the following images and upload them to your "template" folder in "Image & File Management."

calendar_button.png
calendar_button2.png
calendar_button3.png
calendar_button_day.png
 

Here is the CSS code to copy and paste to your "Global CSS."

Calendar Token Enhancement CSS
 
/*  Custom  # #  calendar # # CSS */

#calendartoken_wrapper {
    background-color: #4A117E; /*  Change this color to a dark color matching your website color scheme */
}
#calendartoken_wrapper a {
    color: #CB92FF; /*  Change this color to a light color matching your website color scheme */
}

#calendartoken_Explain_wrapper {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #000000 -moz-use-text-color -moz-use-text-color #000000;
    border-image: none;
    border-style: solid none none solid;
    border-width: 1px medium medium 1px;
    margin: 0 auto;
    text-align: center;
    width: 30px;
}
#calendartoken_wrapper td.month, #calendartoken_Explain_wrapper td.month {
	text-align:center;
	font-family:Georgia,"Times New Roman",Times,serif;
	height: 28px;
}
#calendartoken_Explain_wrapper tr, #calendartoken_Explain2_wrapper tr {
    height: 28.57px;
}
#calendartoken_wrapper tr {
	background-image: url(http://help.adventistchurchconnect.com/site/1/template/calendar_button2.png") !important;
	background-repeat: no-repeat;
}
#calendartoken_wrapper td.month {
	background-image: url(http://help.adventistchurchconnect.com/site/1/template/calendar_button3.png") !important;
	background-repeat: no-repeat;
	color:#FFFFFF !important;
	text-indent:4px;
	text-align:center;
}
#calendartoken_wrapper td.weekend {
	background-color: transparent;
	background-image: none;
}
#calendartoken_wrapper td.weekend.has_event {
	background-image: url(http://help.adventistchurchconnect.com/site/1/template/calendar_button.png") !important;
	background-repeat: no-repeat;
	color:#FFFFFF !important;
	text-indent:4px;
	text-align:center;
	background-color: transparent;
}
#calendartoken_wrapper td.has_event {
	background-color: transparent;
}
td.has_event {
	background-image:url(http://help.adventistchurchconnect.com/site/1/template/calendar_button.png") !important;
	background-repeat:no-repeat;
	color:#FFFFFF !important;
	text-indent:4px;
	text-align:center;
}
td.has_event a {
	color:#FFFFFF !important;
	font-weight:bold;
}
td.today {
	background-image:url(http://help.adventistchurchconnect.com/site/1/template/calendar_button_day.png") !important;
	background-repeat:no-repeat;
	color:#272317 !important;
	text-indent:4px;
	text-align:center;
	text-decoration: underline;
}
td.today a {
	color:#272317 !important;
	font-weight:bold;
}
.month a, .month a:active{
	color:#FFFFFF !important;
	text-indent:4px;
	text-align:center;
}
#calendartoken_wrapper td{
	border-width: medium 1px 1px medium;
}
/*  End of Custom # # calendar # # CSS */

Events New Token Thumbnail Image

Automaticly add a border to each thumbnail image listed in the calendar events.

Before:
After:
 
Eventsnew Token Thumbnail Image Border CSS
 
/*  Custom Thumbnail border CSS */
/*  This custom adds a border of color with a slight drop shadow to every thumbnail image in the # # eventsnew # # token */
.eventsnew img {
    background-color: #FFFFFF;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    float: left;
    margin-right: 16px;
    padding: 4px;
}
/*  End of Custom Thumbnail border CSS */