Publication date: June 2012

Writers:

Dao Ngoc Anh

Tran Thi Phuong Hanh

Editors:

Nguyen Thi Thanh Huyen

Bui Anh Tuan

Bui Huy Thang

Graphic Design:

Ho Huy Tung

Luu Minh Son

Proofreader:

HTML Edition:

Steve Melville

Ngo Le Tam

“Joomla 2.5 Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Contents
Contents............................................................................................................................................................... 3 Step 1: Get to know about Joomla CMS...................................................................................................... 4
What is Joomla CMS? ...................................................................................................................................................4 What Joomla is made of?.............................................................................................................................................7 The next step .................................................................................................................................................................19

Step 2: Install Joomla 2.5.x on local host ................................................................................................. 20
Installing XAMPP ..........................................................................................................................................................21 Installing Joomla ..........................................................................................................................................................22 The next step .................................................................................................................................................................23

Step 3: Create content for your Joomla site ............................................................................................ 24
Preparing content structure ......................................................................................................................................24 Creating content ...........................................................................................................................................................25 Making articles look good..........................................................................................................................................36

Step 4: Customize website appearance with Joomla template........................................................... 57
What is a Joomla template? ......................................................................................................................................57 Choosing Joomla template........................................................................................................................................59 Installing Joomla template.........................................................................................................................................61

Step 5. Arrange modules in positions ....................................................................................................... 63
What is Joomla module and position? ...................................................................................................................63 Adding a new module to the page ...........................................................................................................................67

Step 6: Extend website functionality with Joomla extensions ........................................................... 72
Working with default extension “Contacts”..........................................................................................................73 Adding new extensions ..............................................................................................................................................83

Conclusion ........................................................................................................................................................ 88 Reference........................................................................................................................................................... 89

3

“Joomla 2.5 Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Step 1: Get to know about Joomla CMS
In the past, if you needed a website, the only option was to hire a professional web studio to build it and fully rely on them to maintain. But now, with the rise of free open source software, you can easily build a website your-self by using Content Management System (CMS). There are several CMS around, but the most suitable for small / middle website is Joomla. In this step you will have a brief introduction to Joomla and what it is made of.

What is Joomla CMS?

Joomla logo Joomla CMS is free web-based software which allows you to create and manage websites. You can control: 1. Website content like text, photos, videos, etc. 2. Website appearance by utilizing templates 3. Website functionalities by utilizing extensions. There are 2 parts of the system: front-end and back-end.

4

twitter.facebook.com/joomlashine | Facebook http://www.5 Made Easy” © JoomlaShine. Normally. side column and main text wrapped in the cool design. The website front-end Viewing article at front-end 5 .“Joomla 2. menu bar.com/joomlashine The front-end Front-end is what people see when they access your website.com Twitter http://www. there is logo.

facebook. The website back-end Editing article at back-end 6 . The access is provided via special login page and only for users with special permission.“Joomla 2.com/joomlashine The back-end Back-end is the administration area where you can control your website.com/joomlashine | Facebook http://www.com Twitter http://www.twitter.5 Made Easy” © JoomlaShine.

let’s explore the main parts of Joomla! Content In Joomla. Articles Articles are main building blocks of a Joomla website.5 Made Easy” © JoomlaShine. categories and media. choose to publish or unpublish.com Twitter http://www. you can create new articles. The “Article Manager” Here.“Joomla 2.com/joomlashine What Joomla is made of? Now. At the front-end you can easily recognize an article as a piece of text with images presented in main content area. edit them.com/joomlashine | Facebook http://www.twitter. content consists of articles. articles are managed in “Article Manager” accessible via menu “Content” => “Article Manager”.facebook. etc. The article “Beginners” At the back-end. 7 .

choose to publish or unpublish. upload files. At the back-end. but also videos and other multimedia elements.com/joomlashine | Facebook http://www.“Joomla 2. etc. category “Products” can contain all articles about your products. Here. Or.twitter. you can create new categories. We will discuss more about using Media Manager in chapter “Step 3: Create content for your Joomla site”. etc. categories are managed in “Category Manager” accessible via menu “Content” => “Category Manager”. 8 . you can create new media folder.com Twitter http://www.facebook. etc. This can be not only images. For example. “Our vision”.5 Made Easy” © JoomlaShine. Media Simple put. edit them. Media are managed in “Media Manager” accessible via menu “Content” => “Media Manager”. The “Category Manager” Here.com/joomlashine Categories Categories help you to organize your articles more conveniently. You can imagine categories as folders containing files. media are non-text stuff that you can put into your content. “Board of Director”. category “About Us” can contains articles like “Our company”.

com Twitter http://www. Sample Menu In the example above. 2. The menus in the Joomla administration Here you can create menus and menu items to any part of the website you want. You can create multiple menus and configure them to be shown at different locations such as main menu bar and side column. go to the menu “Menus” => “Menu Manager”. etc. When menu is ready you will create menu module to present it in front-end.twitter. “Login”.5 Made Easy” © JoomlaShine.“Joomla 2. Menu “This Site” with several menu items “Home”.facebook. 9 .com/joomlashine Menus Menus help website visitors to navigate and see all parts of the website. the administrator created 2 menus: 1. “Using Joomla!”. “Sample Sites”. “Site Map”. To control menus. Menu “About Joomla!” with several menu items “Getting Started”. etc.com/joomlashine | Facebook http://www.

facebook. “Publisher”. For example:   Users assigned to “Administrator” group can work in both back-end and front-end Users assigned to “Registered” group can work only at the front-end. All users are arranged in user groups.“Joomla 2. etc. The menu “Users” at the back-end 10 . which have access permission to certain part of the website.com Twitter http://www.com/joomlashine | Facebook http://www. user groups and access levels in the menu “Users”. You can manage users.com/joomlashine Users Joomla allows your website to have multiple users registered.5 Made Easy” © JoomlaShine. “Editor”. By default there are several user groups such as “Author”.twitter.

