Working with Publish Settings for a Calendar

Which versions of Series25 components are you using?

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

The Publish settings are an integral first step in styling your calendar so that it matches your campus's website styling.  Before you take this step, you need to collect some information from your campus's webmaster so that the style settings in the calendar will match the style setting in the Cascading Stylesheet (CSS) used by the campus's website.  There are a number of key elements you need to know:

  1. What font stack is the campus using (e.g., 'Times New Roman', Times, serif OR Helvetica, Arial, sans-serif)?
  2. Does the primary font in the stack reference a served font like Adobe Typekit or Google Fonts?
  3. What is the base text color (in hexadecimal)?
  4. What is the background color (in hexadecimal)?
  5. What is the base font size (in pixels)?
  6. What is the background color for today's date on the calendar (in hexadecimal)?
  7. What is the base border color for borders in your website (in hexadecimal)?
  8. What is the default color of links (in hexadecimal)?
  9. Does the link change color when you hover over it?  If so, what is the hover link color (in hexadecimal)?
  10. Using relative measures (rem), what is the line height for spacing between lines of text (e.g. 1.5rem)?
  11. Do you use a serif font for headers on your web page?  If so, what is that font stack?
  12. How do you want to format dates (e.g. March 31, 2020, 3/3/2020, 03/03/2020, Mar 31, 2020, etc.)?
  13. How do you want the day of the week to be formatted (e.g., Tues, Tues., Tuesday)?
What does rem mean?

CSS3 introduced a few new units, including the rem unit.  Rem stands for "root em".  The em unit is relative to the font-size of the parent which can cause problems with font sizing in your calendar.  The rem unit is relative to the root element, normally an html element.  You should use rem units for font size instead of the default, pt, that is specified by the default calendar build.

Having all of this information with you when you click the Publish button will allow you to quickly set up the global settings for your Publisher calendar.

