module 1 introduction to joomla! beginners guide

Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 1

Joomla! User Guide

Module 1 Introduction to Joomla! Beginners Guide


Table of Contents

Table of Contents...........................................................................................2 1 Module 1 Introduction to Joomla! ...........................................................3 1.1 Module Objectives..................................................................................3

1.2 Joomla! – First Time User .......................................................................4 1.2.1 Logging on to the Administrator section ..............................................4 1.2.2 Viewing the Control Panel ...................................................................5 1.2.3 Viewing the Menu Bar .........................................................................6 1.2.4 Viewing the Layout ..............................................................................9 1.2.5 Selecting your Template....................................................................12

1.3 Adding Content to your web site..........................................................19 1.3.1. Creating an Article............................................................................19 1.3.2. Adding a Menu item and linking to an Article....................................24 1.3.3. Adding an Image to an Article ..........................................................31 1.3.4. Editing the Article Parameters ..........................................................34 1.3.5. Adding a Top Menu using a Module.................................................38 1.3.6 Creating Sections and Categories.....................................................43


1 Module 1 Introduction to Joomla!

1.1 Module Objectives

By the end of this module you will be able to:

§ #

Manual Conventions

The types of formatting have been kept to a minimum in this manual but there are some conventions you should be aware of:

Convention Description

The <Edit> button Any reference to a button on Joomla! will be displayed in bold font type and enclosed in chevrons

The Task Group drop down list Any reference to the name of an object on Joomla! such as a text field or drop down list will be displayed in bold font type

Select the Add new business unit dependency button

Any action that requires the user to use their mouse or keyboard will be displayed in bold light blue font type

Type Help Menu in the Title field Any text that needs to be input by the user will be displayed in bold italic font type


1.2 Joomla! – First Time User

Having installed Joomla! the first thing you will want to do is login to the Administrator area so that you can set up your content, images etc.

1.2.1 Logging on to the Administrator section

Navigate to your website where Joomla! has been installed. The website address might be: http://www.mywebsiteaddress.co.uk/administrator.

The Administration Login page will display. (If you are experiencing difficulties in finding the administrator page contact your support)

Type your Username and Password in the Username and Password fields. (These details will have been given to you by your support team) (Figure A).

Figure A

Click the <Login> button.


1.2.2 Viewing the Control Panel

The main Control Panel page will display (Figure B).

Figure B

There are a number of options available to you on this page depending on your level of access. Below is the list that a Super Admin would see with Managers and Admins having access to fewer options:

• Add New Article • Article Manager • Front Page Manager • Section Manager • Category Manager • Media Manager • Menu Manager • Language Manager • User Manager • Global Configuration


1.2.3 Viewing the Menu Bar

There is also a Menu Bar displayed along the top of the Control Panel page (Figure C).

Figure C

This consists of:

• Site Menu (Figure D)

Figure D

Contains Menu options to the Control Panel, User Manager, Media Manager, Global Configuration and Logout pages

• Menus Menu (Figure E)

Figure E

Contains Menu options to the Menu Manager, Menu Trash and Navigation option


• Content Menu (Figure F)

Figure F

Contains Menu options to the Article Manager, Article Trash, Section Manager, Category Manager, Front Page Manager

• Components Menu (Figure G)

Figure G

Contains Menu options to the Banner, Contacts, News Feeds, Polls, Search, Web Links

• Extensions Menu (Figure H)

Figure H

• Contains Menu options to the Install/Uninstall, Module Manager, Plugin Manager, Template Manager, Language Manager


• Tools Menu (Figure I)

Figure I

Contains Menu options to the Read Messages, Write Messages, Mass Mail, Global Checkin, Clean Cache

• Help Menu (Figure j)

Figure J

Contains Menu options to the Joomla! Help, System Info

• Preview Hyperlink • Users Logged in Hyperlink • Logout Hyperlink

Note

A description of each option will be described as we work our way through the modules.


1.2.4 Viewing the Layout

Joomla! uses terms such as Modules and Positions for describing the layout. All Joomla! websites have Modules which can be thought of as containers that hold content. The Positions are where the content appears on the website.

Click Extensions Menu option

The Extensions Menu will display

Click Template Manager (Figure K)

Figure K

The Template Manager page will display (Figure L)

Figure L