For example.twitter.facebook.“Joomla 2. If you want more.com/joomlashine Extensions Extensions are specially written software to be plugged to Joomla in order to extend website functionality. module. then you will need to install extensions for those purposes.com/joomlashine | Facebook http://www. video gallery or an advanced contact form. Each of these extensions handles specific functionality. By default Joomla is shipped with several extensions covering basic needs.com Twitter http://www. This is the official directory of Joomla extension maintained by Joomla core team themselves. template and language. there are thousands of additional Joomla extensions available at Joomla Extension Directory. plug-in. if you want to have a photo slideshow. Let’s take a look! 11 . The Joomla Extensions Directory There are 5 basic types of extensions: component.5 Made Easy” © JoomlaShine.

The menu “Components” in the back-end By default. “Smart Search” and “Web links”.facebook. All components are located in section “Components”.twitter. As mentioned before a video gallery is an example of a component. In example above. 12 .com/joomlashine | Facebook http://www.com Twitter http://www.5 Made Easy” © JoomlaShine. Besides of that. The “Newsfeed” component at the front-end The content produced by a component is displayed in the main content area. “Messaging”. “Contacts”. booking system. forum and more. it might be a shopping cart. Joomla is shipped with following components: “Banners”. “Search”. you can see feed list generated by component “Newsfeeds”. “Redirect”.“Joomla 2. It can be seen as an application that performs certain tasks and display specific content on your site.com/joomlashine Component Component is the most complex type of extension. “News Feeds”.

com Twitter http://www.twitter. For example. menu. In many cases modules are working in conjunction with component to present content. 13 . a shopping cart component is used to manage products and a module . Modules at the front-end Examples of module can be search box.com/joomlashine | Facebook http://www.com/joomlashine Module Module has similar roles as component but in smaller scale. footer copyright information.to show hot products. It performs simple tasks and displays content as small blocks hanging around the page.5 Made Easy” © JoomlaShine. etc.facebook.“Joomla 2. login form.

com/joomlashine | Facebook http://www.“Joomla 2. Module Manager at the back-end 14 .com Twitter http://www.com/joomlashine All modules are managed in “Extensions” => “Module Manager”.5 Made Easy” © JoomlaShine.facebook.twitter.

“Joomla 2. design decoration. graphics and other aspects of design that make your site unique. Sample of background image. Main content area presenting data generated by component. type-faces.twitter. Multiple module positions to show content presented by modules.com/joomlashine | Facebook http://www. colors. module position and mainbody area 15 .facebook. In general.com/joomlashine Templates Template is the graphical presentation of your website. It determines the layout. logotype.com Twitter http://www.5 Made Easy” © JoomlaShine. template consists of 3 elements:    Static graphic elements. like background images. etc.

twitter.com/joomlashine | Facebook http://www.com/joomlashine Here are some more examples of template: 16 .com Twitter http://www.5 Made Easy” © JoomlaShine.“Joomla 2.facebook.

facebook. But there are thousands of both free and commercial templates available. 17 .com/joomlashine | Facebook http://www.“Joomla 2.com/joomlashine At the back-end. so you can definitely choose the one for yourself. Joomla comes with three templates: “Atomic”.twitter. “Beez_20” and “Beez5”.com Twitter http://www. Template Manager By default.5 Made Easy” © JoomlaShine. you can control templates via the menu “Extensions” => “Template Manager”.

twitter.com Twitter http://www. “editors”. You can think about plug-in as a more versatile way to interact with the system. “search”.facebook. Plug-in Manager In the Joomla! 2. “editor-XTD”. “Voting” and “Read more” content plugin at front-end Example of plug-in you might see are the voting functionality in articles and the “Read more…” button standing below articles.com/joomlashine Plug-in Plug-in is designed to display content inside components and modules. “finder”. All plug-ins are managed in “Extensions” => “Plug-in Manager”. plug-in can perform tasks at certain points during website loading.com/joomlashine | Facebook http://www.“Joomla 2. “content”. “quickicon”. “system” and “user”. Also. “captcha”.5 Made Easy” © JoomlaShine. plug-ins are divided into eleven different categories: “authentication”. “extension”. 18 .5 core package.

Language Manager Both of the two installed languages are shown in “Language Manager” At the back-end. The next step Now.facebook. 19 . You just need to download the French translation packages from Joomla Extension Directory for Languages then install them using the “Extension Manager”.x on your local host and give a test drive.“Joomla 2. you want to use French for your Joomla site/administration. it’s time to feel it in flesh and blood. Let’s install Joomla 2.com Twitter http://www. For example.5 Made Easy” © JoomlaShine. when you have little insight about what is Joomla.twitter.com/joomlashine | Facebook http://www.5.com/joomlashine Languages Language allows you to run your site in more than one language.

Depended on the package you choose. you will need to buy a hosting package from some hosting provider like Rackspace or GoDaddy. Normally. Now. in order to run Joomla.x on local host Installing Joomla 2.com Twitter http://www.com/joomlashine | Facebook http://www. 20 . So. As you know.5. but also 2 more things: PHP script interpreter and MySQL database system. any website needs to be hosted on web server in order to be shown to users.com/joomlashine Step 2: Install Joomla 2.5. hosting provider will install a web server for you on some of their server machine.5 Made Easy” © JoomlaShine. localhost is basically the same web server but installed on your own computer.facebook.x on local host is easy but can be tricky for the first time. So in this step you will be provided with clear instructions to start from the scratch. Let’s install XAMPP on your computer.“Joomla 2. First.twitter. It sounds complicated. but thankfully. there is a single package called XAMPP with all elements included. let’s make it clear about the meaning of “Localhost”. you need not only web server.

org/en/xampp. Open “XAMPP Control Panel Application” and start “Apache” and “MySQL”. You can check if it works or not by typing the address “http://localhost” in your web browser and see a page as bellow. your localhost is now installed.apachefriends.html 2. Run installation file as you do that with regular software and follow the step by step instructions. Download XAMPP installer package at http://www.“Joomla 2.com Twitter http://www. XAMPP Control Panel Application That’s it.facebook.com/joomlashine | Facebook http://www.twitter. 3. 21 .5 Made Easy” © JoomlaShine. XAMPP for Windows interface Now you are ready to install Joomla.com/joomlashine Installing XAMPP 1.

