Joomla 2.5 User Guide

1

Joomla! Powered CMS Website

Website Management Guide Joomla Versions 2.5 Document Version 1.0

This document will help you edit and update your new website.

NOTE: This document is confidential and intended for the owner of the above website only. The contents are strictly confidential. We strongly advise you keep this document in a secure location and do not share it with anybody who you do not want to have access to your website.

2

3

Contents Accessing your Control Panel............................................................................5 Introducing the Control Panel...........................................................................5 The Article Manager.............................................................................................7 Adding a New Article...........................................................................................9 Inserting an Image into an Article.................................................................11 Editing an Existing Article............................................................................... 13 Using the WYSIWYG Editor............................................................................. 14 The Media Manager.......................................................................................... 17 The Menu Manager........................................................................................... 19 Adding a New Menu Item............................................................................... 21 The Module Manager........................................................................................ 23 The Contact Manager....................................................................................... 25 Component: RokGallery Photo Gallery........................................................ 27 Updating Slideshow Photos............................................................................ 33

4

Google Analytics If your site has been set up with Google Analytics tracking, you can access the control panel of your analytics account at www.google.com/analytics

5

Accessing your Control Panel Type the following address in your internet browser (Internet Explorer, Firefox, Safari etc) address bar.

• http://www.yourwebsiteaddress.com.au/administrator • Enter in the username and password: «« Username: provided seperately «« Password: provided seperately This will take you to the Joomla Control Panel.

Introducing the Control Panel From the Joomla Control Panel you can access all areas of the website, including adding/ editing content pages, uploading images, installing additional extensions, adding new menu links, users and modules and so on.

The buttons in the Control Panel take you to the same locations as the menu system you will see across the top of the screen - Site, Users, Menu, Content, Components, Extensions, Help (see screenshot on opposite page).

How to read this guide Throughout this guide you will see a button/icon - this is the button to click on from the Control Panel.

We will also show you the navigation pathway if you were to use the top menu system.

Both navigation methods will take you to the same location.

Information boxes like this one provide additional information about the current screen the user guide page is written about and other important tips.

6

You can filter or search for articles using words in the article title.

The “Status” column shows you whether an aritcle is published (viewable) or unpublished (non-viewable) on your website. You can turn them on/off by clicking on this icon directly.

The “Featured” column are those articles that appear on your home page. You can turn on/off articles on the home page simply by clicking on the icon in this column directly.

Featured

Published

You can further filter the article list by published status, category, access, author etc by using this drop down selection boxes.

The “Access” column indicates those articles that are available for the public to view and those that require website users to be logged in or registered to view.

Unpublished

7

The Article Manager The “Article Manager” is where the content pages of your sites are stored and created.

To get there... from the Joomla Control panel select the button “Article Manager” OR from the top navigation go to “Conent” > “Article Manager” You will be taken to a list of your current articles (see screen shot opposite page).

Screen Toolbar: At the top right you will see this toolbar:

• New: Opens the editing screen to create a new article.

• Edit: Select an article check box and then this button to edit that article, or click on the article title link to go to the edit screen.

• Publish: Makes the selected articles available to visitors to your website.

• Unpublish: Makes the selected articles unavailable to visitors to your website.

• Featured: Marks selected articles as featured. Works with one or multiple articles selected. Featured articles typically display on your home-page.

• Archive: Changes the status of the selected articles to indicate that they are archived. Archived articles can be moved back to the published or unpublished state by selecting “Archived” in the Select

Status filter and changing the status of the articles to Published or Unpublished as preferred.

• Check In: Checks-in the selected articles.

• Trash: Changes the status of the selected articles to indicate that they are trashed.

Trashed articles can still be recovered by selecting “Trashed” in the Select Status filter and changing the status of the articles to Published or Unpublished as preferred. To permanently delete trashed articles, select “Trashed” in the Select Status filter, select the articles to be permanently deleted, then click the Empty Trash toolbar icon.

• Options: Opens the Options window where settings such as default parameters can be edited.

• Help: Opens a help screen.

