joomla 3training.domains.lk/images/joomla3.pdfjoomla provides fields which you can use to show...

Joomla Sites

JOOMLA 3 TUTORIAL

T R A I N I N G D I V I S I O N

L K D O M A I N R E G I S T R Y

N E W E D I T I O N

O C T O B E R 2 0 2 0

2

Joomla Sites

Every Joomla Website has two areas: a public area for visitors and a private area for administrators.

Making Your First Joomla Site Content

Let’s create the About Colombo article so it is reflecting the fact that our site is about Colombo.

• Click on “Content”, then “Articles”.

• Click on “New”.

• Title: About Colombo.

• Featured: Yes.

• Article text: “about colombo” text file in workshop/text folder.

• Click “Save & Close” in the action buttons area.

• Click on the “Colombo” link, in the top-right corner. This will take you to the visitor area.

3

Joomla Content

The procedure for adding Joomla content is simple:

• Step 1: Categorise. Create organization for your article.

• Step 2: Add. Write your article.

• Step 3: Show. Make menu links so that people can click through and see your article.

Step 1: Categorise

Joomla uses categories to organize articles. Let’s create one category for each group of related and name it appropriately, as seen below: Information

• Climate

• Location

• History

Attractions

• Museum

• Zoo

• Galle Face Green

Transport

• Trains

• Buses

• Air

Let’s create all 3 categories first.

• Go to your administrator area and then click on “Content” then “Categories”.

• Click the green “New” button.

• Title: Information.

• Description: This category contains information about Colombo.

• Click “Save & New”.

Exercise 1: Create other 2 categories: Attractions and Transport.

4

Step 2: Add

Let’s go and create all articles.

• Click “Content”, “Articles”, then “Add New Article”.

• Title: Climate

• Category: Information

• Article text: climate text file in workshop/text folder.

• Click “Save & New” to create all remaining articles.

Exercise 2: Create remaining articles, Location, History, Museum, Zoo, Galle Face Green, Trains, Buses, Air.

5

tep 3: Show

We need to show people our articles. We do that by making menu links to the articles:

• In the administrator interface, click on “Menus” then “Main Menu”.

We are going to add a new link to the Information articles we created earlier.

• Click “New” in the top-left corner.

• Click on the blue “Select” button. This will allow you to decide which part of the site to link to.

• We want to link to one of the articles created earlier, so click “Articles” and “Category Blog” as shown below.

• Click on the “Select” button in “Choose a category” field. Click on the “Information” link.

• Enter “Information” in the Menu Title.

6

• Click “Save & Close” to complete the creation of your menu link.

• Visit the front of your site, and you see new Information link on the main menu.

• Click on the Information link, and you see your new articles published on your site:

Exercise 3: Create sub menus for other 2 categories: Attractions and Transport.

7

Joomla Content Editing

It’s now time to make our articles more interesting; formatting text, adding images and links, and choose the best options for your articles.

Formatting Your Text

We only wrote articles in plain text. We didn’t use any bold text, italics, bullet points, or indeed any type of formatting. Let’s start by editing our “About Colombo” article.

• Go to “Content”, then “Articles”, and then “About Colombo”.

• Using your cursor, select the first text in the article: “Thank you for visiting our site for the city of Colombo.”

• Choose the B button in the top-left of the formatting options.

• Select the words “wonderful city”.

• Click on the I button in the top-left of the formatting options.

In the second half of the About Colombo article we have suggestions for site visitors. We can put a subheading in there to break up the text and make it easier to read.

• Use normal text to write your subheading: “Colombo Visitor Suggestions”.

• Select the subheading text and click the “Paragraph” dropdown. Choose “Heading 3”.

Here’s how to create a bulleted list:

• Put your cursor after the word “visit” in the sentence “You can visit the Galle Face Green, the Zoo and the Museum.”

• Hit Enter to move the attractions onto a new line.

• Make sure your cursor is in front of the “the Galle Face Green” and click the unordered list button.

• Make sure your cursor is in front of “the Zoo” and click enter.

• Make sure your cursor is in front of “the Museum” and click enter. You can now tidy up the punctuation, removing commas and adding a semicolon.

8

• Click the “Save” button.

• Click the “Colombo” link in the top-right corner.

Adding Images to Your Content

It is easier for us to have all images for our website in one location. Let’s add all images to our image library.

• Go to “Content”, then “Media”, and then click on the green Upload button on top-left.