Download the Joomla 2.joomla. Pre-Installation check If all pre-conditions are checked “Yes”. Normally it will be located at “C:\xampp\htdocs” 3.5.5 Made Easy” © JoomlaShine. Database Input parameters related to your database:     Host name: localhost Username: root Password: leave it blank if you didn’t set password for database Database Name: joomla25 e.x full package at http://www. d.“Joomla 2. for example.com/joomlashine | Facebook http://www. Step 2.com/joomlashine Installing Joomla 1. Unpack the downloaded package file into the folder “joomla25” 4. Step 3. Step 1. f. Follow all steps in Joomla installation: a. Step 6.html 2. Language Choose your own language. FTP Configuration You can skip this step. Go to the URL “http://localhost/joomla25” 5.com Twitter http://www. You can skip this if you are already familiar with this license. “English (United States)” and then click the button “Next” b. like admin Confirm admin password: type your admin password again 22 . If at least one condition is checked “No”. then click the button “Next”. c.facebook.twitter. Configuration Input parameters related to your website:      Site name: your website name Your Email: your email Admin Username: your admin username. like admin Admin Password: your admin password. Create a new folder entitled “joomla25” in folder “htdocs” in XAMPP folder. please find out the problem and fix it. you can take the next steps. License Read the GNU/GPL v2 license. Step 4.org/download. Step 5.

5 installation. 23 .net http://www.5”. let’s fill it up with content.joomla. and it is a great place to get help and meet other Joomla! users. Now.com/joomlashine | Facebook http://www.5. Joomla help live (http://joomla.howtojoomla. so you can find help in the category “Installation Joomla 2.5 Made Easy” © JoomlaShine.x on your local host is the first thing you need to do successfully before getting started with your Joomla site.net   The next step Installing Joomla 2. Here you just need to click the button “Remove installation folder” button to complete the installation process.com/joomlashine There is a button “Install Sample Data” but don’t click it. Step 7. if you have some troubles with the installation process. After that. right? Well. There are a lot of questions and answers which are discussed here.“Joomla 2. you can either click on “Site” to see your newly created or “Administrator” to access the administration area. you can try to find answer in following sources.com http://www. Because our topic now is about Joomla 2. Now you have your first Joomla site installed successfully! It’s not too hard.tutorialjoomla. when your website is ready.facebook. g.net http://www.joomlatutorials.com/) This website provides you with on-demand Joomla Support service.  Official Joomla forum The Joomla forum one of the busiest (and most friendly) support forums in the world. Of course.com Twitter http://www. Other Joomla learning resources There are many other websites which you can take as your Joomla learning resources: o o o o o http://docs. We will build a website from scratch with our own content. you have to pay money for the service but your problem will be fixed by Joomla experts. Finish This is the last step.cmshelplive.twitter.joomlablogger.org/Beginners http://www.

“Joomla 2.5 Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Step 3: Create content for your Joomla site
The main purpose of a website is to deliver some information to visitors. So it’s undoubted, that the most important element of every website is the content. In this step, you will: 1. Prepare content structure 2. Create categories and articles 3. Create menu

Preparing content structure
Creating content is like arranging the products in a grocery store. In Joomla, articles are like products, categories are like the shelves holding products and menus are like aisles to those shelves. Now, let’s imagine you have website selling luxury stuff. The content structure might look like following: 1. About a. About my site b. How to purchase/order products c. How to make payment 2. News a. Latest news b. Arrivals c. Sale d. Coupons e. Promotion 3. Support a. Hotline information b. Online customer services c. Contact us

24

“Joomla 2.5 Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Creating content
Ok now, when the content structure is ready on paper, it’s time to reflect it in Joomla. Let’s start with creating categories.

Categories
1. Go to “Content” => “Category Manager” and click button “New” on the toolbar.

Add a new category 2. Next, insert category title “About” and click button “Save” on the toolbar.

Input category information

25

“Joomla 2.5 Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine After saving, you can see your new category “About” appeared in Category Manager.

The category “About my site” You can create all the rest categories in the same way.

6 new categories Now, when categories are ready, it’s time to create articles. 26

“Joomla 2.5 Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Articles
Let’s add a new article in the category “About my site”. 1. Go to “Content” => “Article Manager” and click “New” icon on the toolbar.

Article Manager 2. Next, you need to configure 3 parameters: o Title: Input “About my site”. o Category: Select category “About my site” from the list. o Article text: Input the article’s content. Note: Right now, we will assume that you have simple article with plain text. Later, in section “Make articles look good” we will discuss more about how to create article with rich content.

27

5 Made Easy” © JoomlaShine.com/joomlashine Add new article 3.com/joomlashine | Facebook http://www.twitter. click the button “Save & Close” on the toolbar to save your newly-created article. Click button “Save & Close” to save article 28 .com Twitter http://www.“Joomla 2.facebook. When you finished.

there is 1 final thing to do: create menu items with links to articles. 3 newly created articles Now.“Joomla 2.facebook.com/joomlashine | Facebook http://www. after completing the content creating process.com/joomlashine Now.5 Made Easy” © JoomlaShine. you have a new article in Article Manager. 29 . The new article “About my site” You can create in the same way another 2 articles “How to purchase/order products” and “How to make payment” in the “About my site” category.twitter.com Twitter http://www.

5 Made Easy” © JoomlaShine. By default.com/joomlashine Menu In Joomla. 1. Main Menu Let’s add new menu items in menu “Main Menu”.facebook. In back-end all menus are located in section “Menus”. Click “Main Menu” to see all menu items inside 2. 30 . menu is the collection of links to certain elements like articles. Next.com/joomlashine | Facebook http://www. Joomla is preinstalled with menu “Main Menu”. Click on the “Main Menu” in the Menus drop-down menu.twitter.com Twitter http://www.“Joomla 2. click button “New” to create new menu item.

“Joomla 2. Next.5 Made Easy” © JoomlaShine.twitter. Select menu item type 31 .com Twitter http://www.com/joomlashine | Facebook http://www. click button “Select” to choose menu item type.com/joomlashine Click button “New” to create new menu item 3.facebook.

“Search” and so on. you need to fill the parameter “Menu Title”.5 Made Easy” © JoomlaShine.twitter. such as “Contacts”. Select menu item type “Single Article” 5. for example “About my site”.com/joomlashine 4. Input menu title 32 .com Twitter http://www.com/joomlashine | Facebook http://www. Now a pop-up screen is shown up. Next.facebook. so click on “Single Article”. There are many different elements you can create link to.“Joomla 2. “Articles”. Here you need to create link to an article. “News feed”.