8 Use these buttons to save this article.

WYSIWYG Editor The default editor for both front-end and back-end users in Joomla! is the TinyMCE editor.

TinyMCE is a WYSIWYG (what you see is what you get) editor that allows users a familiar word-processing interface to use when editing Articles and other content.

The 3-row toolbar below provides many standard editing commands.

Title. The Title for this item. This may or may not display on the page, depending on the parameter values you choose.

Alias. Normally, you can leave this blank and Joomla! will fill in a default value - the Title or Name in lower case and with dashes instead of spaces. The Alias will be used in the URL when SEF is activated.

Category. Select the Category for this Article from the drop-down list box.

Status. Whether or not this item is published. Select Yes or No from the radio button group to set the Published state for this item.

Featured. Select No or Yes from the radio button group to indicate whether this Article will show on the Front Page.

9

Adding a New Article To add a new article ... from the Joomla Control panel select the button “Add New Article” OR from the top navigation go to “Conent” > “Article Manager” > “Add New Article” OR from the Article Manager and clicking on the “New” button.

You will be taken to a blank article screen (see screen shot opposite page).

Enter a title for the article Select the category it should appear in (this is based on the type of content that is included in the article. If you are not sure use “uncategorized”).

Simply type the text into the WYSIWYG Editor window.

Screen Toolbar At the top right you will see this toolbar:

• Save: Saves the article and stays in the current screen.

• Save & Close: Saves the article and closes the current screen and returns you to the article list screen.

• Save & New: Saves the article and keeps the editing screen open and ready to create another article.

• Cancel: Cancels the creation of the new Article.

• Help: Opens a help screen.

10

Article. Use to link from within the body text to another article already created. A popup dialogue box will display from where you can select the article to link to.

Image. You can add images using either the TinyMCE Insert/Edit Image icon or the Image button below the edit area. For adding new images in an Article, it is easier to use the Image button (below the edit area). This is because it lets you browse to the image file and also lets you upload images. However, for editing an existing image, you need to use the TinyMCE icon. The Image button only supports adding new images.

Pagebreaks. Pagebreaks allow you to provide multi-page navigation for long Articles.

Read more. Read More breaks allow you to save space on the Front Page or on any blog layout page by showing just the first portion of an Article. You can use both Pagebreaks and Read More on one Article, if desired. For example, you could put a ‘Read more...’ break after the first paragraph of a multi-page article, and have Pagebreaks after each page. No page navigation would display on the Front Page until the User selects the ‘Read more...’ link. At that time, the Article’s table of contents would display showing links to every page.

Toggle Editor. Switches the view from WYSIWYG to HTML code.

11

Inserting an Image into an Article When adding new images in an Article, it is easier to use the Image button (below the edit area). This is because it lets you browse to the image file and also lets you upload images onto your website server.

To include images in the content click on the “Image” button located at the bottom of the content window pane.

• This opens a dialogue box where you can browse to the file on your computer and upload it to the website.

• You can upload an image from your computer by clicking on the “Browse” button and then the “Start Upload” button.

• You should also select whether you want the image to ALIGN to the left or right of your text.

• Once uploaded, click on the image, then click on the “Insert” button at the top right.

12

The article title, alias, category, published status, access level and whether it is a featured article on your home page can be selected here.

WYSIWYG Editor TinyMCE is a WYSIWYG (what you see is what you get) editor that allows users a familiar word-processing interface to use when editing Articles and other content. The 3-row toolbar below provides many standard editing commands.

Simply click in this window and start editing as you would a Word document.

Use these buttons to save and close the changes you have made to this article.

Article Options: This section allows you to enter additional parameters for this Article, overriding those made in the global article Options.

Metadata Options: This section allows you to enter Metadata Information for this Article. Metadata is information about the Article that is not displayed but is available to Search Engines and other systems to classify the Article. This gives you more control over how the content will be analyzed by these programs.

13

Editing an Existing Article Find the article you would like to edit in the article list. If your list is long you can use the filter box at the top of the list to narrow your results. You can also filter your list using the drop down boxes across the top - by status, category, author etc.

