7 News Page Layouts

In this chapter, we review a few other news websites to better understand what a well structured News website might look like. We then explain how to create our own custom News template to turn our basic Joomla website into a well organized and easily managed News website – with space to add and rotate news articles over time.

Here are the four sections for this chapter

7.1 How to Organize and Display News Articles

7.2 Create a Community News Template Part 1

7.3 Create a Community News Template Part 2

7.4 Customize our Community News Page Layout

7.4 Customize our Child Template Layout

Until now, our News 1 child template has only been assigned to our Module Demo page. This allowed us to confirm the appearance of new module rows on our Module Demo page without affecting the rest of our website. Now that we have our module rows, it is time to assign our News 1 child template to our entire website in order to customize the layout of our News Home Page articles. In this article, we will review essential steps in converting our website from the Helix Template to the Cassiopeia based News 1 child template.

Step #1 Convert our Community News website to the News 1 template
From the Home Dashboard, click Template, Styles. Then select the News 1 template version that includes “Copy of Cassiopeia”. Then click Default.

01

Step #2 Create a News1 Header Module
Visit the front end. Unfortunately the Header module we used for our Helix template no longer displays because our News 1 template is using different module position names than our Helix template. In fact, the only thing that does display on our Home page are articles that have been assigned as Featured articles. These display in the Joomla Component area.

To fix the header module problem, first go to Content Modules. Click New to create a new Custom Module. Name it Header News 1 and assign it to the Top Bar position.

7.3 Create a Community News Template Part 2

The problem with customizing the appearance of our News Page Layouts is that our changes can get lost during Joomla updates and template updates. The solution to this problem is to use a “Child” template which preserves our Page Layout changes regardless of any updates to Joomla or to the Parent template. To mimic the Home Page Layout of the Los Angeles Times, in our last article, we added nine new Topic Category module rows to our News 1 Child template. In this article, we will review the final two steps to creating our News 1 Child Template. These are editing the XML file fields and adding language and slideshow files and folders to our News 1 template.

As an important reminder, we only need to do this change process once. We can then use copies of our News 1 Cassiopeia Child Template to create other Community News websites. Thus, while we will be going through some complex steps in this article, we are describing these steps mainly to explain how this is done – so that anyone who wants to create their own custom child templates will have a series of steps to follow.

You do not actually need to complete or even understand any of these steps we describe in this article as we will be offering our heavily modified Cassiopeia Child Template as a Free Download on our Create a Secure News Website Downloads page.

Nevertheless, it is useful to give this a try as “practice” because it will give you a better idea of how the appearance of a Joomla News website is actually structured. Let’s begin by reviewing how module our News 1 template rows are structured after adding 9 New rows.

7.2 Create a Child Template Part 1

The problem with customizing the appearance of our News Page Layouts is that our changes can get lost during Joomla updates and template updates. The solution to this problem is to use a “Child” template which preserves our Page Layout changes regardless of any updates to Joomla or to the Parent template.

Sadly, the Helix template we have been using until now does not yet have the child template feature. Equally bad, it is nearly impossible to alter the appearance of the Helix template to get the Page Layout on the Home page to match the layout of the Los Angeles Times. We have been using the Helix Template until now because it offered an easy way to introduce you to the layout of Joomla module rows and module positions.

The time has come to graduate to the default Joomla template, called Cassiopeia, which allows us to create child templates. In addition, the Casseopeia template comes with special “CSS classes” which give us the ability to match the page layout of the Los Angeles Times. However, the drawback of using a Cassiopeia child template is that it is much more difficult to create additional module rows with Cassiopeia than it was with the Helix template.

The good news is that we only need to do this change process once. We can then use copies of our modified Cassiopeia Child Template to create other Community News websites. Thus, while we will be going through some complex steps in this article, we are describing these steps mainly to explain how this is done – so that anyone who wants to create their own custom child templates will have a series of steps to follow.

You do not actually need to complete or even understand any of these steps we describe in this article as we will be offering our heavily modified Cassiopeia Child Template as a Free Download on our Create a Secure News Website Downloads page.

Nevertheless, it is useful to give this a try as “practice” because it will give you a better idea of how the appearance of a Joomla News website is actually structured. Let’s begin by reviewing how module rows are structured in the Cassiopeia Template.

7.1 How to Organize and Display News Articles

Most readers judge the professionalism of the website by its page navigation and layout. A News website typically contains several distinct areas on its Home Page. Below the head banner is a main menu which includes links to each of the primary news topic categories. Below the main menu is a “featured articles” area that can contain the latest news from any of the actual topic categories. Below the Features articles area are the Topic category areas with the latest news article in each topic category. A good example is the Los Angeles Times website which has more than a million visitors a day! Here is their header and main menu with a nicely displayed single lead article with a single line above it:

01

Below the lead story, they have three “featured” stories with images. Note that there is no READ MORE link as everyone now knows to just click on the image or intro text to go to the story:

02

Below this are four “Featured” stories without images:

03

The point to these featured stories is that they can come from any topic category. But eventually, they should be removed from the top features articles section and still remain in their assigned topic category pages.