twitter. Next.facebook.com Twitter http://www. click the button “Select / Change” to select the article. click button “Save” or “Save & Close” to finish Click on the button “Save & Close” to save data 33 . Click on the article you want to select 8. select the article “About my site”. you have to choose the article you want to show. Click on the button “Select / Change” 7. On the right corner of the screen.com/joomlashine 6.5 Made Easy” © JoomlaShine.com/joomlashine | Facebook http://www. Finally. A pop-up screen will be shown up.“Joomla 2.

The new articles in main menu 34 .5 Made Easy” © JoomlaShine. you can create menu links to the other 2 articles “How to purchase/order products” and “How to make a payment”. you can go to the front-end and see the result.com/joomlashine | Facebook http://www.twitter.com/joomlashine After that.com Twitter http://www.“Joomla 2. 3 newly created menu items Now.facebook.

5 Made Easy” © JoomlaShine.com Twitter http://www.“Joomla 2. The article “About my site” Now you can repeat similar steps to create links to all necessary articles. you will see the corresponding article.com/joomlashine When you click on each link.twitter. 35 .com/joomlashine | Facebook http://www.facebook.

com/joomlashine Making articles look good Now.facebook.com/joomlashine | Facebook http://www. Now focus on the article editor area.“Joomla 2. Let’s go to Article Manager and click on the article “About my site” to open it. Although. It’s time to go little bit forward and create attractive article.com Twitter http://www. This is the place where you edit your article: Edit the article in article text 36 . it is much simpler than Microsoft Word as there are just a few basic text formatting options. There are several techniques such as: formatting text. you already know how to create article. then text formatting in Joomla will be familiar to you. adding images. Formatting text If you have worked with Microsoft Word or any other text processor.twitter. links.5 Made Easy” © JoomlaShine. etc.

most of the icons look very familiar.com/joomlashine Take a close look at formatting options. then scroll down in the drop-down menu and choose a suitable heading from “Heading 1” to “Heading 6”. Joomla article formatting buttons You can create headings of different levels in your text by selecting the text to be styled and clicking the dropdown menu “Paragraph”.com/joomlashine | Facebook http://www. Just select the text you want to give style and click the styling icon.facebook.twitter.com Twitter http://www. italic or underlined and icons to aligning your text. Choose heading for text You can see the text is now larger: Heading 1 in the text 37 . with icons to make your text bold.“Joomla 2.5 Made Easy” © JoomlaShine.

com/joomlashine Adding images First. Go to “Content” => “Media Manager” 2. Create a new category for image Now you have your new folder in Media Manager. Input folder name and click button “Create Folder”.5 Made Easy” © JoomlaShine.facebook.“Joomla 2. you should organize images in certain folder before adding them to articles. Creating image folders 1. The category “aboutmysite” in Media Manager 38 .twitter.com Twitter http://www.com/joomlashine | Facebook http://www.

com/joomlashine | Facebook http://www.com Twitter http://www. Click on the “aboutmysite” folder.5 Made Easy” © JoomlaShine. then click on the button “Browse…” Browse file 2. Right now only single file can be selected at a time. it’s time to upload the images into your newly created category “aboutmysite”.“Joomla 2. but later we will show you how to select multiple files at once. 1. Select image file 39 .com/joomlashine Uploading images Now.twitter. Select the image file you want to upload.facebook.

your newly uploaded image is in the “aboutmysite” category The image shown in the category “aboutmysite” With this way of uploading. it only allows you to upload one photo each time. Luckily there is another method of uploading multiple files with flash uploader. Click the button “Options” 40 .com/joomlashine | Facebook http://www.“Joomla 2. Start upload of the image Now. click on the button “Options” on the toolbar. so it takes you a lot of time and effort to do the same with others images.com Twitter http://www.twitter. Let’s take a look 1.5 Made Easy” © JoomlaShine.com/joomlashine Click on the button “Start Upload” to upload the image.facebook. In Media Manager.

com Twitter http://www. open tab “Component”.“Joomla 2.com/joomlashine | Facebook http://www.facebook.com/joomlashine 2. Browse files 41 . Enable flash uploader 3. set parameter “Enable flash uploader” to “Yes” to enable flash uploader and click “Save & Close”.twitter. Go back to the main screen. In the window “Media Manager Options”.5 Made Easy” © JoomlaShine. It should look like the screenshot below. Now you can click “Browse files” to upload images simultaneously.

com/joomlashine 4. Select multiple files.com Twitter http://www. Click on the button “Start Upload” and wait until the uploading process completes. You can use mouse cursor to mark all files or hold “CTRL” key and cick on individual files you want to select to mark them. Select images 5. Uploading images 42 .twitter.5 Made Easy” © JoomlaShine.com/joomlashine | Facebook http://www.“Joomla 2.facebook.

Add an image into the text 43 .facebook.“Joomla 2. when images are uploaded to server. Let’s use the same article “About my site”. 1.twitter.com/joomlashine Now you have these images in the category. Put your cursor at the point where you want to insert an image in the text and click the button “Image” below the article. it’s time to add them to article.com/joomlashine | Facebook http://www.com Twitter http://www.5 Made Easy” © JoomlaShine. The newly uploaded images Adding images to article Now.

com Twitter http://www. Choose the appropriate image to insert.com/joomlashine 2.“Joomla 2. Open the images file 3.com/joomlashine | Facebook http://www.facebook.5 Made Easy” © JoomlaShine. Input to parameters Image Description and Image Title describing the image and click on the button “Insert” at the top of the screen to finish the image insertion. Choose the image by clicking on it 44 .twitter.

com/joomlashine 4.com/joomlashine | Facebook http://www. An image is inserted in the text In this step. and then click on the button “Insert/edit image” in the formatting options above the article editor to edit it. if you feel that the image is too big or too small and you want to change its dimensions or alignment.5 Made Easy” © JoomlaShine.twitter. Recheck how image is inserted to the article. etc… You can click on the image first. The button to edit/insert image 45 .facebook.com Twitter http://www.“Joomla 2.