Click on the title of the article you would like to edit OR Select the article checkbox and then the “Edit” button.

The same screen is used for adding a new Article and editing an existing Article.

Read the “Adding a New Article” section for more detailed information about each element of this screen.

The Article’s content is edited using the default editor selected in the User Manager New/Edit. Simply click and type.

Screen Toolbar At the top right you will see this toolbar:

• Save: Saves the article and stays in the current screen.

• Save as Copy: Creates a copy of the current article for you to work from.

• Save & Close: Saves the article and closes the current screen and returns you to the article list screen.

• Close: Closes the current screen and returns to the previous screen without saving any modifications you may have made.

• Save & New: Saves the article and keeps the editing screen open and ready to create another article.

• Help: Opens a help screen.

14

Using the WYSIWYG Editor TinyMCE is a WYSIWYG (what you see is what you get) editor that allows users a familiar word-processing interface to use when editing Articles and other content. The 3-row toolbar below provides many standard editing commands:

Top Row. • Buttons in the upper left allow you to make text bold, italic, underlined, or strikethrough. Next to that are buttons for align left, right, center, and full.

• Styles. Caption and System Pagebreak styles can be set. Highlight the desired text and select the style. This will allow this text to be formatted based on CSS rules. BEST OPTION FOR CONSISTENT FORMATTING • Format. Select pre-defined formats for Paragraph, Address, Heading1, etc.

• Font Family. Select the desired font.

Second Row. • Unordered List, Ordered list, Outdent (move left) and Indent (indent right).

• Undo (Ctrl+Z) and Re-do (Ctrl+Y).

• Insert/Edit Link. To insert or edit a link, select the linked text and press this button. A popup dialog displays that lets you enter details about the link.

• Unlink. To remove a link, highlight the linked text and press this button.

• Insert/Edit Anchor. An anchor is a bookmark inside an article that lets you link directly to that point in the article. To insert an anchor, move the cursor to the desired location within the article and click this button. A window will display. Enter the name of the Anchor and press Insert. A small anchor icon will show in the location of the anchor. You can edit the name of the anchor by clicking on it and pressing this button. You can delete the anchor just by selecting it and pressing the Delete key.

• Insert/Edit Image. To insert an image, place the cursor in the desired location and press this button. A popup dialog displays that lets you enter in the Image URL and other information about how the image will display.

15 • Cleanup Messy Code. This button allows you to clean up HTML code, perhaps from HTML text that you copied in from another source.

• Edit HTML Source. A popup displays showing the HTML source code, allowing you to edit the HTML source code.

• Find and Find/Replace.

• Insert Date, Time, or Emotions.

• Insert Embedded Media. To insert embedded media (such as Flash), place the cursor at the desired location and press this button. A popup dialog will display that allows you to enter the Type, File or URL, and other information about the media.

• Direction Left to Right and Direction Right to Left. These buttons allow you to enter or change the text direction, for example for languages that read right to left.

• Insert New Layer, Move Forward, Move Backware, Toggle Absolute Position.

For working with layered items.

• Select Text Color.

Third Row. • Insert Horizontal Ruler.

• Toggle Guidelines/Invisible elements.

• Subscript, Superscript, Insert Custom Character, Horizontal Rule.

• Insert New Table, Table Row Properties, Table Cell Properties, Insert Row Before, Insert Row After, Delete Row, Insert Column Before, Insert Column After, Delete Column, Split Merged Table Cells, Merge Table Cells.

• Toggle Full Screen Mode.

• Edit CSS Style. A popup dialog box displays that allows you to enter CSS style information for the selected text.

Copying text from Microsoft Word When copying text from Microsoft Word, it is best to copy the text into a text editor first (like notepad) so it will remove all text formatting that Word automatically applies in an html format. Then copy and paste from Notepad into the WYSIWYG editor. Doing this will keep the format of the article consistent with all other content on the site.

16

Thumbnail View

Detail View

17