This page displays what templates you have installed that you can choose from. You will notice that there will be a small star displayed next to the template you are currently using (Figure L)


Figure M

Click the Template name. (This is a hyperlink)

The Template Edit page will display (Figure N)

Figure N


Click the Preview icon displayed at the top of the page (Figure O)

Figure O

The Template Manager page will display (Figure P)

Figure O

You will see your web site page with Positions that are named.

Note

This may be a good time to note down the Positions so that you know where you are going to put your content and images


1.2.5 Selecting your Template

Now that you have logged on and had a few moments to look around at the functionality of Joomla!, you can now start to set up your web site. The first thing to do is to make sure you have the correct template selected and that you are happy with the template settings.

Click Extensions Menu option

The Extensions Menu will display

Click Template Manager (Figure P)

Figure P

The Template Manager page will display (Figure Q)

Figure Q

The Template Manager page displays a list of templates that you have installed. There is a default star displayed next to the template you are currently using.


To view the design of each template position your mouse over the name of each template (Figure R).

Figure R

You will notice that a small pop up window will display showing the template design and the different colour palettes that are available.

To select another template to use click the Template Name radio button next to the template name (Figure S).

Figure S

Click the Default icon at the top of your screen (Figure S).

You will notice that the Default icon will now be displayed next to the new template.


You can now change the settings of the template to suit your design.

Click the Template name.

The Template Edit page will display.

Figure T

The Template Edit page allows you to change some of the parameters such as the template font size, the template width and styles.

For this example we are going to change the way that the web page width is displayed and select a template style.


Select the Template Width drop down box (Figure U).

Figure U


A number of options will display:

• Auto Fluid:When selecting this option you will notice that when you resize your browser window, your website will automatically resize itself within the window

• Narrow Screen: When selecting this option you will notice that your website content will be arranged in the middle of the browser window

• Wide Screen: When selecting this option you will notice that your website content will be arranged across the screen similar to watching a wide screen TV

• Specified in Percentage (Fluid Screen) :When selecting this option you will notice that when you resize your browser window, your website will automatically resize itself within the window (similar to the auto fluid option) but only to the specified number of pixels you type in the Specified width field

• Specified in Pixels:When selecting this option you will have to type a value in the Specified width field to set the width of your website

Select the Auto Fluid option for this example so that your website content will resize to whatever your viewer has selected.

Next, we are going to change the template style. Currently in this example I have the style set to blue with a lighter background theme and my primary elements (my main text) set to black (Figure V).

Figure V


Select the Header Themes drop down box (Figure W)

Figure W

A number of options will be displayed.

Select which ever Header Theme you would like from the list of options

Select which ever Background Theme colour you would like from the list of options

Select which ever Primary Element you would like from the list of options


To view your changes click the Preview icon displayed at the top of your screen (Figure X).

Figure X

Your website will display with the new changes.

If you are happy with the changes click the Save icon (Figure X)


1.3 Adding Content to your web site

Content can be added in a number of different ways depending on how big your site is going to be and how much content you wan to add.

In the simplest form Joomla! accepts content known as articles which is ideal for static content. You add the content in a similar way to writing a Microsoft Word document.

For larger and more complicated sites, Joomla! organises content by Sections which can contain one or more Categories very much like a newspaper. An example of a section could be sport with categories being golf, basketball and cricket in the sports section. You then add your articles to a Section and Category

In this example we are going to look at adding content in a simple way, so we are going to add a Front page article, an about us article and a contact us article and add this information to the website.

1.3.1. Creating an Article

Click the Content menu

Click Article Manager from the Content menu option (Figure Y)

Figure Y


The Article Manager page will display (Figure Z)

Figure Z

Click the New icon displayed at the top of the browser window

The Article New page will display (Figure AA)

Figure AA


Before you begin adding your content you will need to give the Article a title (example: Welcome Front Page) (Figure AB).

So that you will be able to view the content make sure that the Published radio button is selected to Yes.

Figure AB

The Alias field (which is the internal name of the article) does not need to be completed as Joomla! will complete this field for you.

If you wish your article to be displayed on your front page then check that the Front Page radio button is selected to Yes.

For this example we are going to leave the Section ‘uncategorized’ as our content is static which will automatically make the Category ‘uncategorized’