twitter. The new article with image in the site 46 . Edit the image Click the button “Save & Close” on the toolbar on the Article Manager and go to the site to see your new article with image. you can edit the image as you wish. then click the button “Update” below.“Joomla 2.facebook.com/joomlashine A pop-up screen will be shown up.5 Made Easy” © JoomlaShine.com Twitter http://www.com/joomlashine | Facebook http://www. let’s change the dimensions and set alignment to “Right”. For example. Here.

com Twitter http://www. Now you will see a pop-up window with the list of all your articles. Open the article you want to add internal links to 2. These links are not only useful for your users to browse content.5 Made Easy” © JoomlaShine. then click on it’s title.facebook. Select appropriate article 47 .com/joomlashine Adding links Adding internal links It’s very common situation. when you need to create internal links between articles. 1.twitter.“Joomla 2.com/joomlashine | Facebook http://www. Click the “Article” button below the article editor Insert a link into the article 4. Select the text you want to be linked (It is called anchor text) 3. Find the article you want to link. but also good for SEO. Let’s see how to create internal link inside an article.

Now click on the button “Save” and go to your site to see the article with new link. The article with link in the site 48 .facebook. The text after being edited 5.5 Made Easy” © JoomlaShine. the title of selected article is used as link text.com/joomlashine | Facebook http://www.com/joomlashine As the result. New link in the text You can change link text just as regular text.“Joomla 2.com Twitter http://www.twitter.

5 Made Easy” © JoomlaShine. Edit the link Or you can remove the link from the text by using icon “Unlink”.facebook.“Joomla 2.com/joomlashine | Facebook http://www. Unlink the article 49 .twitter.com Twitter http://www.com/joomlashine If you want to edit a link. just select it and click the icon “Insert/edit link” as shown bellow.

those which link to articles on your website. Adding external link A pop-up window will be shown up as below: Adding URL 50 . 1.5 Made Easy” © JoomlaShine.com/joomlashine Adding external links In previous section. Select the text which you want to apply link to and then click the icon “Insert/edit link”. you learnt how to create internal links.facebook.twitter.e.com/joomlashine | Facebook http://www. you will see how to create external links to any pages in Internet. In this section. i.com Twitter http://www.“Joomla 2.

com/joomlashine | Facebook http://www.“Joomla 2.facebook. you can see that your text is linked to the external website The linked text 51 .twitter. Input values to 4 parameters in this screen: o Link URL The destination where you want to create link to o Target There are two options for you to choose: “Open link in the same window” and “Open link in a new window” (When you leave it “Not set”. the link will be opened in the same window) o Title Short text describing the link o Class As a Joomla newbie now you just need to set it to “Not set” (the two other options are “Caption” and “System Page break”) 3.com Twitter http://www. After that.com/joomlashine 2. Click the “Insert” button to insert this link.5 Made Easy” © JoomlaShine.

Now.“Joomla 2. one by one! Adding “Page Break” 1. you will need to divide the article into small and separate sections. etc. Page 2. Read More This element divides a full single article into a teaser text and the rest of the article. If you want to read the rest of the article. Page 3. we will gradually learn about how to work with them. you have two options to help your readers read articles easier. Page break links are ideal for very long articles. Put text cursor to the position where you want to split the article. Click on the “Page Break” button below the article editor. 2.com Twitter http://www. Adding a page break 52 . 2.5 Made Easy” © JoomlaShine. Page Break This element divides one article into separate pages such as Page 1.com/joomlashine Adding “Page Break” and “Read More” In the case of having a long article. With Joomla.twitter.com/joomlashine | Facebook http://www. 1.facebook. you have to click on “Read More” link.

“Joomla 2. View your site to see the result. it shows a list beside the article. Insert a page break screen 4. That’s all. Dotted line showing a page break 5.com/joomlashine 3.com Twitter http://www. 53 .twitter.com/joomlashine | Facebook http://www.facebook. Now you will see a dotted line showing a page break inside your article as in the screenshot below.5 Made Easy” © JoomlaShine. Click the button “Save”. 6. Input the title you want to give to this page in parameter “Page Title” and click the “Insert Page Break” button. you just need to click on the title or “Next” to enter the page.

com Twitter http://www.facebook. You can delete the page break by putting your cursor at the end of the page break dotted line and pressing the “Backspace” on your keyboard.twitter.5 Made Easy” © JoomlaShine.com/joomlashine | Facebook http://www. 54 .com/joomlashine New page break in the website Please note that:   You can add as many page breaks as you want into your article.“Joomla 2.

com/joomlashine | Facebook http://www. 2.com Twitter http://www.facebook.com/joomlashine Adding “Read More” link Adding a “Read More” link is similar to adding a page break link process. “Read more” dotted line 55 . Put text cursor to the position where you want to split the article into introductory part and main content part. 1.“Joomla 2. Click on the button “Read More” under article editor. Insert a read more link You will see a dotted line in red.twitter.5 Made Easy” © JoomlaShine.

com/joomlashine | Facebook http://www. Click the button “Save” to finish. Featured article 4. You just need to click on the button “Read more…” to read the full article The article with read more link 56 . In this way.com/joomlashine 3.com Twitter http://www. Look up and set parameter “Featured” to “Yes”.facebook.5 Made Easy” © JoomlaShine.“Joomla 2.twitter. you make this article appear on the frontpage of the website. Here is your article with a read more link at the front-end.

57 .com/joomlashine Step 4: Customize website appearance with Joomla template At this step.twitter. you will be dealing with site template to change the look-n-feel of your website. There are two types of templates: “Site template” for front-end presentation and “Administrator template” for back-end presentation. template is the graphical presentation of your website.facebook. Site template Site template changes the way your website looks to visitors.5 Made Easy” © JoomlaShine. we have finished preparation of the content part of the website. type-faces.“Joomla 2.com Twitter http://www. What is a Joomla template? As mentioned before.com/joomlashine | Facebook http://www. graphics and other aspects of design that make your site unique. It’s time to take care about the appearance. It determines the layout. colors. A front-end template Most of the time.

When building websites for client.twitter.“Joomla 2.com/joomlashine | Facebook http://www. then you will probably never need to change your back-end template.com Twitter http://www. A back-end template If you are building website for yourself.facebook.5 Made Easy” © JoomlaShine. you might need to slightly customize administrator template to make it fit your customer’s brand.com/joomlashine Administrator template Administrator template changes the way the administrator interface looks. 58 .

