Page 1

In our last tutorial we added an entry in the News section. We now want to add a menu entry in a main menu called News, pointing to a list of all of our news items.

First, let's return to the Content Items Manager and add another news item so that our list won't just have one item.

Here you can see that one more item has been added.

open full sized image

Page 2

Now we'll add a menu item to the main menu that will display a list of our news items when clicked.

Click on Menu Manager in the Control Panel.

open full sized image

Page 3

1. Click on the mainmenu radio button and
2. Click on the Menu Items icon.

open full sized image

Page 4

That brings us to the Menu Manager for the mainmenu. We'll click New.

open full sized image

Page 5

We'll click:

1. Blog - Content Category. This means, display a list of the entry titles with intro text for a given category.
2. Then click Next.

open full sized image

Page 6

1. Choose a Name for the Menu item
2. Choose the Category to be displayed
3. Set the parameters, like #Leading. (See the tutorial on configuring the home page if you aren't sure what these do, or experiment by setting the parameters and seeing the results. You can always set them back).
4. Click Save.

open full sized image

Page 7

The "News" entry now appears in the left menu. Clicking on the News item shows a page where the news items are listed.

The items are listed according to the parameters we set (no icons for Adobe and email, no author, show create date, one column, etc).

open full sized image

Page 8

One more thing to do - a review item if you've already read the tutorial for editing the template CSS file. That "News" header on the page isn't sufficiently distinct from the first item header. Let's change the style for that.

Here we've selected the "News" header and viewed selection source using Firefox, as is covered in the tutorials on editing the template CSS file. We can see that the style "class" is "componentheading".

open full sized image

Page 9

On the other hand, when we highlight the "JSL Japanese websites" title, we can see that the class for that is "contentheading".

Let's see if we can adjust the CSS file and make those two styles distinct.

open full sized image

Page 10

Here we've downloaded the template_css.css file using FileZilla, as covered in a previous tutorial. You can see from the highlighted section that .contentheading and .componentheading have the same style.

open full sized image

Page 11

Here we've split the shared style class into two, duplicating the shared class and then removing one name from each. We've changed the color of the contentheading to black, and added a bottom margin.

open full sized image

Page 12

After uploading our changed css file and reloading our News page, the page heading stands out more clearly.

open full sized image