Creating a News box
This tutorial is aimed at helping you create a news box for your front page. News boxes are used to present your readers with the top stories from your department of faculty. Here is a sample page using a news box.
This is an advanced tutorial. If you can't follow it, try copying the example and editing it for your purposes.
Step 1. Create a news and events page
This will be the page that the "View all" button will link to. Here is where you list ALL your stories. Since you may have more than 3 stories, it's a good idea to have a page that lists all of them for quick reference.
You can learn more about creating a page in this tutorial.
Step 2. Open your main page
This is the page where you will house your news box. Typically, this is the index.php page in your Main or About us folder. This is the first page people see when they come into your site, so it's the place you want to feature your news usually.
Step 3. The opening text
Usually a main page will have a welcome message or a description of the department on the front page. This text can get long, and since we're going to be placing the news box under this text, it should be pared down to accommodate. Try to keep it around 1 paragraph, or 6 or 7 lines, this way users with smaller screens can easily see the news box when they open the page.
Step 4: The table
The table itself goes below the opening text. Click the table icon and use the following settings to create the box:
This will create a table that's 8 rows and 2 columns.
Step 5: Merging cells
We only need the first row to have 2 columns here, so in the following rows we can merge the cells together by selecting them and using the right-click menu to select "Merge Cells". If this doesn't work, try selecting one of the cells and using the "Delete Cell" button, and then using the "Cell Properties" button, set the remaining cell in the row to "Colspan 2".
Do this for all the rows but the first.
Step 6: Cell content
The first row is simple. Input the text "News and Events" in the first cell, and "View all" in the second. Select the "View all" text and set the text alignment to the right . Link this text to your News and Events page you created in Step 1.
The second, fourth, sixth and eighth rows all have horizontal rules in them. Using the button, input these, and be sure to remove the space that appears after the line.
Step 7: Pictures
You need to select a smallish image for your story. This may be the subject of the story, a person or a place related to the story. In each of the blank cells between the lines (third, fifth and seventh rows) we insert a picture. Use the following settings:
These settings ensure the picture sits to the left of the box, has 5 pixels of space on each side, and the text wraps around the entire picture.
Don't worry if your image isn't exactly square, but make sure the width is consistently 70.
Step 8: The words
Keep the word count low. This is where your writing skills come in handy. You need to keep it simple, but get the main message of the story across. Reduce the story to 3 sentences.
Step 9: Read More
At the end of the text hit shift-enter to break the line of text. Now input the words "Read more...". You can now link this to your main story, either on today.mun.ca, or on another page you've created ahead of time.
And that's it! Save your page if you haven't already and review your final product.