Free templates resources Joomla community provides thousands of free templates for you to choose.com http://www.rockettheme.bestofjoomla.joomlart.com Searching thru Internet You can search on Google with the key words: “Joomla Templates” or “template for Joomla” and you will get about 120 million results.com Twitter http://www. Check following websites:    http://www.com Commercial templates resources If you can arrange some budget for a template.de/ http://www.joomla24.joomlashine.com/joomlashine | Facebook http://www.com/joomlashine Choosing Joomla template Template resources The quickest and easiest way to decorate your website is to start from some existing Joomla template available on the Internet.com http://www.yootheme. 59 . then we strongly recommend you to take a look at following template providers      http://www.facebook.com http://www.“Joomla 2.5 Made Easy” © JoomlaShine.twitter.gavick.com http://www.joomlaos.com http://www.

However.com/joomlashine Criteria to choose the right template So you can see that there are a lot of Joomla templates to choose from. if you are creating a business website. 60 .5 Made Easy” © JoomlaShine.twitter. you also get good documentation and support.com/joomlashine | Facebook http://www. because besides from high quality template. Features Professional templates provide many features whereas a lot of free templates provide limited features     If you are an individual or an ordinary user. Don’t think that you are wasting your money.com Twitter http://www. Documentation How well-documented it is? Does it help you understand all the features it has? Does it show you the ways to customize the template? Support Is there ongoing support for the template? What ways you get support? – Via phone.“Joomla 2. you won’t have to spend much time to customize it. forum…? Design Does it match the look and feel that you want for your site? If it is similar to your desired design. The time you save will be more then worth the money spent.5 Commercial or Non-commercial Do you want to have a high-quality template and support or you are on tight budget and must go with free template? Normally. more comprehensive documentation and better support than non-commercial. Here are some criteria that can help you with choosing the right template. live chat. commercial templates have higher quality. it’s absolutely worth to spend few dollars on a commercial template from a professional provider.facebook.   Compatibility Which Joomla version does it support? You better choose a template which support Joomla 2. a free template will be a suitable choice for you.

facebook. Go to “Extensions” => “Extension Manager” Extensions => Extension Manager 2. find the template file you have downloaded.twitter.“Joomla 2. 1.com/joomlashine Installing Joomla template After you selected an appropriate Joomla template. then click on the button “Upload & Install”. it’s time to install it. you should get a notification which informs you that the template has been installed successfully. After that.5 Made Easy” © JoomlaShine. Browse the template file from your computer 61 . Click the “Browse…” button.com/joomlashine | Facebook http://www.com Twitter http://www.

click icon “Make Default” which will set it to be the default design for your Joomla website.com Twitter http://www. it’s time to apply it to your site. Now. Choose “Make Default” 5. 62 .facebook. you click on the “View site” button at the back-end to see the front-end and enjoy it. Then select the check box near your new Joomla template and from the top right menu. Now that you have your new template installed.“Joomla 2.5 Made Easy” © JoomlaShine.twitter.com/joomlashine | Facebook http://www.com/joomlashine 3. Go to “Extensions” => “Template Manager” Choose “Template Manager” 4.

i.twitter. On that wall.com/joomlashine | Facebook http://www.e position “left” is placed on the left side of main content. In each pin board. So at the end you have the wall full of stick notes (modules) arranged in pin boards (positions) hanging on the wall.com Twitter http://www. Each module is located in some position.facebook. module “Main menu” is placed in position “left”. module performs simple tasks and displays content as small blocks hanging around the page. Here is another way to easily grasp this concept. there are several pin boards (module positions) hanged in various places. There are two types of modules: “Site module” to be utilized at for front-end and “Administrator module” for back-end.com/joomlashine Step 5. Arrange modules in positions What is Joomla module and position? As mentioned before.5 Made Easy” © JoomlaShine. i. there are several stick notes (modules) pinned.“Joomla 2. Each template can have many different positions hanging out in various spots on the page. Each position is designed to take some spot in page layout. Imagine your webpage as the wall.e. Site modules at front-end Administrator modules at back-end 63 .

Joomla provides a tool for user to see the outline of all positions. 64 . Go to “Extensions” => “Template Manager”. set the parameter “Preview Module Positions” to “Enabled” and click “Save & Close” Enable preview module positions 4.5 Made Easy” © JoomlaShine.com Twitter http://www. In this pop-up screen.com/joomlashine How can I see the module positions of a template? It’s hard to understand all module positions in some template by just looking at the webpage. Luckily. all installed templates are shown.“Joomla 2. Now. so scroll down to the template Beez_20 and click Preview to see the module positions of this template. 3. In Template Manager.twitter.com/joomlashine | Facebook http://www.facebook. click on the tab “Template” Click on the Template tab 5. Next. Here is how to use it: 1. 2. click the icon “Options” on the toolbar.

A new page will be opened in a new tab.“Joomla 2. this page shows all module positions of the template.facebook. like the figure below 65 .com/joomlashine Click Preview 6.com Twitter http://www.5 Made Easy” © JoomlaShine.twitter.com/joomlashine | Facebook http://www.

com/joomlashine | Facebook http://www. This will help you to choose the right position when you add a new module.5 Made Easy” © JoomlaShine.twitter.“Joomla 2.com Twitter http://www.com/joomlashine Module Positions in site Now you can see all module positions of the template.facebook. 66 .

twitter. password fields and some other links.com/joomlashine Adding a new module to the page Now.facebook. Content modules Modules designed for articles presentation   Latest articles This module shows a list of the most recently published and current articles Most read content This module shows a list of the currently published articles which have the highest number of page views News flash This module displays a number of articles of a category based on date or random selection Related items This module displays other articles that are related to the one currently being viewed Archive This module shows a list of the calendar months containing archived articles Article categories This module displays categories from one parent category Articles category This module allows you to display the articles in a certain category      67 .5 Made Easy” © JoomlaShine. when you are familiar with Joomla module and position concept. Let’s take a look: Users modules Modules designed for user presentation and service. Joomla comes with bunch of modules ready to use.com/joomlashine | Facebook http://www. let’s learn about adding a new module to your web page.com Twitter http://www. Getting familiar with default modules By default.“Joomla 2.    Who’s online This module displays the number of guests and registered users that are currently in the website Latest users This module displays the latest registered users Login This module displays a login form with username.