The Media Manager The “Media Manager” is for uploading or deleting files in the /images/ directory on your web server. You can upload new files, delete existing ones, and create sub-directories.

To get there... from the Joomla Control panel select the button “Media Manager” OR from the top navigation go to “Content” > “Media Manager” The Media Manager offers two views: thumbnails view and details view. The first (thumbnails view) will show a preview of the image files. The second (details view) will show the file name, dimensions, and file size. There is also a handy ‘delete’ button next to each file.

Linking to a File in an Article • Create a folder to house all documents in the Media Manager view

• Upload the file using the Media Manager (eg pdf, doc)

• In “Detail View” get the path way to the file (usually starting at “images”) and the file name. eg images/documents/brochure.pdf Use this url information in the Article view - using the “Insert/Edit Link” button on the WYSIWYG Editor.

Screen Toolbar At the top right you will see this toolbar: • Delete: Deletes the selected images. Works with one or multiple images selected.

• Options: Opens the Options window where settings such as default parameters can be edited.

• Help: Opens a help screen.

18

Menu item links.

The “Status” column shows you whether a menu item is published (viewable) or unpublished (non-viewable) on your website. You can turn them on/off by clicking on this icon directly.

You can filter the menu item list by published status, access etc by using these drop down selection boxes.

The “Ordering” column enables you to re-order the position of each menu item within the website frontend.

The “Access” column indicates those menu items that are available for the public to view and those that require website users to be logged in or registered to view.

The “Menu Item Type” column shows what Menu Item Type the menu is - whether it is an article, component, an external URL etc.

The “Home” column with a star icon - this menu item links to the Home page. There must be one link with this star.

19

The Menu Manager The “Menu Manager” is where you create the main navigation links.

To get there... from the Joomla Control panel select the button “Menu Manager” OR from the top navigation go to “Menus” > “Main Menu”

Screen Toolbar At the top right you will see this toolbar:

• New: Opens the editing screen to create a new menu item.

• Edit: Opens the editing screen for the selected menu item.

• Publish: Makes the selected menu item available to visitors to your website.

• Unpublish: Makes the selected menu item unavailable to visitors to your website.

• Check In: Checks-in the selected menu items.

• Trash: Changes the status of the selected menu items to indicate that they are trashed. Trashed menu items can still be recovered by selecting “Trashed” in the Select Status filter and changing the status of the menu items to Published or

Unpublished as preferred. To permanently delete trashed menu items, select “Trashed” in the Select Status filter, select the menu items to be permanently deleted, then click the Empty Trash toolbar icon.

• Home. Makes the page associated with the currently selected menu item the home page of your site. That is, it becomes the default page on your website.

• Rebuild. Reconstructs and refreshes the relevant table. Normally, you do not need to rebuild this table. This function is provided in case the data in the table becomes corrupted.

• Help: Opens a help screen.

20 Use these buttons to save this article.

Menu Item Type. The first step to creating a new Menu Item is to select it’s Type. The Menu Item Type determines the type of page that will display when this menu choice is selected by the User. In this screen, you will select the Menu Item Type for the Menu Item you are creating.

This sections changes based on the Menu Item Type selected. In most cases it will be a “single article” and this is where you select the required article to link to.

Menu Title. The wording that appears on the menu button.

Alias. Normally, you can leave this blank and Joomla! will fill in a default value - the Title or Name in lower case and with dashes instead of spaces. The Alias will be used in the URL when SEF is activated.

Link. This will display the URL of this item once saved. If linking to an external URL you would insert it here.

Status. Whether or not this item is published.

Access. Whether this menu item is available to all visitors or only registered/logged in visitors.

Menu Location. Which menu module this item belongs to.

Parent Item. Whether this item is a parent item or a sub menu item.

Target Window. Whether this item opens in the current screen or a new window.

Find out more You can find out more about the different sections available on this screen by clicking on the “Help” button in the toolbar.

You can set individual browser bar titles for better SEO plus other metadata options on this screen.

21

