Selecting and Styling Promotion Spuds

Which versions of Series25 components are you using?

These articles have been prepared for schools using 25Live Pro and 25Live Publisher


Promotion spuds are meant to be used on pages that do not contain your main calendar spud with the aim of catching visitors' attention and directing them to your full calendar view.  That means that promotion spuds are connected very closely to the Featured Event functionality in 25Live Publisher.  For instance, you can configure promotion spuds to only display featured events and if you really want to leverage featured events on the calendar view, you can use multiple feature levels with their own color coding and styling. 

There are thirteen promotion spuds available for use with your calendars.  Most of these spuds are meant to fit in small areas on your web page and serve as a teaser to the campus events calendar.  There is only one exception, the Event Slider promotion spud produces an actual very large slider that can feature events.  It needs much more screen real estate to function effectively.  A quick review of the various promotion spuds will assist in explaining how they are constructed and what they provide.

Date Finder

The Date Finder promotion spud is a small month calendar used to select a specific date.  Dates with events on them become small links to a list of events happening on that day generated by the Day Summary promotion spud.  Among the promotion spuds, the Date Finder coupled with its use of the Day Summary is the only promotion spud that often resides on the same page as the main calendar view.  The Date Finder is one of two promotion spuds added to every newly created calendar in 25Live Publisher by default.

Setting Up and Styling the Date Finder Promotion Spud 

One of the two default promotion spuds created with each new calendar is the Date Finder.  To begin editing the Settings and Styles for the Date Finder promotion spud:

1. Locate the Date Finder promotion spud on the Promotion Spuds tab.

2. In the Date Finder promotion spud region, locate and click the Edit Settings & Styles link to begin setting up and styling this promotion spud.

Important Things to Note About the Promotion Spuds

There are a couple of important things to note about each promotion spud group.  First, notice that the Promotion Spud contains a link to Clone Spud which allows you to completely alter the formatting of the promotion spud for a different look and feel on a differently styled campus web page.

Also, note that there is a checkbox immediately below the spud code that you copy and paste on your website that allows you to indicate that the Spud will appear on the same page as the main calendar spud.  Since the Date Finder often does appear on the same page as the calendar view, you would need to place a check in this box.


Adding the check alters the spud code by one line removing the line of code that reads teaserBase with a link to the page where the main calendar resides (outlined in the red box in the screen capture below).  If the promotion spud is to appear on the same page as the calendar, it does not need a link to get visitors to the main calendar view.

3. The Edit Settings for Date Finder page will load containing two tabs:  Settings and Styles.

Settings

The Settings tab contains the Popup Settings for the Date Finder promotion spud.  The Popup Settings contains only one setting for the Popup details spud.  The drop-down menu provides two options:  Day Summary or None.  Since the purpose of this promotion spud is to provide a drop-down list of events on any given date selected, you should always set this option to the default of the Day Summary.    Also, note that the Edit Popup Settings link located below the setting will take you to the Day Summary promotion spud's settings and styles to set up and style the Day Summary.

Styles

The Styles tab for the Date Finder promotion spud contains one of the largest set of style settings for any of the promotion spuds.  The Styles are arranged in nine groups. Click to jump to a group of Styles: 

HeaderPaging Buttons BorderCalendar Days
Day of Week HeadingToday WeekdayWeekend
Other Month Days


Header 

The Header styles control the formatting for displaying the header for the Date Finder.

Font

The Font setting controls the font used for the header text.  This setting is inherited from the Base font style set in the Global Settings.  For consistency of fonts across your calendar implementation, you should leave this setting to the default unless you are using a different font stack for header text.

Size

The Size setting controls the font's size used in the header text.  The default value is set to 10 points.  If you are using relative length fonts, you will want to divide 10 by 10 to arrive at either 1rem or 1em.

Text Color

The Text color setting controls the font's color used in displaying the header text.  The default value is black (#000000).  In some cases, you may want your header text to vary from the black text appearing in content regions of your calendars.  If so, enter a hexadecimal value for a color for headers from your campus website's approved color palette.

Text Weight 

The Text weight setting controls the darkness of the header text.  There are three options:  normal, medium, and bold.  By default, this style is set to Bold. As headers are usually presented in bold-face fonts it is a best practice to accept the default value.

Text Transform

The Text transform setting provides a number of options for transforming the header text.  The default value is set to none to format the header text basically in initial capitals.  If you want to transform the base setting, you may select any of the three other options.

Header Background Color

