Actions

J1.5

Design appearance using Menus and Modules: Joomla! 1.5

From Joomla! Documentation

Revision as of 04:50, 16 February 2011 by LornaS (Talk | contribs)

Replacement filing cabinet.png
This Namespace has been archived - Please Do Not Edit or Create Pages in this namespace. Pages contain information for a Joomla! version which is no longer supported. It exists only as a historical reference, will not be improved and its content may be incomplete.
Quill icon.png
Content is Incomplete

This article or section is incomplete, which means it may be lacking information. You are welcome to assist in its completion by editing it as well. If this article or section has not been edited in several days, please consider helping complete the content.
This article was last edited by LornaS (talk| contribs) 3 years ago. (Purge)

GSheader

The aim of this document is to introduce the design of Menus and Modules.

Contents

Background to creating a new Joomla! 1.5 web site

Tip-icon.png
Designing a Joomla! Website

There are four aspects to designing a new Joomla! web site. These also apply to planning to make alterations(including upgrading versions J1.5 to J2.5+) to an existing site or planning for transferring a site that already exists in another form into the Joomla! CMS.

  • The content hierarchy:
    • Joomla 1.5 The content hierarchy is defined as Sections with Categories. (Another way of visualising this, Sections are the labeled drawers of a filing cabinet and Categories are the file folders in each drawer.)
    • Joomla 2.5 The Sections have been removed and now the content hierarchy is Categories and Subcategories.
  • Who you expect to use the site and what you want them to be able to do
  • The layout of the menus and the position of some functionality on the page
  • The graphical design of the whole site
These should all be based on the purpose and expected content of the site, so you do need a clear idea of what you are trying to communicate and plan accordingly. Easier said than done!

Who is it written for?

Everyone: who is going to create a Joomla! site.

It will also be useful to someone who is going to alter a Joomla! site.
It is written on the assumption that you do not have experience of the structure of a Joomla! site.
It assumes that you have explored adding and altering Articles

You should already be aware of the vocabulary of Sections, Categories, Articles and Menus from other documents in this series.

Overview

  • Menus are used for site navigation and not part of the content heirachy itself.
  • Menu items are grouped together into menus which are displayed on the page with menu modules.
  • The Menu Manager enables the creation and editing of menus.
  • The Menu Item Manager enables the creation and editing of menu items
  • The Module controls the display of the menu on the page
  • You control the placement of the menus by assigning various Modules to the desired position.

Thus Menus and Menu Items are used to create the main navigational links on the pages of the web site. They are not part of the content heirachy in the background. The Menus are themselves a hierachy and there can be confusions between the underlying content organisation of Sections/Categories/Articles and the hierachy of the Menus. Sometimes the Menus reflect the Sections and Categories closely. On other sites the Menus do not exactly match the content structure, so a bit of care is needed here to think about the right things.

Menu Manager and Menu Item Manager

The Menus normally reflect the content structure, although there may be occasions when they do not. The key is to avoid muddling Categories and Menus. The Sample data is not helpful here as the list of Menu Items under the Main Menu is the same as the list of Categories. You will find sites where there are Menus that do not relate to a Category. (cross ref if I use the example of Links in the U3A site)

Joomla! adds the Main menu to your site automatically. It already contains a Section for the Front page, so the Main Menu displays the Home page.

Some sites stick to the Main Menu and add a heirachy of Menu Items (as sub-menus) beneath the Main Menu. Other sites use more menus, for example the Sample site uses 6 Menus, each with a few Menu Items (or sub-menus) under them.

Using the Sample web site - if you move away from the Home page, the Login Menu no longer displays. (Mildly irritating - but this can be altered).

picture of menu edit on sample site

Menu Item Manager

picture as menu items on sample site

Exploiting the Menu Item layouts for Blogs and Lists

This is worth knowing about before you think about a site.

There are built-in layouts in Joomla! that take advantage of the organization of content in Sections and Categories. These make it possible to list articles that belong to Sections or Categories. When a new article is created and assigned to a Section and Category, it is automatically placed under a menu.

There are:-

  • Section Blog
  • Section List
  • Category Blog
  • Category List

Category Blog Layout

The Home page on the Sample web site is in Blog layout. Here there is an introductory article across the page and the rest are in two columns. At the end - there is an area for links to older articles that are not listed on the page - More Articles. (This should be in the background article)

(see Category Blog Layout under Help clicked in the Menu Item [New] screen.


Example - sample data - blog mode for the Home page. Also uses the facility to use the whole width of the screen for the first entry. (cross ref to Help screen under - - )

screen of a U3A list - here is makes good use in organising a varied site. Sometimes there are a lot of articles for one menu - others have only a few. the list handles this well.


When you add a new Article to a Section or Category (depending on which one you have chosen), it will automatically show on the page so you do not have to do anything other than add the Article and assign it to the appropriate Section or Category. This also means that you can create Categories specifically for displaying in List or Blog mode.

Design of the Menus

Note that the position and layouts of Menus can be very varied. This deals with the structure of the Menus. Their appearance is dealt with in the part about the appearance of the whole web site. (Cross-ref.)

  • Look at the likely Articles and Categories that the site will have
  • Decide on the Menu items you want at the Top level. It is imortant to give them sensible and meaningful names.
  • Decide what sort of menu item it can be (will it be a Blog or a List or an Article for example).
  • Decide on any other menu items below the main items. Again they should have sensible names to indicate what is there.
You can have quite deep structures, but users find two layers easiest to use to find things.

It is not difficult to alter the Menus after the site is established so this list can be seen as a starting point. No-one gets it right first time.

Write them down and indicate what sort of Menu, for this will be needed when you create them.

Example

example from the create page with sailing club

Top level of U3A menu closely reflects the Categories to give a variety of listings and articles about this organisation.

GSMenuU3A


Name the menus

Use names that makes sense to anyone visiting the site - obvious but not always done.


The key is a good understanding of the purpose of the site and what features will be dislayed.

Clubs: These can be very varied as a sailing club one illustrates: the content is quite complex because such clubs have a lot of activities, they have boats and they usually have a property of some sort. They also aim at different people - sailors, social members, young people and learners. It is not a business but it does want to encourage people to join and wants to give a lot of on-going information about club activites and local sailing conditions. There are about 1500 sailing clubs and associations in Great Britain alone and the web sites are all slightly different. There may be people who want to enter their own content, so you could have a number of Authors or Publishers responsible for adding detail about events or reports on events or descriptions of boats and much else. So such a site could be very varied and quite dynamic.

Associations: there are many organisations who want to keep their members in touch with one another and also provide information about activities.

Orgnisations who want to disseminate informatation: here

Personal sites:

Modules

Modules can seem a bit of a puzzle because you do not actually see them; you just see the effect they have.

Joomla! uses Modules to display content on areas of the page other than the main content area. They often appear in side bars or along the top or bottom of a layout. This shows the active Module positions - regardless of whether anything is published to them. Add the following to the end of a url:-

&tp=1

example - http://localhost/joomla15/&tp=1

Site Modules are pre-defined Modules that ship with Joomla!. These include some essential things for a new site, including:-

Breadcrumbs
A breadcrumb trail is a position marker which shows users where they are in the site and provides a means of navigation up to higher levels in the heirachy.
Login
This provides the Login form to allow users to login into the site.

Cross Reference: There is more detail about these in the document about creating the site.

Menu Modules are closely tied to the menu system because each Menu has its own Module. These are created automatically by the system when a new Menu is created. For example, the default in the sample data is that the main menu is assigned to the left of the page.

Where Next?

Further information

Index to other documents in this series

GSFooter

--Lorna Scammell February 2011