Installation Instructions
To start applying these new formats to your site, you will want to review this Support Center article that goes over the basics. Below are more specific instructions for this particular task.
NOTE: Please DO NOT USE Google Chrome to add these Event Formats to your site. Mozilla Firefox, Safari, or Microsoft Edge are recommended.
- Once you have decided which format you want to use (you can use all three, but they must be installed one at a time), go to a page that either already has an event listing that you want to restyle OR drag and drop a new Event Listing module on the page. It is best to work on a listing that has active events, so you can see what your new format will look like.
- Click Content Builder to make it active. The light bulb will change to yellow. Click
- Update whatever settings you want on the first screen and click "Save". We recommend these settings:
a. Using the "Listing Only" format option.
b. Turning off "Group by Date."
c. (Optional) Turning off "Enable RSS" (especially for the featured event format; this helps keep the page nice and clean without lots of little orange RSS icons). - Select the format you want to edit from the available choices. You can see a preview of the format in the area to the right. Click the Edit the selected Module Display Format checkbox below the left column and then click the Next >> that appears to the right of "Load Content."
NOTE: It's important to remember that you are NOT MODIFYING ANY OTHER FORMAT ON THE SITE by editing this module's format. By editing a "selected Module Display Format", you are essentially using saved code to create a local version of the format, so any changes you make to this format will not automatically apply to any other module. - Most formats will only have content in the "Edit Content Format" editor window. Change the view of this editor window from "Design" to "HTML". Select all the existing code and delete it.
- Copy/paste the HTML of your new desired format from this page and paste it into the empty editor window. This will give you the default design of the selected format. You do not have to make any other changes to this code.
- Click Next >>.
- The last step is saving this new format so you can apply it to other event listings on your site. Check the Save format to be reused box above the preview content. Two radio buttons will display:
a. Create a new format: this allows you to save this new format as a new entry in the list in the module. You can give it any name that makes sense to you.
b. Overwrite an existing format: if you want to replace an existing format, you can do that with this option. A single select box will show up that lists all available formats on your site so you can choose the one you wish to overwrite. You will also have the ability to rename the format at this time (good tip for spelling errors!).
BUT WAIT! How or where do I add the custom CSS snippets provided below? I want to change the colors of this format and save it that way!
You can totally do that by following steps 1 through 6. Once you have pasted the main format HTML code:
- Click the Header checkbox (if it is not already checked). This will open an additional editor window. Change the view of this editor window from "Design" to "HTML."
- Remove any code or content that may be in this area. Paste the customization snippet you want in this HTML and update the colors as needed.
- Continue on to step 7 and 8 above.
By saving the CSS customization as part of the format, you won't have to copy/paste it every time you use your module.
Format Options
Option 1: Featured Event Format
This format showcases a few featured events, perhaps in a secondary event listing above the primary listing. Our recommendation is to use this for 1-2 events at a time. The thumbnail image size will change, depending on the width of your content area, but here is our best recommendation: 700 pixels wide and 550 pixels tall. (This is due to the format on the mobile design, where the image is full width). We recommend using this format with events that will for sure have thumbnail images.
NOTE: There is no preview text on this format.
<div class="ev-feature">
<div class="thumbWrap">
<div class="date">
<div class="month">[Month Abbreviation - Start Date]</div>
<div class="day">[Day of the Month - Start Date]</div>
</div>
[EmptyCheck:ThumbnailUrl]<div class="thumb" style="background-image: url('[ThumbnailUrl]');">
<img src="[ThumbnailUrl]" alt="[ThumbnailAltText]" />
</div>[/EmptyCheck:ThumbnailUrl]
</div>
<div class="text">
<div class="title">[Link]<span class="sr">[Content Date Only Range]: </span>[Content Name][/Link] [Tool Icons]</div>
<div class="details">
[EmptyCheck:Content Time Range]<div class="time">[Content Time Range]</div> [/EmptyCheck:Content Time Range]
[EmptyCheck:Location Name] <div class="location">[Location Name]</div>[/EmptyCheck:Location Name]
</div>
</div>
</div>
Want to customize this format?
We have included the below CSS style block to change the colors of the date box, title text color, and box background color. To update, paste this code into the "Format Header" section while in HTML mode and update the color names with the colors you prefer (HEX codes are preferred, so for example, you could replace the word "orange" with "#0000cc" to get a blue background fill on the date box). If you are fine with the default styling of a certain element (as in you only want to update one or 2 colors), delete those lines that you did not modify.
<style>
.ev-feature {background-color:whitesmoke;}
.ev-feature .thumbWrap .date {background-color:orange;color:navy;}
.ev-feature .text .title, .ev-feature .text .title a {color:green;}
</style>
Option 2: Wide Event Format
This format is a great way to add visual interest to your event listing without making it too tall. Our best recommendation on thumbnail size is 700 pixels wide and 550 pixels tall. (This is due to the format on the mobile design, where the image is full width). The button text is the same for each event, but a span tag has been added with the event name to meet accessibility standards. You can edit this text by replacing ONLY the word "Register" with the desired text ("Learn more", "Details", etc). Just remember that constituents using a screen reader will hear "Register for (Event Name)," so make sure that your new text makes sense in that context.
NOTE: The title text does not link as there is a register button. There is no preview text in this format.
<div class="ev-wide">
<div class="thumbWrap">
<div class="date">
<div class="month">[Month Abbreviation - Start Date]</div>
<div class="day">[Day of the Month - Start Date]</div>
</div>
[EmptyCheck:ThumbnailUrl]<div style="background-image: url('[ThumbnailUrl]');" class="thumb">
<img alt="[ThumbnailAltText]" src="[ThumbnailUrl]" />
</div>[/EmptyCheck:ThumbnailUrl]
</div>
<div class="text">
<div class="title">[Content Name] [Tool Icons]</div>
<div class="details">
[EmptyCheck:Content Time Range]<div class="time">[Content Time Range]</div> [/EmptyCheck:Content Time Range]
[EmptyCheck:Location Name]<div class="location">[Location Name]</div>[/EmptyCheck:Location Name]
</div>
<div class="cta">[Link]<span class="button">Register <span class="sr">for [Content Name]</span></span>[/Link]</div>
</div>
</div>
Want to customize this format?
We have included the below CSS style block to change the colors of the date box, title text color, box background color, border color, and button colors. To update, paste this code into the "Format Header" section while in HTML mode and update the color names with the colors you prefer (HEX codes are preferred, so for example, you could replace the word "orange" with "#0000cc" to get a blue background fill on the date box). If you are fine with the default styling of a certain element (as in you only want to update one or 2 colors), delete those lines that you did not modify.
<style>
.ev-wide {background-color:whitesmoke;border-color:red;}
.ev-wide .thumbWrap .date {background-color:orange;color:navy;}
.ev-wide .text .title, .ev-feature .text .title a {color:green;}
.ev-wide .text .cta a .button {background-color:blue; color:yellow!important;}
.ev-wide .text .cta a .button:focus, .ev-wide .text .cta a .button:hover {background-color:lime; color:navy!important;}
</style>
Option 3: Simple Event Format
This format is based on a simple event listing format included in Blueprint templates and new custom templates. It includes the most information while adding a graphic element with the start date and optional thumbnail image (if no image is provided, the text will flow to fill the area on the right). Our best recommendation on thumbnail size is 120 pixels wide, and the height can be variable. This image does not display on screens smaller than 700 pixels.
<div class="ev-simple">
<div class="date">
<div class="month">[Month Abbreviation - Start Date]</div>
<div class="day">[Day of the Month - Start Date]</div>
</div>
<div class="text">
<div class="title">[Link]<span class="sr">[Content Date Only Range]: </span>[Content Name][/Link] [Tool Icons]</div>
<div class="details">
[EmptyCheck:Content Time Range]<div class="time">[Content Time Range]</div>[/EmptyCheck:Content Time Range]
[EmptyCheck:Location Name]<div class="location">[Location Name]</div>[/EmptyCheck:Location Name]
</div>
[EmptyCheck:Preview]<div class="preview">[Preview]</div>[/EmptyCheck:Preview]
</div>
[EmptyCheck:ThumbnailUrl]<div class="thumb">
<img src="[ThumbnailUrl]" alt="[ThumbnailAltText]" />
</div>[/EmptyCheck:ThumbnailUrl]
</div>
Want to customize this format?
We have included the below CSS style block to change the colors of the date box and title text color. To update, paste this code into the "Format Header" section while in HTML mode and update the color names with the colors you prefer (HEX codes are preferred, so for example, you could replace the word "orange" with "#0000cc" to get a blue background fill on the date box). If you are fine with the default styling of a certain element (as in you only want to update one or 2 colors), delete those lines that you did not modify.
<style>
.ev-simple .date {background-color:orange;color:navy;}
.ev-simple .text .title, .ev-feature .text .title a {color:green;}
</style>