To begin the process of publishing your calendar in 25Live Publisher, take the following set of steps:

  1. Login to 25Live Publisher.
  2. Locate the calendar for which you want to work and click it to make it the Current Publication.  The active calendar will have a check mark and be in bolded text.  You may notice a blue arrow pointing down beside each calendar.  That is a short-cut menu that allows you to: Edit Colors, Go to the published view, Create a sub-calendar, Delete a calendar, Share a calendar, Publish a calendar, Email a calendar, and control Calendar settings.

  3. Click either the Publish calendar command in the short-cut menu for the calendar or click the Publish button from the menu above the calendar in 25Live Publisher.
  4. This will open the Publish settings in 25Live Publisher which will first prevent the option to choose the default calendar view.  The default is set to Classic Table by default for each newly published calendar.


    Do I need to change the Default Calendar View Now?

    There is no way to preview the default calendar views in the Publish settings.  Although you may change the Default Calendar View, it is better accomplished on the Calendar spuds tab where you can preview every calendar view and remove the Classic Table view if you would rather not use it.

  5. Next, you need to review the various Publish Settings
    1. If you want to change the Calendar name chosen when you published the feed, you may do so in the Calendar name field.
    2. The unique web name is a unique identifier of this calendar, it will default to the name of the calendar.  You should add the name of your 25Live instance in front of the calendar name and Check availability to ensure the web name remains unique.
    3. The Calendar address should be the full link (URL) to the web page which will host the calendar.  Do not enter this address here until you have completed styling the calendar as you will want to preview your work in 25Live Publisher prior to posting it on your campus website. 
    4. There are certain calendar views that will allow you to display both the Calendar Name and the Description.  The Description is a description of the contents of the calendar.  
    5. The Access Type indicates whether this is a Public calendar, a Password protected calendar, or a calendar behind a Secure URL like a portal page.  Well over 90% of your calendars will likely be Public.
    6. Distance unit of measure should be left to miles unless you are in a location expressing distance in kilometers (km).
    7. Unpublished fields are fields that you have made invisible to the Details view of a calendar entry.  For instance, it is not uncommon for institutions to hide the Event State from the details view.  Those hidden fields will turn up over time in this drop-down list where you can selectively add them to future calendars.
    8. The Featured event field is the name of the event custom attribute created in both 25Live Administration Utility and 25Live Publisher.  To see how to create the Featured Event field in both 25Live Administration Utility and also in 25Live Publisher, visit Featured Events in 25Live Pro and 25Live Publisher.  Enabling this functionality is key to featuring events on Promotional spuds as well as controlling for special formatting of calendar entries on the Classic Table, List, and Tile calendar views.
    9. The Filter Views should be enabled as they allow you to define predefined filtered views of your content for this calendar.  Enabling the Filter Cache simply speeds up the performance of your filter but limits the range of data that may be used.
  6. The next group of settings on the Publish settings page contain a list of all the pre-existing calendars that have been created from Publisher feeds.  To review the concept of mixed-in calendars, visit Building a Mixed-in Container Calendar in 25Live Publisher.  Mixed-in calendars and top-level/sub-level calendars give us a way to create more comprehensive calendars from multiple calendar feeds.  To mix another calendar into this calendar, you simply place a checkmark in the box next to the additional calendars you want to add to this one.  
  7. The Search settings govern whether or not the search engine spiders may scan your calendar entries for search engine listings.  For public-facing calendars, you will want to make them searchable by clicking the Yes radio button.  The Search keywords are a set of meta tags that contain words and phrases that would help someone searching in Google, Yahoo, or Bing to find your events.  The City and region increases the relevance of your events as well and puts them in context for people searching the web.

    Choosing Search Keywords

    Choosing the keywords is actually more important than you might think.  The words and phrases you choose should be in the Event Title (or Event Name) and the Event Description fields on your events.  When the search engine spiders comb through your calendar, the keywords corresponding to actual elements on the events will raise the relevance of those events to the search engine and give them better search positioning.  The keyword list is a comma-delimited list and you do not need to include a space following the comma.

  8. The Display Options control the time elements of your calendar. 
    1. All calendars default to Pacific Time.  You should choose your time zone from the comprehensive drop-down list of options under Time zone.  
    2. You may also select the day that the Week display starts.  The default setting will be Sunday.  It is recommended that you not change this as users will be confused if your calendar starts on Monday since Western countries' users are accustomed to the Gregorian Calendar framework that starts on Sunday.
    3. The Day display starts determines the hour with which you want the days to start in this calendar.  Set the start time that is appropriate for your campus calendars.
    4. The Day display ends determines the hour with which you want the days to end in this calendar.  These are set on the hour and should be set to a time that is appropriate for your events at your campus.
  9. The Email Settings control e-mail settings and functionality for this calendar.
    1. The Email subscriptions turn on the ability for automatic e-mails to be generated for this calendar and allows viewers to add themselves to the distribution list.  The distribution list for each new calendar starts out empty.
    2. The Forward replies settings controls how e-mail replies will be handled.  Turning this setting on will forward calendar and event e-mail replies to the calendar owner (the Publisher User) so you will want to ensure that the generic Publisher user is a real account that can receive e-mail responses.
  10. Commit your settings by clicking the Publish button to begin settings the other settings controlled under the Publish Settings tab.

Once you click the Publish button, you are presented with all of the other options for styling a Publisher calendar.

Initial publication creates the following tabs:  Publish Settings, Calendar Spuds, Control Spuds, Promotion Spuds, Email, Feeds, and Hosted View.  To complete the initial styling, you will need to visit the pages linked by pressing the buttons on the Publish Settings tab including Edit Styles and Icons, Edit Calendar Colors, and Edit EA Settings.  

Publish Settings - Edit Styles and Icons

The Edit Styles and Icons pages contain global settings controlling elements like fonts used by the calendar, font sizes, line heights, and more.  These global settings will roll throughout your entire calendar saving you significant time in completing your styling work. 

