Click here to view related articles.
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. This makes them connected very closely to the Featured Event functionality. Promotion spuds could be used to display featured events exclusively, adding multiple feature levels and individualized color coding/styling along the way.
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, with the exception of the Event Slider. A quick review of the various promotion spuds will assist in explaining how they are constructed and what they provide.
Date Finder
Date Finder 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.
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 and Styles (Click to Expand)
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 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 one of the nine groups of styles:
Header | Paging Buttons | Border | Calendar Days |
Day of Week Heading | Today | Weekday | Weekend |
Other Month Days |
Header
These styles control the formatting for displaying the header for the Date Finder.
Font
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
Controls the font's size used in the header text.
If you are using relative length units like rem or em, you will need to divide your desired point value by the original text size to arrive at a value. For example, if your desired value is 10pt (points) and your original text size is 10 pts, you will need to divide 10 points by 10 points to arrive at a value of 1rem or 1em.
Text Color
Controls the font's color used in displaying the header text. 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
Controls the darkness of the header text. There are three options: normal, medium, and bold. As headers are usually presented in bold-face fonts it is a best practice to choose Bold.
Text Transform
Provides a number of options for transforming the header text.
Header Background Color
Controls what background is set behind the header text. Best practice is to set this to white (#ffffff) or another color of your choosing.
Header Border Color
Controls the border surrounding the header text. If you want a border around the header, set a 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
Controls spacing around the header text. 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
This group contains styles that control the formatting of the paging buttons for the Date Finder promotion spud.
Arrow Size
Controls the size of the arrows used for advancing or returning a month on the Date Finder calendar. If you want slightly larger arrows, 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
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
Controls the height of each of the buttons that contain the arrow. If you want a larger height, increase the default value, but keep in mind the size of this small calendar.
Button Separation
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
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 create rounded button corners. If you want square edges on all sides of the button, set both outer and inner rounding to 0px.
Border
Calendar Border Color
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
This 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
This 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
Controls the font's size for calendar days.
If you are using relative length units like rem or em, you will need to divide your desired point value by the original text size to arrive at a value. For example, if your desired value is 10pt (points) and your original text size is 10 pts, you will need to divide 10 points by 10 points to arrive at a value of 1rem or 1em.
Calendar Text Color
Controls the color of the text on the calendar. If your calendar's background is a dark color you will need to set this to a light color.
Calendar Background Color
Controls the background color for this calendar. 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
Controls whether or not links are underlined by default or not. If you want links to be underlined by default on the calendar, select underline from the drop-down menu.
Link Hover Text Decoration
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)
Stylistic settings that 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
Controls the darkness of the text for days with events. Best 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
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
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
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
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 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 is 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.
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:
- Locate the Day Summary promotion spud on the Promotion Spuds tab.
- In the Day Summary promotion spud region, locate and click the Edit Settings & Styles link to begin setting up and styling this promotion spud.
The Edit Settings for Day Summary page will load containing two tabs: Settings and Styles.
Settings (Click to Expand)
Settings
The Settings tab contains setting controlling the output of events on the drop-down list.
Events | Display Options | Filter/Search Options |
Day Header Format | Event Registration | 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. For the filter to work effectively, Yes 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.
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. Since 25Live Publisher does not make use of the event registration functionality, you should change this setting to No by clicking its radio button.
Date/Time Options
This 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.
Date Format
Controls the format of the date in the filtered results. 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. 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. It is 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. No is a best practice.
Show End Date
Controls whether or not the end date is displayed for events with repeating occurrences. Yes is best practice.
Show Time
Controls whether or not the time is displayed for events. Yes is 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. None 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 (Click to Expand)
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
This 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. 1px value is typical 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. 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.
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.
If you are using relative length units like rem or em, you will need to divide your desired point value by the original text size to arrive at a value. For example, if your desired value is 10pt (points) and your original text size is 10 pts, you will need to divide 10 points by 10 points to arrive at a value of 1rem or 1em.
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.
The Event Slider promotion spud produces a very large slider that can feature events and needs much more screen real estate to function effectively. 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.
Settings (Click to Expand)
Settings
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 groups of settings:
Display Settings | Events | Featured Event Settings | Image Options |
Slider Settings | Inline Images | Filter/Search Options | Display Options |
Date Icon Settings | Event Registration | Date/Time Options |
Display Settings
This 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
This 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
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
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 25Live System Settings 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
Controls how many events will be displayed on the Event Slider. Essentially, this equates to the number of slides on the slider. 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
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. It is a best practice to check this checkbox.
Featured Event Settings
This group controls which featured levels will display in the slider.
Only Show Levels
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
Controls whether or not empty "featured" slides will be populated with regular events. No 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
This group controls image positioning, size, type, and what to do when there is no image on a featured event.
Image Position
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.
Max Image Width (Pixels)
Specifies the maximum width of the image on the slide. 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)
Specifies the maximum height of the image on the slide. 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
Gives you the option to display either the Event image or the Detail Image. Best practice is to use the Detail Image for the event slider promotion spud.
Remove Missing Image Space
Controls removal of the space where an image would be positioned for missing event images. If you have events without images, you should this set to Yes. 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
This 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
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. Horizontal 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. 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. 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. 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. 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. Setting this to No is the better approach.
Show Pagers
Shows the number of events and lets the visitor to the slider page between them. Yes 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, 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 this set to No.
Auto Start
Controls whether the event slider starts when the web page loads. 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. Setting this to Yes 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 value of 0 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. 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. The minimum width of each event can be any size between 50 pixels and 2,000 pixels.
Inline Images
Show Inline Images
Controls 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 setting this to No. If you want the inline images to display along with the image already on the event slider for an event, select Yes.
Filter/Search Options
Respond to Search and Filter
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. 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
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
Allows you to remove the start date from the event when displaying the date icon which will already display the start date. Yes 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
Should be set to No since 25Live Publisher does not have the registration module enabled.
Sign-up Button on Separate Line
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. 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. 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. 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 (Click to Expand)
Styles
The Styles tab contains stylistic settings governing every aspect of the event slider. Click to jump to one of the fourteen groups of styles:
General Styles | Header | Pager Styles | Next/Previous Styles |
Play/Pause Styles | Photo | Event Info | Title |
Date | Location | Other Fields | Border Rounded Corners |
Shadow |
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.
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 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. 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 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.
If you are using relative length units like rem or em, you will need to divide your desired point value by the original text size to arrive at a value. For example, if your desired value is 10pt (points) and your original text size is 10 pts, you will need to divide 10 points by 10 points to arrive at a value of 1rem or 1em.
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
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
Controls 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
This 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 in points unless you converted the Global header size to rem or em units. 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
This 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.
If you are using relative length units like rem or em, you will need to divide your desired point value by the original text size to arrive at a value. For example, if your desired value is 10pt (points) and your original text size is 10 pts, you will need to divide 10 points by 10 points to arrive at a value of 1rem or 1em.
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
This 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.
If you are using relative length units like rem or em, you will need to divide your desired point value by the original text size to arrive at a value. For example, if your desired value is 10pt (points) and your original text size is 10 pts, you will need to divide 10 points by 10 points to arrive at a value of 1rem or 1em.
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
This 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.
If you are using relative length units like rem or em, you will need to divide your desired point value by the original text size to arrive at a value. For example, if your desired value is 10pt (points) and your original text size is 10 pts, you will need to divide 10 points by 10 points to arrive at a value of 1rem or 1em.
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
This 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.
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.
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 (Click to Expand)
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. Click to jump to one of the twelve groups of settings:
Display Settings | Events | Grouping | Popup Settings |
Featured Event Settings | Image Options | Inline Images | Filter/Search Options |
Display Options | Date Icon Settings | Event Registration | 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 (Click to Expand)
Styles
The Styles tab contains stylistic settings for the Upcoming Date promotion spud. Click to jump to one of the six groups of styles:
Table Groups | Table Column Headers | Table |
Events | Footer | 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, this setting will reflect those units, 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, this setting will reflect those units, otherwise, this 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.
If you are using relative length units like rem or em, you will need to divide your desired point value by the original text size to arrive at a value. For example, if your desired value is 10pt (points) and your original text size is 10 pts, you will need to divide 10 points by 10 points to arrive at a value of 1rem or 1em.
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.
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.
If you are using relative length units like rem or em, you will need to divide your desired point value by the original text size to arrive at a value. For example, if your desired value is 10pt (points) and your original text size is 10 pts, you will need to divide 10 points by 10 points to arrive at a value of 1rem or 1em.
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.
If you are using relative length units like rem or em, you will need to divide your desired point value by the original text size to arrive at a value. For example, if your desired value is 10pt (points) and your original text size is 10 pts, you will need to divide 10 points by 10 points to arrive at a value of 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 you 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.
Tip: 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.
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 and Styles (Click to Expand)
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. Click to jump to one of these six groups of styles:
Date Icon Base Styles | Month Name Styles | Date Styles |
Day of Week Name Styles | Date Icon Rounded Corners | 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. Normal is the most ideal choice.
Icon Text Transform
Controls in what case the text on the icon will be formatted.
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. 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.
Icon Border Size
Controls the size of the border surrounding the icon. 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. 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. 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.
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. 18px 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.
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.
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. The default size 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.
Date Icon Rounded Corners
Date 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 (Click to Expand):
- Locate the promotion spud that you want to clone. Locate the Clone Spud link
- 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.
- Work on the Settings tab to provide alternative choices for the settings for this version of the Upcoming Table promotion spud.
- 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.
- 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.