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.

  Click on the image for page view.

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.

  Click on the image for page view.

Page 3

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

  Click on the image for page view.

Page 4

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

  Click on the image for page view.

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.

  Click on the image for page view.

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.

  Click on the image for page view.

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

  Click on the image for page view.

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

  Click on the image for page view.

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.

  Click on the image for page view.

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.

  Click on the image for page view.

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.

  Click on the image for page view.

Page 12

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

  Click on the image for page view.