The Header background color setting controls what background is set behind the header text.  It defaults to transparent which typically is not a good idea as the background of your website will bleed through to the control and could create readability issues.  You should set it to white (#ffffff) or another color of your choosing. 

Header Border Color

The Header border color setting controls the border surrounding the header text.  It also defaults to transparent which may or may not be what you want.  If you want a border around the header, set another hexadecimal color.  For instance, you might select the border color you set in your global settings.  A transparent border is likely to produce no border or a border color that is coming through from your website.  A best practice is to set a border color and then adjust as necessary once you preview your results.

Header Padding

The Header padding setting controls spacing around the header text.  Top, right, bottom, and left padding are all set to default values of 0px.  If you want to have more spacing above or below or to the right or left of the header, set a new pixel value in the appropriate text box.

Paging Buttons

The Paging Buttons group contains styles that control the formatting of the paging buttons for the Date Finder promotion spud.

Arrow Size

The Arrow size setting controls the size of the arrows used for advancing or returning a month on the Date Finder calendar.  The default value is set to 7px.  If you want slightly larger arrows, you would increase the value in this textbox.  Remember, that these arrows are on a small calendar so be sure not to increase the size inordinately large.

Button Width

The Button width setting controls the width of each of the buttons that contain the arrow.  If you want a larger width, increase the default value of 15px but keep in mind the size of this small calendar. 

Button Height

The Button height setting controls the height of each of the buttons that contain the arrow.  If you want a larger height, increase the default value of 11px but keep in mind the size of this small calendar.

Button Separation

The Button separation setting essentially sets padding between the back and forward buttons.  If you want more space between the buttons, you may alter the default value of 2px.

Button Corner Rounding

The Button corner rounding setting provides two types of rounding:  outer and inner.  You set outer rounding to introduce a small curve to the outside edges of the button.  It is customary to have a rounding effect on the outer edges while having a square edge on the inner edges of the button.  The default values of 3px for outer rounding and 0px for inner rounding produces an aesthetic effect to the buttons.  If you want square edges on all sides of the button, set both outer and inner rounding to 0px.

Border

The Border group only contains the Calendar border color.  It defaults to #cccccc which is a slightly darker shade of gray.  The small arrow button to the right of the drop-down menu will pick up the border color from your global settings and apply it here.  It is a best practice to have borders set to the same value for consistency across your calendar implementation.

Calendar Days

The Calendar Days group contains stylistic settings for the font for the calendar days as well as containing stylistic settings for calendar days with events on them.

Calendar Font

The Calendar font setting is inherited from the Base font set in your global settings.  It is a best practice to leave this default value in place as it provides consistency across all of your calendar elements.

Calendar Text Size

The Calendar text size setting controls the font's size for calendar days.  It defaults to a value of 8 points.  If you are using relative length fonts like rem or em, you should divide 8 by 10 to arrive at font sizes of either 0.8rem or 0.8em. 

Calendar Text Color

The Calendar text color setting controls the color of the text on the calendar.  The default value is for black (#000000) text.  However, if your calendar's background is a dark color you will need to set a light color for text.

Calendar Background Color

The Calendar background color setting controls the background color for this calendar.  The default value is set it white (#ffffff).  If you are using black text, a white background is a best practice.  However, you may use any colors from your website's color palette.

Link Text Decoration

The Link text decoration setting controls whether or not links are underlined by default or not.  The default value is set to none.  If you want links to be underlined by default on the calendar, select underline from the drop-down menu.

Link Hover Text Decoration

The Link hover text decoration setting controls the behavior of links when the calendar visitor rolls over them.  If you have set the Link text decoration to none, you will want to set this setting to underline.

Calendar Days (with events)

Calendar days (with events) sub-group of stylistic settings govern the links that provide the summary of events on days where there are events.  Days without events do not have a link.

Calendar Text Weight

The Calendar text weight setting controls the darkness of the text for days with events.  The default value is set to normal text.  You may also choose to have the font's weight output in medium weight or bold weight.  The better practice is to use normal weight for the calendar days.

Link Color

The Link color settings control the behavior of the link and the hover link for the days with events scheduled.  These settings are inherited from your Base link color settings set in the global settings.  For consistency of how links behave across your calendar implementation, you should not alter these settings.

Day of Week Heading

The Day of Week Heading group contains stylistic settings for how the day of the week headings will be formatted.  All of these are inherited styles that you may change, but it is a best practice to accept the defaults.  Note that the Size setting is inherited from the Calendar text size so once you set that in the Calendar Days styles, it updates this field.

Today

The Today group contains stylistic settings for how today's date will display and be formatted on the calendar.  These settings are also all inherited from either your global settings or your Calendar Days settings.  It is a best practice to accept these default values.

Weekday

The Weekday group contains stylistic settings for how the weekdays will be formatted on the calendar.  These settings are also all inherited from either your global settings or your Calendar Days settings.  It is a best practice to accept these default values.

Weekend

The Weekend group contains stylistic settings for how the weekend days will be formatted on the calendar.  These settings are also all inherited from either your global settings or your Calendar Days settings.  It is a best practice to accept these default values.

Other Month Days

The Other Month Days group contains stylistic settings for the next months days that display at the bottom of a calendar month. This allows a visitor to peek ahead a couple of days into the next month or look back a couple of days to past events.  Most all of these settings are inherited either from your global settings or the Calendar Days settings.  It is a best practice to accept these default values.  One setting is not inherited, the Background color setting for the other month days.  The default value is for these days to display not on a white background but on an off-white background (#f9f9f9).  If you have set a dark background for the calendar, you may have to alter these choices.  However, if you are using a white calendar background, the default value set here works perfectly well to identify these days differently from the actual month's days.

Once you are satisfied with your choices, you may click the OK button to save your settings.  If you want to preview your settings prior to saving them, click the Preview button.


Day Summary

The Day Summary promotion spud is a summary list of events on a single day.  It can be used as a standalone spud but is also used as the pop-up on the Date Finder promotion spud.  Regardless, of whether you use it independently if you intend on using the Date Finder promotion spud, you need to also configure the Day Summary with appropriate settings and styles.  The Day Summary is the second of the two promotion spuds added to every newly created calendar in 25Live Publisher by default.

Setting Up and Styling the Day Summary Promotion Spud

The Day Summary promotion spud is the other promotion spud created with each new calendar created in 25Live Publisher.  It may function as a standalone spud but typically functions as the popup list of events called by clicking a link for a day's events on the Date Finder promotion spud.  If you intend to use the Date Finder, you will need to style this promotion spud as well.  To edit the Settings and Styles for the Day Summary promotion spud:

  1. Locate the Day Summary promotion spud on the Promotion Spuds tab.
  2. In the Day Summary promotion spud region, locate and click the Edit Settings & Styles link to begin setting up and styling this promotion spud.
  3. The Edit Settings for Day Summary page will load containing two tabs:  Settings and Styles.

Settings

The Settings tab contains setting controlling the output of events on the drop-down list. These settings are arranged in six groups including Events, Display Options, Filter/Search Options, Day Header Format, Event Registration, and Date/Time Options.

Events

This group contains two settings controlling how the events will be sorted and what to do with ongoing (repeating) events.

Sort Order

Controls the order in which events are displayed. (Most calendars use Ascending (Future). )

  • Ascending (Future) arranges events from the past ascending into the future.  
  • Descending (Past) arranges events from the future descending into the past.

Ongoing Events

Captures repeating events that are ongoing but may have started in the past. It is recommended that this setting is checked.

Display Options

This group contains settings that control what text to provide when there are no events as well as what appears when a calendar visitor clicks an event title link.

No Events Message

Allows you to enter your own message to display when there are no upcoming events to display.  Simply place your text in the textbox for it to replace the default text.

Event Title Link

Determines the view that opens when a calendar visitor clicks an event title.  There are two options as to what will open when a calendar visitor clicks the title link:  Event Detail View or Event Actions.  It's recommended to send users to the Event Details rather than the Event Actions, as they may take further event actions on the detail view.

Filter/Search Options 

This group controls whether or not events in the calendar view spud should be filtered when visitors perform a search or filter operation.  The default setting is Yes and for the filter to work effectively, this choice is recommended.

Day Header Format 

This group contains settings that control how the date and day of the week will be formatted.

Date format 

Controls how dates are formatted in the Day Header.  The drop-down list includes numerous different formats for you to choose from. The default is for the month to be spelled out with the date and the year in four-digit format.

Day of the week 

Controls how the day of the week will appear in the Day Header.  You have four options which include two abbreviated day format options, a fully spelled out day option, and an option for none to not display the day of the week in the Day Header.

Event Registration 

This group contains only one setting, Show sign-up buttons.  The default value is set to Yes.  However, since 25Live Publisher does not make use of the event registration functionality, you should change this setting to No by clicking in its radio button.

Date/Time Options

The Date/Time Options group contains settings for how the dates and times will be formatted in the filter.

Label ongoing events 

Controls whether or not events with multiple occurrences will be labeled as an ongoing event. It is a best practice to label your ongoing events so that calendar visitors will realize that this is a part of a series of events or a series of performances.

Ongoing events label 

Controls the label that will be used in front of the end date of the event occurrences.  It defaults to Ongoing through but you may alter this by clicking in the textbox and providing your own language.

Date format 

Controls the format of the date in the filtered results.  It defaults to an abbreviated Month (e.g., Jan 20, 2020).  If you don't like that approach, click the drop-down menu to see the multiple options for formatting the date and select one from the list.

Hide year when grouping 

Controls whether the year is dropped from the dates if you are grouping events where the grouping element contains the year.  The default setting is set to Yes.  It is a best practice to drop the year when you are grouping by a date format that includes the year.

Hide event dates when grouping by day 

Controls whether the date is dropped entirely when the calendar view is grouping by day.  The default setting is set to Yes.  It is a best practice to drop the date in this instance.

Day of the week 

Controls whether the day of the week is included with dates. 

Hide year 

Controls whether or not the year appears in dates on the filter.  The default setting of No is a best practice.

Show end date 

Controls whether or not the end date is displayed for events with repeating occurrences.  The default setting of Yes is a best practice.

Show time 

Controls whether or not the time is displayed for events.  The default setting of Yes is an obvious choice and a best practice as most calendar visitors will expect to see the time of the event without proceeding to detail views.

Time format 

Controls how the time is formatted.  Best practice is to select the option from the dropdown that matches the time formatting behavior on your website.

Time zone display 

Controls whether or not the timezone displays.  There are three options:  None, Long, and Short.  The default value is set to None which will be correct for the majority of calendars.  If you are at an institution with campuses in multiple time zones, you should include either the long or short form of the time zone to assist calendar visitors from the other campuses in converting the times of events.  This would be especially important if some of your events have online connections for people to participate across campuses.

Styles

The Styles tab contains stylistic settings for the Day Summary promo spud.  The styles are arranged in four groups:  General, Header, Events, and Border Rounded Corners.

General

 The General group contains settings govern the border color and size as well as the background color of the promotion spud.

Border color 

This style is inherited from the Base border color style set in this calendar's global settings.  It is a best practice to use the same border color across all of your calendar spuds for consistency of design.

Border size 

This style controls the width of the border surrounding the promotion spud.  It defaults to a 1px value which is normal pixel sizing for borders in the majority of applications and web pages.  If you do not want a border around the control, set this value to 0px.

Background color 

This style controls the background color of the promotion spud.  Typically, the spud should contain a background of white (#ffffff) but you may choose other colors from your campus's color palette.  Your choice here will impact color choices in the other groups.

Header 

This group contains stylistic settings for the Header text for the promotion spud.  The settings control the font and its size, the font's color, the background color behind the header section, and whether or not you are transforming the text.

Events

Font

This style controls which font stack is used for event text.  This style is inherited from the Base font style set in your global settings.  It is a best practice to use this inherited value for consistency of design across all your calendar spuds.

Text Size

The Text size style controls the size of event text.  It defaults to a value of 8 points.  If you are using relative length fonts like rem or em, you should divide 8 by 10 to arrive at a value of either 0.8rem or 0.8em.

Title link color

Controls the colors of the links when viewed and when hovered over by the mouse pointer.  These two stylistic settings are inherited from the Base link color styles set in the global settings for this calendar.  For consistency in the behavior of your links, you should always use the inherited settings.

Title link decoration

Controls whether or not links are underlined by default or not.  This stylistic setting is inherited from the Base link text decoration style set in the global settings of this calendar.  You should accept the inherited setting for consistency of behavior in your links.

Title link hover decoration

Controls whether or not links are underlined by default or not.  This stylistic setting is inherited from the Base link hover text decoration style set in the global settings of this calendar.  You should accept the inherited setting for consistency of behavior in your links.

Signup Button Spacing

The Signup button spacing style controls the padding around the signup button.  Since you turned off the registration setting in the Settings tab, you may leave the default settings as is as no signup button will appear.

Border Rounded Corners

The Border Rounded Corners group contains only one setting, Border corner rounding.  This stylistic setting is inherited from the Base border corner rounding style set in your global settings.  Note that this setting is not compatible with versions of Internet Explorer including 8 and prior.  In those browsers, the corners will be square.


Once you are satisfied with your settings and styles, click the OK button to save them.  You may also preview those settings prior to saving them by clicking the Preview button.

Event Slider

The Event Slider promotion spud is a table of upcoming events displaying either the event image or the detail image next to each event.  The Event Slider lends itself to promoting major events that a campus would want a large external audience to attend.  You may control the total number of slides to display, the number of slides to appear on each page, and the rate at which the slides change.  This promotion spud lends itself to making excellent use of the featured levels for featured events.

Setting Up and Styling the Event Slider Promotion Spud

In the case of featured events, you may want to build a slider with a large image and event information for the featured events.  In this situation, you may want to make use of the Event Slider promotion spud.

To add the Event Slider promotion spud to your calendar:

Locate the Add a Promotion Spud button in the upper right corner of the Promotion spuds area and click it.

The Add Spud window will open containing icons for each of the available promotion spuds.  Locate the Event Slider promotion spud and click to select it.  Then click the OK button to confirm your selection, add it to the calendar, and begin reviewing settings and styles.

The Edit Settings for Event Slider window will open containing two tabs:  Settings and Styles.  The Settings and Styles for the Event Slider are one of the most complex of any spud in 25Live Publisher.

The Settings control what elements of the event are displayed on the slider, how those events are sorted, how many events will display, whether or not only featured events will display, which image you will use, and more. Click to jump to one of the eleven Settings groups: 

Display SettingsEventsFeatured Event SettingsImage Options
Slider SettingsInline ImagesFilter/Search OptionsDisplay Options
Date Icon SettingsEvent RegistrationDate/Time Options

Display Settings

The Display Settings group controls which fields from the event information will display next to the image on the event slider.  The default fields are Title, Event Date/Time, Location or Venue, and Event Detail Link.  As you can see in the screen capture, you may alter the order of the fields by clicking the up or down arrows to the left of the Field column or by altering the Order Number to the left of the arrows.  You may also change the Label for the Event Detail Link from the default More... to the wording of your choice by replacing that text.  The Title and Location or Venue fields allow you to set a Max Length for those items.  Additionally, you can check the Remove box to remove an item from the list.  That item will be removed when you click the Update button.
You may also add new fields to the Field list by clicking the drop-down menu labeled add new field.  For instance, if you want the Event Description from 25Live Pro, you would select the Description item from the drop-down menu.

Events

The Events group contains settings that govern the events that will be contained on the Event Slider.

Sort Order

Controls whether events will be arranged Ascending (Future) or Descending (Past).  As most calendars display events from current to future, it is a best practice to set this to Ascending (Future).

Start Date

The Start date setting controls the starting date for the events that will be included on the Event Slider.  The default value is set so that the events displayed will start with the Current day.  However, you have any number of options to choose from.  If you want a different Start date, simply select one of the provided options.

End Date

The End date setting controls the ending date for the events that will be included on the Event Slider.  Think of this setting as the boundary of how far out into the future you will allow the Event Slider to look into the future.  The default value is set to look from the Current day forward for 180 days.  Obviously, there are multiple options including No end date.  The No end date option will review all of the entries on your calendar contained within the default setting of Days in the future set in the Administration Utility → Integration Tab → Publisher Settings.  So, for instance, if you set your default settings for each feed to contain up to 500 days of events in the future.  The No end date setting will look for featured events on all 500 days.

Maximum Number of Events

The Maximum number of events setting controls how many events will be displayed on the Event Slider.  Essentially, this equates to the number of slides on the slider.  The default value is set to a maximum of 5 events but you may increase or decrease this as needed.  As you will see later, you might increase the number of events if you decide later to display two or more slides at the same time.

Ongoing Events

The Ongoing events setting controls whether or not events that started in the past will be included on the event slider.  This checkbox essentially covers any events with repeating occurrences that are featured events and started in the past.  The checkbox is checked by default and it is a best practice to accept this default setting.

The Featured Event Settings group controls which featured levels will display in the slider.

Only Show Levels

The Only show levels setting controls which featured events will be displayed on this Event Slider.  With the new ability in 25Live to add a menu of responses to event custom attributes, you may build that same list in 25Live Pro for selection and then make full use of it here in 25Live Publisher.  All of the featured levels you have built-in Publisher will display if you click on the box displaying a down arrow to reveal the drop-down menu.  Place a checkmark in the boxes of the featured levels you want to display on this promotion spud.  For instance, if I were building a promotion spud for training events, I would likely select both Computer Training and Leadership Training.  Taking this training calendar one step further, we could on our calendar view set the featured level settings and styles to color code these events with the label "Featured Event" being Computer Training with its own color-coded date icon.  If, on the other hand, this calendar is focusing on all campus events that we want an audience to attend, I might only choose to display the Premier featured level.  With the Clone Spud functionality, I can have event sliders for multiple different uses with different styling for each.

Auto Fill Empty Spaces

The Auto fill empty spaces setting controls whether or not empty "featured" slides will be populated with regular events.  The default setting is No which means that only events that have a featured level that matches your selections above will be displayed on the slider.  In instances where you may not have enough featured events on an ongoing basis, setting this option to Yes will fill out the empty slides with the current non-featured events.

Image Options

The Image Options group controls image positioning, size, type, and what to do when there is no image on a featured event.

Image Position

The Image position setting determines where the image will be displayed on the slider.  You may position the image to the left or right of the event text or above (top) or below (bottom) the event text.  The default setting is Left.

Max Image Width (Pixels)

The Max image width (pixels) setting specifies the maximum width of the image on the slide.  The default value of 200px is relatively small for the normal slider.  Since the event slider's slides are by default 400px wide, it is possible to include a 350px width while giving plenty of space for the event text.

Max Image Height (Pixels)

The Max image height (pixels) setting specifies the maximum height of the image on the slide.  As with width, the default value of 200px is relatively small for the normal slider.  A 350px height will work well for most sliders if there isn't a large amount of text above or below the image.

Image Type

The Image type setting gives you the option to display either the Event image or the Detail Image.  The default value is set to the Event Image which is the thumbnail-sized image.  A best practice is to use the Detail Image for the event slider promotion spud.

Remove Missing Image Space

The Remove missing image space setting controls removal of the space where an image would be positioned for missing event images.  If you have events without images, you should leave the default setting of Yes here.  However, if your featured events all include images, you should set this to No.  Typically, if you are filling in empty slider slots with events that are not featured, you will want to use this functionality (Yes).

Event Sliders and Images

The Event Slider is meant to feature events using both images and event text.  You should make every attempt to ensure that any events that will be displayed on your event slider have either an event image or a detail image to draw upon.  Ideally, the detail image is a better option since it is already a larger-sized image.

Slider Settings 

The Slider Settings group contains all of the controls needed to make the slider run including navigation, the speed, and timing on the advance of slides, how many slides to move at once as well as how many visible slides you see at one time.  This is one of the more complex areas to configure among all the promotion spuds.

Mode 

The Mode setting controls the transition type for the slides.  There are three options:  advance slides in a horizontal slide, advance slides, in a vertical slide, or advance slides with a Fade.  The default value is set to Horizontal as that is the predominant way most sliders function.  However, each of these functions well and may be used equally well on the event slider.

Speed

Controls how long it takes in milliseconds for the slider to transition between events.  When setting your slide transition rate, 1000 milliseconds = 1 second.  So the default setting of 500 milliseconds is half a second.  If you prefer a slower transition, increase the number of milliseconds between each transition.

Pause Time

Controls how long in milliseconds the slider pauses on each event.  The default value of 5000 milliseconds means that each slide remains on screen for 5 seconds.  If you want visitors to have longer to read the contents of a slide, increase the amount of time of the pause by setting a value above 5000 milliseconds.

Even Spacing

Sets the distance between the image and the event text.  The default value of Yes means that the slider uses the maximum image width and height to maintain a consistent distance between the image and the event information.  Choosing No for this setting means that the slider ignores the maximum image width and height and aligns the event information right next to the image.  From a design and a readability standpoint, a best practice is to always ensure that you choose Yes for this setting.

Continuous Loop

Determines what will happen when you click Next after the last slide.  The default setting of Yes means that clicking Next will transition you from the last slide to the first slide.

HIde Controls On End

Determines whether you hide the controls on the first or the last slides.  This setting only functions if you have responded Yes to the Continuous Loop option.  The default value of No is the better approach.

Show Pagers

Shows the number of events and lets the visitor to the slider page between them.  The default value is Yes which turns on this functionality and is a best practice for your event sliders.

Show Next/ Previous

Controls whether or not you display the next and previous arrows on the slider.  Since your slider advances automatically and you are showing the pagers, the default value of No is a typical choice.  However, you may use this functionality by choosing Yes.

Show Play/Pause

Controls whether or not you display the play and pause buttons on the slider.  Again, since your slider advances automatically and you control how long a slide remains on the screen, the better option is to leave the default setting of No for this option.

Auto Start

Controls whether the event slider starts when the web page loads.  This setting is turned on by default (Yes).  If you set this option to No, visitors must use controls to start the slider which is typically not a best practice with sliders.

Pause On Hover

Controls whether or not the slider stops transitioning when a visitor's mouse rolls over the event slide.  The default setting is Yes and is a best practice as it allows the visitor to pause the slide transitions long enough to read and then click links for further information.

Start Delay Time

Controls whether or not there is a delay before the slider starts.  This value is set in seconds.  The default value of means that the slider starts immediately.  If you want to delay that, add a value greater than 0 to allow the event slider to start after the visitor loads the web page.

Maximum Visible Slides

Controls the number of events to show simultaneously on a slide.  If the slider size increases, each event size will likely increase to fill the available space.  If you wanted to have a larger number of total events displaying (set in the Maximum number of events setting earlier), you could increase this value to 2 events per slide still arriving at just 5 slides.

Move Slides

Controls the number of events to move in one transition of the event slider.  The value in this field must be greater than or equal to 1 and less than or equal to the Maximum Visible Slides.  If this item is left blank, the Publisher will interpret that as a default of the number of fully visible slides.

Turn on Mobile Touch

Allows the event slider to support swipe transitions on mobile devices.  The default setting of Yes enables this functionality.  To be mobile-friendly, you should make it a best practice to always set this to Yes.

Minimum Slide Width

Controls the minimum width of each event on the slider.  It is set by default to a value of 400 pixels.  The minimum width of each event can be any size between 50 pixels and 2,000 pixels.

Inline Images

Contains only one setting controlling whether the inline-image included in the Event Details will display or not.  In this instance, if you add the event description to the event slider slides, it is likely a good idea to suppress the inline images by accepting the default setting of No.  However, if you want the inline images to display along with the image already on the event slider for an event, select Yes.

This section contains only one setting, Respond to search and filter.  This setting determines whether or not the elements in the event slider will respond to a filter or search action taken by the use of one of those controls.  The default value of Yes is a best practice approach.

Display Options

This group contains settings for customization of the Heading of the Event Slider as well as the No Events Message. 

Heading 

Allows you to provide heading text to go above the slider contents.  A blank value produces no heading on the event slider.

No events message 

Allows you to alter the message that appears when there are no upcoming events on the event slider.

Event title link 

Controls whether clicking the Event Title will take a calendar visitor to the Event Detail View or the Event Actions.  It is a best practice to send the visitor to the Event Detail View as that is where the majority of the information about the event will be displayed and will give the visitor enough information to know if they want to perform an event action from that view.

Date/Icon Settings 

This group contains two settings governing whether or not to display the Date Icon and whether or not to show the start date.

Date Icon 

The Date icon setting determines whether or not the Event Slider promotion spud will use the Date icon as well as which form of that Date Icon will appear.  There are three options:  None (do not display the date icon), Date Icon Image (display the date icon using the image version), or Date Icon (a CSS-generated date icon).  It is a best practice to design your calendars to be mobile-friendly.  The Date Icon Image is not mobile-friendly and also has the disadvantage of being less formattable than the Date Icon.  If you are going to display the Date Icon on your Event Slider, you should use the Date Icon option.

Show Start Date

The Show start date setting allows you to remove the start date from the event when displaying the date icon which will already display the start date.  The default value is Yes which will display the start date.  Setting this value to No will hide the start date allowing the Date Icon to function as an alternative representation of the start date.

Event Registration 

This group contains settings governing the Event Registration buttons.

Show Sign-up Buttons

The Show sign-up buttons setting should be set to No since 25Live Publisher does not have the registration module enabled.

Sign-up button on separate line 

This setting should be left to No since you effectively hide the Sign-up button with the first setting in this group.

Date/Time Options 

This group contains settings governing how dates and times will be displayed on the Event Slider.

Label Ongoing Events

Controls whether events with repeating occurrences are labeled on the Event Slider to represent that they are part of a sequence of repeating events.  The default setting of Yes is the appropriate choice.

Ongoing Events Label

Allows you to alter the label that will be applied if you have turned on labeling for ongoing events.  The default text is provided in the textbox but you may replace that text with your own preferred text.

Date Format

Provides you a drop-down menu with multiple different formats from which to choose.  Select one that you want to use for the Event Slider that is in keeping with styles for dates on your campus's websites.

Day of the Week

Gives you the option of spelled out day of the week, two different forms of an abbreviated day of the week, or no day of the week.  Make your selection by selecting from the accompanying drop-down menu.

Hide Year

Determines whether the year appears or not with the event date.  The default value is set to No.  However, since the promotion spud may not be on the same page as your calendar spud and you may have featured events occurring in different years if you are close to a transition from one year to the next, it is a best practice to set this value to Yes.

Show End Date

Controls whether or not the end date is displayed as part of the dates on the event text for the slide.  If your event is a single-day event, only the Start Date will show.  If your event contains multiple days, it is a best practice to set this value to Yes to display the last day of the event.

Show Time

Controls whether or not the event time is displayed along with the event date.  Your event sliders should always include the event times along with the dates so the best practice is to set a value of Yes.

Time Format

Contains a drop-down menu of different formats for the time and the am/pm indicator.  Select the value that matches what you have been using on your Calendar View and Control Spuds.  This choice should mirror how you are using AM and PM on your campus web pages.

Time Zone Display

Allows you to include the time zone with the time of your event.  The default value is set to None which in the majority of campus calendars is correct.  However, if you are a multi-campus institution with campuses in multiple time zones, you should include either Short or Long format time zones as there may be some events that are available across campuses, and time zone information will be important information.

Styles

The Styles tab contains stylistic settings governing every aspect of the event slider.  Click to jump to one of these fourteen groups:  

General StylesHeaderPager StylesNext/Previous Styles
Play/Pause StylesPhotoEvent InfoTitle
DateLocationOther FieldsMore Link
Border Rounded CornersShadow


Even though some of these settings may pertain to some elements that you turned off in the Settings tab, you should still make it a practice to set styles for everything just in case you decide to turn additional features back on.

General Styles 

This group contains most of the settings governing borders, background color, and the margin of the Event Slider.

Border size 

Controls the width of the border for the slider.  Event Slider borders are normally a little wider than other borders on web pages.  The default value has been set to 5px.  You may increase or decrease this by replacing that value with one of your own choosing.

Border color 

Controls the color of the border of the slider.  If you set the border color and the background color to the same color, the border will be indistinguishable.  The default value of white (#ffffff) may be altered to any color in your web page's color palette but should be consistent with what you have been doing with borders throughout your style work.

Background color 

Controls the background of each slide in the event slider.  It defaults to white (#ffffff) but you may alter this to any color you choose to use as the background of your slider.

Margin

Controls the margins surrounding the slider.  The default values set a top and bottom margin of 5px and a top and bottom margin of 10px.  These values typically work well with most event sliders but you may change them as needed.  It is a best practice to set the top and bottom margin to the same value and to do the same for the right and left margins.

Header

Contains styles that will control the header text if you chose to provide header text in the Settings.

Padding

Controls padding around the Header text.  The only padding that is set by default is a 2px padding below (bottom) the text.  This gives the Header slight separation from the event information below it.  You may alter these values as needed.

Font

Controls what font stack will be used for the header text.  This value is inherited from the Base font style in the global settings.  For consistency of fonts across your calendar, you should keep the inherited style.  However, if you want to alter the font stack for just the header and possibly use a serif font stack, simply click in the textbox and provide an alternative font stack for the Header text to use.

Size

Controls the size of the font.  This value defaults to 12 points.  If you are using relative length units like rem or em, you should divide 12 by 10 to arrive at 1.2 rem or 1.2em.

Color

Controls the color of the font used for the Header text.  This value is inherited from the Base text color style in the global settings.  If you want to use a different color from your website's color palette for this header, simply click in the textbox and provide a new hexadecimal color value.

Weight

Controls the darkness of the font for the Header text.  Since headers are normally in bold type, the bold style is chosen by default.  However, you may also choose normal weight or medium weight.

Pager Styles

The Pager Styles group contains styles that control how the pager icons will display below each slide's image and event information.

Padding

Controls padding around the pager icons.  The default setting of 10px for top and bottom padding provides for a little separation above and below the pager icons from the rest of the various navigational and event information contained on each slide.  You may alter the padding by providing a different set of values.

Default Color

Controls the default color of the pager icons when a visitor sees them below the slides.  This value defaults to a dark gray (#cccccc).  However, you might want the pager icon color to mimic your links and set the :link color that you used for your links for the Default color.

Hover Color

Controls the default color of the pager icons when a visitor hovers over one of the pager icons.  The value is defaulted to an even darker gray (#999999),  However, you might want the pager icon color to mimic your links and set the :hover color that you used for your links for the Hover color.

Active Color

Controls the color of the active slide when the event slider is allowed to transition normally without clicking the pager icons or hovering over the pager icons.  You will want to select a color from your web page's color palette that offers contrast to the behavior of the Default color and the Hover color.

Next/Previous Styles

Controls the styles for the next and previous buttons for the event slider if you chose to display these options in the Settings.

Next/Prev Icon Size

Controls the size of the next and previous icons.  It defaults to a value of 31 pixels.  If you have turned on the next and previous icons on the Settings tab, you may want to preview the sizing and make alternations as necessary.  You could also make this a relative length item by dividing 31 by 10 to arrive at 3.1rem or 3.1em.  It is important that you preview your choices frequently when altering these settings.  Use the Preview button to make previews as you set these styles.

Next/Prev Icon Color

Contains settings for :link and :hover which both default to shades of gray.  However, you might want to use the link colors you used in your global settings for these two settings to make these icons behave like other links and buttons in your calendar implementation.

Next/Prev Icon Arrow Color

Contains settings for the arrow color for the next and previous icons.  These both default to the same lighter shade of gray.  You could set this value to the same text color you set for links and buttons to maintain consistency in your implementation.

Next/Prev Icon Vertical Position

Determines where the next and previous icons will vertically appear on the slide.  These icons are positioned to the left and right of each slide.  The default value of 50% will position the icons in the vertical center of the slide.  So, a 400px slide would display the icons at the 200px vertical midpoint of the slide.

Play/Pause Styles

Contains only one style, Padding.  The top, right, bottom, and left padding are all set to 0 pixels by default.  If you determine that you want more padding around the Play and Pause buttons, you would enter a value greater than 0.  These buttons will only appear if you have turned them on in the Settings tab.

Photo

Contains styles controlling the photo produced from either the event image or detail image, a choice you made in the Settings.

Max Width

Controls the maximum width of the image on the slide.  If an image is larger than this width, it will resize the image to fit within the appropriate maximum width.  By not offering a max height style, it prevents this resizing from creating any issues with image distortion.  The value you enter here should be the same as the Max image width you set in the Settings tab.  Also, be sure that when you enter the pixel size for the width that it includes the px label after your numeric width.

Border Width

Controls the width of borders around the image.  It defaults to 0px which means no border.  If you want a border around your images, supply a 1 to 2 pixel border.  Larger values will create a blocky, unaesthetic effect around your images.

Border Color

Controls the color of the border.  It defaults to black (#000000) which is the typical value for borders around images on websites.  However, you may select a different color from your website's color palette and enter the hexadecimal color code in place of black.

Background Color

Controls the background behind the image.  This background color is inherited from the Background color setting in the General Styles.  Since the background will show for events that don't have an image, leave this inherited value alone.

Margin

Controls the margins around the image on the slide.  The top, bottom, and left margins are all set to 0px which makes perfect sense as typically the image floats to the left of the event information.  The right margin is set to a default value of 10px.

Event Info

This group contains settings governing padding and spacing as well as the background color behind the event information.

Padding Around Event Text

Controls padding around all of the event information that floats to the right of the photo.  The top, bottom, and right padding is set to 0px.  The left padding is set to 5px by default.  This couple with the 10px of right margin on the photo gives a 15px space between the image and the event information.  If you want more space, increase the left padding value.

Background Color

Control the background behind the event text.  This style is inherited from the Background color style you set in the General Styles and should not be changed.

Signup Button Spacing

These styles provide for padding around the signup buttons.  Since you turned these off in the Settings tab, you may just accept the defaults, as these buttons will not display on your calendar.

Title

The Title group contains a group of styles governing the formatting of the Title text in the event information portion of the slider.  Five stylistic settings are inherited from the global settings you set up under the Publish Settings tab.

Font

Controls the font stack used to display the Title text.  This setting is inherited from the Base font style set in the Global Settings.  Since this is not a header, there should be no need to alter to a serif font in those instances that headers use a different font stack.  You should accept the inherited value.

Font Weight

Controls the darkness of the text and gives you three options:  bold, medium, and normal.  The default value is set to bold which is actually the best setting as it highlights the title of the event.

Font Style

Controls whether the font is in normal style or italic style.  Italic style may be difficult for some calendar visitors to read so it is a best practice to use normal text for your event title.

Font Size

Controls the size of the font.  It is inherited from the Global header size set in the global settings.  The default value is normally 12 points unless you converted the Global header size to rem or em units.  In that latter case, you will see either 1.2rem or 1.2em.  You should accept the inherited value.

Text Color

Controls the color of the event title's text.  This style is inherited from the Global header color and that color is typically appropriate for this text.  However, you may alter it by providing a different hexadecimal color value.

Text Transform

Provides an avenue for you to transform the Event Title text in some fashion.  Options include none (produce event title text as entered in 25Live Pro), capitalize (produce event title text in initial capitals), uppercase (produce event title text in all uppercase letters), and lowercase (produce event title text in all lowercase letters).  Generally, the default value of none is the best choice for Event Title text.

Background Color

Controls the background behind the title text.  This value is inherited from the Base background color style set in your global settings.  For instance, the original default value for that style is transparent.  If you have not altered that, and have chosen a different background color, you will see transparent appear here as well.  You should accept the inherited value.

Line Height

Controls the height of each line of text and may be used to produce spacing between lines of text.  This value is inherited from the Base line height set in the global settings.  You should accept the inherited value.

Padding

Controls padding around the Title text.  The default values for top, right, bottom, and left all default to 0px.  Unless you want spacing between the title text and the other event information, these default values work well.

Date

The Date group controls stylistic elements for the dates appearing on the event slider.

Font

Controls the font stack used to display the Date.  This setting is inherited from the Base font style set in the Global Settings.  You should accept the inherited value for font consistency across your calendar implementation.

Font Weight

Controls the darkness of the text and gives you three options:  bold, medium, and normal.  The default value is set to normal which is the best setting for the date.

Font Style

Controls whether the font is normal style or italic style.  Italic style may be difficult for some calendar visitors to read so it is a best practice to use normal text for your event date.

Font Size

Controls the size of the font.  It defaults to 8 points.  If you are using relative length units like rem or em, you should divide 8 by 10 to arrive at either 0.8rem or 0.8em.

Text Color

Controls the color of the event's date text.  This style is inherited from the Base text color set in the Global Settings.  It is a best practice to accept the inherited value.

Background Color

Controls the background behind the date text.  This value is inherited from the Base background color style set in your Global Settings.  For instance, the original default value for that style is transparent.  If you have not altered that and have chosen a different background color, you will see transparent appear here as well.  You should accept the inherited value.

Padding

Controls padding around the Date text.  The default value for top, right, and left are set to 0px.  A 2px bottom padding has been applied to separate the date text from other event information.  If you want more space underneath the Date text, increase it to a larger pixel size.

Location

The Location group controls stylistic elements for the Location appearing on the event slider for each event.

Font

Controls the font stack used to display the Location.  This setting is inherited from the Base font style set in the Global Settings.  You should accept the inherited value for font consistency across your calendar implementation.

Font Weight

Controls the darkness of the text and gives you three options:  bold, medium, and normal.  The default value is set to normal which is the best setting for the location.

Font Style

Controls whether the font is normal style or italic style. The default value Italic style may be difficult for some calendar visitors to read so it is a best practice to use normal text for your location.

Font Size

Controls the size of the font.  It defaults to 8 points.  If you are using relative length units like rem or em, you should divide 8 by 10 to arrive at either 0.8rem or 0.8em.

Text Color

Controls the color of the event's location text.  This style is inherited from the Base text color set in the Global Settings.  It is a best practice to accept the inherited value.

Link Color

Controls the color of the link to the map that becomes active if the location has latitude and longitude custom attribute values in 25Live.  There are two settings.  the :link and the :hover settings.  These settings are inherited from the Base link color set in the Global Settings.  It is a best practice to maintain consistency in how links behave on your calendar.  You should accept the default inherited values.

Background Color

Controls the background behind the location text.  This value is inherited from the Base background color style set in your Global Settings.  For instance, the original default value for that style is transparent.  If you have not altered that and chosen a different background color, you will see transparent appear here as well.  You should accept the inherited value.

Padding

Controls padding around the Location text.  The default value for top, right, and left are set to 0px.  A 2px bottom padding has been applied to separate the location text from other event information.  If you want more space underneath the Location text, increase it to a larger pixel size.

Other Fields

The Other Fields group controls stylistic elements for all other event data fields that you included in the Settings tab for the event slider.

Font

Controls the font stack used to display all other data fields.  This setting is inherited from the Base font style set in the Global Settings.  You should accept the inherited value for font consistency across your calendar implementation.

Font Weight

Controls the darkness of the text and gives you three options:  bold, medium, and normal.  The default value is set to normal which is the best setting for the location.

Font Style

Controls whether the font is normal style or italic style. It is a best practice to use normal style for the event text in these additional fields.

Font Size

Controls the size of the font.  It defaults to 8 points.  If you are using relative length units like rem or em, you should divide 8 by 10 to arrive at either 0.8rem or 0.8em.

Text Color

Controls the color of all other data fields' text.  This style in inherited from the Base text color set in the Global Settings.  It is a best practice to accept the inherited value.

Link Color

Controls the color of the link for any included data fields that use the URL format.  There are two settings.  the :link and the :hover settings.  These settings are inherited from the Base link color set in the Global Settings.  It is a best practice to maintain consistency in how links behave on your calendar.  You should accept the default inherited values.

Background Color

Controls the background behind all other fields' text.  This value is inherited from the Base background color style set in your Global Settings.  For instance, the original default value for that style is transparent.  If you have not altered that and chosen a different background color, you will see transparent appear here as well.  You should accept the inherited value.

Padding

Controls padding around all other fields' text.  The default value for top, right, and left are set to 0px.  A 2px bottom padding has been applied to separate the location text from other event information.  If you want more space underneath the Location text, increase to a large pixel size.

Border Rounded Corners

The Border Rounded Corners group provides the capability of rounding the borders of the slide and rounding the borders of the included photo on the slide.

Slider Border Corner Rounding

Determines whether or not the borders of the slides on the event slider will be square or rounded.  The default value is 0px representing square border corners.  If you want to round the borders, apply a small pixel value to smoothly round off the border corners.

Photo Corner Rounding

Determines whether or not the borders of the event image or detail image selected in the Settings will be square or rounded.  The default value is 0px representing square border corners.  If you want to round the borders, apply a small pixel value to smoothly round off the border corners.

Shadow

Controls the drop-shadow behind the event slider's slides.  The default values provide for a black drop shadow offset to the right and bottom of the slider.  Essentially, this is a CSS box-shadow where the X and Y offsets are set by the Horizontal length and Vertical length settings of 2px each.  Negative values for the horizontal value would put the shadow to the left while positive values set it to the right. Negative values for the vertical value would put the shadow above while positive values set it below.  The combination of these two pushes the shadow to the bottom right.  The Blur radius controls the size and darkness of the shadow.  Larger blur radiuses will create a bigger and lighter shadow.  The Spread is setting the spread-radius for the shadow.  Positive values will cause the shadow to expand and grow bigger while negative values will cause the shadow to shrink.  The Color value set in RGB terminology sets a color value using red, green, and blue values.  For a black drop shadow, you set all three values to 0.  Finally, the Opacity setting controls the degree to which content behind an element is hidden (in this case the color of the shadow).  Any value between 0 and 1 means that the shadow is translucent (content behind the shadow can be seen.  A value of 0 for Opacity means that the shadow would be entirely transparent and invisible.  A value of 1 would mean that the element is fully opaque making a visually solid black shadow.


When you are satisfied with your settings and styles, click the OK button to save them.  You may preview your choices prior to saving by clicking the Preview button.

List by Month Upcoming

The List by Month Upcoming promotion spud displays events grouped by month in a very simple list layout.  If you want to get a larger number of event links in a promotion spud, this spud is the one that can make that happen.

Photo Upcoming

The Photo Upcoming promotion spud is a table of upcoming events displaying the event image next to each event.  The event image is essentially at thumbnail size and you can control maximum height and width of that image in the settings for this promotion spud.  If you want to feature a small group of events and have images appear as well, this promotion spud is a very effective tool.

Upcoming Date Table

The Upcoming Date Table promotion spud is a table of upcoming events displaying the event date and title.  For smaller regions of the website, this spud may be configured to make use of a very small space quite effectively.

Upcoming Events

The Upcoming Events promotion spud is a list of upcoming events.  Using this spud, you may set how many events to display and whether or not to make use of the Date Icon.  If you don't have images, you may use the date icon to add some visual interest to this promotion spud.

Upcoming Event Crawler

The Upcoming Event Crawler promotion spud produces a banner that scrolls horizontally for your next seven days' worth of events from right to left across your screen.

Upcoming Fader List

The Upcoming Fader List promotion spud is a list of upcoming events that are faded through one group at a time.  This allows this promotion spud to contain many more events than many of the others.  You control how many events and for how long they are displayed before the fade occurs to show the next set of events. 

Upcoming Grouped

The Upcoming Grouped promotion spud is an upcoming event list grouped by title and location.  If you need your featured events grouped in this fashion, this spud provides the control to accomplish that task.

Upcoming Preview

The Upcoming Preview promotion spud is a much more detailed upcoming event list because it shows some event details.  If you want to display a part of the Event Details text from the 25Live Event Form, this promotion spud provides that opportunity.

Upcoming Table

The Upcoming Table promotion spud is a table of upcoming events with customizable columns as well as including image support.  It is an alternative to the Photo Upcoming promotion spud.

Selecting and Styling the Upcoming Table Promotion Spud

At times, you will want to create a promotion spud that takes up much less screen real estate than the event slider.  In those instances, two promotion spuds display the event image while taking up less screen real estate, the Photo Upcoming promotion spud, and the Upcoming Table promotion spud.  The Photo Upcoming promotion spud requires slightly more space than the Upcoming Table promotion spud.

To add the Upcoming Table promotion spud to your calendar:

Locate the Add a Promotion Spud button in the upper right corner of the Promotion spuds area and click it.

The Add Spud window will open containing icons for each of the available promotion spuds.  Locate the Upcoming Table promotion spud and click to select it.  Then click the OK button to confirm your selection, add it to the calendar, and begin reviewing settings and styles.

Settings

The Edit Settings for Upcoming Table window will open containing two tabs:  Settings and Styles.  The Settings for the Event Slider are one of the most complex of any spud in 25Live Publisher.

The Settings control what elements of the event are displayed by the Upcoming Table promotion spud.  The Settings are arranged in twelve groups:  Display Settings, Events, Grouping, Popup Settings, Featured Event Settings, Image Options, Inline Images, Filter/Search Options, Display Options, Date Icon Settings, Event Registration, and Date/Time Options.

Display Settings

The Display Settings group controls what fields are displayed on the table.  You have the option to add to or remove fields.  The default options are Event Image, Start Date, Start Time, and Title.  

  • Alter the sort Order by either changing the number in the text box or using the up and down arrows. 
  • Label text boxes allow you to alter the label that will display on the Upcoming Table promotion spud.  
  • For the Title field, you have the option to set a Max Length.  (Note that this could prevent the full title from displaying.)
  • Remove a field by clicking the checkbox under the Remove column and then clicking the Update button.


  • The Upcoming Table promotion spud has access to all of the imported data fields on your events in this calendar.  The add new field drop-down menu will list out additional fields that you may display.  Please remember that each additional field will become a new column in the promotion spud.  If you are trying to create a promotion spud that takes up a smaller portion of the screen real estate, accept the default options and the user can visit the event details to see the rest of the provided information.

Events

Controls the sort order of the events, the state and end date of the promotion spud, and the Maximum number of events to display on the promotion spud.

Sort Order 

The Sort order setting provides two options:  sort events Ascending (Future) (recommended) or sort events Descending (Past).  

Start Date

Designates what the start date will be for events on the promotion spud.  The drop-down menu that is provided offers a multitude of different approaches to determine whether the promotion spud starts.  Best practice is to start the promotion spud on the Current day.

End Date

The End Date setting designates how far into the future from the start date the promotion spud will review to locate featured events. Default is Current day + 180 days, effectively providing a review of half of the year for featured events.  However, if you wanted to a full 12 months from the Start Date, select the 12 months option.  You may also decide to have No end date and the promotion spud will review the 500 days from the current date.

Maximum number of events 

Controls how many events will display in the promotion spud.  If screen real estate is at a premium and this promotion spud needs to be smaller, accept the default value of 5 events.  However, if you have more screen real estate, you may increase the number of events to display.

Grouping

Determines whether or not the events displayed on the promotion spud will be grouped as well as determining how to handle ongoing events.

Group by 

Allows you to turn grouping on for the promotion spud.  With only five events, grouping is likely not necessary.  But, if you increased the number of events to display, you might want to choose one of the grouping options.

Ongoing events 

Controls how repeating events will be handled by the promotional spud.  If your featured events have repeating occurrences, you'll want to ensure that the checkbox for Include events that started in the past is checked.

Popup Settings 

Popup details spud determines whether the events on the promotion spud will display the popup that displays on the calendar view. Choose None to display no popup details or Event Detail Popup to display the Event Detail Popup (recommended) used with your Calendar View spud.

Featured Event Settings

Controls which featured levels will display on the promotion spud and how to handle the spud when there aren't enough featured events available.

Only Show Levels

Controls what featured levels will display on the promotion spud.  Since you may clone the promotion spud, you could create Upcoming Table spuds using different sets of Featured Levels. Tick the boxes of the Featured Level or Levels that you want to display.

Auto fill empty spaces 

Determines whether or not non-featured events will display in the Upcoming Table if there are not enough featured events.  The default setting of No means that only featured events will show in the Upcoming Table promotion spud.  Changing this setting to Yes will backfill the remaining empty slots on the promotion spud.  So, for instance, let's say you have set the number of events to 5 and you only have 3 featured events.  The other two events will get filled with upcoming non-featured events.  If the answer was No, the promotion spud will display only the 3 events.

Image Options

Contains two settings governing the maximum sizing of the Event Image.

Max image width (pixels) 

Controls the maximum width of the Event Image on the promotion spud.  Best practice is to set this value to a thumbnail size. The default value is 80px.  Typically, when using this promotion spud, the Event Image maximum width is scaled back to a value less than or equal to 75px.

Max image height (pixels) 

Controls the maximum height of the Event Image on the promotion spud. Note that if you set the height and width to match one another, a rectangular image that exceeds the width will be scaled back to fit in the box which can distort your image. Best practice is to leave this setting blank allowing the height to be variable.

Inline Images 

Determines whether or not images inserted in the Event Description on the 25Live Event Form will display or not.  The Show inline images setting defaults to No to not display the inline images. Setting this to Yes is recommended.

Filter/Search Options 

Respond to search and filter determines whether the Upcoming Table promotion spud will respond to the filter and search options in your calendar.  Yes is recommended.

Display Options

Controls the headings, the footer's calendar link, the message for no events, and what loads when the Event Title link is clicked.

Display column headings 

Controls whether the column headings will appear or not.  The default setting is Yes (recommended).  Turning off the labels may confuse viewers of the promotion spud.

Footer calendar link label 

Controls the label for the link that takes a viewer of the promotion spud to the associated full calendar.  The default text, See all contains an html entity code, ».  This code creates a double arrow head after the text,

No events message 

Controls the text that will appear if there are no upcoming events for the promotion spud.  You may use your own customized language in this text box.

Event title link 

Controls whether the event title link opens the Event Detail View or Event Actions.

Date Icon Settings 

Date Icon Settings determine whether or not the date icon will display on the promotion spud.  If you are using event images, you likely want to leave the default setting of None.  However, you may select from a list of all date icons you have created in the drop-down menu.

Event Registration 

This group contains only one setting, Show sign-up buttons.  Since the registration module does not function in 25Live Publisher, you should set this setting to No.

Date/Time Options

Controls how dates and times will display on the promotion spud.

Date format 

Controls the format of dates on the promotion spud.  You likely will want some abbreviated form of the date.  Select from the accompanying drop-down menu of options.

Hide year 

Removes the year from the date saving critical real estate.  It is a best practice to set this to Yes.

Time format 

Controls how time is displayed along with what format of AM/PM will be used.  Select from the accompanying drop-down menu.

Time zone display 

Controls whether or not the time zone is displayed.  For most calendar implementations, this should be set to None.  However, if you are an institution with campuses in multiple time zones, you should select either short form or long form to append to your event times.

Show all-day event duration 

Determines whether an all-day event will display times for the entire day in the Time field.  The default value is set to No.  However, it is a better practice to display this so that viewers will realize that this event is an all-day event.

Styles

The Styles tab contains stylistic settings for the Upcoming Date promotion spud.  These settings are arranged in 6 groups:  Table Groups, Table Column Headers, Table, Events, Footer, and No Events Message.

Table Groups

Controls the formatting of grouping text.  Many of the settings are inherited which makes setting up this promotion spud much simpler.

Font 

Controls the font stack used by text for the Table Groups on this promotion spud.  This style is inherited from the Global group font and should not be altered to maintain consistency of the design across your calendar objects.

Size 

Controls the size of the font for the Table Groups text.  This style is inherited from the Global group size set in your Global Settings.  If you converted to relative length units like rem or em, you will mostly likely see a value of 1.2rem or 1.2em.  Otherwise, this will be set in points.

Color 

Controls the color of the font used by text for the Table Groups on this promotion spud.  It is also inherited from the Global Settings, Global group color.

Weight 

Controls the darkness, or heaviness, of the text.  Very often groupings are bold text which is what the bold setting will provide.  You may alter this to use either normal text or medium text.

Text transform 

Converts the table groups text using one of four options:  none, capitalize, lowercase, or uppercase.  This setting is inherited from the Global group text transform set in your Global Settings.  In the majority of situations, you will want to accept this inherited value.

Padding 

Controls padding surrounding the Table Groups text.  The default values are for top and bottom padding of 0px and right and left padding of 5px.  If you want more spacing between and above or below your Table Groups, increase these values.

Table Column Headers

Controls the formatting of the table column headers for this promotion spud.

Font 

Controls the font stack used by text for the column headers on this promotion spud.  This style is inherited from the Global subgroup font and should not be altered to maintain consistency of the design across your calendar objects.

Size 

Controls the size of the font for the Table Column Headers text.  This style is inherited from the Global subgroup text size set in your Global Settings.  If you converted to relative length units like rem or em, you will likely see a value of 0.9rem or 0.9em.  Otherwise, the value will be set in points.

Weight 

Controls the darkness, or heaviness, of the text for the Table Column Headers.  This setting defaults to bold

Text transform 

Allows you to transform the column headers by putting them in different formats. The options include: none (accept the text as entered), capitalize, lowercase, or uppercase. 

Color 

Controls the color of the Table Column Headers text.  This setting is inherited from the Global subgroup text color set in your Global Settings.  For consistency of design, accepting the inheritance is recommended.

Background color 

Controls the background color behind the Table Column Headers text.  This setting is inherited from the Global subgroup background color set in your global settings. For consistency of design, accepting the inheritance is recommended.

Padding 

Controls the padding around the table column headers.  The default values surrounding the box is 3px.

Table

Control the borders around the table and the width of those borders.

Border color 

Color of borders around the table.  This setting is inherited from the Base border color from the Global Settings.  For consistency of design, accepting the inheritance is recommended.

Border width 

Sets the width of the borders surrounding the table.  The default value is for a border width of 1px.  This setting is the normal width of table borders on both the web and in most applications.

Events

Controls stylistic elements for the events that will appear on the Upcoming Table promotion spud.

Font 

Controls the font stack used by text for the events on this promotion spud.  This style is inherited from the Base font. For consistency of design, accepting the inheritance is recommended.

Size 

Controls the size of the font being used for event text.  It defaults to a value of 8 points.  If you have converted to relative length units like rem or em, divide 8 by 10 to arrive at values of either 0.8rem or 0.8em.

Cell padding 

Controls spacing around each event item on the promotion spud.  The default values put 3px of space at top, right, bottom, and left.  Each event will have this padding meaning that there will essentially be 6px of space in between each item on the promotion spud.

Start date font weight 

Controls the relative darkness, or heaviness, of the font used for date text.  The default setting is bold.  In most instances, you will want to accept the default value but you have options of either normal or medium.

Start date wrap 

Controls whether the Start Date will wrap to a second line if it does not have enough screen real estate or be forced to be one line.  In the latter case, if the bounding container the promotion spud resides in might have a horizontal scroll bar added if you accept the nowrap setting.  It is a better practice to choose normal from the drop-down menu to allow the date to wrap to a second line.  The reality is that this will likely never matter as the start date is just the abbreviated month and date based on settings in the Settings tab.

Start time wrap 

Controls whether the Start Time will wrap to a second line if it does not have enough screen real estate or be forced to one line. It is a better practice to choose normal from the drop-down menu to allow the Start Time to wrap to a second line if necessary.  In all likelihood, you will never need that to be acted upon but it is a good practice to plan for any eventuality.

Title font weight 

Controls the relative darkness, or heaviness, of the font used for title text.  For the Promotion Spuds, bold font weight is normally a best choice.

Title text transform 

Controls how the Title text is presented.  None means that the Title text will be exactly as entered in the Event Title field or the Event Name field on the 25Live Event Form.  However, you may choose to capitalize which would use initial capitalizations on all words. Uppercase to put all words in uppercase characters  And, lowercase to put all title text in lowercase characters.  Since capitalize will set articles (e.g., the, a, etc.) and prepositions (e.g., of, from, etc.) in initial capitalizations which is not customary for the presentation of titles, the best option is to choose None and clean up any issues with title in 25Live using inline editing.

Title link decoration 

Controls whether or not the Title link is underlined by default.  This style is inherited from the Base link text decoration setting in the Global Settings.  The Title serves as the link to more details about the event in the Upcoming Table promotion spud.  For consistency of design, you should accept the inherited value.

Title link hover decoration 

Controls whether or not the Title link underlines when a visitor hovers their mouse over the link.  If the Title link decoration is set to underline, you may want to set the Title link decoration to none for a contrast in font behavior.  However, this style is also inherited from the Base link hover text decoration style set in the Global Settings.  For consistency of design, you should accept the inherited value.

Signup button spacing 

Controls spacing around the SignUp button.  Since you should have turned off the signup button in the Settings you may ignore these settings.

Image Width Mobile

Footer

Controls how text, links, and colors display in the footer region of the promotion spud.

Footer display 

Allows you to actually hide the entire Footer region of the promotion spud.  It has two options:  show and hide.  Since the Footer contains the link to the full calendar that these events come from, you should always make sure this is set to show.

Font 

Controls the font stack used by text for the footer on this promotion spud.  This style is inherited from the Base font and should not be altered to maintain consistency of the design across your calendar objects.

Font Size 

Controls the size of the font being used for footer text.  It defaults to a value of 8 points.  If you have converted to relative length units like rem or em, divide 8 by 10 to arrive at values of either 0.8rem or 0.8em.

Font Weight 

Controls the darkness, or heaviness, of the text for the footer text.  This setting defaults to normal type since it is a link.  You have the option of altering that to either bold text or medium text.

Underline 

Controls whether the link is underlined by default or not.  If your links are not underlined by default in your calendar, you would leave the default setting of none.  However, if your links are underlined by default, you would select, underline.

Link Color 

Controls both the :link color and the :hover color.  These style settings are inherited from the Base link color in the Global Settings.  For consistency of design, you should accept the inherited values.

Background color 

Controls the background behind the footer.  This setting is inherited from the Base background color setting in the Global Settings.  For consistency of design, you will normally accept the inherited values.

Padding 

Controls the spacing around the footer link.  The default values of 2px for top, right, bottom, and left padding gives spacing from other text surrounding the footer.  You may alter these to values of your choosing if you do not like the 2px default values.

No Events Message

Controls how the text will be formatted when there are no events to display on the promotion spud.  This scenario could easily happen if you are only allowing featured events to appear on the promotion spud.

Font 

Controls the font stack used by no events message text on this promotion spud.  This style is inherited from the Base font and should not be altered to maintain consistency of the design across your calendar objects.

Font weight 

Controls the darkness, or heaviness, of the text for the no events message.  It defaults to a value of 10 points.  If you have converted to relative length units like rem or em, divide 10 by 10 to arrive at values of either 1rem or 1em.  Since this setting is inherited from the Base text size setting in the Global Settings, if you set the global base text size to 16px you would see a 16px font size.

Padding 

Controls the spacing around the no events message.  The default is for no additional padding around this message.  If you want to add some padding, simply increase the values in each of the boxes.

Once y\u are satisfied with your choices for the Upcoming Date promotion spuds Settings and Styles, click the OK button to save your choices.  If you would like to preview your selections prior to saving them, click the Preview button.

Upcoming Vertical Crawler

The Upcoming Vertical Crawler promotion spud is a list of upcoming events that crawl vertically.  Like the Upcoming Fader List, this promotion spud may contain a far greater number of events than any of the other promotion spuds.  You may also control how fast the events crawl.

Date Icon

Each newly published calendar automatically has access to a Date Icon and a Date Icon Image.  If you are wanting to be mobile-friendly, it is best to use the Date Icon which produces an icon solely with CSS settings as opposed to an actual image.  The Date Icon Image makes use of a static image which has limitations on how much of it you may alter. 

Cloning Promotion Spuds

As you start working with both the Date Icon and the Promotion Spuds, you will notice that each of them will have a link, Clone Spud, allowing you to clone the object and set different styling.  Since promotion spuds are meant to be on web pages separated from the main calendar spud, this gives you maximum flexibility to design a promotion spud for multiple differently styled campus webpages linking back to your main calendar view.  Being able to clone the Date Icon provides you the ability to couple color-coded feature levels with a color-coded date icon.  For instance, a Training Events Calendar could have a featured level for each of the different groups of training like Computer Training, SIS Training, etc.  Each of those featured levels would be coded on the calendar with their own background color and a corresponding date icon could be made to appear on the calendar.

Setting up and Styling the Date Icon

Promotional spuds allow you to choose a date icon to pick up the start date of the event. This icon is designed entirely with CSS styles making it mobile-friendly. Providing an image as an icon is an alternative option, but is less mobile-friendly and less customizable. Like promotional spuds, you may clone your Date Icon and have multiple configurations using different colors for each featured level. 

To edit the settings and styles of the Date Icon, locate the Date Icons region of the Promotional Spuds tab and look for the Date Icon. Then, click Edit Settings & Styles.

Settings

The Settings tab contains only one group of settings covering how to produce the month, start day, and day of week on the date icon.



Abbreviated Month Name (Yes)
Abbreviated Day of Week (Yes)

Abbreviated Month Name (No)
Abbreviated Day of Week (No)

Abbreviated Start Day (Yes)
Show Day of Week (Yes)

Abbreviated Start Day (No)
Show Day of Week (No)

Styles

The Styles tab contains stylistic settings for each of the elements that make up the date icon.  These styles are arranged in six groups:  Date Icon Base Styles, Month Name Styles, Date Styles, Day of Week Name Styles, Date Icon Rounded Corners, and Date Icon Shadow.

Date Icon Base Styles

This group controls the style settings for icon fonts, height and width, border, and background color.

Icon Font

Controls the font stack that will be used to format text on the icon.  This style is inherited from the Base font setting in the Global Settings and in most cases should be accepted.  This may differ if you are creating a date icon for a different web page that uses different fonts.

Icon Font Color

Controls the color of the text on the icon.  This style is inherited from the Base text color setting in the Global Settings and in most cases should be accepted.  Again, this may differ if you are creating this date icon for use on a web page that users different font colors.

Icon Font Weight

Controls the relative darkness, or heaviness, of the text on the date icon.  Bolded text usually is not a good idea for date icons because of the small amount of space on the icons but you may select bold, medium, or normal text.  The default, normal, is the most ideal choice.

Icon Text Transform

Controls in what case the text on the icon will be formatted.  The default selection is uppercase.  However, the date icon's text may be formatted with the following settings:  none, capitalize, lowercase, or uppercase.

Icon Height

Controls the height of the icon in pixels.  It is set to auto meaning that the icon will rescale to fit the amount of text included on it.  This choice is the most reliable setting for the Icon's height.

Icon Width

Controls the width of the icon in pixels.  It defaults to a width of 40px.  If you have chosen not to abbreviate months and days of the week in the Settings, you will likely want to preview how that looks on an icon for a Wednesday in November or December.  That will give you an idea if your icon needs slightly more width to make it more readable.

Icon Margin

Controls the margins around the date icon.  They are set to 5px for top, right, bottom, and left margins.  These settings work for the majority of date icons.

Icon Background Color

Controls the background behind the icon which will show for both the Date and Day of Week.  The default value is white (#ffffff). 

Icon Border Size

Controls the size of the border surrounding the icon.  It defaults to a value of 0px.  If you want a border, a 1px border would be appropriate for the date icon.

Icon Border Color

Controls the color of the border surrounding the icon.  The default value is for the border to be transparent.  However, if you set an Icon border size you will need to provide a hexadecimal color code for the border in order for it to display.

Month Name Styles

This group controls the formatting of the fonts and background color for the Month section of the icon.

Font

Controls the font stack used for the month text.  This setting is inherited from the Icon font setting.

Font Size

Controls the font size for the month text.  These values have been entered in pixels with the default font size for the month set to 10px.  You may make this larger if you choose, but 10px is an ideal size for this setting.

Font Color

Controls the color of the font for the month text.  Often, the month resides in a dark field meaning that a lighter color is required here.  The value is inherited from the Base button text color set in Global Settings.  In many cases, you will accept the default inherited option.  If you are cloning the Date Icon for use with a different featured level you will want to match the base background color to that featured level color.

Font Weight

Controls the relative darkness, or heaviness of the month text.  In this case, the best approach is to present the month in bold type.  But, you may choose between normal, medium, and bold.

Text Transform

Controls what case will be used for characters in the month's name.  This setting inherits from the Icon text transform setting. If you alter the Icon text transform for a differently styled date icon, then that update will be cascading down to this selection.

Background Color

Controls the background behind the month text.  This setting is inherited from the Base button background color.  However, you may set a specific color by replacing that value with a new hexadecimal color code.

Padding

Controls padding around the month text.  The top, right, and left padding is set to 0px by default while the bottom padding is set to 2px.  The bottom padding provides a little space under the month text and aids in keeping separation between the month name and the date.

Date Styles

This group controls the formatting of the date text.

Date Font

Controls the font stack used by the date text.  The default value is inherited from the Icon font setting.  Typically, it is best to accept this default value.

Date Font Size

Controls the size of the region that makes up the date portion of the icon.  It defaults to a size of 18px.  This gives more space to produce a large date than either the month or day.  This is standard behavior for the date icon and only in cases where your font dictates more space should you change it.

Date Font Color

Controls the color of the date text.  This value is inherited from the Icon font color setting which maintains consistency within the icon.

Date Font Weight

Controls the relative darkness, or heaviness, of the date text.  This value defaults to the value inherited from the Icon font weight setting. Most often, it will be set to normal but medium or bold. 

Text Transform

Controls what case will be used for characters in the date  This setting inherits from the Icon text transform setting. If you alter the Icon text transform for a differently styled date icon, then that update will be cascading down to this selection.

Padding

Controls padding around the date text.  The right and left padding is set to 0px by default.  The top padding of 1px adds to the separation between the month text and the date text.  The bottom padding of 2px provides a little space under the date and aids in keeping separation between the month name, day of week, and the date.

Day of Week Name Styles

This group controls the formatting of the day of the week name.

Day of Week Font

Controls the font stack used by the day of the week text. The default value is inherited from the Icon font setting. Typically, it is a best practice to accept this default value.

Day of Week Size

Controls the size of the region that makes up the day of the week portion of the icon.  It defaults to a size of 10px.  This gives the same amount of space to produce a smaller-sized day of the week text.  This is standard behavior for the date icon and only in cases where your font dictates more space should you change it.

Day of Week Font Color

Controls the color of the font used for the day of week text.  This value is inherited from the Icon font color setting which maintains consistency within the icon.

Day of Week Font Weight

Controls the relative darkness, or heaviness, of the day of the week text.  This value defaults to the value inherited from the Icon font weight setting.  Most often, it will be set to normal but medium or bold. 

Text Transform

Controls what case will be used for characters in the day of the week text  This setting inherits from the Icon text transform setting. If you alter the Icon text transform for a differently styled date icon, then that update will be cascading down to this selection.

Padding

Controls padding around the day of the week text.  The top, right and left padding is set to 0px by default.  The bottom padding of 2px provides a little space under the day of the week ensuring that it does not end up being at the immediate edge of the icon.

Date Icon Rounded Corners

Icon Rounded Corners

The Date Icon Rounded Corners group contains only one stylistic setting, the Icon corner rounding.  Adding a pixel value greater than 0 will round off the edges of the icon making it a less boxy approach.  If, for instance, you set a border corner rounding of 4px in the Global Settings for buttons, you might want to use that same amount of rounding on the Date Icon.

Date Icon Shadow

Horizontal Length & Vertial Length

Controls the drop-shadow that is to the right and bottom of the icon.  The default values provide for a black drop shadow offset to the right and bottom of the slider.  Essentially, this is a CSS box-shadow where the X and Y offsets are set by the Horizontal length and Vertical length settings of 2px each.  Negative values for the horizontal value would put the shadow to the left while positive values set it to the right.  Negative values for the vertical value would put the shadow above while positive values set it below.  The combination of these two pushes the shadow to the bottom right.  

Blue Radius

Controls the size and darkness of the shadow.  Larger blur radiuses will create a bigger and lighter shadow.  

Spread

Controls the spread-radius for the shadow.  Positive values will cause the shadow to expand and grow bigger while negative values will cause the shadow to shrink.  

Color (RGB)

Controls the color value using red, green, and blue values.  For a black drop shadow, you set all three values to 0.  

Opacity

Controls the degree to which content behind an element is hidden (in this case the color of the shadow).  Any value between 0 and 1 means that the shadow is translucent (content behind the shadow can be seen.  A value of 0 for Opacity means that the shadow would be entirely transparent and invisible.  A value of 1 would mean that the element is fully opaque making a visually solid black shadow.


When you are satisfied with your settings and styles for the date icon, click the OK button to save them.  If you would like to see these settings on a sample date icon, click the Preview button.

Remember, that you may make full use of the Clone spud procedure to have multiple versions of the date icon using different fonts and color schemas.

Cloning a Promotion Spud

One of the most useful features of promotion spuds is the ability to clone a spud giving you multiple versions of the same promotion spud each with different settings and styles.  These may be used on different featured levels as well.  As you may have noted in the outline of how to setup and style two of the promotion spuds, we suggested that accepting the inherited styles from global settings is a best practice.  However, if you need to create a version that uses different fonts, color schemas, and the like, simply clone the spud that has accepted most of the defaults and then start making changes for the different setup and styled promotion spud.  Give the promotion spud a name that is meaningful to differentiate it from the promotion spud you might use on your main college website.

This technique is really useful for a training calendar where you have different branches or types of training.  Each type gets its own featured level, its own featured level color, and its own featured level date icon using the featured level color.  Then when those events appear on the comprehensive training calendar you see that functionality in practice.

To clone a promotion spud:
  1. Locate the promotion spud that you want to clone.  Locate the Clone Spud link
  2. The Edit Settings for Upcoming Table (SpudConfig2) window will open with the Settings and Styles of the original spud configuration copied into the new spud configuration.  In the Settings, give the new configuration a name by altering the Spud Configuration Name field with a meaningful label.  For instance, if you were doing this to feature certain computer training events and Computer Training is one of your featured levels, you might name this configuration, Computer Training.
  3. Work on the Settings tab to provide alternative choices for the settings for this version of the Upcoming Table promotion spud.
  4. Work on the Styles tab to provide alternative choices for the styles for this version of the Upcoming Table promotion spud.  It is helpful when starting a process like this to know what color you want to use to denote each individual featured level.  This plays a role in cloning the calendar icon spud discussed earlier.
  5. Once you are satisfied with your choices, click the OK button to save your Settings and Styles.  If you would like to preview your choices prior to saving, click the Preview button.
    All of the remaining promotion spuds contain similar steps for both Settings and Styles.  Preview each of them and style any that might be useful as part of your calendar implementation remembering that you may clone each spud of a single type as many times as needed with different font and color schemas for use on different web pages.
PREVIOUSLY:  Selecting and Styling Control Spuds
UP NEXT :  Styling E-mails and Feeds