Add your content in to the edit area of the Article (Figure AC)

Figure AC

For each article, you can often just copy and paste the content from your existing web site (using your browser) or Microsoft Word document into the edit area.

You can see that the toolbar in figure AC is not dissimilar to Microsoft Word so text formatting is quite straightforward

Note

In some cases, if you are copying from your existing website, depending on the amount of custom HTML in the source page, you may need to copy the page to a plain text editor first (such as Notepad) and then copy from there into Joomla!.


When you are happy with the content you can click the Save icon displayed at the top of your browser window (Figure AD)

Figure AD

If you selected the Front Page radio button you can now click the Preview icon and see your content displayed on the Front Page (Figure AE)

Figure AE

To create further articles, repeat the process described remembering that if you don’t want the content to be displayed on the Front Page make sure that you select No using the Front Page radio button


1.3.2. Adding a Menu item and linking to an Article

In this section we are going to add a menu item to the left hand Main Menu and link it to one of our articles.

We have already described how to create an article and for this example I have created an About Us article and I want to be able to link to it when I click About Us on the Main Menu

Figure AF

Click the Menu menu (Figure AF)

Click Menu Manager from the Menu menu option (Figure AF)

The Menu Manager page will display (Figure AG)

Figure AG


Click Menu Item(s) next to the menu you wish to edit (Figure AH)

Figure AH

The Menu item Manager page will display (Figure AF)

Figure AI

In this example we only have one menu item displayed.

Click the New icon displayed at the top of the browser window (Figure AI)


The Select Menu Item Type page will display where you can select what content you want to display (Figure AJ).

As we have created just an article we want to select Article Layout

Figure AJ


The Article Layout page will display (Figure AK)

Figure AK

Type a Title in the Title field and check that you have the Published radio button selected on Yes

You now need to select the article that the menu is going to link to

Click the <Select> button displayed at the right hand top corner of the browser window (Figure AK)


The Article Select pop up window will display

Figure AL

Select the Article in the Article Title column (Figure AL)

The selected Article will be displayed in the Select Article field

Click the Save icon displayed at the top of the Menu Item page (Figure AM)

Figure AM


The Menu Item Manager page will display (Figure AN) with your new menu item displayed

Figure AN

Click the Preview link (Figure AN) to display your web page with the new Menu item.


Your web page will display with the new Menu option where you can test to see if by clicking it your About Us (for this example) page will be displayed (Figure AO)

Figure AO


1.3.3. Adding an Image to an Article

Now that we have created some articles and linked to them, I am going to show you how to add an image to one of our articles.

Click Content from the Menu Bar.

Click Article Manager from the Content Menu option.

The Article Manager page will display

Select your article (for this example we are selecting the Front Page Article)

The Article Edit page will display.

At the bottom of the Edit screen there is an <Image> button (Figure AP).

Figure AP

Click <Image> button


The Image Organiser pop up window will display

Figure AQ

You can either select an image from the window or to upload your own image click the <Browse> button


Figure AR

The Choose File window will display where you can navigate to where you have your images stored (Figure AR)

Select your image and click the <Open> button

Your image will then be displayed in the Image Organiser pop up window.

Select your image and click the <Insert> button (Figure AS)

Figure AS


Click the Save icon at the top of the Article Edit page.

Click the Preview hyperlink at the top of the browser window.

Your image will now display on the relevant article.

1.3.4. Editing the Article Parameters

You may have noticed that having created your article and published it on your website so that you can now see the content that there are some extra functions that you may not want.

Figure AT

Looking along the top of your content is an information banner (Figure AT) that displays the date of when the document was created, who created it and three icons that allows your visitor to get a copy of this page as an Adobe Acrobat .pdf file, print this page and email a link to this page.

You may also not want to display all of the content but instead have a Read More link.

You can edit these functions so that they don’t display and a Read More link will be displayed automatically.

Click Content from the Menu Bar.

Click Article Manager from the Content Menu option.

The Article Manager page will display

Select your article (for this example we are selecting the Front Page Article)

The Article Edit page will display.


To hide the functionality of the page such as who wrote the content etc you will need to use the Parameters (Advanced) option.

This is displayed on the left hand side of the Article Edit page. If the options are not displayed click the Parameters (Advanced) heading to display a list of options (Figure AU).

