Website Training

Joomla User Management
Getting Started  •  Menu Manager

Website Structure
Sections  •  Categories

Create a New Article
Set up a New Article  •  Add Content  •  Format  •  Links  •   Anchors

Working With Images
Preparing Images  •  Inserting Images With Flickr  •  Inserting Images Without Flickr

Lists

Contacts List  •  Simple Lists

Joomla User Management

Getting Started

Recommended browser:
Not all browsers work perfectly in Joomla. Firefox will work best, especially when formatting articles and images.  The Joomla administrator  portal allows you to create and manage content and navigational structure. Joomla also provides limited access with a login that allows staff to easily edit existing articles. See Mike Sauvola for more information.

To begin working in Joomla open your website in two windows and use one to log into Joomla:
1.  In your browser open your homepage and copy/paste the url into a another window.
2.  Add /administrator to one url (example: library.wislib.org/administrator)
3.  Type your username and your password and click the Login button

Menu Manager
Joomla menus are accessed from either the icons or the drop-down navigation at the top:

  • Content Menu: Articles will be listed in the Article Manager. Front Page articles are listed in Featured Articles.
  • Menus Menu: The Main Menu features the horizontal menu used to navigate your site. Other menus are listed separately.
  • Components Menu: The Contacts section for listing staff and trustees using encrypted email features.
Top of Page 

Website Structure

Categories
Your site can be organized into categories to help you group similar articles. For example, articles related policies can be grouped together in a Policies section. Access the Categories feature from the Content menu.

Top of Page

Create a New Article

Set up a New Article
1. New articles are created in the Content menu > Article Manager > Add New Article
2. In the Title field type the name of your new article.
3. In the Category field choose from the list.
3. In the Status field choose if it will appear on your website as soon as it is saved.
4. In the Feature field choose if it will display on the front page.

Add Content to a New Article
Type the content of your article in the large box below the editor icons. Select the Paragraph down arrow to view choices for different heading styles. 

Pasting Text into an Article
If you paste content from a document, you must first copy and paste it into Notepad, and then copy and paste the text from Notepad to Joomla. Pasting from Notepad will allow you to format the article in Joomla and will also prevent the Word formatting from loading the page slowly.
  1. Notepad is available from your computer's All Programs list in the Accessories file.
  2. Type Ctrl A to select all of the text in your Word document (or highlight the text to be copied)
  3. Type Ctrl C to copy the selected text (or choose File > Copy)
  4. Type Ctrl V to paste the text In Notepad  (or choose File > Paste) 
  5. Type Ctrl A to select all of the text in Notepad
  6. Type Ctrl V to paste the text into your Joomla article
Save an Article
You can save an article as you work on it, or save and exit the article by choosing from the icons located in the upper right.
Top of Page

Format An Article
The following formatting tools will help you format your articles:

  • Text bold, italics, underline
  • Headings: Paragraph is the body style. A choice of six different heading styles.
  • Bullets
  • Numbers
  • Hyperlinks (creating a link to a web page)
  • Anchors (creating a link to a place on the current page, such as the top)
  • Picture editor (position your image and provide a title that displays as a cursor hovers over it.)
  • Special symbols (such as © or →)
  • Tables 
NOTE: Your website template has been preformatted with font styles for the body and headings.  

Links
To create a link to a website, highlight text and click on the link icon (it looks like a chain link) in the toolbar. Copy and paste the URL in the Link URL field.

Anchors
You can create a link to a section of your website that has an anchor. For example you can link text such as "Top of Page" to an anchor you insert at the top of your website:

  1. Place your cursor at the top of the page
  2. From the toolbar select the anchor icon (looks like an anchor)
  3. In the Anchor Name field type top and select insert.
  4. Type a line of text such as Top of Page   to direct people to the top of your website.
  5. Highlight the Top of Page text and click the link icon.
  6. In the Anchor field dropdown box select top.
  7. Click the Insert button.
Top of Page

Working With Images

Preparing Images for the Web
The quality of an image is compromised every time it is saved to the same name. Be sure to preserve your original image by making a new copy any time changes need to be made. When you make changes, use the Save As and rename it to create a new version. 

It's important to optimize images for the web in order to prevent them from loading very slowly. There are many free image optimizing services to choose from.

