Selecting and Styling Control Spuds

Which versions of Series25 components are you using?

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


The next step in preparing your calendar for your campus web page is to select the control spuds you want to make available to your calendar's visitors and then style those control spuds.  The purpose of the control spud is to give the visitor to your calendar some limited control over what they are viewing.  The following control spuds are available: 

The control spuds provide different types of functionality that can be quite useful to calendar visitors trying to find events on campus that fit their interests as well as making navigation of the calendar quicker and easier. 

Adding a Control Spud

To add a control spud to your calendar:

  1. Locate and click the Add Control Spud button located in the upper right region of the Control Spuds region.
  2. The Add Spud window will open.  Click on the control spud you want to add to your calendar to select it.
  3. Click the OK button to add the control.  You will immediately be presented with the Settings and Styles for this new control.  These settings and styles are reviewed in the following steps.
Setting Up and Styling the Default Control Spuds

Every newly published calendar begins with three control spuds pre-enabled:  Search, Month List, and View Chooser Tabbed.  These three controls are the most commonly used control spuds and will need to be styled prior to placing them on a webpage with your Calendar View spud.

Calendar List Spud

The Calendar List control should be used when you are working with mixed-in or sub-calendars.  This control gives the user a list of all the calendars that are mixed together or make up a group of top-level and sub-calendars.  Using this control, a visitor may select which calendar views they want to see and turn off those that they are not interested in seeing.

Setting Up and Styling the Calendar List Control

