What is a section?

Let's cover the basics first. A section is essentially a category on the committee hub that you can file articles under. You can see your current sections on the left hand side in the navigation bar.

There are quite a few steps to creating a new section and it can be quite time consuming, but it should be easy enough to do as long as you read this guide carefully. The steps are as follows:

1. Create the section pages
2. Create the article and resource widgets
3. Add the section to the navigation
4. Choose an icon for the section

Creating the section pages

Let's create the section pages first.

1. Navigate to the Edit Pages section of the Website Admin area
2. Scroll down and find /committeehub
3. Click the plus (+) icon beside /committeehub

You'll see that this has expanded out the child pages beneath the Committee Hub site - these are your existing sections.

We're going to be creating two new pages:

1. /committeehub/new-section
2. /committeehub/new-section/article

In each of these URLs, new-section represents your new section name. As an example, let's assume we're creating a new section for Democracy. Those URLs would be /committeehub/democracy and /committeehub/democracy/article.

To create these pages:

1. Tick the empty box beside the /committeehub page on the Edit Pages section of the Website Admin area
2. Scroll up and hit the button that says 'Create child page'
3. Read the below guidance carefully to set up each page

/committeehub/new-section

Hit 'Create page' and you'll be automatically taken through to the page to begin editing it, but we'll save that for later. For now, we'll go back to the Edit Pages section to create our article page.

1. Tick the empty box beside the /committeehub/new-section page on the Edit Pages section of the Website Admin area
2. Scroll up and hit the button that says 'Create child page'
3. Read the below guidance carefully to set up the page

/committeehub/new-section/article

Creating the article and resource widgets

Let's get back to your new section page and add the widgets.

Copy and paste the following bit of code into the Source view of your page:

<h2>Help articles</h2>
<p>{articles}</p>

<h2>Resources</h2>
<p>{resources}</p>

Go to Save/exit and publish the page. The page will reload.

Creating the {articles} widget

1. Select 'Widgets' from the page tabs
2. Beneath the Site tab, select News List
3. Update all of the widget settings to match the below

All done! Scroll back up and hit save. If you view the page, beneath the Articles header you should see that there is now some placeholder text reading 'There are no help articles for this section right now'.

Creating the {resources} widget

1. Back in the page edit mode, select 'Widgets' from the page tabs
2. Beneath the Organisations tab, select Resource List
3. Update all of the widget settings to match the below

Scroll back up and hit save. When you view the page, beneath the Resources headeryou should see placeholder text that reads 'There aren't any resources for this topic yet'.

Add the section to the navigation

Next we'll create the link to the new section.

1. Navigate to the Navigation menus section of the Website Admin area
2. From the section filter dropdown, choose committee and hit select
3. Scroll down to 'Add or edit item' and complete the fields using the guidance below

Save your changes and check that your page has appeared in the correct order. You'll need to make a note of your CSS class as well - you'll need this is the next step.

Choose an icon for the section

This is the final step. There are two parts to this:

1. Go to the Skins and Templates section of the Website Admin area
2. Open up the hub.css file (underneath Stylesheets) in the Committee Hub skin
3. Scroll down to the Content section and click anywhere inside the textarea - where you've clicked should go yellow
4. Press CTRL + F (or CMD + F on a Mac) and search for 'section icons'
5. This will take you down to the correct area of the file where you can paste in the code below

.msl_navbar .section-title::before {
    content: '\0000;
}

1. Update section-title with the CSS class from the previous step
2. Update 0000
3. with the characters you copy from the next step (you can keep this tab open separately while you find those and come back to it when you're ready!)

.msl_navbar a::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 800;
    font-size: 1.25rem;
    width: 2rem;
    display: inline-block;
    text-align: center;
}

For this bit, you'll need to head over to FontAwesome. There's a search bar at the top that you can use to search for key words relating to your section title.

Let's continue with the democracy example. If you search 'democracy' on FontAwesome, you're not going to find much. However, if you widen that search to things such as 'poll', 'vote', 'ballot', etc, you'll find a lot more.

Once you've found an icon, click it to open up the dedicated page for that icon.

Above the icon image, you'll see a bunch of different clickable pieces of information. What you want is the 4 or 5 character string that begins with 'f'. It's the bit in the image below that isn't blurry.

If you click the string of characters, you'll get a little popup confirming that it has been copied to your clipboard.

Go back to your other tab where the hub.css file is and replace 0000 with your characters. Your final code should look something like this:

.msl_navbar .democracy::before {
    content: '\f681';
}

That's everything! Scroll down and save your changes to the hub.css file. You can now go to the Committee Hub site and reload it. Your icon should appear in the left navigation.