Figure AU

To hide the options such as pdf icon, Print icon, Email icon, title, Author Name etc Select Hide from any of the drop down menus.


To create an automatic Read More link to your content position your mouse cursor at the section of the page you want the link.

Click the <Read More> button (Figure AV)

Figure AV

You will notice that a red line will be displayed at the section of the page you wish to have a link to Read More.

Click Save icon to save your changes

Click Preview link at the top of the page to view your changes


Notice now that we no longer have the information displayed along the top of the page and we have a Read More link that when clicked will display the rest of the content (Figure AW)

Figure AW


1.3.5. Adding a Top Menu using a Module

We can now begin to add a further content to our page in other positions.

In 1.2.4 Viewing the Layout section of this document we demonstrated how you can view where the positions are on the page so that you can add content to those positions (Figure AX).

Figure AX

For this example we are going to add further menu options, but this time we are going to add it to the position along the top of the page called hornav. This module doesn’t come with any outline to it.

Click Extensions menu options (Figure AY)

Figure AY


Click Module Manager from the Extensions menu options (Figure AY)

The Module Manager page will display (Figure AZ)

Figure AZ

Click New icon (Figure AZ)


The Module New page will display (Figure BA).

Figure BA

This page allows you to select from many different types of modules. For this example we want to create another menu.

Select the Menu radio button

Note

For a detailed description of what each module does, click the Help icon at the top of the browser (looks like a lifebuoy).


The Module Edit page will display

Figure BB

Type a title in the Title field

Check that the Module is enabled.

To position the menu along the top of our web page select hornav from the Position drop down list

Select your menu from the Menu Name drop down list in the Module Parameters section of this page.

Note

If you had created another menu(s) then you could select from any in the list


Click Save icon and Preview your changes by clicking on the Preview link.

Figure BC

You can see that we now have a menu bar along the top of the page (Figure BC)


1.3.6 Creating Sections and Categories

We have already looked at creating articles in an earlier chapter. Joomla! allows you to organise your content in Sections and Categories. For this example we are going to create a Medical Condition section and add Blood test and Back Pain categories to the Section.

We are then going to add the Section/Categories/Articles to the Section Module and display the module (which is a container for content etc) to the right hand side of our web page.

Click the Content Menu

Figure BD

Click the Section Manager option (Figure BD)

The Section Manager page will display (Figure BE)

Figure BE

Click the New icon (Figure BE)


The Section Manager New page will display


Click the Save icon

You have now created a Section where you can now add Categories

Click the Content Menu

Click the Category Manager option (Figure BF)

Figure BF

The Category Manager page will display (Figure BG)

Figure BG

Click the New icon (Figure BG)

The Category Manager New page will display


Figure BH


Select the Section you wish to associate the Category to (In this example Medical Conditions)

Click the Save icon

You have now created a Category

Repeat the process so that you have a number of categories (In this example we are going to create a Back Pain Category

We can now create our articles to be associated with the Categories

Follow the process in 1.3.1 Creating an Article ensuring that you select the correct Section (In this example) and the correct Category (We have created Blood Tests and Back Pain categories)

The article will then be associated to which ever category you choose (In this example we are going to create two articles – one on Blood Tests and one on Back Pain)

We are now going to associate our Section/Categories to one of the modules (In this example the Sections Module)


Click Extensions menu options (Figure BI)

Figure BI

Click Module Manager from the Extensions menu options (Figure BI)

The Module Manager page will display

Click New icon

The Module New page will display

Select the Sections radio button

The Module Edit page will display

Type a title in the Title field (In this example Medical Conditions)

Check that the Module is enabled.

To position the menu to the right of our web page select Right from the Position drop down list

Click Save icon and Preview your changes by clicking on the Preview link


Figure BJ

You will notice that we now have our Medical Conditions module displayed down the right hand side of our web page.

Within the Medical Conditions module is our Section which we called Medical Conditions as well and if we click the Medical Conditions hyperlink our two new categories will be displayed (Figure BK)


Figure BK

If we click one of the categories we can then see our article displayed in the category (Figure BL) (In this example our Back Pain article)

Figure BL


1.3.6. Creating a Custom Module

1.3.7. Creating a New Menu

module 1 introduction to joomla! beginners guide

Documents