Options For Event Styles

CSS Style Overview

Each example page will list which options are on/off depending on the impact they have on the style.

The example pages are meant to be clean and have only basic styles added to them so you can focus on the layout.

Colors and options are subject to change.

There are literally dozens of different configurations that you could generate from the events styles.  Rather than making you write the long CSS yourself we provide the events preview tool for all sites running the standard Campus template on OU.  

Below you will find a description of the various options that are available to you.  Please note that not all options work well with all layouts.

Events Layout

Choose your layout style to configure the events display for your page.  You can have multiple event lists on a page each with a different layout so decide where and what looks best to you.

Display Event Count

You have the ability to limit the number of events that show on your list.  This will start at the first event and show 1- 10, 15, 20, 25 events.

Additional Options:

Enable show more is a related option that will place a button at the bottom of your list with "Load More", "More Events" or will automatically trigger more to load as the user scrolls down the page.  Note that this will load in the remaining events and not additional "n" number of events based on your event count choice.

Enable Lightbox

The lightbox effect is where you stay on the same page but information is brought to the top in a new display area.  The website is generally darkened or grayed out to help focus the user's attention on the new data.  There is a close or "x" button that returns them to the regular content. In some cases clicking on the background can do this. 

Since there are links / text that you want to copy we force the user to use a button to close out of the event information.

Display Events Filter

You can have a calendar widget appear next to your event data which will allow the end user to filter their results down based on date or search.  This does not fetch new data and will not reload the page.  Since event data is not on each page directly there is no way for Google to index your page with the event data on it.  This will search event data provided and list event titles below the calendar block.  

If you plan on enabling the events filter make sure your layout will accomodate the space.  A full screen / left sidebar is best due to the size needed for the calendar.

*Updated version 4.0.99 

You can now filter additionally by semesters.  This will automatically generate the semester breakdown based on the data provided in the feed.  This will also build in a custom search filter.

Display Title

When you setup the event list in your site you provide at title for it.  You can choose to put that title on the list.  If you turn that off you can always go to the page and put your own title on the list through the page editor.

Display Images

Some styles will automatically restrict images based on the layout.  For those which do allow images to show you can turn them off to save space.  This does not stop images from showing up in the lightbox display.

Colors Options

There are several options for adding color to your events.  This can be outlines, background colors, event backgrounds, and accent colors.  Play with these and see which works best for your page.  As with most things less is more.


By default the events will automatically expand the page  as they load in.  If you have a layout that requires them to be a specific height (or not go larger than a specific size) you can set a height on the display.  You can set it from 100px to 800px every 25px increments.  

Display Hours

*Added 4.0.99

By default hours will show, as best it can based on source data, the start time of the event and the end time of the event.  If that time is not what you want we have added the new display formats for the hours.

  1. Show Both Start and End Time
  2. Only Start Time
  3. No Hours