Feed display This module allows the displaying of a syndicated feed Footer This module shows the Joomla! copyright information Random image This module displays a random image from a chosen image directory Web links This module displays the list of web links in a category Banner The banner module is used to display the banners in Banners Component Utility modules Modules designed to perform mini tasks.5 Made Easy” © JoomlaShine. web site users. articles. etc.twitter.com/joomlashine | Facebook http://www. web links.       Smart search This module provides search using the Smart Search component Wrapper This module shows an iFrame window to specified location Language switcher This module displays available content languages for switching between them Search This module will display a search box Statistics This module shows statistics information about your server.com Twitter http://www.facebook.“Joomla 2.com/joomlashine Display modules Modules designed for rich content presentation.       Custom HTML This module allows you to create any custom HTML code you want. Syndicate The syndicate module will display a link that allows users to take a feed from your site 68 .

1.com/joomlashine Utility modules Modules designed to present website navigation.“Joomla 2. Select “Login” module 69 .   Menu This module displays a menu on the site Breadcrumbs Breadcrumbs give users the pathway to navigate through the site Creating new module Now. Click New to add a new module 2. choose the module you want to create.com/joomlashine | Facebook http://www. then click button “New” on toolbar. For example.twitter. let’s create module “Login” to allow users to login to website.5 Made Easy” © JoomlaShine.facebook. Go to “Extensions” => “Module Manager”.com Twitter http://www. let’s see how to add a new module. In a pop-up window.

5 Made Easy” © JoomlaShine.com/joomlashine | Facebook http://www.com Twitter http://www.twitter. Let’s see how it looks at the front-end! Login module on site You can add more modules with the same process. 70 .facebook.“Joomla 2. Finally. Now you need to enter information for new module. Don’t forget to select position where you want to place the module. click on the button “Save & Close” to complete the process. Enter information for module 4.com/joomlashine 3.

Click “Ordering” to enable ordering mode 71 .com Twitter http://www. then set desired order to text box in column “Ordering” and click icon .com/joomlashine | Facebook http://www. you can reorder modules in position. Go to “Module Manager” and click on column header “Ordering” 2. And just like in real live.com/joomlashine Configuring modules settings Ordering modules in a positions Now you have learned that all modules are placed in position like sticky notes pinned in a pin board.twitter.facebook.“Joomla 2. Let’s see how to do this! 1.5 Made Easy” © JoomlaShine. Click icon or to move the module to new position. If you want to change position of multiple modules.

com Twitter http://www. extensions are specially written software to be plugged to Joomla in order to extend website functionality. please refer to section “What Joomla is made of?” => “Extensions”. Contacts Extension for contacts management and contact form presentation Newsfeeds Extension for RSS feeds management and presentation Redirect Extension for URL redirects management Weblinks Extension for links management and presentation Let’s take a closer look at one of the default extension to understand how to work with Joomla extensions in general. For more detailed information about Joomla extensions.      Banners Extension for banners management and presentation. then you will need to install extensions for those purposes.5 Made Easy” © JoomlaShine. By default Joomla is shipped with several extensions covering basic needs.facebook.com/joomlashine Step 6: Extend website functionality with Joomla extensions As mentioned before.com/joomlashine | Facebook http://www. 72 . For example. video gallery or an advanced contact form. if you want to have a photo slideshow.twitter.“Joomla 2.

twitter. Go to “Components” => “Contacts” => “Categories” Click on contact categories 73 . Creating contact category We need to create contacts for user to contact via form. This extension allows you to create contact forms so that anyone can send email or message you.“Joomla 2.com/joomlashine Working with default extension “Contacts” In this section. we will learn how to use Joomla extension “Contacts”.com Twitter http://www. we need to create contact categories first. But to better organize contacts.5 Made Easy” © JoomlaShine.com/joomlashine | Facebook http://www. 1.facebook.

click on the button “New” on the toolbar to create new contact category.com Twitter http://www. Click “New” to create a new contact category 3. fill in the title of your new contact category.com/joomlashine | Facebook http://www. New contact category 74 .facebook. and save it by clicking “Save & Close”.“Joomla 2.twitter. Next.com/joomlashine 2. Next. for example “Website Administrators”.5 Made Easy” © JoomlaShine.

when contact categories are ready. Next. click on the button “New” on the toolbar to create new contact.5 Made Easy” © JoomlaShine. Click on the button “New” to create a new contact 3.twitter. it’s time to create contact.com/joomlashine | Facebook http://www. fill following fields in section “New Contact”: o Name Enter the contact name. Go to “Components” => “Contacts” => “Contacts” Click on the "Contacts" menu item 2. it might be your name o Category Choose the category you created previously 75 .“Joomla 2.com Twitter http://www.facebook. 1. Next.com/joomlashine Creating new contact Now.

com Twitter http://www. fill the contact email in parameter “Email”. This is very important parameter. Finally.com/joomlashine | Facebook http://www.5 Made Easy” © JoomlaShine. Enter contact email 5. since all data collected from contact form will be sent to this email address.“Joomla 2. 76 .twitter. in section “Contact Details” in the right-hand side of the screen. Next. click “Save & Close” to save this contact.facebook.com/joomlashine Enter contact information 4.

when we created a contact. Next.com/joomlashine Creating menu item to show contact form Now.com Twitter http://www. click “Select” to select menu item type.“Joomla 2.twitter. Select menu item “Menus” => “Main Menu” => “Add new menu items” Add new menu item 2. Click on select button to select menu item type 77 .facebook. it’s time to create form for users to contact. 1.com/joomlashine | Facebook http://www.5 Made Easy” © JoomlaShine.

com/joomlashine | Facebook http://www.twitter.“Joomla 2. Next.com/joomlashine 3.facebook. choose “Single Contact” Select “Single Contact” 78 .com Twitter http://www.5 Made Easy” © JoomlaShine.

twitter. Fill in the “Menu Title” field 5. fill in the “Menu Title” field with the title you want.facebook.com/joomlashine 4.com/joomlashine | Facebook http://www.5 Made Easy” © JoomlaShine.“Joomla 2. Next. for instance “Contact me”. Next.com Twitter http://www. select contact by clicking on the button “Change Contact” Click “Change Contact” 79 .