Uploading Images With Flickr
Flickr is a great way to edit and manage images stored on the web. Flickr automatically creates multiple sizes that are compressed to load quickly. You can create a Flickr account using your library Facebook login, or your library Gmail login. Otherwise create a new library Flickr account by selecting the Sign Up link.

Visit Flickr Photo Management to learn how to use Flickr to effectively work with images for your website. Once you have established a Flickr account, select an image from your photostream:
1. Click on the Flickr image
2. In the "Actions" menu select "View all sizes"
3. To the right of the photo, the Sizes menu displays links to a variety of sizes you can view.
4. Select the image size that works for your article.
5. Right-click on the image and choose "Copy Image Location"
6. Open an article for the image in Joomla (improvise for blogs or other web editors)
7. Place your cursor in position for the image
8. Select the Insert/Edit Image tool from the toolbar (looks like a tree)
9. In the Image URL field paste the URL from Flickr (Ctrl V or right click >Paste)
10. In the Title field add a short description that will appear as text for accessibility tools
11. Click the Appearance tab
12. The Alignment dropdown options allow you to choose a position for your page (right, left, etc.)
13. Click the "Insert" button to finish.

Uploading Images Without Flickr
Joomla stores images in the Media Manager. Images from your computer can be added to the Media Manager in two different ways: 

  • Navigate to the Media Manager and upload an image: Site > Media Manager > Choose File > Start Upload
  • In an article, use the two step process of uploading an image into the Media Manager and then inserting it into your article at the cursor
Images can be inserted into articles by clicking on the image button at the bottom of the page. You are next given the option to insert the photo from the Media Manager. If your photo is not yet in the Media Manger, you are given the option to download and then insert it.
 
Download/insert an image located on your PC:
1. Place your cursor where you'd like the image to appear in the article
2. Click the "Image" button located at the bottom of the screen
3. Click "Browse" and navigate to your image, select it, and click "Open"
4. Click "Start Upload" to upload the image to Joomla
5. Click on the image in Joomla
6. Choose "Align" options left or right
7. Add a title to display when the image is hovered over
8. To add a caption, choose "yes"
9. Click the "Insert" button

Insert an image located in the Joomla Media Manager
1. Place your cursor where you'd like the image to appear in the article
2. Click on the "Image" button
2. Click on your image thumbnail
3. Add an image description
4. Add a title that will display when hovering overSo much @ your library the image.
5. Select "yes" if the title should be displayed as a caption.
6. Select from the "Align" options.
6. Click "Insert" (top right)  to insert the image

Adjusting the inserted image
1. To adjust the image select it and click on the Insert/edit image icon in the toolbar that looks like a tree
2. Add vertical and/or horizontal space (try 2) if the image appears too close to the text.
3. Adjust the size if necessary (100 small, 200 medium)
4. Click the "Update" button to save changes.

Top of Page

Lists

Contact Lists

Creating lists of staff and trustee contact information in the Components menu: 
1. Select Category from the Components menu to create contact categories.
2. Create a category for Staff and one for Trustees by selecting the New icon.
3. You can optionally add text for the address and telephone. Save changes.
4. In the Component menu select Contacts to access the Contacts Manager and select the New icon to create one for each person. The email will be protected from spam by triggering a form that will forward email messages without revealing the email address.

Editing a list of contacts:
1. From the Components menu select Contacts
2.
From the Contacts Manager you can unpublish or change the order (edit numbering and click the black icon in the order heading)
3. Click on a contact name to edit the individual's information.

Simple Lists

Creating a formatted list of items  in the Component menu with images and links:  
1. From the Component menu select Simple List.
2. Choose Category to access the Category Manager
3. Click the New icon to add a category for each type of list.
4. Select Items and click on the New icon to add to your list of items.
5. Choose a Category for each item.
6. The right column provides options for including a link and an image.
7. Save your new item. 
8. The order in which the items display can be changed by editing the numbers and clicking on the black icon in the order heading. You can also unpublished any item to prevent it from displaying on the website.

Edit a Simple Lists item:
1. From the Components menu choose Simple Lists and then Items
2.
Choose from the list of items.
3. Edit and Save.

Top of Page