Eventually, you will build a more complex calendar containing mixed-in calendars and possibly even sub-calendars.  In that case, you will want to supply the Calendar List control for your calendar's visitors. To set up and style the Calendar List Control, you will first need to follow the instructions for adding a control spud.  This process will immediately trigger editing of the Settings and Styles for this control.

  1. The Calendar List Control contains two tabs:  one for Settings and a second for Styles.
  2. The General Settings for the Calendar List Control provide two options.  The first option allows you to customize the Label which will appear above the calendar list.  The second option allows you to choose whether or not to include the current publication in the list control list.  For standalone calendars, the answer should always be Yes.  But, in the instance where you have created a "container calendar" with no events of its own to mix the calendar feeds together, you should say No.
  3. The Styles tab contains all of the settings to style the Calendar List Control.  The Styles are arranged in seven groups:  General, Header, Calendar List Area, Calendar Items, Calendar Name, Footer, and Border Rounded Corners.
    1. The General group contains only a single setting for the Border size of the border that surrounds the Calendar List Control.  The default value is 0px.  If you want a border to surround the calendar list control, simply enter a pixel value.  The best practice for borders is a 1px border.
    2. The Header group contains settings that control the font, font size, font color, background color, border color, padding and border bottom of the Header displayed above the control's contents.
      1. The Font setting is used to set the font used for displaying the Header text.  This setting is inherited from the Base font.  Generally speaking, it is a best practice to maintain consistency in your fonts across all the various elements of your calendars.  However, if you want to use a different font stack for this Header, just click in the textbox and replace the existing font stack with a new one.
      2. The Size setting controls the size of the font used in the Header.  The default value is 10 points.  If you are using relative length units like rem or em, you should divide 10 by 10 to arrive at 1rem or 1em.
      3. The Color setting controls the font's color for the heading.  This setting defaults to black (#000000).  However, it is fairly common to use another color to produce the header text.  To use a color other than black, simply replace the default value with a new hexadecimal color value.
      4. The Weight setting controls the darkness of the font in the header.  As this is a header, it really should be in bold text.  However, you have options to alter this to either normal or medium font weights.
      5. The Background color setting controls the background behind the Header text.  The most prevalent setting is white (#ffffff).  Leaving this setting as transparent will often work but if your text is in dark colors and the background is also dark you risk not being able to easily view the header text.
      6. The Border color setting controls the border immediately below the Header text.  It is customary to use the same border color you used in your Global Settings for this value.
      7. The Padding setting controls padding around the Header text.  The default values are no border padding.  If you determine due to your font choices that you need a little more spacing increase the value of the appropriate padding.
      8. The Border bottom setting controls the relative thickness of the bottom border immediately below the Header text.  This setting is inherited from the General Settings → Border size setting.  It is customary to have at the least a thin separating line underneath the header text so a 1px bottom border will likely be sufficient.
    3. The Calendar List Area group contains only one setting, the Border color.  This setting is inherited from the General Settings → Border size setting and produces a border around the entire calendar list.
    4. The Calendar Items group controls formatting of the calendar items in the control's list of calendars.
      1. The Padding setting controls padding around each calendar listed in the control.  The default setting is for 2px of space above, below, and to the right of each calendar item.  These settings generally work well for the majority of calendars.
      2. The Max scroll height setting controls the maximum size of the calendar list and controls space for the calendar items.  It defaults to 300px.  If you need more space because you have numerous calendars mixed together, increase the scroll height until you are satisfied with your choice.
      3. The Calendar name wrap setting controls whether or not the calendar list items' text will wrap to a new line if they cannot fit in the width of the bounding box.  The default setting is set to normal which turns on the wrapping functionality.  You may choose nowrap to turn off wrapping but that is normally not a best practice as this control is meant to fit in small amounts of screen real estate and needs to allow wrapping to be successful.
    5. The Calendar Name group controls the styling of the calendar names linked in this control.
      1. The Font setting controls the font used for the calendar names listed in the control.  This setting defaults to the Base font and likely should not be changed to maintain consistency of fonts across your calendar implementation.
      2. The Size setting controls the font size of the calendar names listed in the control.  The default setting is 8 points.  If you are using relative length fonts like rem or em, you will need to divide 8 by 10 to arrive at 0.8rem or 0.8em.
      3. The Left padding setting adds a small amount of space between the border of the control and the listed calendar item.  The default value of 4px indents the calendar name from the border.  If you want more or less padding, simply replace the existing value with a new value.
    6. The Footer group controls the footer of the calendar list control which contains the options for the links to turn on all of the calendars in the list or turn them all off.  There are settings for the font, font size, font color, link color, background color, and padding.
      1. The Font setting controls the font used to display the footer text.  This setting is inherited from the Base font setting and should typically not be altered to maintain consistency of your fonts across all the elements of your calendar.
      2. The Size setting controls the font's size for the footer text.  The default setting is 8 points.  If you are using relative length units like rem or em, you would divide 8 by 10 to arrive at 0.8rem or 0.8em.
      3. The Color setting controls the color of the font for all non-link text.  The default setting is for black text (#000000).  You may replace black with another color by entering a new hexadecimal color code.
      4. The Link color setting contains the colors for the link itself and the color when you hover over the link.  These settings are inherited from your Base link color set in the Global Settings and should not be altered.
      5. The Background color setting controls the color of the background of the footer region of the calendar list control.  It is set to transparent by default.  A best practice is to ensure that this background matches the background color you have used throughout the rest of your calendar which is often white (#ffffff).
      6. The Padding setting controls spacing around the Footer text.  The default is for no padding.  If, however, you feel the need to have more spacing between the calendar list items and the footer, increase the padding values appropriately.
    7. The Border Rounded Corners group contain only one setting, the Border corner rounding.  This setting is inherited from the Base border corner rounding setting you set in your Global Settings.  If you want to alter your choice for this control, simply click in the textbox and set a new pixel value.
    8. When you are satisfied with your choices, click the OK button to save your settings.  You may preview how your choices have affected the calendar list control by clicking the Preview button.

Filter, Go to Date, & Search Spuds

The Filter, Go to Date, and Search controls all give the user access to control the content being displayed on the calendar.  

  • The Filter control allows the user to filter the content based on criteria selected by you when you build the filter.  The criteria can include things like the location assigned, categories on the event, and many more.  
  • The Go to Date control allows the user to go to a date on the calendar that they enter in the search box.  
  • Finally, the Search control provides a search box for the user to enter a keyword in order to find events that match that keyword.
Setting Up and Styling the Filter Control

The Filter Control gives the visitor to your calendar a way in which to filter the events listed on the calendar.  As with all elements of a Publisher-based calendar, you have a series of settings and styles that you need to make decisions concerning both the behavior of the filter as well as its look and feel.  Your choices in the Settings will drive whether or not your filter performs its task with a drop-down menu or with checkboxes.

To edit the Settings and Styles for the Filter Control:

  1. Add the filter to your Control Spuds Tab for this calendar by clicking to select the Filter and clicking the OK button.
  2. The Settings and Styles will open by default for you to setup the filter.
  3. The Settings tab contains all of the settings that determine how the filter will behave.  The Settings are arranged in three groups:  Filters, Blank Filter Value Settings, and Mobile.
    1. The Filters group contains settings for the Event template and the Filter by options.
      1. The Event template setting concerns which event template will be used for building the associated custom fields that your filter may use when filtering events on the calendar.  As such, you will likely want to review the event template that you want to select and make sure that the right combination of custom fields are available.  The drop-down list will contain all of the event templates that you may choose from for this calendar.
      2. The Filter by setting controls what custom data field your visitors will use to filter the event calendar's events.  As you can see, the list can be long!  A commonly used filter is the Location filter.

        As you see, in the image below, once you select a filter like the location field you have the option to change the Label for that filter (it defaults to Location).  You will also be asked to determine whether or not you want this filter to be a Single Value or Multiple Values.  A Single Value filter option will create a drop-down list of locations contained on the events in this calendar.  But, you may only select one location at a time.  A Multiple Values filter option will create a checkbox list of the locations contained on the events in this calendar allowing you to check multiple locations to filter by.  Also note that in a Single Value filter, you have the option to select All Values.  You may also change the label from All Values to language of your choosing.
        The Filter control also allows for up to five unique custom fields to be used by calendar visitors in filtering events.  Notice that when you select a second filtering data field, you have the option to change from Single Value to Multiple Values.  Also, note that you may choose to only display the secondary filter after a calendar visitor selects the primary filter by checking the box labeled Display filters only after selection is made in the previous filter.  A two layer filter using Location and Categories can be quite useful for a multi-campus institution.
        For example, a multi-campus institution would have multiple campuses with events in multiple locations on a comprehensive events calendar.  They might choose to filter by Categories first and allow for Multiple Values.  This approach would be keying on Campus event categories so that a calendar visitor could choose one or more campuses' events to look at while excluding the rest of the campuses.  The secondary filter would not display until the visitor has selected the category or categories.  Then, the Location drop-down menu would display producing a list of all of the locations used in this calendar at the campus or campuses selected.  If you altered the Location filter to Multiple Values you would get a checkbox of all of the locations used on the events in the calendar from the selected campuses.  That could produce a very long list of checkbox items for locations.
        These options would produce a filter that looks like the following image.  A visitor has to select the category before seeing the second filter.
        In this example, once CSV Import has been checked then the visitor would be presented with the second option to filter by a specific location.
    2. The Blank Filter Values Settings group contains settings for what the filter should do when some calendar entries have no value.  For instance, let's say a Location filter was being used but there were calendar announcements on the calendar that contained no location value.  These settings tell the filter control how to respond.
      1. The Show blank filter value setting controls whether or not you will display the option to filter by a value to find all the events without a location or whatever criteria you have applied as your filter item.  It defaults to No.  If you would like to use this option, click the Yes radio button to make it active.
      2. The Blank value label setting controls the label for filtering to just those items on the calendar that have no value set for this criteria.  The default value is None Specified.  However, you may set your own blank value label to appear like No Location Reserved.
    3. The Mobile settings group contains a single setting, Force single select on mobile.  This setting controls whether a mobile device's filter options will be multiple items or a single item by drop-down list.  Since you often want to conserve space on mobile devices, you should be more mobile-friendly by accepting the default setting of Yes.
  4. The Styles tab contains all the stylistic elements needed to style the Filter Control so that it matches the stylistic formatting of your other calendar attributes.  The style settings are arranged in seven groups:  General, Header, Filter Box Area, Drop-Down Items, Multi-Select Items, Footer, and Border Rounded Corners. 
    1. The General group contains only one style setting, the Border size setting surrounding the control.  This style setting defaults to 0 pixels.  If you want to set a slight border around the control, you should enter a 1px value.
    2. The Header group contains a number of style settings controlling how the header text for the filter will be formatted.  The font settings including Font, Size, Color, and Weight all control what font and characteristics of the font will be applied to the Header text.  The Font setting is inherited from the Base font in your global settings and should not be altered.  The Size setting controls the size of the font.  Since this is in points, you will likely want to alter the value.  If you are using relative length font sizes like rem or em, you will want to dived 10 by 10 (the original default text size) to arrive at 1rem or 1em.  The font color is controlled by the Color setting and may be left as black (#000000) or may be altered to another color you use on your website that is part of your website's color palette.  It is typical for header text to be presented with a bold font weight but you have the option to convert the header to either normal weight text or medium weight text.  The Background color controls the background of the filter control.  It defaults to transparent but it is a better practice to set a white (#ffffff) background.  The Border color should typically be set to the value you have been using for borders in your Global Settings.  The Padding controls spacing around the header.  Finally, the Border bottom would control the size of any border you place at the bottom of the filter header text.  This setting is inherited by the Border size setting set in the General group settings.
    3. The Filter Box Area group contains a number of stylistic elements that control styling of the filter box area itself.  The Border color is inherited from the Border color global setting and should not be different for the control.  The Background color is very often best set to a white (#ffffff) background.  However, other lightly shaded colors would work as well.  The Padding settings control the spacing around the Filter Box Area itself and are set by default to 0px for top, right, bottom, and left padding.
    4. The Drop-Down Items group contains stylistic settings for the drop-down menu generated when you select Single Value for the filter value of a data element on the Settings tab.
      1. The Dropdown font setting controls what font is used for the drop-down items.  It is inherited from the Base font setting of the global settings and should be left to the default value for consistency of fonts across the elements of your calendar.
      2. The Dropdown font size setting controls the size of the font used for your drop-down items.  It defaults to 8 points (pt).  However, if you are using relative length fonts like rem or em, you will need to divide 8 by 10 to arrive at either 0.8rem or 0.8em.
      3. The Dropdown width setting controls the width of the drop-down menu.  The default value is set to a width of 110px.  You may alter this setting by selecting a different pixel size.  Narrower widths will produce more wrapped text while wider widths will produce larger drop-down menus with less wrapped text.
      4. The Dropdown border width setting controls the width of any border around the list of drop-down items.  If you don't want a drop-down border leave the field blank.  If you want a border, normally a 1px border is sufficient.
      5. The Dropdown background color setting controls the background behind the drop-down items.  Customarily, this will be set to white (#ffffff) but other colors may be applied from your campus's color palette.
    5. The Multi-Select Items group contains stylistic settings for the checklist options when you select Multiple Values for the filter value of a data element in the Settings tab.
      1. The Multi-select item font setting controls what font is used for the list of checkbox items.  It is inherited from the Base font setting of the global settings and should be left to the default value for consistency of fonts across the elements of your calendar.
      2. The Multi-select item font size setting controls the size of the font used for your list of checkbox items.  It defaults to 8 points (pt).  However, if you are using relative length fonts like rem or em, you will need to divide 8 by 10 to arrive at either 0.8rem or 0.8em.
      3. The Multi-select item color setting controls the color of the font used for the checkbox items.  The default value is set to black (#000000).  However, you may use other colors from your campus's color palette if you so choose.
      4. The Padding setting controls the spacing around the checkbox items.  It set a default padding of 2px for top, right and bottom margins with left padding being set to 0px.  If you want to have more padding, increase these values.  The left padding setting causes the items to line up next to the border of the control.
      5. The Max scroll height setting controls the height of the item list before a scroll bar is added to navigate additional checkbox items.  The default value is set to 300px.
      6. The Multi-select item wrap setting controls whether or not the list item's text will wrap or not in the space afforded for the control.  You have the options of normal and nowrap.  It is a best practice to allow your text to wrap so the normal setting is preferable.
    6. The Footer group contains settings for the footer of the Filter Control.
      1. The Font setting controls what font is used for the footer text.  It is inherited from the Base font setting of the global settings and should be left to the default value for consistency of fonts across the elements of your calendar.
      2. The Size setting controls the size of the font used for all footer text.  It defaults to 8 points (pt).  However, if you are using relative length fonts like rem or em, you will need to divide 8 by 10 to arrive at either 0.8rem or 0.8em.
      3. The Color setting controls the color of the font used for the footer text.  The default value is set to black (#000000).  However, you may use other colors from your campus's color palette if you so choose.
      4. The Link color settings include one for the link and one for when you hover over the link in the footer.  These settings are inherited from your Base link color settings in your Global Settings and should not be changed for consistency in the behavior of links across your calendar elements.
      5. The Background color setting controls the color of the background behind the footer text.  It is customary for a white (#ffffff) background to be used but you may use other colors from your campus's color palette if you so choose.
      6. The Padding setting controls the spacing around the footer text.  The default setting is for 0px of top, right, bottom, and left padding.  If you want more spacing around the footer text, increase these values above zero.
    7. The Border Rounded Corners group contains only one style setting, the Border corner rounding.  This setting is inherited from your Base border corner rounding setting from your global settings.  If you decide you do not want the corners of your filter control rounded, you may set this to 0px.  Remember that older browsers like Internet Explorer Version 8 and below will not round the borders of boxes as those browsers do not contain support for this CSS3 functionality.
    8. When you are satisfied with your choices, click the OK button to save your settings and styles.  You may preview your settings and styles by clicking the Preview button.
Setting Up and Styling the Search Control Spud

To edit the Settings and Styles of the Search Control spud:

  1. Click the Edit Settings & Styles link in the Search Control spud group.
  2. The Edit Settings for Search window will display with two tabs:  Settings and Styles.
  3. The Settings are arranged in two groups:  General Settings and Search Settings.
    1. The General Settings group contains only one item, the Label for the search control.  The Label text defaults to Search.  You may change the label by entering text in place of the default text.
    2. The Search Settings group contains two items:  Input prompt and Search button image.
      1. The Input prompt setting allows you to enter a prompt to display when the calendar visitor encounters the search box.  For instance, you could enter text like Enter a keyword to search for events in this box and the Search box will contain this text as a prompt. 
      2. The Search button image setting provides the image used as the search button.  It defaults to a magnifying glass.  You could upload an image (18x18 pixels) to replace the magnifying glass or choose to have no image.
  4. The Styles group contains five groups:  General, Header, Search Text Box, Go Button, and Border Rounded Corners. 
  5. The General group contains only one style setting, the Border size.  The default setting is 0px.  This style controls whether or not a border will be placed around the entire Search Control.  If you want a border bounding the control, set a Border size of 1px.
  6. The Header group contains settings controlling how the header for the search control will be styled including the font characteristics, the background color behind the header, the border color below the control, and a couple of padding settings.
    1. The Font setting controls the font used for the Header text.  This style is inherited from the Base font style and typically does not need to be changed.  However, if you want to use a different font stack you may click in the textbox and replace the inherited offering.
    2. The Size setting controls the size of the Header text.  The default setting is in points.  If you are using relative length units for your fonts like rem or em, you will want to divide 10 by 10 (the original global font size) to arrive at 1rem or 1em.
    3. The font Color settings controls the color of the Header text.  The default setting is black text (#000000).  You may alter this to another color by entering an alternative hexadecimal color code.
    4. The font Weight setting controls the darkness of the Header text.  The default setting is bold.  As this is a header, it is typical for it to use the Bold font weight.  However, you have the option to alter this to either normal or medium.
    5. The Background color setting defaults to transparent.  This style controls the background behind the Search Control.  It is a best practice to set a background color for this control spud.  A white background (#ffffff) is the choice for most calendars.
    6. The Border color setting provides the color of the border for the Header text.  This border color is not inherited but it is a best practice to use the same border color you set in your Global Settings.
    7. The Top padding setting controls how much spacing is added above the Header text.  It is by default set to 0px.  If you want to add some spacing, enter a pixel value to add more top spacing. 
    8. The Left padding setting controls the padding to the left of the Header text.  It is by default set to 0px.  If you want to add some additional spacing, enter a pixel value to add more left padding.
    9. The Border bottom setting controls the padding below the Header text.  It is inherited from the Border size setting which defaults to 0px.  If you want additional spacing below the Header text, click to activate the text box and enter a pixel value.
  7. The Search Text Box settings control the styling of elements on the textbox itself.
    1. The Border color setting is inherited from the global Border color setting.
    2. The Background color setting is set by default to transparent but if you have set a background behind other calendar elements you should set the same background for the Search Text Box.  The typical color choice is for a white background (#ffffff).
    3. The Margin setting controls the top, right, bottom, and left margins of the Search Text Box.  It defaults to a margin of 0px.  If you want a larger margin, simply modify this setting adding a numerical pixel value. 
    4. The Padding setting controls the padding surrounding the Search Text Box.  The default settings include top and bottom padding of 1px and right and left padding of 2px.  If you want larger padding around the box, you may increase this numbers.
    5. The Textbox font setting is inherited from the Base font.  As you want your fonts to be consistent across all areas of your calendar, it is a best practice to not alter this font stack.  However, if you want to use a different font stack, simply click in the textbox to activate it and then alter the font stack.
    6. The Textbox font size setting controls the size of the text in the Search Text Box.  The default size is set to 8 points.  If you are using relative length fonts like rem or em, you should divide 8 by 10 to arrive at a value of 0.8rem or 0.8em.
    7. The Textbox width setting controls the width of the textbox used to enter keywords.  It defaults to a width of 110px.  Should you find that this setting is not wide enough, you may increase it to allow for more text to appear in the textbox. 
    8. The Textbox font weight setting controls how dark the text is in the search text box.  The options are bold, medium, or normal.  Since the majority of search text boxes output normal text, it is a best practice to do this with the search text box's text.
    9. The Textbox border width setting controls the size of the border surrounding the text box.  The default setting is for no border to surround the text box.  As most search text boxes have a border surrounding them, a 1px border will put a border around the textbox defining its area.
  8. The Go Button settings control the formatting of a Go button in place of the magnifying glass icon for executing the search.
    1. The Go button font setting is inherited from the Base font and should remain an inherited element for consistency of fonts across your calendar implementation.
    2. The Go button font size setting controls the size of the text on the Go Button.  The default size is set to 8 points.  If you are using relative length fonts like rem or em, you should divide 8 by 10 to arrive at a value of 0.8rem or 0.8em
    3. The Go button font weight setting is set by default to normal text.  If you want a darker text setting for the text, you may set this option to either medium or bold.
    4. The Text color and Background color settings need to be set so that the text will be visible on the button created.  If the Background color setting is a dark color, the Text color should be set to a lighter color.
    5. The Border color setting controls the border surrounding the Go Button.  You may set a black border to put a demarcation around the box or you may leave it blank.
    6. The Border width setting controls the width of the border surrounding the Go Button.  If you provide a border color, you will need to set a Border width of 1px or greater.
    7. The Button padding setting controls the amount of padding around the Go Button.  If you find the 2px default settings to tight, you made add space around the button to make the Go Button a bit larger.
    8. The Space between box and button setting controls the spacing between the Search Text Box and the Go Button.  If you want more separation between the text box and the button, increase the amount of pixels by altering this setting.
  9. The Border Rounded Corners group contains only one setting.  The Border corner rounding applies to the would round the corners of the Go Button as well as the borders of the bounding box.  This setting is inherited from the Base border corner rounding.  It is often a good idea to leave this to the same rounding as the global setting.
  10. Once you have completed preparing all the Settings and Styles for the Search Control, click the OK button to save these settings.  If you would like to preview the Search Control, click the Preview button.

Month List Spud

The Month List control allows calendar users to jump to a future month containing upcoming events.  This useful control saves calendar users time in navigating around the calendar.  Instead of using the next buttons to get to the next page of events to navigate the calendar.  This control speeds that process up for calendar users.

Setting Up and Styling the Month List Control

The Month List Control gives calendar visitors the ability to jump to a future month of the calendar view to see what events may be occurring during that month.  Typically, this control is placed to float above the Calendar View to improve the efficiency of visitors in finding your events.

To edit the Settings and Styles for the Month List Control:

  1. In the Month List Control group, click the Edit Settings & Styes link to begin styling this control.
  2. The Edit Settings for Month List window will open.  Unlike other settings and styles windows you have experienced, there are only style settings for the Month List Control.  The style settings are arranged in four groups:  Base Styles, Selected Month Styles, Month Without Event Styles, and Month With Event Styles.
  3. The Base Styles settings control basic information concerning the text on the Month List Control as well as the background color behind the list of months.
    1. The Outer padding setting controls the padding around the list of months.  The default settings start the top, right, bottom, and left at a value of 0px.  If you want some additional padding around the control, increase these measures to 1px or greater.
    2. The Background color setting is inherited from the Base background color setting.  This will often be a default value of white (#ffffff).
    3. The Font setting controls the font used for the month names on the control.  The font setting is inherited from the Base font and normally should not be changed.  If you want to use a different font stack for this style, click in the textbox to activate it and then enter the new font stack.
    4. The Font Size setting controls the size of the text.  It is set to 0.7em by default.  However, if you are using rem as your relative length unit, you will need to update the style to read, 0.7rem.
    5. The Text transform setting controls the formatting of the calendar months capitalization.  The default setting is uppercase.  This setting converts the month to all capitalizations.  Other options include:  none, capitalize, and lowercase. 
  4. The Selected Month Styles settings control the color of the font and the font weight for the
    1. The Color setting controls the color of the font for the selected month.  The default value (#790000) is a maroon red.  This color will likely not work for most campuses' color palettes.  It is customary to set the selected month to Black text (#000000).  This will indicate that the month is selected and be in keeping with your campus's color palette.
    2. The Font weight setting controls the darkness of the font for the selected month.  It is customary to make this text, bold, which is the default selection.  However, you may also choose between medium and normal text weights.
  5. The Month Without Events Styles settings control how months that do not have any scheduled events will be displayed in the control.
    1. The Color setting controls the color of the month text when there are no events present.  If you use black text to identify the selected month, you'll want to alter this setting as it is inherited from the Base text color.  Since most software applications gray out elements that you cannot select, a gray font color will work effectively to represent that there are no available events in that month.
    2. The Font weight setting controls the darkness of the text for months without events.  You may choose from normal (the default), medium, and bold text weights.  Since these months will likely be represented with a gray font color, the default setting of normal works best.
  6. The Months With Events Styles settings control how months that do have scheduled events will be displayed and behave on the Month List Control.
    1. The Color setting controls the color of the links when you view the month list control and the color when you hover your mouse pointer over the month on the month list control.  These settings are inherited from the Base link color and should be left to the default setting to maintain design cohesiveness across all of your views and controls.
    2. The Link text decoration setting controls whether links are underlined when you first view them on the calendar entry.  The two options available are none and underline.  If you have set all of your other links to one of these two settings, you should be consistent and have the Months With Event Styles links behave in the same manner.
    3. The Link hover text decoration setting controls whether links are underlined or not when you hover over the month in the Month List Control.  The two options available are none and underline.  You should have the hover text decoration behave in the same manner your links behave for design consistency.
    4. The Font weight setting controls the darkness of the text of the calendar months with events.  There are three options available:  bold, medium, and normal.  The default setting of bold typically works well for the months on this control.
  7. Once you are satisfied with your style settings, click the OK button to save your changes.  Remember that you may preview how your settings have altered the Month List Control by clicking the Preview button.

Timezone Picker Spud

The Timezone Picker control allows calendar users to alter the time on events to their time zone.  Most campuses will not need this functionality but this control is an option to add it to your calendar.

View Chooser & View Chooser Tabbed Spuds

Finally, the View Chooser and the View Chooser Tabbed controls offer different options for allowing calendar users to alter the calendar view. Since the Calendar Spud can provide users multiple calendar views to select from, these controls allow the user to switch between those views. 

  • The Viewer Chooser is great if you prefer offering the choices in a drop-down menu.
  • The View Chooser Tabbed is great if you want the calendar view choices to float above the calendar view itself.

Each control has its own control spud javascript allowing you to add as many of these controls to your calendar as you like.

Setting Up and Styling the View Chooser Tabbed Control

There are two types of View Chooser control spuds available for use with your calendars:  View Chooser Tabbed and View Chooser.  The View Chooser is formatted as a drop-down list.  The more commonly used of these two options is the Viewer Chooser Tabbed control. 

To edit the Settings & Syles of the Viewer Chooser Tabbed control:

  1. Locate the View Chooser Tabbed control and click the Edit Settings & Styles link.
  2. The Edit Settings for View Chooser Tabbed window will load.  There are six groups of style settings for this Viewer Chooser including:  General Styles, Tab Font Styles, Tab Item Styles, Tab Rounded Corners, and Tab Divider Styles.
    1. The General Styles group contains only one style setting:  Padding.  The padding is set by default to 0px at top, right, bottom, and left.  This controls the padding around the entire view chooser.  If you want additional padding, increase the pixels to a value greater than zero.
    2. The Tab Font Styles setting controls the behavior and formatting of the font of the text on the Viewer Chooser tabs.
      1. The Font setting is inherited from the Base font and should keep that setting.  However, you may change it by clicking in the textbox and providing an alternate font stack.
      2. The Size setting controls the font size of the text on the Tabs.  It is set by default to a point value.  If you are using relative length fonts like rem or em, you will need to divide 9 by 10 to arrive at a font size of 0.9rem or 0.9em.
      3. The Weight setting controls the relative darkness of the text generated by your chosen font stack.  You have three options:  normal, medium, and bold.  The default setting is bold which is the best choice for the text on your tabs.
      4. The Color setting controls the color of the text on the Tabs before you hover over that text to make a selection of a calendar view.  It is a best practice to set this to the same color as your base link color. 
      5. The Hover color setting controls the color of the text on the Tabs when you hover over that text to make a selection of a calendar view.  It is a best practice to set this to the same color as your base link hover color.
    3. The Selected Tab Font Styles group controls the formatting of the selected calendar view on the Tabs.
      1. The Selected color setting controls the color of the font for the calendar view you have selected on the View Chooser Tabbed control.  The default value is set to #333333.  If you want the selected text to use the same font color as normal text, a better approach is to set this option to that color.  Very often, black (#000000) is selected for this setting.
      2. The Weight setting controls the darkness of the selected text.  This value is inherited from the Weight setting and should be left to this default value.
      3. The Style setting controls whether or not the font on the selected tab will be normal text or italicized text.  The default setting is set to normal.  If you want the selected view's text to stand out more than the color and weight provide, alter this setting to italic.
    4. The Tab Item Styles group contains stylistic settings for the View Chooser tabs.  These settings control the formatting of the tabs including their height, background color, border size, border color, selected tab background, hover background color.
      1. The Height setting controls the height of the tabs in the Viewer Chooser Tabbed control.  Typically, the default value, 20 pixels, is sufficient height for the tabs.  If your font size is too large, you might need to increase the pixel height but generally speaking, the default setting works well for most implementations of Publisher.
      2. The Background color setting controls the background of the tab itself.  The default setting is an off-white shade and is typically sufficient for the majority of most calendar implementations.  If you want to set your own background color, remember that whatever background you set the text needs to be clearly visible.  Some combinations of the font color set earlier and the  background color set here do not work well together for general usability.
      3. The Background color fade setting adds a gradient to the Background color so that the background of the tab itself will have a gradient consisting of colors between the background color setting and the background color fade setting.
      4. The Border size setting controls how thick the borders will be around the tabs.  The typical border size for most elements of a web page is a 1 pixel border.
      5. The Border color setting controls the color of the borders around the tabs.  The default color option is a dark shade of grey but you may opt for a different border color or even match it to the border color you set in your Global Settings.
      6. The Selected background color setting controls the background of the Selected tab.  It should be a slightly different color from the Background color.
      7. The Selected background color fade setting adds a gradient to the Selected background color with a gradient of colors between the two Selected colors.
      8. The Hover background color setting controls the background of the tab when you hover over it.  It normally is set to the same color you set on the Selected background color.
      9. The Hover background color fade setting adds a gradient to the Hover background color with a gradient of colors between the two Hover colors.
    5. The Tab Rounded Corners group contains only one setting controlling the Tab Corner Rounding.  This setting will round the corners of the tabs.  Users of Internet Explorer Version 8 or lower will receive square tabs as those versions of the browser do not support this CSS style.  It is a good choice to set the Tab corner rounding to the same setting as your rounding ratio for your buttons.
    6. The Tab Divider Styles group contains only one setting as well controlling the tab dividers for each tab.  The Display tab divider setting contains two options:  show and hide.  If you want to display the tab dividers, leave the default setting of show.  It is a best practice to display the tab dividers.
    7. To save your settings, click the OK button.  You may preview the results by clicking the Preview button.

Other Control Spuds

There are a couple of additional less frequently used control spuds.  These control spuds include a Go to Date control, a Timezone Picker control, and a View Chooser control.  The Go to Date control allows the calendar visitor to enter a date and then go to that date on the calendar.  It works similarly to the Search control but instead of entering a keyword, you enter a date.  The Timezone Picker control allows the calendar visitor to change the timezone in which events are displayed.  Typically, this control is only needed where an institution has multiple campuses distributed over multiple time zones.  Finally, the View Chooser contains the same functionality as the View Chooser Tabbed allowing the calendar visitor to switch between different calendar views by clicking that view's name.  In the case of the View Chooser, the control creates a drop-down list of the calendar views available to calendar visitors.  As such, where screen real estate is limited, you could place this control in a left navigation region of a web page with the calendar being in the right region of content.  All of these additional controls are configured the same as those we have reviewed.  Each contains both a Settings and a Styles tab to format the control consistently with all your other calendar elements.


PREVIOUSLY:  Selecting and Styling Calendar Views
UP NEXT :  Selecting and Styling Promotion Spuds