How to Style an Event List

MSL has written some CSS to assist you in styling your event list as either a grid of cards or a block list. Comments within the code make it easy to understand and customise colours and fonts. These styles are responsive, adjusting to all screen sizes. To apply them, create an Event List widget on your webpage following the step-by-step instructions below, and copy the provided CSS code.

Pre-set layouts using the Event List widget:

• Grid - Find an example here
• Block - Find an example here

TABLE OF CONTENTS

• How to Style an Event List into a Grid
• How to Style an Event List into Blocks
• Download Example CSS

You can access this feature from your MSL website. Only Content Editors with access to Website Admin can access the Website Pages window.

For further information, see Events Widgets.

How to Style an Event List into a Grid

1. Log in to your MSL website.
2. From the Admin dropdown, select Website Admin. The Website Admin window is displayed.
3. Click Edit Pages. The Website Pages window with a list of website pages you have permission to edit is displayed.
4. Next to the relevant page, select the checkbox.
5. Click Edit. The Edit Page window is displayed.
6. Select the Widgets tab. The Widgets section is displayed.
7. In the Add New Widget section, within the General section, select Event List. The Widget Editor window is displayed.
8. In the Organisation field, either:
   1. Start typing the Name of your Organisation or the Organisation ID, then select the relevant one from the dropdown that is displayed.
   2. Click the Grouping Tree icon (). The grouping tree is displayed. Click Expand () to display the contents of a node, and click one item to select. The selected item is entered into the Organisation field.
9. If applicable, select the following checkboxes:
   • Include Child Organisations
   • Display Date on Event
   • Display Time on Event
10. In the Image Thumbnail Width field, enter 400.
11. In the Image Thumbnail Height field, enter 250.
12. From the Image Resizing Mode dropdown, select CropToFit.
13. In the Wrapper div CSS class field, enter cardStyling eventlist.
14. Complete the remaining fields as required and click Save.
15. Click Content, and from the Widgets dropdown, select the widget. The Event List widget is entered into the editor.
16. Select the CSS tab and after downloading the Example CSS EventsGrid.zip, copy and paste the content into the CSS field. To download the file, see Download Example CSS.
17. Select the Save/Exit tab. The Save Options section is displayed.
18. In the Update Notes field, enter any relevant notes, then click Publish. You are returned to the Edit Page window.

How to Style an Event List into Blocks

1. Log in to your MSL website.
2. From the Admin dropdown, select Website Admin. The Website Admin window is displayed.
3. Click Edit Pages. The Website Pages window with a list of website pages you have permission to edit is displayed.
4. Next to the relevant page, select the checkbox.
5. Click Edit. The Edit Page window is displayed.
6. Select the Widgets tab. The Widgets section is displayed.
7. In the Add New Widget section, within the General section, select Event List. The Widget Editor window is displayed.
8. In the Organisation field, either:
   1. Start typing the Name of your Organisation or the Organisation ID, then select the relevant one from the dropdown that is displayed.
   2. Click the Grouping Tree icon (). The grouping tree is displayed. Click Expand () to display the contents of a node, and click one item to select. The selected item is entered into the Organisation field.
9. If applicable, select the following checkboxes:
   • Include Child Organisations
   • Display Date on Event
   • Display Time on Event
10. In the Image Thumbnail Width field, enter 400.
11. In the Image Thumbnail Height field, enter 250.
12. From the Image Resizing Mode dropdown, select CropToFit.
13. In the Wrapper div CSS class field, enter cardStyling eventlist.
14. Complete the remaining fields as required and click Save.
15. Click Content, and from the Widgets dropdown, select the widget. The Event List widget is entered into the editor.
16. Select the CSS tab and after downloading the Example CSS EventsBlocks.zip, copy and paste the content into the CSS field. To download the file, see Download Example CSS.
17. Select the Save/Exit tab. The Save Options section is displayed.
18. In the Update Notes field, enter any relevant notes, then click Publish. You are returned to the Edit Page window.

Download Example CSS

To download the attached Example CSS, click the filename.