Skip to content

News Article

Adding new sections

You can create additional sections on the site at any point as your committee hub expands.

staff training
Rated 4/5 (1 person). Log in to rate.

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

Not got time?

If you need a new section created but you don't have the time, you can contact Elliot Parker to have this created for you. New sections will be charged at £100 each.

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

Option What to select
Parent page /committeehub
Page name This is the bit that generates the URL. Don't use any capital letters, and use hyphens instead of spaces, e.g. democracy / digital-support
Page title This appears at the top of each page. You should use capital letters and spaces here, e.g. Democracy / Digital Support
Initially viewable to all False (we'll come back to this later and make it live when we have everything ready)
Display links True
Page type Normal page

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

Option What to select
Parent page /committeehub/your-new-section-title
Page name article
Page title Article
Initially viewable to all True
Display links True
Page type News article

I forgot to set the page type to news article

If you've accidentally left the page type as normal, it can't be changed - you'll have to rename the page, delete the page, and then try again. Alternatively, if you're not in a rush, you can ask the MSL team to change the page type to News article for you.

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
Option What to select
Organisation Committee Hub
Use article organisation False
Include child organisations False
Show news from these organisations only Blank
Exclude news from these organisations Blank
Item count Blank
Sort order Rating (highest first)
Show leader True
Character limit for leader 256
More link text Blank
Number of articles per page Blank
Image width Blank
Image height Blank
Image resize option Use default
Image fill colour Blank
Include archived articles True
Show tags True
Tags to display Your new section title in lowercase, e.g. democracy
Tags to exclude Blank
Show organisation name False
Show published date False
Show display date False
Show Read All link False
Read All link text Blank
Read All link destination Blank
Display link to RSS feed False
Show bylines False
Show ratings True
Show comment counts False
Article page override Select your new article page from the dropdown
No items text There aren't any articles for this topic yet. Drop us a message to request a help page!
Hide if no current news False
Wrapper div ID Blank
Wrapper div CSS class Blank

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
Option What to select
Organisation Committee Hub
Include child groups False
Resource display page URL /committeehub/resources/resource
Tags to include Your new section title in lowercase, e.g. democracy
Tags to exclude Blank
Number of items to display Blank
Show all resources False
Open access resource display page URL Blank
Access denied page name Blank
Secured link CSS class Blank
Available link CSS class Blank
Sort order View count (highest first)
'No Resources' text There aren't any resources for this topic yet.
Show upload date False
Show name of uploader False
Show owning group False
Use Other name False
Show tags False
Show summary False
Wrapper div ID Blank
Wrapper div CSS class Blank

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'.

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
Option What to select
Section name committee
Page Select your new section from the dropdown
Display text Your section title, e.g. Democracy
Display order This is a numeric field relative to the other items, and should go in 5s or 10s
CSS class Repeat your section title in lowercase and with a hyphen if appropriate, e.g. democracy or health-safety
Display subnavigation False
Open in new window / tab False

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!)

Where exactly do I paste the code?

Just below /* Section title */ you'll see a bit of code that looks like this:


.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;
}

You'll want to paste your code below the final } at the end of that section.

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.

A screenshot of an icon on FontAwesome showing the string of characters needed

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.