9

• Then click on “Choose Files”.

• Search the Images folder inside Session 3 – Site Creation.

• Select all 4 images and click on “Open” button at bottom right.

• Then click on “Start Upload”.

10

• Now all images are uploaded into our media library.

Adding an Image to our Featured Article on home page.

• Open the Featured Article using “Content -> Featured Article and click on “About Colombo” article.

• Click on the article “About Colombo”

11

• Select the place where you want to insert the image. In this article, we want the image at the top of the article, so put the cursor before “Thank you”.

• Click the “Image” button.

Show Image

• Click on the townhall.jpg image so that it is selected.

• Click “Insert”.

• Select the image so that the corners are highlighted.

• Click the “align right” button in the toolbar again.

• Click “Save” and then visit the front of your site.

How do visitors find the information for pages for the Galle Face Green, Zoo or Museum? They need a link to those pages.

Adding Links to Your Content

Let’s add links to our Joomla articles.

Internal Links

Let’s start by editing the article we’ve been using throughout this section: “About Colombo.”

• Select the text that you want to be linked. In this example, let’s choose the word “Galle Face Green”.

• Click the “Article” button in the editor.

12

• You see a pop-up window with a list of all your articles. Find the Galle Face Green article that you want to link to and click on the article title.

Exercise: Now, see if you can add more links to our About Colombo article. Go ahead and add links from these words to the appropriate articles: Zoo, Museum, Air, Bus, and Train.

Joomla Fields

Joomla provides fields which you can use to show dates, numbers, images, URLs and much more.

Cleaning Up Our Display

• If you are anywhere under the “Content” menu, click the “Options” button in the top-right. This page has a large number of configuration options for your content. On the first tab called “Articles”, you’ll see the options we need. Make these changes:

• Show Category: Hide

• Show Author: Hide

• Show Publish Date: Hide

• Show Navigation: Hide

• Show Icons: Hide

• Show Print: Hide

• Show Email: Hide

• Show Hits: Hide

• Click “Save”.

• Visit your Zoo article on the front of the site. The content now be cleaned and stylish.

Joomla Menus

You can change the position of menu links easily.

• Click on “Extensions”, then “Modules”.

• Click on “Main Menu”.

• Change the Position from position-7 to Navigation [position-1] under Protostar.


• Visit the front of your site. To make it horizontally:

• Click on “Advanced” tab.

• Type nav-pills with blank space in front in Menu Class Suffix field.


• Visit the front of your site.

13

Dropdown Menu

You can add more links using dropdown links. These organize menu links and also help to save space.

• Go to “Menus”, “Main Menu”, and then “Add New Menu Item”.

• Menu Title: Train

• Menu Item Type: Single Article

• Select Article: Train

• In the “Parent Item” dropdown, choose “Transport”:

• Click “Save & Close”.


• Hover over the “Transport” link, and you’ll see a “Train” dropdown. Let’s repeat that process for other transport articles:

• Go to “Menus”, “Main Menu”, and then “Add New Menu Item”.

• Menu Title: Bus

• Menu Item Type: Single Article

• Select Article: Bus

• Parent Item: Transport

• Click “Save & Close”

• Repeat for the Air article.

Layout Changes Until now, your category pages have all shared a standard layout. There’s on main article on the top row, and then two columns underneath. Let’s see how to change this default layout.

• Go to “Menus”, then “Main Menu”.

• Click “Information”.

• Click the “Blog Layout” tab. Let’s turn 1 row, 2 columns layout into a multiple row layout:

• # Leading Articles: 3

• Save the menu link and visit the front of your site. Click “Information” link, and you’ll see the layout has changed.

14

Joomla Components

Joomla arrives with eleven default components such as advertising banners.

Banners Component

The Banners components has two main tasks:

• It shows advertising banners.

• It collects all the data those banners, such as the number of times each one has been shown and the number of times each one has been clicked on.

Step #1: Categorise

• Go to “Components”, then “Banners”, and then “Categories”:

• Click “New”.

• Let’s create a banner for the right-hand side of our site, so enter Right Column into the Title field.


Step #2: Add

• Go to “Components”, then “Banners”.


• Name: Right Column CMC Banner.

• Image: Click “Select”.

• Select “cmc.jpg” and click “Insert”.

• Click URL: Let’s put http://www.colombo.mc.gov.lk in here.

• Category: Right Column

Step #3: Show

