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
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 2
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
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 3
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
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 4
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.
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 5
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
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 6
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
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 7
• 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
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 8
• 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.
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 9
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)
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 10
Figure M
Click the Template name. (This is a hyperlink)
The Template Edit page will display (Figure N)
Figure N
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 11
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
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 12
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.
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 13
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.
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 14
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.
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 15
Select the Template Width drop down box (Figure U).
Figure U
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 16
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
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 17
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
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 18
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)
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 19
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
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 20
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
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 21
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’
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 22
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!.
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 23
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
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 24
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
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 25
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)
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 26
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
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 27
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)
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 28
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
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 29
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.
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 30
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
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 31
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
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 32
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
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 33
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
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 34
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.
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 35
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.
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 36
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
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 37
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
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 38
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
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 39
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)
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 40
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).
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 41
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
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 42
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)
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 43
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)
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 44
The Section Manager New page will display
Type a title in the Title field
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
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 45
Figure BH
Type a title in the Title field
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)
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 46
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
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 47
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)
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 48
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
Joomla! User Guide Module 1 – Introduction to Joomla! Draft Version 0.1. August 2008 Program IT (UK) Ltd Copyright 2008 49