Click on the chosen contact 7.“Joomla 2. click on the contact you created previously. Look at the “Main Menu”. you will see menu item “Contact me”. Then. Click on it and you will see contact form.5 Made Easy” © JoomlaShine.facebook. Now. click “Save & Close” to save this menu item.twitter. 80 . let’s go to website front-end to see the result. Finally.com/joomlashine | Facebook http://www.com/joomlashine 6.com Twitter http://www.

com/joomlashine Contact form in site We have just added basic contact form to the website. For further tweaking.facebook.com/joomlashine | Facebook http://www.“Joomla 2.twitter.com Twitter http://www. 81 . there are plenty of options provided.5 Made Easy” © JoomlaShine.

Contact Manager Options 82 .twitter.“Joomla 2.com/joomlashine | Facebook http://www.com/joomlashine Further tweaking Go to “Contacts” or “Categories” and click icon “Options” on the toolbar.5 Made Easy” © JoomlaShine.com Twitter http://www.facebook. Click on the button "Options"  In appeared modal window you can configure all kind of parameters you wish.

we will find out what extensions to add to your website and how to do that. form building.com Twitter http://www.twitter. but in long rung they are just not enough.Anthony Olsen 83 . you will want to add more functionality that go beyond default extensions.Brian Teeman My Extension Top 10. integration with social network.Peter van Westen Picking up free Joomla extensions for education websites within minutes Featured extensions on JED My top ten Joomla extensions . In this part.com/joomlashine Adding new extensions Default Joomla extensions are good for the start. For example. Defining extensions to be installed Of course.        Six free must-have Joomla extensions – Have you installed them all? Top 10 Joomla extensions. image gallery. there are some soft of extensions that every website should have. However. There are plenty of articles addressing this issue and here are some most remarkable. every website has it’s own purpose and there is no certain list of extensions for it.com/joomlashine | Facebook http://www.facebook. video gallery. etc. presentation in mobile devices. During your website evolution.5 Made Easy” © JoomlaShine.“Joomla 2.Kristoffer Sandven My Must have Joomla Extensions .

twitter.facebook.5 Made Easy” © JoomlaShine. This directory is moderated by professional team and you can have certain level of trust to items published here. where you check and judge.com/joomlashine | Facebook http://www.com Twitter http://www. It is a large resource with a large number of Joomla extensions divided into certain categories based on functionality. Joomla Extensions Directory All extensions has voting and review section. 84 .“Joomla 2.com/joomlashine Finding useful extensions The best place for you to find useful Joomla extensions is Joomla Extensions Directory (JED).

85 .“Joomla 2. the last thing you need to know about is how to install them and make them work on your website.5 Made Easy” © JoomlaShine. click “Browse” button to select the Joomla extension package you downloaded Click Browse 3. After that.com/joomlashine | Facebook http://www. 1.com Twitter http://www.facebook.com/joomlashine Installing new extensions After choosing and downloading extensions which you think that they are necessary to your website. Go to “Extensions” => “Extension Manager” 2. Next.twitter. click “Upload & Install” to start uploading and install this file to your site.

3. feel free to uninstall it. 1.com Twitter http://www. if that extension is a module.com/joomlashine | Facebook http://www.5 Made Easy” © JoomlaShine.com/joomlashine Click “Upload and Install” Joomla automatically knows the right place to put the extension based on it’s type. if the extension is a component. 86 . Go to “Extensions” => “Extension Manager” and click on the “Manage” tab.facebook.“Joomla 2. Check the box near the extension you want to install and click button “Uninstall” on the toolbar. you will see it in the menu “Components”. Input full or some part of extension name in text field “Filter” and click button “Search”. 2. JSN Image Show in Components Uninstalling extension If you found that some extension doesn’t meet you need. you will find it in “Module Manager” and so on. For instance.twitter.

“Joomla 2.com Twitter http://www.facebook.twitter.5 Made Easy” © JoomlaShine.com/joomlashine Uninstall the extension 87 .com/joomlashine | Facebook http://www.

twitter. All of our knowledge about Joomla 2.5 Made Easy” © JoomlaShine. to how to work with it.com/joomlashine | Facebook http://www. some mistakes are unavoidable. We appreciate all ideas and comments from our readers to make it better! 88 . You will know all the basic aspects of Joomla to build a complete website: from how to install it. Although we try our best.“Joomla 2. and finally how to make it live and run securely.com/joomlashine Conclusion A good book is like a treasure and I hope that you think that while reading this book.facebook. Bringing you valuable knowledge is our purpose and our honor as well.com Twitter http://www.5. The Joomlashine team wholeheartedly wants to give our readers the best in our book. Feel free to share what you have learned in this book with someone else.5 has been edited in the most careful way to bring you 6 chapter of the most useful information to help you create your own website step-by-step with Joomla 2.

German and Italian.com/joomlashine | Facebook http://www. so you can choose a version suitable for you. This book has different language versions.joomlaportal. topics about Joomla which you won’t want to miss.theartofjoomla.wiki.5.twitter. There are not only interesting.com/joomlashine Reference Released in early February 2012.net/ http://www.php http://www.com/blog/joomla/ http://www.we appreciate it a lot! Finally.joomlablogger.joomlaspanish.de/forum. I guarantee that you will get more useful knowledge to help you build a website.help.ostraining.joomla-nafu.com Twitter http://www.it/ 89 .howtojoomla. With detailed information about Joomla 2.5-Beginner’s Guide written by Hagen Graff is also a good book for beginners like you. You can also go to our official Joomlashine blog to learn about Joomla tutorials as well as get updated with the latest news about Joomla.youtube.joomla.org/ http://www.de/joomla-dokumentation/Joomla!_Wiki http://www.facebook.org/ http://www.com/user/Joomla#p/a http://wiki.joomlatutorials. The E-book version is free to download.com http://www. but also useful. such as English.com/ http://www.net/ http://www. I want to recommend some good learning websites which I think you can refer to:             http://docs.5 Made Easy” © JoomlaShine.org/foros/ http://www.joomla.dutchjoomla. Joomla 2. You can leave your comments below each article .“Joomla 2.