Adding a New Menu Item To add a new menu item ... from the top navigation go to “Menus” > “Main Menu” > “Add New Menu Item” (where the main menu is the menu you want to add to) OR from the Main Menu Menu Manage page by clicking on the “New” button.

You will be taken to a blank menu item screen (see screen shot opposite page).

Linking to Articles? Create them first!

First of all create, the content item/article you would like to link to first, as per the “Edit or Add New Article” instructions earlier in this document.

Screen Toolbar At the top right you will see this toolbar:

• Save: Saves the menu item and stays in the current screen.

• Save & Close: Saves the menu item and closes the current screen and returns you to the menu list screen.

• Save & New: Saves the menu item and keeps the editing screen open and ready to create another menu item.

• Cancel: Cancels the creation of the new menu item.

• Help: Opens a help screen.

22

Module item links.

The “Status” column shows you whether a module item is published (viewable) or unpublished (non-viewable) on your website. You can turn them on/off by clicking on this icon directly.

The “Position” column indicates the template position the module is placed in. Position names vary based on the template code - typical positions are left, right, top, footer, breadcrumbs.

The “Type” column indicates the type of module used. The list can be filtered by this selection.

The “Ordering” column enables you to re-order the position of each module item within the website frontend.

The “Pages” column indicates which pages the module has been set to display on.

The “Access” column indicates those modules that are available for the public to view and those that require website users to be logged in or registered to view.

23

The Module Manager Your website will likely use “Modules” - these are generally blocks of information or features that are not a content page or article. They would typically be positioned on the left, right, top or bottom of content pages. For example, the Main Menu uses a module, other modules might include ...

• contact details (but not the “Contact us” page) • search bar • slideshows • list of recent article links These are managed in the “Module Manager”. To get there... from the Joomla Control panel select the button “Menu Manager” OR from the top navigation go to “Extensions” > “Module Manager” You will be taken to a list of your current modules (see screen shot opposite page). Many of these modules are installed by default but not used.

Screen Toolbar At the top right you will see this toolbar:

• New: Opens the list of available modules to create a new module item.

• Edit: Opens the editing screen for the selected module.

• Duplicate: Creates a copy of the selected module.

• Publish: Makes the selected module available to visitors to your website.

• Unpublish: Makes the selected module unavailable to visitors to your website.

• Check In: Checks-in the selected module.

• Trash: Changes the status of the selected modules to indicate that they are trashed.

• Options. Opens the Options window where settings such as default parameters can be edited.

• Help: Opens a help screen.

24

Contact Details tab. This is where you enter the individual contact details.

Display Options tab. This tab allows you to control settings such as what information gets displayed for each Contact.

Contact Form tab. Hide or Show the E-mail form. If Show is selected, a form is displayed that allows the user to send an e-mail to the Contact from the web site Metadata Options tab. This tab allows you to control the Metadata that will display on that contacts page for search engine software.

25

The Contact Manager If your website includes a contact form and contact details page, it is managed under the “Components” menu item in the Joomla Administrator. The Contact Manager screen allows you to add contact information to your Joomla! site. You can enter information such as name, address, phone and e-mail. To get there... from the top navigation go to “Components” > “Contacts” You will be taken to a list of your current contacts.

Select the required contact to edit the contact details as displayed in the website frontend.

Screen Toolbar At the top right you will see this toolbar:

• New: Opens the editing screen to create a new contact.

• Edit: Opens the editing screen for the selected contact. The editing screen can also be opened by clicking on the Title or Name of the contact • Publish: Makes the selected contact available to visitors to your website.

• Unpublish: Makes the selected contact unavailable to visitors to your website.

• Archive: Changes the status of the selected contacts to indicate that they are archived. Archived contacts can be moved back to the published or unpublished

state by selecting “Archived” in the Select Status filter and changing the status of the contacts to Published or Unpublished as preferred.

• Check In: Checks-in the selected contact.

• Trash: Changes the status of the selected modules to indicate that they are trashed.

• Options: Opens the Options window where settings such as default parameters can be edited.

• Help: Opens a help screen.

26