To begin the styling of your new calendar:

  1. In the Publish Settings of the calendar, click the Edit Styles & Icons button to open the global styles.
  2. The Global Settings window will open in which you will apply your global style settings.  There are two tabs for which you need to review settings.  The first is the Styles tab which controls a significant portion of stylistic settings for your calendars.  The second is the Icons tab which allows you to choose between different icon sets for your calendar.
  3. The Global Settings are arranged in a series of groups.  The first group refers to the Font Scheme.  The Font Scheme is used to supply the link to any custom fonts you may be using for text on your web page, most commonly either a Google Font or an Adobe Typekit font.  If you are using a served font from one of these providers, you will see that the Custom font link has specific formatting that you have to follow in order to be able to use the font later in the Global Settings screen.  You may use multiple custom font links by enclosing each in separate <link href> html tags.  Doing so would allow you to use a custom sans-serif font for body text and a custom serif font for header text.

    Formatting the Custom Font Link for Google Fonts and Adobe Typekit

    If you are using a Google Font, the custom link should look like the following:

    <link href='//fonts.googleapis.com/css?family=Open+Sans:400,500,700' rel='stylesheet' type='text/css'>.

    Notice that the http: has been removed which is a useful approach if your font and your calendar may be used on either http or https pages.

    If you are using an Adobe Typekit® font, the custom link should look like the following:

    <link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css">.

    You must replace the xxxxxxx value with the value for your font.  

  4. Once you have completed work on your Font Schemes, you need to begin setting the Base Page Styles.  The Base Page Styles allows you to start supplying that stylistic information mentioned earlier to your calendar.

    1. The first two settings control the Base font and Base email font stacks for the calendar.  If you have indicated that you have a specific sans-serif font that you want to use as your Base font, you should enclose it in single quotes (e.g., 'Open Sans' helvetica, arial, sans-serif).  This font stack should match what is being used for body text on your campus website.  The Base email font stack should be a repeat of the Base font stack as you want any e-mails to carry your stylistic branding.

    2. The Base background color for each newly published calendar is set to transparent.  If you have a dark background on your web page, and then have dark text, your text will disappear when the calendar is displayed because the background of the website is basically displaying underneath the calendar contents.  A better practice is to set a Base background color.  Very often campuses set the base background color to white (hexadecimal #ffffff).

      A Tip about Hexadecimal Color Codes

      Anytime you have a color code that is all the same letters or the same sequence of letters in hexadecimal, you may abbreviate the code by removing three of the letters that repeat.  For instance, white is #ffffff but since it repeats you can abbreviate it to #fff.  Shorthand hexadecimal colors save time and make cascading style sheets more efficient as the browser has fewer characters to process.  They can even be used to code a sequence that isn't all the same letter or number.  For instance, orange has a hexidecimal color code of #ff6600 which converts in shorthand code to #F60.

    3. All of the text sizes across the Publisher environment are coded in points (pt) which are a measure of the height of the lettering.  There are approximately 72 points in one inch so a 72pt text would be one-inch tall text.  But, most modern web development is done not using points but using pixels (px).  The World Wide Web Consortium says that 16px is the ideal font size for reading web content while sitting in front of a computer.  It is a best practice to convert from using points and use pixels for the Base font size.  But remember the original value of 10pt because you may use it to perform some mathematical wizardry to make your fonts across the calendar more "responsive". 
    4.  The Base line height setting controls the line height.  Line height is how we add some spacing between lines of text on a website.  As you can see the default is 1.4em.  That means take the base font and essentially multiply it by 1.4 to arrive at a line height.  As mentioned in the information note below, both em and rem are elements of the cascading stylesheet specification that allows use to have relative sizes.  Since we really want all of our line heights and font sizes in the calendar to scale around the base font size chosen earlier.  Normally, the best approach is to set the Base line height to 1.4rem so that the scaling of the line height will be controlled by the Base font size of 16px.  Mathematically, the base line height evaluates to 22.4px.

      What is the em and the rem in CSS?

      The em and rem are relative length units specifying a length relative to another length property.  These elements allow you to scale better between different rendering mediums (e.g., laptop vs. tablet vs. cellphone).  The em is relative to the font size of the element (2em means 2 times the size of the current font).  On the other hand, the rem is relative to the font-size of the root element.  The em may sometimes cause fonts to scale to the font-size set on the bounding element that contains your calendar.  Since that is not what we want, we may use the rem to scale to the root font size of 16px.

    5. Both the Base link color and the Base hover color control the coloration of links.  Since you want your calendar to look like it is a native part of your web page, you need to add the hexadecimal color for the link when you load the page and the hexadecimal color (a color change) that happens when a visitor hovers over the link.
    6. Your buttons will typically behave like your links and on many websites, the Base button background colors will be the same as the Base link color and the Base hover color.  However, if your website uses a different color scheme for buttons you may set that in these settings.
    7. The text color for the text label on your buttons will need to take into consideration the background color of the buttons.  Dark button backgrounds usually use a white or a brighter color while lighter button backgrounds would use darker text colors.
    8. You also have control over how the links behave on the calendar.  Are links on your website underlined when you load the page?  If so, you would set the Base link text decoration
      to underline to ensure that the links are underlined by default.  The Base hover text decoration controls whether or not the link gains an underline when hovered over by a visitor to the calendar.  Very often, link settings are set to None for the Base link text decoration and Underline for the Base hover text decoration.
    9. The Base border color is the color used for the borders of objects on your web page and or your calendar.
    10. The Base today background color is the color used on the calendar to denote the current date.  Typically speaking, lighter pastel colors work better for base today background colors.
  5. The Base Border Rounded Corners setting controls how corners of buttons and other objects on the calendar are formed.  The default setting of 0px will return perfectly square buttons and square boxes as in pop-up boxes.  Adding a radius value in pixels will round the corners of these boxes.  A radius of 4px produces slightly rounded buttons and boxes on your calendar.   Earlier browsers like Internet Explorer version 8 and below would return square boxes.
  6. The next group of Global Settings control how headers, groups, and subgroups are formatted.  These settings might be a location where you would apply a serif font different from the global content text set earlier to a sans-serif font.
    1. The Global Header settings control how header text is formatted throughout your calendar.  You should either repeat your sans-serif font from your Base font setting or choose a serif font stack to match the font use on your website.  For consistency with your campus website, you should make your choices based on how headers are formatted there.
    2. The Global Header size is set in points.  To make the fonts more responsive to differently sized screens, you should consider converting this to a relative length measure.  If you recall, the default setting for global text size was 10pt.  So, a simple mathematical calculation will allow your headers to be relative to the size of the new setting in pixels.  Divide 12pt by 10pt and you return a value of 1.2.  That would mean your input for this column would be 1.2rem.
    3. The Global header color will need to be set to a hexadecimal color code that matches your campus stylesheet.
    4. Finally, the Global header text transform allows you to convert the text in the header to one of the following formats:  none, capitalize, uppercase, and lowercase.
    5. Repeat this process for the Calendar View Groups which controls the grouping headers on your calendar.  You will likely want to set the Global group background color to the same Base background color you set earlier on this screen.  The calculation of the Global subgroup text size would be 9 divided by 10 to arrive at a rem value of 0.9rem.
  7. The final group of settings on the Styles tab concern how Featured Events are treated.  You may have different settings for how your featured events text, links, and background color are formatted to make these events stand out more prominently.  It is customary for the Global featured text color, Global featured title link color, and Global featured details link color to be formatted to match the Base text color, Base link color, and Base hover color, respectively.  You might consider using a light shade of color behind your featured events to make them stand out on the calendar.
  8. Next you may review the Icons tab to see what icon sets are available for use with your calendar.  There are three options:  Default icons, Classic icons, and No icons.  The Default icons set is selected by default.  You may use your own set of icons by uploading a New icon image and then searching for it with the Magnifying Glass.  The majority of campuses simply make use of the Default icons set as uploading your own means you have to create an icon for each of the icon images listed and they must be sized to match the size of those you are replacing.  CollegeNET does not suggest use of the Classic icons set nor the No icons setting.
  9. Once you have completed all your work on the Styles and Icons tab, you may preview how your settings have affected the calendar by clicking the Preview button.  Once you are happy with all of your settings, click the OK button to save your changes.

Publish Settings - Edit Calendar Colors

The Edit Calendar Colors is the next option available on the Publish Settings tab.  You may use these settings to add a color shading underneath the events for multiple calendar feeds mixed together as part of a mixed-in calendar.

  1. If you want to use different colors to identify separate calendar feeds, click the Edit Calendar Colors button under the Publish Settings tab.
  2. The calendar colors are set to not display by default.  To edit the Calendar Colors, you will need to select the Yes radio button listed under the Use calendar colors option.
  3. In the Edit Your Calendar Colors window, you may set the Background color for this calendar's entries, the Text color for the entries on this calendar, and the Link and Hover Link colors for this calendar.  The best practice with the text and link colors is to make those match your base text and link colors set in the Global Settings earlier.  It is generally not a great idea to put a color other than white behind all of the feeds in a mixed-in calendar.  Also, the Background color should be set to lighter shades of color if you are using black text.
  4. Once you are finished working with the Calendar Colors, click the OK button to save your changes.

Publish Settings - Edit EA Settings

The last set of Publish Settings that you will need to set up are the EA Settings.  EA is an abbreviation for Event Actions.  This area is the first of two areas where you will manipulate event actions on your calendars.

To edit the EA Settings for your new or an existing calendar:

  1. In the Publish Settings tab for your calendar, locate and click the Edit EA Settings button to open the EA Settings for review.
  2. The Edit Settings for EA Event List will appear containing three regions:  Field Options, Image Settings, and Registration Messaging.  You may ignore the Registration Messaging settings as the Registration module is not functional for Publisher.
  3. The Field Options control the fields that will show up on the details of your events and how they will behave.
    1. The Display calendar name option controls whether the name of calendar is displayed with each event when you are reviewing it.
    2. The Description character limit allows you to set a maximum number of characters to show for the Event Description.  As the note indicates, a blank value means no limit.
    3. The Custom field character limit allows you to set a maximum number of characters to show for custom fields and again a blank value means no limit.  As the custom attributes that this field would control often contain far fewer than 200 characters, this field usually gets set to blank when most campuses are building their calendars.
    4. The Location label, Description label, and Link label give you control over the label names for those three items.  For instance, you could change Where to Venue, Description to Event Description, and Web link to Event Web Page.  On each of the various event actions that visitors can make on your calendars these settings would control the way data is presented.
  4. The Image Settings are used to control the Event Image or Detail Image of the event.  There is more granular control of this in the spud tabs that follow but this setting controls what appears when a user takes an event action.
    1. The Max image width (pixels) ensures that images with a larger width are reduced to this 100px width. 
    2. The Max image height (pixels) ensures that images with a larger height are reduced to this 100px height.
    3. The Show inline images setting allows your to display images included in the Event Description using HTML's <img> tag.  For these images to display properly, you will need to provide the entire URL as a relative URL would return a broken image link.

      Dealing with Images in 25Live Publisher

      The 100px X 100px height and width setting creates essentially a square box, but what if your image is rectangular with a bigger width but less height?  When an image that is rectangular exceeds the sizing provided for by the max width setting, the image will reduce to fit that width and create a distortion of the image contents.  You can get around this problem by controlling just one of the elements concerning images.  For instance, many calendars will set the Max image width to 75px or larger and then leave the Max image height blank.  That allows the height to be variable and removes the risk of distortion when the image reduces to fit the boundaries of the image object.

  5. When you have completed your work setting EA Actions up for your calendar, click the OK button.

After completing your work with Publish Settings, you will want to begin working with the Calendar Views.


PREVIOUSLY:  25Live Publisher: Customizing Your Calendar for Publication
UP NEXT :  Selecting and Styling Calendar Views