• Go to “Extensions”, then “Modules”, and click New.

• Click “Banners”.

• Title: Right Column Banner

• Category: Right Column

• Show Title: Hide

• Position: Right



The Search and Smart Search Components

The Search component allows people to search for keywords on your site.

• Go to “Components”, then “Search”.

• Click “Options” and set “Gather Search Statistics” to “Yes”.


15

• Go to “Extensions”, then “Modules”.


• Click “Search”.

• Title: Search

• Position: Search [position-0] under Protostar.

• Click “Save & Close” and visit the front of your site. The Smart Search component is a more sophisticated alternative to the Search component.

• Go to “Extensions”, then “Plugins”.

• Search for and enable the “Content – Smart Search” plugin.

• Go to “Components”, then “Smart Search”.

• Click the “Index” button in the top-left corner.


• Click the green check mark next to Search, so that it turns to a red cross. This will unpublished the default Search box.


• Click “Smart Search”.

• Title: Smart Search

• Search Field Label: Hide


• Position: Search [position-0]



Joomla Modules

Modules make life easier for our site’s visitors. Modules are small blocks that allow visitors to quickly find information, links, or features.

Understanding Modules

Modules normally go around the left, right, top and bottoms of your site. The default Joomla template has more than a dozen different places where you can place them. It is possible to get a visual guide to your template’s module positions:

• Go to “Extensions”, “Templates”, and then “Templates”.

• Click “Options” and set “Preview Module Positions” to “Enabled”.


• Scroll down and click the “Preview” link next to Protostar Details and Files.

16

Let’s create an Image Module to display an image on top of our content:

• Go to “Extensions”, “Modules”.


• Select Custom.

• Title: Image Module

• Position: Top-centre [position-3]


• Click “Image” button, then “Browse” button and the bottom, select the image homepage.jpg in workshop/image folder, and upload it.

• Select the uploaded image homepage.jpg, then click on “Insert”, then “Save & Close”.


17

Joomla Templates

Templates control the design and layout of your Joomla site. Joomla arrives with two templates for your site’s visitors. They do not change your content in any way.

Changing Templates

By default, two templates are installed on your Joomla site.

• Go to “Extensions” and then “Templates”.

• In the “Default” column, click on the star in the Beez3 row to change the template.

• Go to the front of your site to see the new design.

Changing Templates Options

We can redesign our site by changing the template. However, it’s also possible to redesign our site and still keep the same template. Most templates come with design options. Let’s use Protostar as an example and make it into the default template again:

• Go to “Extensions”, then “Templates”.

• Look for the Default column and click on the star in the Protostar row.

• Click on the “Protostar – Default” name.

• Click the “Advanced” tab. You’ll now see several options for changing the Protostar design.

• Click the “Template Colour” box, and select a new color scheme for the site.

• Choose a different color for the “Background Colour” option.

• Save the template, and view your site.

Installing a Template

Let’s start with a template from Joomlashack called “Community”.

• Go to “Extensions”, “Manage”, and then “Install”.

• Browse the file “js_community-4.1.0.zip” in /workshop/templates folder to install it.

• Go to “Extensions”, then “Templates”.

• Make Community into the default template.

• Visit the front of your site. We clearly have some more work to do: Let’s get Main Menu in right place.


• Move the “Main Menu” module to the “Menu [menu]” position.


• Visit the front of your site, and the menu should be working correctly. Let’s get Smart Search module on right place.


18

• Move the “Smart Search” module to the “Menu [menu]” position.



• Click on “Advanced” tab.

• In the “Module Class Suffix” field enter “ pull-right”. You do need that space.


• Visit the front of your site. Let’s get the login module on the homepage.

• On the “Modules” screen, edit the “Login Form” module.


• Position: Featured

• Menu Assignment: Only on the pages selected.

• Menu Selection: Home


• Visit the front of your site. Let’s bring our sidebar module back.


• Select “Right Column Banner”

• Choose “Sidebar2 [sidebar2]” for the position.

• Visit the front of your site. Let’s have our own logo and homepage image.

• Go to “Extensions”, then “Templates” and edit Community template.

• Choose logo.png from “Logo Image” dropdown.

• Visit your site.

• Click the “Community Options” tab.

• Select the new image homepage.jpg.

• Click “Save & Close”

• Visit your site.

joomla 3training.domains.lk/images/joomla3.pdfjoomla provides fields which you can use to show...

Documents