How to Style a News List

MSL has written some CSS to assist you in styling your news 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 a News List widget on your webpage following the step-by-step instructions below, and copy the provided CSS code.

Pre-set layouts using the News List widget:

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

TABLE OF CONTENTS

• How to Style a News List into a Grid
• How to Style a News 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 News Widgets.

How to Style a News 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 News 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. In the Wrapper div CSS class field, enter cardStyling newslist.
10. Complete the remaining fields as required and click Save.
11. Click Content, and from the Widgets dropdown, select the widget. The News List widget is entered into the editor.
12. Select the CSS tab and after downloading the Example CSS gridStyles.zip, copy and paste the content into the CSS field. To download the file, see Download Example CSS.
13. Select the Save/Exit tab. The Save Options section is displayed.
14. In the Update Notes field, enter any relevant notes, then click Publish. You are returned to the Edit Page window.

How to Style a News 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 News 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. In the Wrapper div CSS class field, enter cardStyling newslist.
10. Complete the remaining fields as required and click Save.
11. Click Content, and from the Widgets dropdown, select the widget. The News List widget is entered into the editor.
12. Select the CSS tab and after downloading the Example CSS NewsBlocks.zip, copy and paste the content into the CSS field. To download the file, see Download Example CSS.
13. Select the Save/Exit tab. The Save Options section is displayed.
14. 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.