P. 1
Learn Joomla

Learn Joomla

|Views: 962|Likes:
Published by Dallas H Pham

More info:

Published by: Dallas H Pham on Apr 25, 2011
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

03/15/2013

pdf

text

original

Sections

  • 1 Introduction to Joomla!
  • 1.1 Key benefits
  • 1.2 Building a Joomla! Website
  • 1.3 Examples of Joomla! websites
  • 2 A Brief Tour of Joomla!
  • 2.1 Introduction
  • 2.2 Inside Joomla!
  • 2.3 Administrator Interface
  • 2.4 Design Template
  • 2.5 Content Structure Sections and Categories
  • 2.6 Plug-ins Components, Modules and Mambots
  • 2.7 User Management
  • 2.8 Joomla! Demo
  • 3 Installing Joomla!
  • 3.1 Using a local server on your Windows PC
  • 3.1.1 Installation instructions for JSAS
  • 3.2 Installing Joomla! on a Web Hosting server
  • 3.2.1 Getting the Files
  • 3.2.2 Creating your MySQL Database
  • 3.2.3 Completing the installation using your Web Browser
  • 4 The One Day Guide to Building a Joomla! Website
  • 5 A Worked Example - Building a Simple Website
  • 5.1 Starting at the beginning
  • 5.1.1 The brief
  • 5.1.2 A blank Sheet
  • 5.2 First Look at the Administrator’s Interface
  • 5.2.1 Change the default template
  • Figure 5.2: The Joomla! Template Manager showing template selection method
  • 5.2.2 Entering our sample content
  • 5.2.3 Entering Words and Pictures Adding New Content
  • 5.3 Connecting it together building the menu
  • 5.3.1 Home Page Menu Link
  • 5.3.2 About Menu Link
  • 5.3.3 News Menu Link
  • 5.3.4 More about Templates
  • 5.3.5 Adding the Contact Us Page
  • 5.3.6 Adding the Links Section
  • 5.3.7 Adding a Search Facility to the site
  • 6 Adding Users to your Site
  • 6.1 User management
  • 6.1.1 Configuration
  • 6.1.2 To set up a new user
  • 6.1.3 Installing the Login Form module
  • 6.1.4 Testing the Login Form
  • 6.1.5 Controlling access to Content
  • 6.1.6 User content editing from the website
  • 6.1.7 User Editing Tools
  • 6.2 How to set up a user to add content and edit it on the website
  • 6.3 Limitations of standard Joomla! user management (and the solution)
  • 7 Taking it to the next stage
  • 7.1 Modules to add greater functionality
  • 7.1.1 Enhancing the home page (and other pages)
  • 7.1.2 Latest News
  • 7.1.3 Popular
  • 7.2 Creating Views of your content
  • 7.2.1 How to create Summary Views of your content
  • 7.2.2 How to create Table Views of your content
  • 7.3 Building Menus to structure your site
  • 7.4 Banners
  • 7.5 Polls
  • 7.6 Incorporating external Newsfeeds into your site
  • 7.7 Syndicating your site
  • 7.8 Optimizing for Search Engines & Short Links
  • 8 Using 3rd Party Add-on Components and Modules
  • 8.1 Building an online Shop
  • 8.1.1 Setting up your shop
  • 8.1.2 How to take payments On-line
  • 8.2 How to add a Forum to your site
  • 8.3 Installing a document management system
  • 8.3.1 How to get and install Docman
  • 8.3.2 Configuring DOCman
  • 8.3.3 Where to go next for more information
  • 8.4 Setting up an email newsletter
  • 8.4.1 How to get and install Acajoom
  • 8.4.2 Where to look/go next for more information
  • 8.5 Get more from Menus with Extended Menu module
  • 8.5.1 Introduction
  • 8.5.2 How to Get it
  • 8.5.3 What you get
  • 8.5.4 How to install it
  • 8.5.5 How to build a split menu
  • 8.5.6 How to build dynamic menus using CSS
  • 8.5.7 Where to look/go next for more information
  • 8.6 10 more indispensable extensions
  • 8.6.1 Community Builder
  • 8.6.2 Guest book - Easybook
  • 8.6.3 Adding a Weblog using MamBlog
  • 8.6.4 A flexible banner system - Artbanners
  • 8.6.5 Forms / database component - mosforms
  • 8.6.6 Content Item module
  • 8.6.7 Blogg-X
  • 8.6.8 mycontent
  • 8.6.9 AdSense
  • 8.6.10 Search Engine Optimisation (SEO) - OpenSEF
  • 9 Introduction to Templates
  • 9.1 Introduction
  • 9.2 Template positions, an example
  • 9.3 Trying out templates
  • 9.4 Installing a new Template
  • 9.5 Taking templates to the next stage
  • 10 Make your own template
  • 10.1 Tools Required
  • 10.2 Steps Involved
  • 10.3 The Template file structure - ’What’s in a template?’
  • 10.3.1 The core files (required)
  • 10.3.2 Additional files (Optional)
  • 10.3.3 The index.php file
  • 10.4 The CSS styling file
  • 10.4.1 Joomla! CSS Classes
  • 10.4.2 Generic CSS
  • 10.4.3 Specific CSS
  • 10.5 An example - building a template the process
  • 10.6 Editing a template ’in situ’
  • 10.7 A free resource for template ideas

Joomla! Version 1.0.x

Learn Joomla! A Beginner’s Guide to Building Websites with the Joomla! Content Management System
by Michael A Lloyd

ARTONEZERO Artonezero is a British publisher of eBooks based in London Artonezero Limited 16 Manette Street LONDON W1D 4AR United Kingdom Copyright c Michael A Lloyd 2007 First Published January 2007
A Typeset in LTEX with Palatino and Helvetica typefaces

All rights reserved. No part of this ebook may be copied, reproduced, stored in a retrieval system, or transmitted to a third party in any form or by any means without the prior permission in writing by Artonezero Limited. Enquiries regarding reproduction should be sent to the rights department at the above address. The licensee is permitted to make up to three electronic copies of this ebook, and to print copies for personal use. LEARN Joomla! Edition 1.0 A beginners guide to building websites with the Joomla! Content management system ISBN-10: 0955445000 ISBN-13: 978-0955445002 www.learnjoomla.co.uk Published in PDF format by Artonezero Limited, London

2

. . . . . . . . . . . . . . .2 A blank Sheet . . . . . . . . . . . . . . . 2. . . . . . . . . . . . . . . . 5. . . 3 . .4 Design Template . . . .1 Starting at the beginning . . . . . . . . . . . . .3 Connecting it together building the menu . . . .7 User Management . . . . . .2 Inside Joomla! . . .2. . . . . . . . . . . . . .1 Change the default template . . . 3. . . . . . . . 2. . . . . . . . . . . .3 Administrator Interface . .2 Installing Joomla! on a Web Hosting server . . . . . . . . . . . . . . . .1 Home Page Menu Link . . . . . . . . . .1 Using a local server on your Windows PC . . . . . . . . . . . . . . . . . . . . . . . . . . . .8 Joomla! Demo . . . . . . . Modules and Mambots 2. . . . . . . . . . . 3. 5. . . .2 First Look at the Administrator’s Interface . .3 Entering Words and Pictures Adding New Content 5. . . . . . . . . . . . . . . . . . .2 Building a Joomla! Website . . . . . . . 1. . . . . . . . . . . 5. . . . .2. . . . . . . . . . . . . . . . . .3. . . . . . . . . . 1. . . . . . . . . . . . . . . . . . . . . 2 A Brief Tour of Joomla! 2. . . 5. . . . . . . . .1. . . . . . . . . . . . . 5. . 36 37 37 37 39 40 43 45 47 48 49 3 Installing Joomla! 3. . . . . . . . . . . 5. . . . . . . . .2 Entering our sample content . . 3. . . . . . . .2. . 13 13 15 15 16 16 16 18 19 19 19 21 21 22 22 23 26 26 29 30 34 .2. . . . . . . . . . . . . . . . . . .Building a Simple Website 5. . . . . . . . . . . . . . .2 Creating your MySQL Database . . . . . . . . . . .1 The brief . . . . . . . . . . . . . . .2. . . . . . . . . . . . . .2. . . . .1. . . . . . . . 5. . . . . . .3 Examples of Joomla! websites . . . . . 2. . . 2. . . . .Contents 1 Introduction to Joomla! 1. . . . . . . . . . . . . . 3. . . . . . . . . . . . . . . .1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1 Key benefits . . . . . . . . . .5 Content Structure Sections and Categories . . . . . . . . . . . . 5. . . . . . . . . . . . . . . 3. . . . . 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2 About Menu Link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6 Plug-ins Components. . . . . . . . . . .3 Completing the installation using your Web Browser 4 The One Day Guide to Building a Joomla! Website 5 A Worked Example . . . . . . . . . . . . . . .3.1.1 Installation instructions for JSAS . .1 Getting the Files . . . . . . 2. .

. . .2 Creating Views of your content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1. . .1 Enhancing the home page (and other pages) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3 Limitations of standard Joomla! user management (and the solution) 7 Taking it to the next stage 7. . . . . . . . . . . 4 . . .1. . . . . . . . . . . 49 50 54 55 56 57 57 57 59 61 62 63 64 64 65 66 67 67 68 70 71 72 72 76 78 82 84 85 88 89 90 91 94 95 97 100 100 101 103 103 103 6 Adding Users to your Site 6. . . . . . . . Adding a Search Facility to the site . . . . . . . . . . . . . . . . . . .1 Building an online Shop . . . . . . . . . 6. . . 6. . . . . . . .1 User management . . . . . .2 How to add a Forum to your site . . . .3. 7. . . . . . . . . . . . .1. . .8 Optimizing for Search Engines & Short Links . . . . .7 User Editing Tools . . . .1 Setting up your shop . . 8. . . . . . . . . . . . . . . . . . . . . . .2 How to take payments On-line . . . . . . . . . . . . . . . . . .4 5. . . . . . .7 News Menu Link . . .2. . . . . . . . . . . . . . . . . . . . . . . . . 6. . . . . . . . . . .1. . . . . . . . . . . . . . . . . 8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7. . . . . . . . .1. . . Adding the Contact Us Page . . .2 How to set up a user to add content and edit it on the website . . . . .2 Configuring DOCman . . 8 Using 3rd Party Add-on Components and Modules 8. . . .2 Latest News . . .1 Modules to add greater functionality . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5 Polls . . . . . . .4 Banners . . . . . . .2 How to create Table Views of your content . . . . . . . . . . . . . .3.1. . . . .6 User content editing from the website . . . . . . . .7 Syndicating your site . . . . . 6. . . . . . . . . . . . . . . . . . . .2. . . . . . .3 Installing the Login Form module . 8. . .1 How to get and install Docman . . . . . . . . . . . 8. . . 7. . . . . . 7.2 To set up a new user . . . . . . . . . . . . . . 6. . . . . . . . . . . . . . . . . . . . . .3 Where to go next for more information .6 5. 6. . . 8.Contents 5. . . . . . . . . . . 7. . . . 6. .1.3 Installing a document management system . .5 Controlling access to Content . . . . . . . . . . . . . .1 Configuration . . . . . . . . . . More about Templates . .3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7. . . . . . . . . . . . . . . . . . .1. . . . . . . . . . . . . . . . . . .3.1 How to create Summary Views of your content 7. . . . . . 8.4. . . .3. 6. . . . . . . . . . . . . . . . . .4 Testing the Login Form . . . . . 7.3 5. . . . . .1. . . . . .3 Popular . . . . . . . .1 How to get and install Acajoom . . . . . . . . . . . . . . . . . . . . .1. . . .1. . . . . . . . . .6 Incorporating external Newsfeeds into your site . 7. . 6.3. . . . .3. . . . . . . . . . . . . . . . 7.5 5. . . . . . . . . . . . . . Adding the Links Section . . . 7. .3 Building Menus to structure your site . . . . . . . .4 Setting up an email newsletter . . . . . . . . . . . . . . . 7. . . 8. . . . . . . . . . .1. . . 8. . . . 8. . . . . . . . . . . . .3. . . .

. . . . . . . . . . . . .6.7 Where to look/go next for more information . . . . . . . . . . . . . 10. . . . . . . . . . . . . . . an example . . . . . . . . . . . . . . . . . . . . . . 8. . 9. . . . . .2 How to Get it . . . . . . .Contents 8. . . . .1 Tools Required . . . . . . . . . .’What’s in a template?’ 10. 10. . . . .6. . . . . . . . . . . 8. . . . . . .5 How to build a split menu . . . . . .9 AdSense . . . . .2 Template positions. . . . . . . . . . . . . .4 The CSS styling file .4. . 8. . . . . . .4 Installing a new Template . . . 9. .6. . . . . . .7 Blogg-X . . . . . . 9. .3. . . . . . . . . . ..OpenSEF What next .6. . . 106 107 107 107 107 108 108 110 111 112 112 113 113 114 114 115 115 116 116 116 117 118 118 119 120 121 121 122 122 123 124 125 125 125 130 130 130 131 135 145 145 8. . . . . . . . . . .4.5. . 8. . . . 8. . . . . . . . . . . . .7 9 Introduction to Templates 9. . . . . . . . . . . . . 10. . . . . . . . . . .5. . . . . . .10 Search Engine Optimisation (SEO) . . . . . . . . . . . .. . . . . . . . 8. . . . . . . . . . 9. . . . . 10. . . . . 10. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10. .3 Adding a Weblog using MamBlog .1 Community Builder . . . . . . . . . . . . . . . . . . . . . . . . . . .2 Generic CSS . .1 Joomla! CSS Classes . . . . . . . . . . . . . . 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5. . . . . . . . . . . . . . . . .6. . . . .5.5 An example . . . . . . . . . . . . . . . . . . . . . . 10 more indispensable extensions . . . . . . . . . . . . . . .1 Introduction . . . . . . . . . . . . . .4 How to install it .5. . 8.6 How to build dynamic menus using CSS . . . 8. . . . 10. . . . . . . .6 Content Item module . .7 A free resource for template ideas .building a template the process . . . . . . . . .3. . . . . . . . . . . . . . . . . . . . . . . . 8. . . .Easybook . . . . . . . . . . . . 10. . 10. 8. . . . . . .1 The core files (required) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4.2 Steps Involved . .6. . . . . . .1 Introduction .3 Trying out templates . . . . . . . . . . . . . . . . . . . . . . . . . 10. . . . . . .6 Editing a template ’in situ’ . . . . . . . . . . . . . . . . . . .8 mycontent . .5. . . . . . . .mosforms . 8. . . . . . . . . . . . . .5 Taking templates to the next stage 10 Make your own template 10.3 Specific CSS . . . . . . .3. . . . . 8.2 Where to look/go next for more information . . . .3 The index. .6. . . .4 A flexible banner system . . . . . . . . 8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8. . . . . . . . .5 8. . .6. . .6 8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6. . . . 8. . .2 Guest book . . . . . . 8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Get more from Menus with Extended Menu module . . . . . . . . . . 10. .Artbanners .3 What you get . . . . . . 8. . . . . .2 Additional files (Optional) . . . . . . . . . . . . . . . . . . . . . . . . . .php file . . . . . . . . . . . . .5. . .4. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3 The Template file structure . . . . . . . . . . .6. . . . . .5 Forms / database component . . . . .

Contents 11 Hints. Tips & Howtos 12 Where to go next to build your expertise and skills A Useful websites B Open Source Software Tools & Tutorials 146 151 152 154 C Instructions for deleting all content and structure from a standard Joomla! install 156 D Basic End User Instructions E Glossary 159 161 6 .

. . . Example CSS styling displayed by Firefox Web Developer plugin . . . . . . .1 5. . . .2 2. . .1 3. . . . . . . . . . The Joomla! Installer pre-installation check screen The Joomla! Installer database settings . 17 18 20 23 25 27 31 38 41 42 46 53 75 77 The AnyTown Zoo ’Worked Example’ website . . . . . . . . . . . .4 5. . . . . . . . . 137 10. . . . . . . . . . The Joomla! Template Manager showing template selection method . . . . .List of Figures 2. . .3 5. . . . . . .2 The Visual ’marked up’ for coding (only some markup shown) . . . . . . . . . . . . . . .2 9. . . . . . . . . . Make a note of your new database settings . . . . . . .1 2. . .4 5. . . Joomla! content is structured into Sections and Categories . . . . . . . . . . 144 7 . . . . .3 3. . . . . The JSAS Control Panel . . . . . .1 7. . . . . .5 7. . . . Default Joomla! Modules installation settings in Module Manager . . . . . . A Table View of the News articles . . . . 119 10. . . . . . . . . . . . . Template positions for the LJ_metro01 template . . . . . . . . . . . . . The Joomla! Administrator Control Panel . . Inserting an Image into an article . . . . . .3 The LJ_andreas01 template . . . . . . .2 5. . .1 How Joomla! generates a website . . . . . . . . The Tiny MCE HTML Editor . . . . . . . . . . . .3 3. 136 10. . . . . . . . . . . . . . . . . . .1 A new 3 column design visual for the AnyTown Zoo template . . . . . . . . . . . . . . . . . . . . . . . . . .2 3. . . . . . . . . .

. . . . . . . . . . . . . . . . . 48 76 78 80 10. . . . . . . . . . . . . . . . . . . .List of Tables 5. . . . . . . . . . . . . . Date Format parameters (strftime) . . . . .1 7. .2 7. . .3 The four standard Joomla! menus . . . . . . . . 128 8 . . . . . . . . . . .1 7. . . . . . . . . . . . . . . . . . . . . . . . . . . Summary of Menu Link Options . . . . . . .1 PHP Template Functions . Controlling the Blog page CSS styles . . .

this book is only likely to be useful if you have new members on the team and you want something to get them up to speed fast on the basics.0.5.co.Who this eBook is for (and who it’s not for) If you are completely new to Joomla! and have a reasonable knowledge of web site concepts and some practical knowledge of HTML this book will introduce you to the basic concepts behind Joomla! and get you to build your first site more quickly than if you have to sift through the somewhat disjointed material out there at the moment If you are a hot web development house.x A Joomla! version 1. with great PHP skills and award winning graphic designers. and you already know about Joomla! concepts.uk for more details 9 .x eBook is planned for early 2007.learnjoomla. See http://www. It’s a book for people who are short of time and want to build quality content based websites and want to know how to make Joomla! do it for them quickly. This is not a book for developers planning to do component or module development. This book covers Joomla! version 1.

before installing Joomla! as explained in Chapter 3. and select the submenu option Site Templates. <?php echo _ISO. You are strongly advised to NOT install the sample content that is an option with Joomla! but instead use the content supplied with this book. Commands: Commands to be entered are shown thus $ chown -R 777 /web <enter> Buttons: Buttons to be clicked are shown as Save Code: Code (including HTML. rather than a reference manual. otherwise you will not be able to follow the worked example exactly and you may miss some key concepts which are explained via the Worked Example. Tips and Hints are linked from the Index. Learn Joomla! is designed primarily as a tutorial guide.this section does not require you to read the earlier material first. 10 . however you can use the Table of Contents or the Index to go directly the concept you wish to research. and 8 as these build on the key concepts you learn in Chapter 5. tips or warnings are enclosed in boxes as explanation. If you have some Joomla! experience You may have bought this book to fill in gaps in your Joomla! understanding. XML. CSS and PHP) samples are displayed as <meta http-equiv="Content-Type" content="text/html. You should work through the example Chapter 5 first before working through Chapters 6. ?>"> NOTE: Useful hints. You may wish to go straight to the template section if you need to modify or build your own template .7. click Template Manager from the options presented. Conventions Navigation: The instruction Site > Template Manager > Site templates means Go to the Site item on the pull down menu.Using this book If you are new to Joomla! Read through the Introduction and the Tour and take a look at the online demo. If you are interested in understanding how visual design in Joomla! works you can go straight to Chapter 9. All the Notes.

During this time Mike raised substantial venture capital from UK VC group 3i. pioneering the new interactive medium before the Internet took off.artonezero. He is married with a young son and lives in London. England. and was a pioneer in the Fixed Wireless Broadband market in the UK. Mike moved into electronics marketing in the early 1980s with Texas Instruments. 11 . Mike established Artonezero in 2006 to pursue new Web 2. and produced the BBC Shakespeare. He also owned and ran a web development company called Xios.for the 9900 microprocessor family. the Hutchinson Multimedia Encyclopedia. and Joomla! is at the heart of most of these new projects. and as product marketing manager for the UK schools computer supplier Research Machines. The company encompasses web publishing. More details can be found at www. He worked with many leading book publishers and TV companies. and where he wrote his first manual .com Mike is an entrepreneur who has been involved with IT since the late 1970s when he was one of the first microprocessor application engineers in the UK working at Texas Instruments. development. and hosting. ATTICA Cybernetics in Oxford.0 projects. helping to develop and launch their first IBM compatible PCs. the Ordnance Survey maps on CD ROM and the Thomson Directory on CD ROM. In 1997 Mike set up an Internet Service Provider called Red Moon Internet.About the author Mike Lloyd has been involved with Electronic Publishing since 1989 when he founded one of the UK’s first CD ROM publishing companies. Mike has a degree in Electronic & Electrical Engineering from Birmingham University. Since then Mike has worked at PA Technology as a consultant. where he put micros into everything from washing machines to toy trains. Amongst other projects he created the UK’s first CD ROM Encylopedia.

Joomla! has been widely used by the open source community.co. that Joomla! is poised to be the next Open Source crossover product to make an impact in the Commercial market. but it’s success has been built on firm foundations.lloyd@learnjoomla.learnjoomla. I wish you luck with all the sites you develop as a result of writing the book.uk Enjoy Joomla! Mike Lloyd London. the public sector and some knowledgeable developers. I believe. Over the last 12 months Joomla! has developed a significant momentum with over a hundred thousand downloads per month and tens of thousand of users. January 2007 12 . however.co. high quality templating system. Joomla!’s use in the commercial web development market is limited to date. or any other issue raised by the book at mike. At time of writing it is number 395 on Alexa.Preface Every so often a product comes along which seems to come from nowhere on the Internet and suddenly breaks through into public attention. clients or their accountant. I’d love to hear about your new Joomla! site. Hence the reason for this book. open source platform. but growing. Joomla! comes with a set of built in functions. find a better one from the hundreds available or write your own. Commercial users are short of time and they want answers quickly. making it one the world’s most popular 400 websites. Add to that a simple-to-design. To date. The reason for Joomla!’s success is that it is a modular. You can write to me about these. Joomla! is one of the next such products.uk. and support for the LAMP platform and you have a magic formula for success in the Content Management System arena. which is aimed to fill a gap for the newcomer to Joomla! who wants to get started fast. to satisfy management. or visit the website at www. but if you don’t like these or they don’t do what you want you can quite simply.

and the reason why you should consider using Joomla! to create your web sites are: • Joomla! is free software licensed under the GPL open source license. 1. PHP hosting. which is an application built as a new branch from an earlier open source CMS application called Mambo. For smaller sites. the words and pictures. develop and maintain a website. For those with slow connections. each concentrating on their specialist skill. In contrast many commercial CMS applications are expensive and have commercial restrictions controlled by the licensee. This makes updating of content simple. are stored in a database on the server rather than as individual HTML pages. that make up the site from the site design and presentation. Joomla!. MySQL. and other content. For anyone with a 512kbps or better broadband connection to the Internet and a reasonably fast server.and is typically hosted on LINUX servers. enabling a team of people to create. this may be a team of two. Joomla! is a PHP application which runs on standard open source servers including Apache and My SQL. enthusiastic and growing group of users and developers. Apache. there is a PC application to simulate the server to assist the application process. Put simply. • All text and images. and can be freely downloaded and installed and used by anyone. and this is the recommended development model. and the content editor. has won a number of awards. A few very talented individuals may possess the skills to do everything themselves. and has a large. 13 . enabling one person to produce sites which can complete with the best of those produced by large organisations.1 Key benefits The key benefits of Joomla!. the site designer. a CMS separates the content. • Joomla! is simple to install from a web browser and will run on many different standard low cost ISP hosting packages which offer standard Linux. it is easy to develop web sites with Joomla! using a Web browser interactively while logged into the server. or working offline.1 Introduction to Joomla! Joomla! is an open source Content Management System (CMS) for developing and editing dynamic web sites.

This template comprises PHP code and a CSS design template which defines colours. font styles and layout. shopping baskets. banner ad management. new functions can be created as plug ins by experienced PHP/MySQL developers. payment systems. • The design and presentation of a web site created with Joomla! is controlled by a design template which is completely separate from the words and images stored in the content database. user management. or to respond to changing user needs. making it easy to download and try them out without spending money licencing code. community tools. which other content can be viewed by public users who are not logged in • There is a growing community of developers creating plug-ins and off the shelf website template designs which work with Joomla! and add a whole range of additional functionality within your site. • By taking advantage of user management features. and the presentation of information can be changed easily without the need to rewrite lots of specialist code.1 Introduction to Joomla! and it may be done by authors and editors without web development skills. text formatting. access control. Search Engine Optimisation. Using Joomla! the website owner has many options for the development of the site. and even if a function is not available to perform a specialist requirement. such as user registration. if for example a company or organisation undergoes a re-branding exercise. Most of these plugins are also freely available under the GPL Open Source licence. as well as a web based editing tool to enter and edit site contents. in an organic way. you can make certain con- tent available only to registered users. • By using plug ins a complicated site can be up and running within days. a variety of article display styles. image galleries. and new user needs met as feedback is received. such as discussion forums. forms. such that resources can be managed. blogs. several different menu styles. marketing tools and so on. The range of plug ins is pretty comprehensive and will meet many website owners needs and new functions are being added every day. Thus it is possible to completely redesign the look of the site while leaving the content unchanged. and additional functions (such as a discussion forum or online polls) can be added later to enhance the site. • Joomla! has a wide range of features in the basic software application. user comments. which might take weeks or months to produce if developed from scratch using custom software development • A site may be launched initially with a basic set of functionality. 14 . Thus a website developed in Joomla! is fully dynamic.

And you can start small. 9 and 10) 1. e. and those sites where the members want to interact or communicate together. A Joomla! installation on a suitable server with webspace and hostname.1 Introduction to Joomla! 1. with editors and contributors worldwide.uk 2. Joomla! user module makes it particularly useful for membership sites. Examples of the type of websites which can be built in Joomla!: • social communities • corporate sites • small business websites • shops • personal websites • charities • Government sites • political or direct action sites • membership sites • clubs 15 . A visual design for the site.3 Examples of Joomla! websites Joomla! can be used for the smallest personal site or Blog.g.2 Building a Joomla! Website To build a Joomla! website you need to prepare three elements before you get started: 1.learnjoomla.co. the so-called Web 2. To define a structure for your content and how it will be interlinked and navigated (see chapters 2 and 5) 3. and keep growing. www. to a large multilingual site.0 websites. showing where various content items are displayed (see chapters 5.

1 Introduction Joomla! is software to enable you to build web sites in a way that separates the content . the pictures and the items for sale or download from the site. 16 .2 A Brief Tour of Joomla! 2. the navigation. just the skills needed to use a word processor or an email program. the structure of the site. and no need to understand HTML programming.e.from the presentation. You will also need a template which controls the graphic design and layout of your site. In technical terms. which can be installed on your PC. Joomla! software is classified as a content management system (CMS) which allows you to build what is known as a dynamic web site. There are just a couple of templates included with Joomla!. JSAS.2 Inside Joomla! In a website developed with Joomla!. design and structure of the website. but literally 100’s of free or inexpensive templates for all sorts of different website layouts available for you to choose from 3rd party suppliers. you or your website hosting supplier first need to install the Joomla! software on a Web server so that it is publicly visible across the Internet. are separated from the articles. You will also need a domain name for your website. 2. such that the text may be entered by the author into the website database with minimal styling. (Note: if you just want to experiment there is a development version. the visual presentation and the special functions such as shopping baskets. see Chapter 3). forums or tablular views of links to articles on your site. such that it is easy to add to or change the content without any special programming or design skills. i.The display style is added when the content is called up from the database and displayed on the screen by the Joomla! software via the template.the words and the pictures . To create a web site using Joomla!. Apart from that you need a PC with broadband access and some image processing software to prepare your pictures for the website. where the content is stored in a database. The visual presentation of each article is standardised and controlled via the visual template.

When a link is clicked on the website by the viewer the appropriate data is pulled from the database according to the structure which has been built by the website developer using the menu structure which is the ’glue’ which links everything together internally. links and other files. These have been entered and stored by an author or an editor via the Joomla! Administrator Control Panel using the ’Content Manager’ tool.1. and a web page is built dynamically and sent back to the website viewer. lists of links or search results.for example news headline summaries. This information is then filtered through various Joomla! software modules and components to create different views of the data .1: How Joomla! generates a website Let’s try and explain this using a diagram. The diagram illustrates how the different internal elements of a typical Joomla! website work together to create the page that is seen by the viewer. At the heart of a Joomla! website is a database which contains raw text articles. All the information from the modules is then processed through the display template in the correct screen position which has been defined by the developer. pictures. I will now explain in more detail about each of the elements of Joomla! and how they contribute to the working of the database. 17 .2 A Brief Tour of Joomla! Figure 2. Figure 2.

2: The Joomla! Administrator Control Panel 2. building your website as well as maintaining its and inputting data.2. the website is built from a web browser Administration interface (the administrator). which means that you can develop and maintain the site from a computer connected to the Internet anywhere in the world. and do not require the use are of a special authoring program. of your website perform all the functions involved in setting up.3 Administrator Interface Once the Joomla! application software is installed (which is done from a web browser using a simple web based installer). which is also known as the back end software. See Figure 2. the development of which is described in this guide. It can also be used by authors and editors to import new content for the site. or systems administrator. The front end of the software is the your purpose built website. The Joomla! Administrator interface. 18 .2 A Brief Tour of Joomla! Figure 2. or control panel is the screen from which you as the Webmaster. One of the nice features about Joomla! is that all of the development and authoring functions are available via a browser.

Content items can be time sensitive. such as advertising banner management. such as summary views of most popular articles. See Figure 2. user polls. or news items can be archived at the end of the day or week. Mambots provide small functions such as updating the content of a page or article according to a script. There are a wide variety of plug-ins available from third parties which can be used to extend the functionality of Joomla! For your specific application. This templating method has created a market in inexpensive ready to use templates for use with Joomla!. while a category is a file folder within a drawer. a Section is a drawer. Thus the look of the website can be completely changed in a few clicks.joomla.g.6 Plug-ins Components. Modules provide specific functions.4 Design Template The look and feel of the site. and the web pages shown on the users screen are created dynamically on the fly when they are selected.2 A Brief Tour of Joomla! 2. Full details of these can be found on the Joomla! Website at http://extensions.org At the time of writing this database showed over 1. A press release can be embargoed until 11am on a Monday morning. and this can all be pre-planned. However anyone with a basic knowledge of HTML and CSS can create a template layout using the information provided in this guide. whether text or images is stored as elements in a database. Thus the information displayed will be changed automatically. and the positioning of the various content items and the navigation system is controlled by a template which is a combination of an XHTML and PHP code page and a CSS file.5 Content Structure Sections and Categories Information in Joomla!. These elements are stored into a ZIP file with some additional control files and can be installed in a matter of minutes from the Administrator interface. Components are mini-applications. some of which are designed to a very high commercial standard.000 extensions available. 19 . Modules and Mambots Joomla! is designed in a modular fashion. 2. A simple way to think of this structure is that if the database is a filing cabinet. exporting of CSS news feeds and so forth. These folders contain pages of information. which are the individual content items. 2. without human intervention. enabling plug in functions to be installed simply and easily from the Administrator interface. discussion forums or shopping baskets. images and other data. e. its visual presentation. The content is structured into Sections and Categories.3.

2 A Brief Tour of Joomla! Figure 2.3: Joomla! content is structured into Sections and Categories 20 .

control to content can be restricted to different groups of registered users. and most modules are ’user aware’.org To log in as an Administrator and view the Administrator interface. front end editing. different levels of access control can be allocated to users for editing.7 User Management Users are at the core of the Joomla! content management system. authoring and management of the publishing process.8 Joomla! Demo For a practical demonstration of a Joomla! website go to http://demo. 21 . For a more detailed evaluation. you need to register as a user on the site. From the Front End. get the standalone Joomla! server JSAS as described in the next chapter. user profile management. whilst for those producing the site. There are modules to handle user registration. Users can post content to the side from a browser anywhere on the Internet without the need for any special software or licence.joomla.2 A Brief Tour of Joomla! 2. 2. This is to reduce the level of misuse of the demo site. Your username and password will then allow you to log in as an administrator. and activate your user profile. and this information can be shared with other applications installed as components such as forums and shopping carts.

2.x or higher • Apache Web server version 1. 22 .x or higher • PHP version 4. and is essential if you do not have a permanent broadband connection to enable you to develop your site.3 Installing Joomla! In this section you will learn how to: • Install Joomla! on your local Windows PC for evaluation and offline develop- ment • Install Joomla! on a Linux server using the web interface or command line in- terface • Install Joomla! on a hosting service with cPanel • How to set file permissions for correct operations and security The Joomla! content management system is a server based application. In order to install Joomla! you must have web space on a server with the following applications (minimum versions shown) installed: • MySQL version 3.13. 3. I recommend everyone to install this product on their PC. JSAS enables you to configure up to five test sites on your PC. it is extremely useful when getting familiar with Joomla!. Apache Web server and Joomla! to your PC and configured them correctly together with a set of useful tools. Joomla! is a set of PHP programs which connect to a MySQL database.23. This package will install MySQL. which is installed on a Web server and which is administered via a Web browser. PHP.19 or higher Or you must install the above applications environment on your local PC (Linux or Windows).1 Using a local server on your Windows PC It is not possible to install Joomla! directly to your PC from the downloaded files since the application environment must be installed on a working server. It is also very handy if you want to try out a new module or component plug-in without installing it on to a live site. the ’Joomla! Stand-Alone Server’ which you can download and install to your Windows PC. However there is an excellent package available called JSAS.

3 Installing Joomla! Figure 3.JSAS Here’s what to do: 1. Just click ’yes’ each 23 . Installing the local server . The installation takes several minutes to complete and you are required to agree to various installation options. as you are able to directly change file permissions.1. I strongly recommend that you use a host that is specialises in Joomla! . This will save you a lot of time and frustration particularly if you have a lot of image files to upload to your site.exe. I recommend copying the JSAS installer to a CD-ROM if you are working with Joomla! regularly and do not want to be caught out if you lose broadband access. as this will make the job of developing and maintaining your Joomla! site so much simpler.5 2 hours to download using a dial-up connection (as I know to my cost when I lost my broadband connection for day while writing this book).com/ 2. If you do not already have a website host.1 Installation instructions for JSAS Note: The JSAS package is approximately 22 MB in size and takes 1. and use a proper FTP client such as WinSCP3 to upload files.exe file(approx 22Mb) 3. and preferably one which gives you linux shell access. Go to http://jsas. or if you wish to edit templates.joomlasolutions. Download the installer which is a single Windows . live on your site.1: The JSAS Control Panel 3. Run jsas-setup_xxx.

Click on ’About my JSAS’ to view the user documentation 7. Anytown Zoo) 10. Make a note of these.The installation program puts Joomla!. Click Next 24 . When the installation is complete you will be returned to the main control panel. If you click the link |Browse Folder| under the site Link for Anytown Zoo you will see a pop up folder showing that all the Joomla! files have been installed. You will need to open this window to delete the installation files folder once the set up process is completed. This may take a few minutes depending on the speed of your PC. This brings up a new right hand panel. 3.1 6. WARNING: JSAS uses a virtual drive W and runs a background C:> MS-DOS window for apache.g. Click on Create New Site 9. Do not close this window 5.3 Installing Joomla! time. 18. 17.g.2) which gives you the parameters you will require to complete the Joomla! installation settings. Apache. showing the Pre-installation check. jos_anytownzoo) 12. 15. See Fig 3. Clicking this link brings up a pop up window (see Fig. (See Fig 3. This will set up the various programs and will then close down. Enter your site title (e. Enter folder Name (e.g. 16.exe. Click /run MyJSAS 8. Click Next. Enter My SQL database to Create (e.3) You will see that JSAS has set all the file and directory permissions correctly for you and that all the necessary files are writable. Run JSAS for the first time once the installation is completed. 4. Now click on the Advanced Options link at the bottom of the list of Sites. My JSAS will now show a site named Anytown Zoo with a link underneath labelled |Browse Folder| 14. You don’t have to agree to it. MySQL and PHP on your PC and sets all the correct file permissions so you don’t need to do so. anytownzoo) 11. This will bring up a browser window with the Joomla! Web Installer. Run JSAS for a second time and you will see the JSAS control panel. and there is a link in green text underneath entitled Install Joomla!. Close the Window. Click OK and JSAS starts extracting Joomla! and installing it to your new site. Click ACCEPT 13. The GPL licence is shown for information. Now click on the link for Anytown Zoo in the MyJSAS panel on the right hand side. At the top is listed the Anytown Zoo site.

3 Installing Joomla!

Figure 3.2: Make a note of your new database settings 19. You are now at the Step1 screen. Enter the following settings: Host Name: ’localhost’ MySQL User Name: ’root’ MySQL Password: [leave blank] MySQL Database Name: ’jos_anytownzoo’ [As we set earlier] Ensure Install Sample Data is NOT ticked Do not tick any of the other boxes 20. Click Next. Joomla! installer pops up a box saying ’Are you sure these settings are correct’. Doublecheck them and then click Yes when you are happy 21. This should only take a few seconds to complete. Please wait until the Step 2 screen is displayed and the message SUCCESS! 22. Now Enter the name of your site in the space provided e.g. Anytown Zoo and click Next > > 23. Step 3 screen displays the URL of your site http://localhost:85/anytownzoo and the path to the directory files on your server, W:\www\anytownzoo 24. Enter your email address is the space provided 25. Joomla! suggests a random Administrator password, we will replace this with our own password e.g secret WARNING: Make a careful note of the Administrator password otherwise you will be unable to login and administer your site 26. Leave all the other settings unchanged and then click Next > > 27. Congratulations! Joomla! is installed 28. You now need to delete the installation folder, Go to the JSAS control panel and click the link |Browse Folder| under the site Link for Anytown Zoo. This brings

25

3 Installing Joomla!
up a folder with your Joomla! site files. Select the installation folder and delete it. 29. You can now click view site or Administration from the Step 4 Web installer screen. You have successfully installed a Joomla! site on your local PC. You can now proceed to the next chapter and start the Worked example. NOTE: To access the Administrator control panel in future using JSAS you need to type http://localhost:85/anytownzoo/administrator/ in your browser and ensure that JSAS is running beforehand.

3.2 Installing Joomla! on a Web Hosting server
Here are the minimum server requirements for Joomla! 1.0.x
• PHP 4.2.x or above - http://www.php.net • MySQL 3.23.x or above - http://www.mysql.com • Apache 1.13.19 or above - http://www.apache.org

You must ensure that you have MySQL, XML and Zlib support built into your PHP (most commercial web hosting firms will have done this already) Here’s how to install Joomla! 1.0.x on your web server

3.2.1 Getting the Files
Go to the Joomla! Home page (www.joomla.org) and click on the download Joomla! 1.0.x button. This will take you to the http://forge.joomla.org site and the latest stable 1.0 version of Joomla! will be list here for download, at time of writing this was Joomla_1.0.12-Stable-Full_Package.zip. It’s very important to download the latest version to ensure that you have all the current security patches. The file is a compressed archive so you will need to unpack it before you can run the installer. The exact method of installation used to get the uncompressed files loaded to your webspace will depend on the facilities provided by your web hosting supplier. First of all you need to get the installation files loaded onto your server and set the correct permissions for each file and directory. After that, Joomla! has a nice, friendly, web browser based installation tool which makes the rest of the process very easy.

26

3 Installing Joomla!

Figure 3.3: The Joomla! Installer pre-installation check screen

27

3 Installing Joomla! Shell access If you have ’shell’ access. 4. $ chmod 644 configuration. $ chmod 777 configuration. media/. i.or and copy it to the root directory of your webspace using FileZilla.tar.joomla.uploadfiles/ and administrator/backups directories to 707.0.e. Next check the file permissions.xx-Stable-Full_Package. Then uncompress the file $ tar zxvf Joomla_1. then you should do the following: 1. 28 . You can set the file permissions thus: $ chmod -R 775 /yourjoomladirectory <enter> (substitute the directory name of your web root directory) 5.0. you can telnet or ssh into your webspace.without providing shell access. PHP and MySQL requirements.tar. Download the Joomla_1. The good news is that if your hosting company uses cPanel then it’s almost certain that your space will meet the basic Apache.gz <enter> 3. WinSCP3 or your choice of favourite FTP client program. All files should have the permission set to 775. This will install the directory structure and files correctly. If you don’t you may not be able to edit files on the file system remotely.php should be set to 777 to allow installation. Now skip to part two of the installation below cPanel cPanel is a very popular solution from many Linux based web hosting companies to give users access and control over their webspace for low cost hosting plans . For additional security change configuration.php <enter> 8. $ chmod -R 707 /images <enter> (repeat for all the directories) 6.xx-Stable-Full_Package. Alternatively you can change the permissions of the images/. 2.php to 644 after making all your configuration changes. The configuration file configuration. after you have uploaded them.php <enter> 7.gz file from http://forge.

and may not be the latest version (which is a security threat) so I strongly suggest you follow the slightly more long winded method set out here using a recent download of Joomla! and you shouldn’t have any subsequent problems. In this case it is very important to ensure that all files have been uploaded correctly and that you have an exact copy of the uncompressed file structure on your web host. Here’s how to install Joomla! if your web hosting company uses cPanel. This is meant to make installation as simple as clicking a link.2. 29 . At the next screen. 3. you may need to unzip the file locally on your PC and then upload them to your server web space using an FTP client one by one.3 Installing Joomla! WARNING: Many web hosting companies use a tool called Fantastico to give their users access to lots of Open Source programs. Ensure that you set your file/directory permissions correctly as explained in the section above to enable installation to proceed. Depending on the facilities by your web hosting company you may need to unzip the file locally on your PC and then upload each uncompressed file/directory to your server web space using a file manager. • If you have an up to date cPanel control panel for your web space you can upload the file. which doesn’t allow you to unzip or decompress files. Let’s assume we have called the database LJ_anytownzoo. However in my experience the Fantastico installation isn’t always set up correctly. You will then need to check the permissions of the appropriate files to ensure they are set appropriately before proceeding with the web based installer. uncompress it and set permissions using the web based control panel • If you have an older version of cPanel or another similar web based tool pro- vided by your web hosting provider to manage your space. However you should check with your hosting provider’s documentation to check the exact naming structure required for databases. This will often need to be of the form username_databasename where username is your login for cPanel. one by one.2 Creating your MySQL Database All the data and indexes for your Joomla! website are stored in a MySQL database. Using cPanel From the main cPanel page go to Databases > MySQL R Databases 1. entitled MySQL Account Maintenance go to the field entry labelled New Database: enter a name for your new database.

artonezero. Finally we need to use the function Add Users To Your Databases: to allocate select this user and add it to the database. http://www. 30 . password secret 3. Next you need to tell cPanel which user will administrate your database and it’s privileges.2.yourdomain.3) If you don’t see this page there is a problem with the initial installation of the files into your web root directory and you need to go back and check the steps again. which will be of the form prefix_username. With this hosting company service Joomla! does all the work of creating the MySQL database for you.com). Artonezero (www. You need to make a note of the database name and user/password for use in the web based installation. (See Fig 3. and their gold accounts allow shell access. Please refer to your hosting companies instructions for creating a database and user and allocating the user to the database Database created automatically Some web hosts will allow Joomla!!s installation program to create the database automatically if you have the right permissions. selecting the option Privileges=ALL 4. 1.com) have accounts which use the ISPConfig control panel rather than cPanel.3 Completing the installation using your Web Browser When you have finished uploading the files and folders. You should now see the pre-installation page generated by Joomla!. go to your homepage in your browser (e.g. let’s say we use the create user function to create the user LJ_admin . Using PHPMyAdmin Some web hosts will give you access to PHPMyAdmin to create your database. For example. You can use an existing user (if you have one) otherwise create a new user. and you can skip the database creation step once you have uploaded the Joomla! installation files. 3.3 Installing Joomla! 2.

3 Installing Joomla! Figure 3.4: The Joomla! Installer database settings 31 .

.yourdomain. All being well you will see the next screen. Ensure all the files were correctly uploaded to your site and in the original directory structure 4. The settings for our worked example are as follows: Hostname localhost MySQL User Name LJ_admin MySQL Password secret MySQL Database Name LJ_anytownzoo MySQL Table Prefix Leave default jos_ 6. Check that you have not left an index. Review licence GPL (you don’t need to agree to it as it is provided for information only). MySQL and PHP are all set up correctly on your server (it is common for Apache/PHP to need configuring to display . systems administrator. or get the manuals out to fix your server installation! 2. If there are any problems with Required or Recommended settings these should be referred to your hosting provider. Click Next > > to go to Step 1 4. 3. Click Next > > to continue 3.php files correctly on a fresh server installation) 3.html or other home page file in your web root directory 2. You can now start the Installation.1. IMPORTANT: De-select Install Sample Data.3 Installing Joomla! TROUBLESHOOTING: 1. Ensure that Apache. A red entry highlights a problem which should be fixed before continuing. Step 2 SUCCESS! 32 . If you have permissions problems then you should check that you have set all the file and directory permissions correctly as described in section 3. See Fig. then Click OK or Cancel to change Now you need to wait a few seconds as your site is set up .e.com/installation. 8. If all is well.. Go to www. then all the result of the checks are shown in green.1 above. Joomla! checks that you have the correct versions of software installed on your computer and that critical permissions are set correctly. i. If the pre-installation page is showing you can now check that everything has been installed correctly.if this does not display you will need to contact your hosting provider. Click Next > > There is a pop up box which asks ’Are you sure these settings are correct?’ I suggest you double check them to make sure. Step 1 requires you to provide the settings for the MySQL database. ensure that the box is NOT ticked 7.php .index.4 5.2.

Make a note of username and password which have been set 13. If you now refresh your website address.com/administrator 16. Go to www.yourdomain. At Step 3 you are asked to review the settings and add your email address and set a suitable password (one is suggested) this can be changed later from the administrator console) Leave File Permissions and Directory permissions un CHMOD’d Password: secret Click Next > > 11.com. you should now see the site showing with default template 15. Step 4 Congratulations Joomla! is installed 12. Before you can log in to the Administrator interface. Enter Site Name For our demo site enter Learn Joomla! Demo Zoo Site Click Next > > 10.3 Installing Joomla! 9. you must delete the Joomla! installation directory using your shell account or FTP manager for your webspace (not via the web installer) 14. www. Login with username and password You’re ready to go! 33 .yourdomain.

Register your domain name and get your webspace and login account set up by your hosting provider or friendly system administrator (TIP: If you don’t have a provider why not try Artonezero’s range of packages . here are the key steps involved in creating a Joomla! website. Create the sample pages for initial site building . On paper. Upload your sample images using the Media Manager . Upload the template and set as default .See Chapter 5 8.4 The One Day Guide to Building a Joomla! Website For those of you that don’t like reading manuals from start to finish before getting stuck in.Joomla. 2. Devise the sections and categories for your site. Don’t forget to delete the installation directory. Collect together sample content for each of the sections in your site including text copy and images . with references to relevant sections of the book.See Chapter 5 12.See Chapter 5 9.See Chapter 9 7. Upload to your webspace using SFTP or your hosting providers web based FTP tool . Find a suitable pre-designed template or build your own (this may take longer than one day from scratch) .owned by Learn Joomla!’s publisher). Build the menu . and create these using the Section and Category Manager tools . Install Joomla! into your webspace and save your administrator and MySQL database passwords carefully.See Chapter 6 34 .See Chapters 9 and 10 6. subsequent pages.See Chapter 3 4. .See Chapter 5 11. banners etc 5. number of columns. or your favorite graphics program work out the layout of the site: home page. 1.See Chapter 5 10. Download the latest Joomla! installation file from www. Switch off modules which are not required . If you follow all the instructions given you should be able to build your first Joomla! website in a day (using an existing Joomla! template). If permissions problems set owner and file permissions correctly until shown correctly.org.See Chapter 3 3.

Add/Edit remaining content You’re done! 35 . Test 16.See Chapter 6 15. Set the module positions and display order .4 The One Day Guide to Building a Joomla! Website 13. adjust template if required 17. links.See Chapter 6 14. Install any additional modules and components required . Correct content. module settings.

right? However. Although you probably want to do something more ’Web 2.that’s why you want to use Joomla!. this complexity can be a problem when you are new to Joomla! and want to get started. Were going to work with a simple website design that is a little old fashioned now.5 A Worked Example . and we’ll then add in the extra functions later a step at a time. This is the most important chapter in the book. Our step by step worked example will therefore switch off most of the advanced features and show you how to build a simple site. Once you have worked through it step by step you will have a good understanding of the key concepts which underlie the structure of Joomla! and how to develop sites with it. In this section you will learn how to: • Get to grips with using Joomla! from the beginning and learn all the Joomla! key concepts • Build a simple website from scratch • Switch off many features which are enabled by default during installation and which can be confusing • Input text and images and format your pages • Change the look and feel of your website by installing a new template Joomla! is a sophisticated CMS and has many features which can be used to build a site which compares favourably with very largest sites .Building a Simple Website Joomla! is a powerful development framework.0’ than this with Joomla! eventually. it’s a pretty timeless example and illustrates how to construct a Joomla! site and at the end of the exercise you will understand how Joomla! works. But a new developer has to learn to walk before she or he can run. sometimes called a brochureware site. but which many clients have required at one time or another. 36 . so I recommend you don’t skip any of this material.

you are ready to start.uk/exampleone It has: • Home Page • Simple single-level horizontal Navigator menu with roll overs • About Us page • ’Products’/services section • News section • Links page • Search function • ’Contact us’ page with a form for the potential customer/visitor to send in an enquiry 5.1 Starting at the beginning 5. Our first website (see Fig 5.co.1 The brief For this example we will assume that you are a website developer creating a new website for a fictitious Zoo based in Anytown.1) will be a standard type which is familiar to many web designers.1. I suggest you install JSAS on your computer (assuming you are running Windows) and then set up a sample website without any content installed. or refer to the Joomla! User Manual (see Appendix A for the PDF link to download the User Manual in PDF format) 5. 37 .learnjoomla.2 A blank Sheet Our starting point is a new installation of Joomla! without any content.Building a Simple Website NOTE: In this tutorial we will not give an exhaustive description of each screen and the functions available.1. If you have installed Joomla! following the instructions in Section 2 (or your ISP has done it for you). and that the client will want to be able to add and modify the content themselves once you have completed the design and made the site live. concentrating only on those functions needed to create our website. For full descriptions of the function on each administrator screen click on the Help button for context sensitive help. WARNING: If your website has the demo content installed you will need to delete this example content using the steps described in Appendix 3 before continuing. If not.5 A Worked Example . and a live demo can be seen at http://demo. England.

5 A Worked Example .1: The AnyTown Zoo ’Worked Example’ website 38 .Building a Simple Website Figure 5.

3. Please copy these into a new folder on your computer. 39 . Here’s what to do: 1.A different approach With a static website the design starts with creating the web page HTML code. To enter the Administrator Interface open your web browser and type in the URL for your Joomla! installation as follows: e. text and images.2.com/administrator (on a hosted server) or http://localhost:85/anytownzoo/administrator (using JSAS) This will bring up the Joomla! Administrator Login: 2. NOTE: With this book we provided two free design templates and sample content.2 First Look at the Administrator’s Interface Our initial text and images need to be entered into the database using the Administrator tool. before diving in and starting programming or designing. In a dynamic CMS like Joomla! we start with the content.) Building a Joomla! websites does requires a little planning of the structure in advance. OK. known as the Control Panel.You will now see the main Joomla! Administrator Interface Home Screen. but this may just be a few minutes.5 A Worked Example . CMS .g.yourdomain. 5. http://www. and work out the underlying structure first. done that? Let’s get started and fill our empty database. Let’s take a couple of minutes to familiarize ourselves with the Administrator interface as there is a lot on screen. See Fig 2.Type in the username ’admin’ and the password that you set when you installed Joomla! in chapter 3 (in our case secret ) NOTE: If you do not get the administrator login at the this screen please make sure that you deleted the installation directory once the installation procedure was completed. (For the purposes of this book I will assume that you have put them in a folder called ’LearnJoomla’ in your My Web Pages Folder although you can obviously put them where ever you are most comfortable storing content.Building a Simple Website Please don’t skip this step or you will get strange results due to the extra categories and content in the sample data.

Content Items Manager and so forth. Content. and with tabs running along the top (Logged. go to the Site item on the pull down menu.2. (See Fig 5. Site. These are one click short cuts to popular Joomla! Administrator functions such as adding a new article or photograph (use Add New Content or Media manager).5 A Worked Example . Mambots. Messages. System.com (on a server) you will see the default template with no content. If you do this now. 5.Building a Simple Website 1. and select the submenu option Site Templates. Help 2. at least to start with. All of the functions of Joomla! Administrator are accessible via the pull down menus.2) 40 . Latest Items and Menu Stats). As a beginner you will probably not make use of this section. Click the ’radio button’ in front of the madeyourweb template. and provide a quicker way to access frequently used functions rather than using the pull down menus. 3. 4. http://localhost:85/anytownzoo/ (for JSAS) or http://www. so let’s switch to the other template provided. Add New Content. 5. Modules. Menu. There are also icons showing if there are system messages awaiting and the number of users logged into the system. Components. the quicker you will be able to start moving your way around. Components. Installers. as the allocation of functions to the button menus is a little idiosyncratic and the sooner you get used to where functions live in Administrator. At the top of the screen are pull down menus Home. and then click the large button at the top of the screen marked Save.g. click Template Manager from the options presented. We will concentrate on accessing the command functions via the pull down menus. Popular. Personally I find this default template somewhat confusing for the beginner. If you now open a browser window and go to your live site e. On the right hand side of the screen is a section showing currently logged in users. Site>Template Manager>Site templates The Administrator window displays a list of installed templates or design skins which change the appearance of the site. By default the template rhuk_solarflare is installed as indicated by the green tick in the default column. In the middle of the screen there are a number of large buttons.1 Change the default template NOTE: The instruction Site > Template Manager > Site templates means. Finally there is a link to Log out of Joomla!.yourdomain.

Polls.2: The Joomla! Template Manager showing template selection method Reload the browser window showing your site and you will see that a new template has been loaded and the appearance of your site is changed. Syndicate. We are going to use these functions in later chapters. For each of the modules (Login Form. See Fig 5. You will see a list of all the modules Joomla! has installed by default.5 A Worked Example .Building a Simple Website Figure 5. Newsflash. Latest News. To do this: 1.3. Go to Modules > Site Modules 2. 41 . You will also see a number of display boxes showing • Login Form • Syndicate • Latest News • Popular • Newsflash • Polls • Who’s Online These are all module options which are switched on by default when a default installation of Joomla! is performed. Who’s Online) click once on the published icon in the published column next to the name of the module using your mouse. Popular. This will toggle the icon to a red ’X’ indicating that the module is no longer published to your site. but for now we will switch them off.

5 A Worked Example .3: Default Joomla! Modules installation settings in Module Manager 42 .Building a Simple Website Figure 5.

2 Entering our sample content OK. favourite icon and so on from this screen. pictures) is stored in a database. and within each section. Take a minute to look at the settings on the other tabs if you roll your mouse pointer over the (i) button next to each parameter you will get pop up help advising what each setting does. You can set your meta tags. 4. There is an option on the ’Site’ tab which you should configure now.3) In order to enter content into the Joomla! database. (See Fig. 7. Before we can start entering the content we have to give the database some structure so that we know where it is stored to be able to link it to sections on our website. This will ensure that if you are on a live Internet site that your development work cannot be viewed by visitors to your site until you are ready. This is the key to being able to display it in different ways and to be able to search for items and store the content separately from its layout for ease of updating and editing.5 A Worked Example . 8. Clearly in a large site the structure of the database needs to be carefully thought through and decided on at the beginning since changing it at a later stage could involve a significant amount of work. There are others which can be changed later. 2. it is divided into Categories. as well as other settings to do with user management which are covered in the next chapter. 43 . Reload the browser window showing your site and you will see that these modules have now disappeared. 5.Building a Simple Website 3.2. Return to the Home screen in Administrator Control Panel 5. You will be able to preview your site on your PC provided you are logged in as Administrator in another window in your browser. Select Global Settings First of all we are going to set some global settings which control how the content in our database is displayed on the website Go to: Site > Global Configuration or from the Administrator Control Panel home page click the Global Configuration button. Click the option ’Site Offline’ to Yes and press the big Save button at the top of the page. All of our content (words. The Articles or Pictures are individual labeled documents or photographs filed in the folders. These can all be done later at a convenient time. you must have at least one section and one category (but you can have as many sections or categories as you like). Our content or data is stored in Sections. A simple visual way to think of this is that the Sections are drawers in a filing cabinet and Categories are folders in the drawers. 6. now we are ready to start entering content.

Click the New button in the button bar below the pull down menu. Now we will add our categories. Do not change any of the other settings or enter other items. In the Category Title field enter ’Home Page’ 10. This brings up a new screen called Section: New [ New Section ] 3. we will have just one section or drawer called Website Content. In the Section Name field enter ’content’ 5. The Section field should already be set to Website Content (as this is the only Section you have created).5 A Worked Example . and News. Click the New button in the button bar below the pull down menu. (You can add setting later via the Section Manager if required) 6. select it using the pull down handle. Category Name: services) News (Category Title: News. Click the Save button You are returned to the section manager and your newly added section is now listed as Item 1 with no categories. and divide the content up using different categories or folders that describe the different sections of the website which we will call Home. and you are now ready to enter the sample content. 2. however if it is not. 9. Let’s set up the structure: 1. Services. Click the Save button You are returned to the Category Manager view and your new category is displayed in a list. (If you forget to set a section Joomla! will remind you) 12. (You can add more settings later via the Category Manager if required) 13. Go to: Content > Section Manager This list should be empty (if not go to Appendix 3 and check you have followed the instructions fully for deleting all demo content). In the Title field enter ’Website Content’ 4. 44 .Building a Simple Website In our simple example. 7. Category Name: news) You should now have three categories listed in the Category Manager. In the Category Name field enter ’home’ 11. Do not change any of the other settings or enter other items. Go to: Content > Category Manager This brings up a new screen called Category: New [ Content ] 8. Now repeat these steps to add additional Categories as follows: Services (Category Title: Services.

Building a Simple Website 5. You can either use the pull down menus: Content > Content by Section > Website Content > Website Content Items Which brings you to Content Items Manager [ Section: Website Content ] from where you click the ’New’ button.4) 4. (See Fig 5. the Main text (which is optional. Entering content The Content Item: New entry page has three main areas: The Item details consisting of the item Title. and the right hand section with the tabs Publishing. It is not necessary to enter anything into any of these tabbed data entry forms to perform the initial setting up of a page. Cut and paste the text under the heading Main body into the Main Text window. (this information is all required to save the new page of information). Title Alias.3 Entering Words and Pictures Adding New Content To add a new document to the database there are two routes you can take.2.5 A Worked Example . and the Content Item: New function is displayed. 2. Cut and paste the text under the heading Introduction into the Intro text window. and all the items can be modified subsequently from the Content Items Manager. Open your text editor (notepad) and open the sample content file provided with the book home page copy. Images. Open a Content Item: New page. Meta Info and Link to Menu running along the top. Alternatively you can select the home screen (Click home or the title of your website displayed under the home button) and from the control panel press the Add New Content button Use whichever method you find most comfortable. Parameters. Set the Section to Website Content and the Category to home. Enter the Title: Welcome to Anytown Zoo Enter the Title Alias: welcome 3. but as we shall see later it is good practice to store the main body of the article in this area). Section and Category and Intro text. Click the Save button 45 . Let’s enter the copy for our home page: 1.

Building a Simple Website Figure 5.4: The Tiny MCE HTML Editor 46 .5 A Worked Example .

As well as the standard HTML tags. Congratulations you have now entered your first page of copy! That whole process took a while.moxiecode. 47 . They are set up in this way to assist the developer to understand the possibilities of Joomla! menu systems. These are in fact four separate copies of the mainmenu module with different names and different parameter settings.com for more information and a manual. Now you should create the following pages using the sample copy provided • About • Services1 • Services2 • Services3 • News1 • News1 • News2 Use the Item Titles and Aliases given in the sample copy exactly as written so that they match the instructions given in this book. Top Menu. WARNING: Unless content is linked to a menu it is not possible to make it available to users. without having to type in HTML code directly. much longer that it would have taken to make a simple HTML page using a traditional method. Tiny MCE is developed by Moxiecode Systems AB.5 A Worked Example . the editor will also allow you to use the CSS styles to format content in your page. however the good news is the the next 7 pages will be much quicker. Tiny MCE is a powerful Javascript editor control for web browsers such as MSIE or Mozilla that enables the user to edit HTML contents in a more user friendly way.Building a Simple Website THE TINY MCE HTML EDITOR: Joomla! provides a nice embedded WYSIWYG HTML editor to help you format your content pages. User Menu and Other Menu. We connect all the different items and categories of information together and access them using a menu.3 Connecting it together building the menu Now we are going to assemble our initial pages and build a simple website. There are four menus included by default in a Joomla! standard installation. See Table 5. see http://tinymce. These are Main Menu. and to allow several different menus to be included in one site demonstration.1. 5.

and the content item to which they are linked. Now to add the new home page.3.1: The four standard Joomla! menus 5. control the order in which they are displayed. It is set up as a vertical menu.Building a Simple Website Menu Main Menu Description The default menu. Select the click box in front of the link (tick) and press the big Trash button NOTE: If you ever accidentally delete an item it can be restored from the Trash Manager on the Home Page 1. for when the first two are not enough! The Menu for Front End users to give access to article and link submission and editing. The Home page can also be any other component. we will just use a simple page item for the Home page of our worked example. We will discuss the use of the Front Page component in a later chapter. We are going to delete this link. Go to: Menu > mainmenu This brings up a key menu page Menu Manager [ mainmenu ] From this menu screen you add and remove navigation links from the menu. 3. it is only visible when users are logged in (access permissions set to registered) Table 5. the Module CSS suffix is set to -nav Top Menu Other Menu User Menu A third menu. with the first link set to load the Front Page component as the ’Home Page’ link. It is set up as a horizontal menu. This linked item can be a single dynamic content page.5 A Worked Example . for example it can be a Shop Catalog very important if you are building an online shop in Joomla!.1 Home Page Menu Link The mainmenu has an important function in addition to aiding navigation. 1. You will see there is already a single link called ’Home’ which is linked to the Front Page component. however for now. constantly updated information rich home page. Click the large New Button in the button bar 48 . a static page (we will discuss static pages later) or it can be a special component called Front Page which enables you to display excerpts from several dynamic pages all on your Home page at the same time and is ideal for creating a busy. 2. The item selected to be linked in position 1 of the main menu is designated your sites Home Page.

Just delete the link and build a new one with the same name linked to the new item you require Reload the browser window showing your site and you will see your new home text page has been published to the site. Select Blog Content Category 4.5 A Worked Example . Click the large Save button You are returned to the Menu Manager [mainmenu] screen and there is now an item ’Home’ in the Menu. Leave all other items unchanged at this point 6. You may change a number of parameters related to this link by clicking on it again in the future. Enter Name: ’News’ 5.Content Item link within the left hand Content box 3. Now we are going to link a summary view of content to create a news items summary display.3 News Menu Link Our first two links are to individual content pages.g change a content link to a component link once it is set up. Click the Link . To do this we will use a display tool which Joomla! calls a Blog view. In the Add Menu Item :: Link . or decide to change a menu link function subsequently you must delete it and start again. Select ’Category: Website Content / News’ 6.Home Page /Welcome to Anytown Zoo item in the Content to Link box 5. Leave all other items unchanged at this point 7.Building a Simple Website 2. I wasted some time when I was new to Joomla! trying to work out how to do this you can’t . Select the Item Website Content . You cannot edit a menu link e. 1. WARNING: If you make a mistake and create an incorrect link. Go to: Menu > mainmenu 2.3. Click the New Button in the button bar 3.2 About Menu Link Now repeat the above steps to create an ’About’ link on the menu 5. 5. Click the large Save button 49 .3.Content Item screen enter the Description’Home’ in the space provided for Name 4.

Enter Name: ’The Animals’ 5. Click on it to view the news summary.4 More about Templates The site is displayed via the default template.Building a Simple Website Reload the browser window showing your site and you will see your new news menu link has been published to the site. Animals (’Products’) Menu Link We are going to repeat the above steps to add a Menu for the animals (this is often products and/or services in a company website) in our zoo 1. Select Blog Content Category 4.. Click Save Reload the browser window showing your site and view your new The Animals summary page within a single column. Intro to 6. You will note that the first item is full screen width and the next two are in columns. Columns to 1. To do this: 8. For this view we decide to have a single column with one animal per line. Go to: Menu > mainmenu 9. You have now created a very simple website with a navigator and a number of pages which will be dynamically updated if you add new content items. These can be changed once the menu link has been created by clicking on the menu link name in the Menu Manager (see below). Click the large Save button Reload the browser window showing your site and you will see your new animals menu link has been published to the site. Set # Leading to 0. Links to 4 This enables up to 6 single column articles with summary text. Click the New Button in the button bar 3. Click on The Animals content link 10. Go to: Menu > mainmenu 2. and you can navigate to the pages that you have entered by clicking on the menu. 5.3. Select ’Category: Website Content / Services’ 6. Leave all other items unchanged at this point 7. 50 . madeyourweb.5 A Worked Example . The display of information is controlled by parameters associated with the menu item. and 4 with links only 11.

5 A Worked Example - Building a Simple Website
However it doesn’t look very good at this stage for a start the site if dominated by a madeyourweb logo, and the layout and graphics don’t really suit our site. Loading a new Template Here is where one of the most powerful features in Joomla! comes into play. We will upload our site template and immediately change the look and feel of our website. 1. Go to Installers > Templates-Site 2. Click the Browse button which brings up a File Upload window on your PC. Navigate to the LearnJoomla content folder and select LJ_metro01.zip and click Open. Then press the Upload File and Install After a few seconds you will get the Message file Upload Template Success. 3. Click on Continue.. This takes you to the Template Manager Menu (to get here again use Site>Template Manager>Site templates ). 4. In the template Manager you will now see there is a new item LJ_metro01 together with some information about the developer and the template itself. 5. Click the radio button in from of the LJ_metro01 template row to select it and then click the button Default in the Button Bar. After a second or two the page will refresh and you will see that the green default tick icon is now set against the LJ_metro01 template. 6. Now go back to your site Preview browser window that you opened earlier and press the page reload button. When the page refreshes you will see that the layout and design has completely changed to the new template style but the links and content remain the same. This powerful feature enables you to completely change the look and feel of your site without making a single change to any of the content. This is one of the key features of the Joomla! content management systems. TIP: If you want to see more examples of how templates change the look and feel of a Joomla! website you can download free templates from various suppliers (see Appendix X) and upload these to your site. don’t worry you won’t break anything by doing this and you can quickly change back to the correct template by re selecting LJ_metro01 as your default template. The appearance of a Joomla! website template is controlled using CSS and we will be covering how a template works and the template design process in a later chapter. For the present we will just accepts that it works and focus on building the content and navigation of our simple site.

51

5 A Worked Example - Building a Simple Website
Changing to a Horizontal Menu Something is not quite right with our site and the new template. The navigation menu is no longer showing on the right hand side (madeyourweb doesn’t have a horizontal top menu position, but LJ_metro01 does. To fix this: 1. Go to: Modules > Site Modules 2. Click on the mainmenu link 3. Scroll down to parameters, and select Menu Style ’Horizontal’. Make sure that Menu Title is set to OFF. 4. We will also put in a divider to make the individual menu links clearly separated out. Scroll to the bottom of the Parameters list, and type ’|’ in the Spacer field 5. Click Save Now when you refresh your site view you will see that you have a nice new horizontal menu at the top of the screen and individual menu items clearly divided by the ’|’ symbol. See illustration in Fig 9.1 for module positions in this template. Adding pictures Inserting pictures into articles is a three stage process. 1. First you must create your content item and then re size it to the correct size and shape to fit on your website. I recommend the GIMP as an excellent free program to do this work with, but you may have Photoshop, Paintshop Pro, or another proprietary software which can do a good job. 2. Secondly you must upload picture into the picture store of your Joomla! website using Media Manager 3. Thirdly you insert the picture into a new or previously created page of copy I have supplied a number of correctly sized sample images with this book which you should have earlier copied into the LearnJoomla folder on your PC. We will now upload these. 4. Go to Site > Media Manager 5. The Media Manager displays icon images that are stored in the Joomla! Images directory, together with a number of folders. We will upload the pictures for our site into the ’Stories’ folder.

52

5 A Worked Example - Building a Simple Website

Figure 5.5: Inserting an Image into an article 6. To do this first select the folder ’Stories’ using the pull down menu option Directory within the Media Manager file display area, and then click on the Browse button. This brings up a file upload window on your PC. 7. Navigate to the folder where you have stored the sample images, highlight the relevant file and click on Open. The file upload window closes, leaving the file path inserted in the file upload field next to the browse button. 8. Press the large Upload button in the button bar and wait while the image is uploaded. This may take a while depending on the speed of your connection and the size of the file. NOTE Bear in mind that large files will also take time to load on the users web page so keep the image file sizes as small as possible. You have now successfully uploaded your first image. Repeat the process to upload all the other sample image files.

53

and linked to user No User. Click on the New Button in the Button Bar to bring up the Contact: New entry screen. to use in a departmental or employee directory. Save the page with the Save button at the top of the screen (if you get it wrong abort and start again) Now when you refresh your site view you will see that your The animals summary page and the full Giraffe page have a new thumbprint image on the page 5. Set Image align left. Position the cursor before the first character of the main paragraph of text 4. 1. The contacts component can store a complete directory of contacts. Select Category contacts. 5. and select the images tab. At the bottom of the text window is a button marked Insert Image. 4.5 6. border set to 0 and add a caption ’Giraffe’ and press the Apply button 9. This inserts the image tag {mosimage} 5. Press it once. 54 . such as VirtueMart which we will describe in a later chapter. See Fig. From the Administrator Control panel select Content Items Manager 2. Go to: Components > Contacts > Manage Contacts to load the Contact Manager 2. Go to the panel on the left hand side of the page.3.Building a Simple Website Inserting an image into a page 1. 3. A Joomla! component is an application plug in which performs a specific function.5 A Worked Example . Click on the content item link for Giraffe 3. Highlight the image in the Content Images window with a click of the mouse and the image will appear on screen below as the ’Active Image’ 8. Highlight it with a click of the mouse and then press the > > button to add it to the list of images for this page in the right hand window (Content images) 7. Your new giraffe thumbnail image recently uploaded should be in the Gallery images window.5 Adding the Contact Us Page Were now going to use a new function in Joomla! called a component to create our contact page and enquiry form. however in this case we are just going to add a single company contact. and then type in details for the various contact information fields we have provided sample content in the file in your LearnJoomla folder. ranging from a fairly simple function such as the contacts director in this case to a full blown application such as a shopping basket system.

7. This takes you to the Add Menu Item :: Link Contact Item screen. Now we have to add the Contact Us page to the menu. Publishing. Enter Category Title: ’Recommended Links’ 4.3. for example if you don’t want to display icons. sorted into categories. Click The New button in the button bar to take you to the New Menu Item screen. Go to: Menu > Main Menu 9. Once you are happy with your choices press the Save button (you can edit these later if you’re not happy with the way they look on screen). so click the parameters tag. In the components box. Like the contacts section.5 A Worked Example . Click on the Save button on the Button Bar. menus can also have sub menus. Enter Category Name: ’links’ 5. If you want to make changes to this page go to Contacts > Manage Contacts and select your contact page to edit it make your changes. You can also customize the email form text at this location. Press the Save button. 13. Web Links. then press the Next Button in the Button Bar. 8. Click the New button in the Button Bar 3. 6. select the radio button against Link Contact Item. This enables us to control which of the fields are displayed on the website. 12. We are most interested in Parameters at this stage. Type in the Title Contact Us and click the item you have just created in the Contact to Link display window to highlight it. country. 10. However for our simple website we will create just one category called Recommended Links 1. Save them and then check the results by refreshing the preview window. NOTE Parent Item Top means link to the top level of the menu. just hide these options. 5. Leave the other items untouched 11. fax or vcard. Click on it to see your new contact details and enquiry form page. Web Links is capable of managing a very large numbers of links. Now go back to your browser preview window and click the reload button and hey presto you have a new menu item.6 Adding the Links Section The links section is provided by another Joomla! component. Go to: Components > Weblinks > Weblink Categories 2. On the right hand side of the Contact: New entry screen there is a panel with three tabs. 55 . Images and Parameters.Building a Simple Website 5.

This brings up the link database entry screen. Select the click box next to Search module in the list (currently it has a red X in the Published column) and click the big Publish button on the button bar. If you add 4-5 links for the working example this will give you a good idea of the capability of this function. TIP: You can also carry out this function by clicking the red ’X’ and it will toggle into the published mode Go to your preview window in the browser and refresh the page and you will now see a search box in the top right hand corner of the page.1 Congratulations you have now built your first Joomla! website.Building a Simple Website 6. 10. Type in the Link Details which includes the wording you want to see for the link.com) and a short description of the information to be found on the site.3. All you need to do to add search to your site is to enable the search module and position it where you want it. Go to: Components > Weblinks > Weblink Items 8. change the position to bottom this corresponds to the search module position in our LJ_metro01 template. Type a word in and hit Enter on your keyboard You will get a number of results TIP: To add a Search button graphic such as Go instead of the grey button. see Chapter 11 Hints and Tips Your sample website should now look like Fig. see Chapter 11 Hints and Tips TIP: To highlight the search term in the results like a yellow highlighter pen. 5. 1. Now you can add the sample links we have provided 7.7 Adding a Search Facility to the site Joomla! has a powerful built in search engine which enables free text search of all articles within your website. Using the drop down box. Click the Search module link to open its configuration screen. Click Save 4. Go to Modules > Site Modules 2. 5.5 A Worked Example . Press the Save button. the URL which the link will connect to (NOTE you do not need to type in the http:// part links can just be in the form www.google. 56 . To add a link click the New button in the Button Bar 9. 3.

and sets it out as a serious Content Management System. 57 . 6. You can also set up users to author. This might be because you want the users to pay for this access. understand how it works. or using the Administrator control panel.1 User management You do not need to install any additional software in order to enable user management. edit and publish information on the site. With it you can control how users of your site access different pieces of data or sections on the website. You can however disable it (or at least user access to it). • Install the login module to allow users to login to the site • Control access to content and navigation • Set up users to edit and add content to the site User access control is a very powerful feature that is built into the heart of Joomla!. You have the option to manually control the addition of registered users for your site or to allow users to register themselves. either from a simple front end interface. or you want them to register and give you their email address and other contact details so you know who they are either for commercial or security reasons. and where to use it • Enable users to register themselves and retrieve their password if they lose it. and reserve full access to registered users only. For example you can allow public access users (anonymous users) access to an limited subset of information. 6. including whether a user can view an article a menu or even a complete section on your site.1 Configuration There are a number of global settings which need to be configured before starting to implement the user management capability.6 Adding Users to your Site In this section you will learn how to: • Make use of user management in your site. if you don’t want to use it (see below).1.

g.uk. The default is 900 seconds. otherwise the system administrator has to register them manually from the User Manager. These are: a) front-end login. You will probably want to use a generic address such as webmaster@anytownzoo. from the server tab page. if set to Yes. Shorten it if your users are in a public access area where they may not spend long on a terminal 3.g. If set to No the following 5 options are not applicable. e. e. from the Mail tab email should be configured according to your requirements for email to be sent to users.co. TIP: Ensure that you have set up an alias with your email ISP to ensure that you can receive replies from users to your Mail From: address. If set to Yes a user is sent an email to verify with a web link to click before their user account is activated. b) allow user registration. or 15 minutes which is a good general setting. Otherwise they have login access immediately once they submit their registration via the Login Form. This is an advanced option. From the Administrator Control Panel home page click the Global Configuration button. although the user has to login to click the link (what happens if you do this and you are not logged in). webmaster@anytownzoo. set Site Session Lifetime. There are several options on the ’Site’ tab which control the user management settings. 2. 58 . If set to Yes. d) require unique e-mail. Set to No to disable the frontend user login and registration set to Yes to use the functionality of the Login Form. e) front-end user params. Set the timeout after login for logged in front end users (in seconds).co. ’AnyTown Zoo’. Selecting No means that the links to registered access content are hidden from the viewer. two different users cannot share the same email address. Typically in this scenario you will provide a form on the site for users to request a user account which sends an email request to the Administrator (show how to do this) c) use new account activation. and the Mail From: is the actual email address from which the email will appear to have been sent. Next. You have now completed setting the global user management settings for your site. Next.a)show unauthorized links clicking Yes allows any links to content items which have be set to registered access to be shown. set to Yes. If Yes selected this enables users to self register.6 Adding Users to your Site 1. which you must configure.uk rather than your own email address. these should be set according to your requirements. The From Name: Is the name that uses will see in their email inbox.

b) Author Group: These users are given access to submit new content and edit their own content items/pages by logging into the site. 2. Add users manually You can add users manually via the User Manager (available by pressing the big button on the Administrator Control Panel home page). and email address and create and enter a username and a password (entered twice for accuracy checking).2 To set up a new user There are two ways that new users can be added to your site. edit and publish any content by logging into the site. Additional information (sections and pages) may be made available to a user once logged in. Allocate the user to a group.Joomla!. TIP: You can bulk import users from a spreadsheet using a third party component called JUICE: Joomla! User Import Component (see extensions. When to add users via the User Manager Adding users manually via the User Manager is a good solution when you have a relatively small number of new users to add on a daily basis. d) Publishers Group: These users are given access to submit.6 Adding Users to your Site 6.1. Type in the users name. You can use an email address as a username if so desired. TIP: If you have shell access on a Linux system either install or ask your systems administrator to install PWGEN. Here’s how to do this: 1.org) 59 . Typically the choices are: a) Registered Group: These users are able to login to the site. for example if you are running a subscription site for information services such as a professional newsletter or a members only site such as a Chamber of Commerce site where you want to vet and possibly charge members for access to parts of your site. according to the access privileges you wish them to hold. Access provided to a child group (like Registered) is inherited by the parent groups (like Author) unless specifically denied by the Super Administrator. 3. c) Editor Group: These users are given access to submit and edit any content by logging into the site. This simple utility generates unlimited pages of random 8 character passwords so you don’t have to try to invent them yourself.

but only have access to the limited front end functionality.6 Adding Users to your Site Users Self-Register Your visitors can create their own account by self-registering via your Login Form if you have enabled self registration in the Global Settings section and the module is published on the site (see below). Note that users in groups allocated to the front end. The automated system allows you to handle a much larger daily volume of registrations with minimal resources. and you may have more than one Webmaster (Administrator or Super Administrator) responsible for making changes to the site functionality and structure. On a large site you might have several editors (or Manager) each responsible for managing and maintaining a content area. i. Managing Menus. You can determine which group to assign a user to depending on the privileges they require to do their job. Managing Modules and Managing Mambots 60 . however they are allocated to groups in the back end which gives them access to the administrator control panel. Categories and Content Items. but they are not able to make structural changes to the site. Administrative users can login from the front end too. Managing Users. Statistics. Administrator Group: Administrators have all the rights of the Manager Group. You can give these front end users some editing capability via a user menu (see below).e. You may wish to have a number of users who are allowed to make changes to the site either to its structure or its contents.e. Manager Group: Managers have all the access rights of the Publisher Group in the front end. Administrative Users There is a third type of user which may be set up manually. are not able to login to the administrator control panel. which is available for those users that you wish to allow to login to the administrator control panel (i. When to allow users to self-register This is most typically used when you are making additional content available to registered users but not charging or vetting users (other than checking that they have a valid email address). There are three back end administrative user groups with different privileges which are allowed to log in via the Administrator control panel. and they also have access to Trash Manager. You want to allow anyone who finds the site and is interested in its contents to decide to become a member. You add these users manually via the User Manager as above. 1. Menu Items. Managing Content via Sections.Preview. Frontpage Manager and the Archive Manager 2. and they also have access to the Media Manager. the tool that you are using to build the site). the public facing website. Managing Components.

The Login Form module can be loaded in any position. 61 .the text which is appended in this field id added to the basic CSS class moduletable) We put in here -left. Click on the Login Form link NOTE: If you change the name of this module to something more appropriate for your site design.1. but it is usually placed in either the left or right hand column. This is normally displayed on the home page. take care when you next need to access the module link from the Site Modules Manager. I recommend adding it to your forum and shop pages as well if you have them (see later section). 6. Here’s what to do: 1.6 Adding Users to your Site 3. Don’t panic if you can’t find the Login Form any more! The settings required for the Login Form module are as follows: DETAILS: • Title: Change to ’Customer Login’ or another more suitable phrase • Show title: Select ’Yes’ • Position: Select ’left’ • Module Order: This can only be changed from the Module Manager screen (see below) • Access Level: Public • Published: Yes (ensure the module is visible on the site) PAGES/ITEMS: (Indicates on which menu pages the Login Form is displayed) • Select mainmenu | Home (NB you can easily change this later) PARAMETERS: • Module class suffix (defines a unique CSS class to enable the Login module to be visually styled via the CSS stylesheet . which means that the module will tag the table in which the Login Form is displayed as ’moduletable-left which has a style defined in our LJ_metro01. Go to Modules > Site Modules 3. Super Administrator Group: The Super Administrator is equivalent to ’root’ permission in Linux and has access to and can change any aspect of the Joomla! website. but can be included on as many areas of the site as you wish. Login to the Administrator Control Panel interface as the Super Administrator 2.3 Installing the Login Form module To give your website users access to user management you simply need to add the ’Login Form’ module to your website. as it will now not be displayed as Login Form but as your new name e. Customer Login.g. In particular Super Administrator access is required to change or manage templates and change Global Settings.zip template CSS stylesheet.

NOTE: You can change any of these settings again later if you aren’t happy with the way your Login Form looks. The following should be tested: 1. To replace this with a more suitable phrase you can edit the language file in the /language directory e. including the automated emailing function. If your installation is set up not to allow multiple users for the same email address you will need to use a second email address. support@anytownzoo. 6. english. ’).4 Testing the Login Form I recommend that you test out all the functions of the Login Form.1. requested username and password in the form and press the Send Registration button. both to acquaint yourself with the interface as it will be seen by your users and to confirm that everything is working correctly. 3. For example you could replace ’hi. 2.” Note that you must activate the account by clicking on the activation link when you get the e-mail before you can login.uk.g. in front of the person’s name or username. If the registration is successful you will see the message : “ Registration Complete! Your account has been created and activation link has been sent to the e-mail address you entered. Enter your name. or an active alias e.’Hi.g. 62 .6 Adding Users to your Site • Pre-text (This is test to display above the login fields) • Post-text (This is test to display below the login fields) • Login Redirection URL (You can enter the URL of a different page if you wish the user to be directed here after logging in) • Logout Redirection URL (You can enter the URL of a different page if you wish the user to be directed here after logging out) • Login Message (Pop up) Hide Show • Logout Message (Pop up) Hide Show • Greeting No Yes (This places the word ’Hi’.. Refresh your home page and you will now see a login panel with a field for entering username and password and associated links below the navigator menu.php.’ with ’You are logged in as:’ ) • Name/Username (You can select whether to show the username or the actual name of the person who has logged on the site) Click the big Save button to store your new settings. Click on the register link to register yourself. If the username is already in use you will get a pop up box informing you that it is not available and asking you to choose another username. The line to edit is DEFINE(’_HI’.co.

registered or special) can also be used to control access and visibility of modules.This allows any user who has a registered login to the site to view the article or content. to use the technical term) to view the article or content. Once you have registered. 5. One to the email address you have just registered asking you to click on a web link to confirm your email address. components or links on your site. 63 . Click on the Link About 3. Upon logging in you have successfully tested the registration and log in process. Here is an example of how to hide a menu link: 1. Controlling access to Areas of the Site The user groups (public. and assuming email is correctly configured on your email server. or items within a component such as files in the 3rd party plug in DocMan document manager. 6. registered or special users. you can set the access level accordingly from the Publishing tab. When Entering or Editing articles using the Content Manager.1.This access level will only allow users from the back end user groups of Manager. each article that you entered in the database allowed you to specify whether it was accessible by public users.5 Controlling access to Content You may recall from the previous chapter that when we we using the Content manager to enter our content. Click on the link and you will be taken to the website and you will see the message “Activation Complete! Your account has been successfully activated. Administrator or Super Administrator to view the article or content. Public User . and a second to your Administrator email address informing you that a new user has registered. You can now log in using the login form with the username and password you have created. It is commonly used to hide parts of the website by restricting visibility of links on the menu. This allows any casual visitor to your site (or anonymous visitor.6 Adding Users to your Site 4. Go to Menu > mainmenu 2.” 6. you will receive two emails after a few minutes. so that the additional content is only available to registered users. Special User . select Access Level Registered. You can now login using the username and password you chose during the registration. From the Edit Menu Item :: Link . Registered User .This is the default setting.Content Item.

(To be precise it is an instance of the main menu module.g -usermenu 9. If you need to do any special CSS styling.e. The following functions are available from the menu: 64 . Decide which menu pages will have the user menu displayed when the user is logged in and select these using Menu Item Link(s): 8. 6. you can provide a second very powerful feature. Click on the link ’User Menu’.1.6 User content editing from the website Once you have enabled user access. the user menu. Using the Module Manager. e. called user menu. From the Administrator Front End Go to Modules > Site Modules 2. Login. If you now view your website as an anonymous user (i. the ability for users to add or edit content on the site via the front end (the public facing website itself) without need to use the Administrator interface. a new menu appears. Click Published radio button ’ Yes’ 5. add a suffix to the CSS module and menu classes. The user menu is a module which provides additional functionality to logged in users. Set Access Level = ’Special’ 6. Press the Save button. Set Menu style to ’Horizontal’ or ’Vertical’ depending on the position you are giving it 7. setting Access Level Public to restore your site to it’s previous state. This method is also used to control access to the User Menu which is described in the next section. Press the Save button 6. Set position to ’Right’ (or the position you require in your site) 4. and it will appear again. ensure that the module is published and located in the appropriate position (often in the left or right hand column below the main menu) 1.7 User Editing Tools When a user logs into the website via the Login Form.1. Repeat the process.6 Adding Users to your Site 4. The configuration screen for this module appears: Site Module: Edit [ User Menu] 3. which has links which are restricted to registered users). not logged in) you will no longer be able to see the link.

the new articles/content on the website. they will see a pen and paper icon next to the article headline on the website page (see Fig 6. publisher. Editor: In addition to the author privileges the editor can edit articles submitted by different authors Publisher: In addition to the editor privileges the Publisher can publish. When users who are members of the back end groups login to the front end they will have equivalent privileges to a Publisher. without the assistance of the developer.2 How to set up a user to add content and edit it on the website A common requirement for website developers is to be able to provide the end user or customer with a simple interface enabling them to edit the site content and add new content directly. Author: An author has access to all the functions of the user menu to edit his/her articles/content. TIP: If you do not want the ordinary registered user to see the user menu when they log in you can change the access level for the User Menu module from Registered to Special. They are only able to submit (but not publish) web links.6 Adding Users to your Site • Your details: Edit user registration details such as name. 6. i. editor. To hide a specific link on the user menu from the ordinary registered user change the menu link access level to Special (it is Registered by default). once logged in.1). By clicking on this icon they will be able to edit the article/content from the front end. manager or administrators groups cannot submit articles or check in items. Here’s how to do this: 65 . email address and password • Submit News: Enter a News or any other article into the database • Submit Web Link: Enter a Web Link • Check in my items: Release the file lock on the edited items so that other editors or publishers logged into the site can edit it. However users who are not members of the author. In addition. Registered user: Any registered user (including self registered users) will see the user menu if it is published when they login. • Log out The exact functionality of the user menu is defined by the user group of which the user is a member.e. make visible.

6. user management) for more details (http://extensions. making it accessible only to Special users (see page 55. Take frequent backups of the site (preferably nightly) in case the customer accidentally deletes important content by mistake! 6. Give the user/customer a list of the categories to which they need to assign articles to place them in the appropriate section of the website (depends on your site design) 5. Publish the User Menu to the site. User content editing from the website). adding her/him to the Publisher group (see page 50. Add the user manually.6 Adding Users to your Site 1. edited as appropriate to your site design.org) 66 . This extends the basic Joomla! user model and gives far greater flexibility on the information which may be stored and the access control provided. 3. 2. These are: • you cannot set up your own access groups • you cannot change the information fields that are stored for each user • you cannot change or set up new access groups of users. or provide a menu link called login linked to the Login Component (see page 53. Add the Login menu module to a suitable page on your website. Be on hand via phone and email to provide soothing assistance when the user is getting to know how to use the editing system! 7. Give the user/customer a copy of the simple editing instructions provided in Appendix D Basic End User Instructions. Installing the Login Form module) 4. Add users manually). If the facilities described in this chapter are insufficient for the user management on your site. you need to consider adding in a third-party module such as the Community Builder extension which is described in the next chapter.Joomla!.3 Limitations of standard Joomla! user management (and the solution) While the user management functions that are built into Joomla! are very powerful there are some limitations. See the Joomla! 3rd Party extensions website (core enhancements.

these are the tools that we use to add functionality and exploit the power of our content database. these were Links. We are going to switch on some of the functionality that we disabled at the start of the tutorial. 7. and how you can quickly add powerful information display and editing features which will lift your site above what can be programmed from scratch in a few days and let you compete with the major league websites. Adding these features is simple once you have created your structure and this is where the time you spent setting up the structure of your site will really pay off. this could be produced by a competent designer and PHP programmer in fairly short time using a MySQL database. I am going to show you some of the real power of Joomla!. Now. We have already made use of three components in building our simple site for Anytown Zoo. 67 . More powerful templates may have 12 or more positions available for module placement. and your desired design. Contacts and Search.7 Taking it to the next stage In this section you will learn: • How modules add functionality to your site • How to install and configure the standard modules and components which are supplied with Joomla! So far we have built a simple site. It has introduced us to the basics of developing website in Joomla!. and may only have 3 or 4 positions available. which arguably you wouldn’t need a content management system to do. The positions where you can display them on your page depend on your template and what positions are available.1 Modules to add greater functionality You will recall that earlier in the book we explained about components (applications) and modules (functions). Simple templates are more restricted on where modules can be placed. If you go to the Module Manager (Go to: Modules>Site Modules) you can see a list of other modules which are available to you. it’s already included in the standard Joomla! install. We will combine these with the layout functions of the template to enable us to position these new functions exactly where we want them on the web page. You won’t need to install any more software to introduce these functions.

This can lead to confusion with people who are new to Joomla! who think that the Frontpage component has to be used as the home page. Shop as appropriate. It can display them in a single column. It could be designed using XHTML/CSS to add more graphics. or another component e. So when would you want to use the Frontpage component as your home page? The Front Page component dynamically publishes content to the main body of your page according to the rules that you set up.1 Enhancing the home page (and other pages) So far we have produced a very simple home page which just displays some text and a picture. This keeps the home page fresh and regularly changing a very important factor in determining if your viewer are to keep revisiting your site. What the Front Page can do for you The Front Page component can display a summary of both text and images from your content pages. However at the click of a button we can place a module on the front page (and any other pages too) which will make the information on the home page richer. the module Frontpage is installed by default as the first link on the mainmenu and therefore as the Home Page. the first link on the mainmenu module defines the page or component that appears on the Home Page of your website. A-Z or a manual 68 . so the more reasons to persuade them to stay and explore your site the better. Its a fact well known to web designers that the home page is the most important page on the site. Using the Front Page Component As we explained when building our example site in the previous chapter. by a variety of orders such as date.g.7 Taking it to the next stage 7. Its often said that you have just a few seconds to grab the attention of a potential viewer surfing past. or multiple columns in the main body of your site. This is not the case. When you install Joomla! with the sample content provided by the installation program. you can enable these to be shown on the home page without any manual intervention merely by adding the new item of content and clicking the parameter Show on Front Page when publishing the article.1. If however you wish to manually edit the home page using the HTML editor and only make changes occasionally and not as a result of posting new articles then use a static or dynamic page as you home page instead. Therefore if your site is regularly being updated with new articles. tables and more images without using any more Joomla! functions. We chose to use a simple page of content as the home page in our example to keep things very simple.

7 Taking it to the next stage order. save. (Enter the number 1 in the order box in the row of your new menu link and press the floppy disk icon in the header of the order column to save your new ordering). 69 . Your new menu link is shown at the bottom of the list. and press Save. Home). Here’s how to do it: 1. 6. highlight the Frontpage component in the list of available components. To set the parameters of the Front Page display click on the link you have just created from within the mainmenu screen. The parameters controlling the component are now displayed in the right hand column and you may set these as required. NOTE: If this link is to be the Home page it needs to be set as item order 1. NOTE: The front page component is a bit of a misleading name since it can be added anywhere in the menu structure. You can edit these. then view the results iteratively until you are happy with the appearance of your home page. use the Front Page Manager button which is accessible from the Administrator Control Panel. The Add Menu Item :: Component screen is displayed. You are returned to the mainmenu screen. From within the Component box on the top right of your screen select Component (either click the link or select the radio button and press Next) 4. This is important if you want to set up an RSS feed for your site. You control how much or how little information is displayed by a set of parameters. but don’t want to use the Front Page component as your home page. Click the New Button 3. You may now control the order in which it appears on your menu. 5. 7.g. or go to Content > Frontpage Manager. The RSS syndication module function uses the items displayed by the Front Page component to determine which items on your site will be syndicated in your RSS feed. Here you can change the order in which items are displayed on the page (depending on the settings in the component parameters you have set up see below) and you can add or remove items from the Front Page. Go to Menu > mainmenu (or the name of the menu you are editing if different) 2. Give your menu link a name (e. It can also display links to other content. The Front Page component has a second important function. To view the items which are currently included on your Front Page. How to create a menu link to the Front Page Component To use the Front Page component on your site you need to link it to your menu.

1. The class thus generated is blog-yoursuffix NOTE: If you have installed the default content and want to know how to change the parameters for the display of items on the Front Page. Set position to ’Right’ 4. There are a comprehensive set of parameters which can be set to control the appearance of items on the Front Page.2 Latest News As the title suggests.. e. go to Menu > mainmenu and click on the home page link. The configuration screen for this module appears: Site Module: Edit [ Latest News ] 3. Click Published radio button ’ Yes’ 70 . Generally this module is displayed on the home page. -yoursuffix to your Front Page to allow it to be styled individually. This takes you to the screen Edit Menu Item :: Component [ FrontPage ] . The most important items to be aware of are how many articles are displayed the order in which articles are displays and the number of columns which can be used (show example) 7. Click on the link ’Latest News’. To enable this function: 1. this module displays the headlines from the most recent news releases as links in a table. how many to be displayed in columns and how many columns there should be. • How many items you wish to be displays at the full width of the main body of your site. 2.g # Leading. From the Administrator Front End Go to Modules > Site Modules 2. Details of each of these parameters and their effect can be seen by hovering your mouse pointer over the item description e. 3 or more (more than three will make for very narrow columns on most viewers screens) • How many items to show as hyperlinks only • Do you wish to display images on the Front page? You can assign a specific CSS tag suffix e.7 Taking it to the next stage Controlling the appearance of items on your Front Page The parameters which control the appearance of your Front Page are accessed are created when you link the component to your menu. • To control the appearance of your Front Page you need to decide: • How many items you wish to display on the page and in which order they should be displayed.g. From here you can see the parameters on the right hand side of the screen.

From the Administrator Front End Go to Modules > Site Modules 2.3 Popular This modules lists the most popular articles from your website according to page access statistics and displays links to the article Generally this module is displayed on the home page. 71 . In the section marked Menu Item Link(s): . Enter -rightsidebar into the Module Class Suffix field 7. Decide how many articles links you want displayed by this module. we will set it to 3 7. hold down the CTL button and select mainmenu > home and mainmenu > links with the mouse 9. In order to limit the article links displayed to the News category we need to enter the Category ID (a number e. Decide how many articles links you want displayed by this module. To enable this function: 1. Enter the category ID number into this field as shown. 15) which corresponds to the category of the news items 8. It will be styled with the correct CSS styling for the display box ion the right hand column 7. Click Published radio button ’ Yes’ 6.g. If you wish to restrict display of popular items to only those from certain areas of content then you set the category or section Ids appropriately.7 Taking it to the next stage 5. The default is 5. The configuration screen for this module appears: 3. By default the module will display the most popular items according to the page access statistics regardless of which category or section the content items are from. we will set it to 3 8. Site Module: Edit [ Popular ] 4. You can find the category ID number from the appropriate column in the Category Manager. Click on the link ’Popular’. Click the Save button Refresh your website page and you will now have a Latest News display box with up to 5 links to latest new stories which will appear on the Latest News or Home page of your site. Enter -rightsidebar into the Module Class Suffix field 6. If you want to choose from content items in several categories the numbers should be separated by commas.1. The default is 5. Set position to ’Right’ 5.

7. hold down the CTL button and select mainmenu>home and mainmenu>links with the mouse 11.2. with either links and brief summaries (the so-called Joomla! blog format) or in a tabular form.1 How to create Summary Views of your content A common requirement on a website is to create a summary view of multiple pages of content to enable the viewer to select an item to view in more detail.. In the section marked Menu Item Link(s): . possibly with photos • FAQs • a directory • and many more . Note that you cannot change from one style to another.e. In order to provide selective views of this content. 15) which corresponds to the category of the news items 10.2 Creating Views of your content You can create views of your content pages linked to your menu in one of two ways.g. It will be styled with the correct CSS styling for the display box ion the right hand column according to page accesses and displays links to the article 7. .g. In order to limit the article links displayed to the News category we need to enter the Category ID (a number e.7 Taking it to the next stage 9. Joomla! organizes our content in a hierarchical database structured by section and content. 72 . Examples of such views are: • New stories or press releases. with links to the full story • List of products or services with a brief descriptive paragraph and image and a link to the full description • a summary of documents in a library • a list of staff . ordered and displayed to our requirements we use a component which Joomla! calls a Blog view. Click the Save button Refresh your website page and you will now have a Popular Items display box with up to 3 link3 to latest new stories which will appear on the Links or Home page of your site. In my opinion the use of the terminology Blog in Joomla! is confusing since this term immediately suggests (to me at least) a specific application of this type of content .. you have to create the section again if you don’t like the results.

Links to 4 This enables up to 6 single column articles with summary text. To do this: 8. Enter Name: ’The Animals’ 5. and we build a view when we create a new menu link. and you can move the link to be a submenu link of another menu item if required. You do this by creating a menu item. or from one or more categories. Click Save Let’s look at this in a bit more detail in our Anytown Zoo demo site. and 4 with links only 11. Click on the menu link for animals. Leave all other items unchanged at this point 7. and you can decide whether it will 73 .e. The Main Menu is the core element which links our website navigation structure together. Go to: Menu > mainmenu 2. 1.7 Taking it to the next stage namely a personal journal or Weblog. the category of content items which are used to select the items for viewing. For this view we decide to have a single column with one animal per line. Click on The Animals content link 10. Select ’Category: Website Content / Services’ 6. Select Blog Content Category 4. Click the large Save button Reload the browser window showing your site and you will see your new animals menu link has been published to the site. From here you have a few editing options for this link: you can change the name of the link which shows on the menu. You can also choose to ’unpublish’ the link (i. This brings up the Edit Menu Item :: Blog Content Category screen. Click the New Button in the button bar 3. Intro to 6. Columns to 1. Here’s how we did it: 1. 3. hide it without deleting it. Set # Leading to 0. The Joomla! Blog view is a much more powerful tool and is not to be confused with a Weblog. You can create a summary view of content from one or more sections. You will recall we created a summary (Blog) view of the animals category in our Zoo website in Chapter 5. Go to: Menu > mainmenu 2. which can be either a top level menu item or a sub menu item. Go to: Menu > mainmenu 9.

5. or a URL. i.g. You can put any string you like as the suffix. e) Finally there is an option to specify a CSS suffix to enable this page to be given a unique styling via the template stylesheet.e. There is a huge amount of flexibility over the presentation of the summary view with more than 25 display parameters for the Blog view which may be set. e.1 74 . and Links (how many items to show as links to content at the bottom of the page). However you can’t decide to use a section to select items. The best way to understand this function is to experiment. if we add the suffix ’-animals’ in this parameter field we will get the unique CSS classes shown in Table 7-x. In particular you can control the following attributes of the display: a) The number of columns into which summaries are placed. access control. Create about 10-12 content items in one category and then change the various parameters and look at the results) b) You can choose whether to allow images embedded in the content item to be shown in the summary view (MosImages) c) You can choose the display order in which summaries are shown from a wide variety of options including alphabetically. Intro (the number of summaries shown e. or you can manually set the display order using the ordering option in which case the items displayed will follow the order which you specify from within the Content Manager. If you do this you will need to add style(s) to the CSS stylesheet to make use of this feature. See the example in Fig 7. A-Z or Z-A. a single content item link. 4. most or least recent. By default Joomla! creates a couple of full page width summaries and then starts placing content summaries into two columns. Click Save to confirm your changes. only registered viewers. d) You can also choose whether to view text information associated with the category (which is entered via the category manager). If you want to do that you must delete the blog link and create a different menu link item of the type required. or only special viewers (e. and Display ID & Class details to get a view of your page with the CSSboxes and table elements with their associated classes.7 Taking it to the next stage be available to all viewers.g 6. Columns (how many columns to put summaries in after the Leading articles have been shown full page width) . for example. Choose the options Display Block Size. TIP: You can check the CSS for any page by using the Web Developer plug in for the Firefox browser. and to override the global settings on the display of icons and links and descriptions. by author. Each parameter has help text describing it’s function which you can view by hovering the mouse over the dotted underlined link. and you can’t change the link to a different type of item. back end users).g. You can override these settings by changing Leading (the number of items which are displayed single column). before only the headline link is shown).

1: Example CSS styling displayed by Firefox Web Developer plugin 75 .7 Taking it to the next stage Figure 7.

most of the Joomla! table options are switched on.contentpaneopen-animals . no description text is shown.2. Click on News Table content link. If you have a lot of entries in the table. Leave all other items unchanged at this point 7. You can do this using Table Headings. Go to: Menu > mainmenu 2. Select ’Category: Website Content / News’ 6.2 shows the table which is displayed when you click on the link. There are a wide range of parameters which can be set to control the appearance of the table. Fig. You can also choose to hide the Date. Select Table . 10.1: Controlling the Blog page CSS styles 7. Navigation Bar.Content Category 4.componentheading-animals . Author and number of hits.readon-animals Description A class describing the heading of this page A class enclosing the entire Blog content summary A class enclosing the individual item The read more link class Table 7.7 Taking it to the next stage CSS class . only a link to the content item.blog-animals . Click the New Button in the button bar 3. Display Number and Filter. together with the optional information of Date.Order Select. the date of the content item is displayed in a long format which may give a greater visual emphasis to the date than you want.2 How to create Table Views of your content As an alternative to a Blog view. In this view. Go to: Menu > mainmenu 9. then the ability to sort and filter the table via the controls in the table headers are very useful. 7. Display Select. however for a small table you may wish to switch off some of the functions. 11. Click the large Save button Reload the browser window showing your site and you will see your News Table menu link has been published to the site.Content Category screen. By default. to view the Edit Menu Item :: Table . Let’s refine the appearance of the table to our requirements. By default. We have a full set of parameters which can be adjusted for the Table view. You can set the date 76 . Enter Name: ’News Table’ 5. 8. Here’s how to add a table view to our Zoo website: 1. Author and Hits columns if you wish. you can create a Table with links to content pages from one or more sections or one or more categories.

and to display descriptive text from the category description. Finally as with the Blog view you can define your own CSS classes for this table using Page Class Suffix.g. to set the format to Thu.7 Taking it to the next stage Figure 7. and an image if needed. You may wish to hide these links by setting Other Categories = Hide 14. 12. By default it also displays links to other categories. as this table is not part of the final website. Click Save 77 .php. e. and set Access Control. %d %b %g into the Date format field.2: A Table View of the News articles style format using the Date Format parameter. When you have finished experimenting with the table. a full list of which can be found here strftime parameters http://uk2. This is done using the parameters of the PHP command strftime. 19 Oct 06.2 shows a summary of the most relevant date parameters.net/strftime/. set Published = No. 16. See the full command parameter link for the full set of options. 15. Table 7. You can always switch in on again if you want to experiment some more with tables. insert the parameter string %a. 13. The Table view also allows you to set the order in which links are displayed.

and operation of your site.2: Date Format parameters (strftime) 7. Normally these can be the same name.it will be blank with no menu links Creating a new menu link You create a menu link by selecting one of the existing menus.g mainmenu.3 Building Menus to structure your site The menu builder is the key to controlling the structure. Click the New button 3. navigation.same as %m/%d/%y %Y .m. Creating a new menu You create a menu using the Menu Manager 1.7 Taking it to the next stage Parameter %a .abbreviated weekday name according to the current locale %A .time in 24 hour notation Table 7. Enter the names footer. and p.m. and time spent understanding this function now will pay dividends later on when you are working out a website design so that you know what layout design tools you have available. Click the Save button 5. footer 4. let’s create a footer menu for our Zoo site.full month name according to the current locale %d . The first name is the name Joomla! uses in PHP code to refer to the menu.time in a. bringing you to the Menu Manager [ mainmenu ]. the second the name you use in the Site Module and Menu Manager sections.month as a decimal number (range 01 to 12) %r . You can now go to Menu > Footer to edit your new menu . You should now type in the name of the new menu. via Menu > mainmenu.abbreviated month name according to the current locale %B .year as a decimal number including the century %m .day of the month as a decimal number (range 01 to 31) %D . notation %R . For example. Then you 78 . e.full weekday name according to the current locale %b . Go to Menu > Menu Manager 2.

79 .which can be on your site or outside e. you can: • Link to a page (dynamic or static. NOTE: Joomla! IDs Sections. Front Page . etc) • Link to a contact page (contact us) with specific contact information • Link to an external Newsfeed e. a so-called Table or Blog view • You can link directly to a Component. and so on. e. The views can either be purely links.g. Each menu link type also has associated parameters which control how the link is processed and the information displayed on the resultant screen. Note: There are only limited options to change the menu link once it is created. or a third Party component such as Shop or Forum • Or you can embed an eternal URL in a page on your site. Content Manager. I recently did this for a Share price feed from the London Stock Exchange for a Business client. Contacts. e. e. if you create a Blog view of a data category called News. you must delete the original menu link using the Menu Manager. Search. A-Z.g Section or Category Manager.uk • Link to various summary views of multiple dynamic pages.7 Taking it to the next stage create a new menu link item by clicking the New button. Menu items are all given individual IDs by Joomla! when they are created. and build a new one to the correct type of data display. individual Content items. You can link to a content item. or link plus intro text (the text in the Intro text part of the page) with a read more link. BBC Sport CSS XML feed • Link to a URL . if you get it wrong or change your mind later. then you must delete the link and rebuild it.g. www. About. by latest date. and then decide you really wanted a Table View of a section called News. Privacy Policy. To find the ID use the appropriate manager tool.g Login.3 shows all the different ways you can display and link to content and components from a menu. Different ways to link and display information from a menu There are 19 different types of menu links that can be created. Table 7.g. From a casual viewers point of view it is not clear that this part of the page is from an external URL. or filter the output of a table or Blog view by using this ID.yahoo. using the Wrapper link (or iframe).co. In summary. For example. sorted in a variety of orders. Terms & Conditions. Categories.

Weblink Category Component .Newsfeed Category Table .Newsfeed Link . selected by category A link to a summary view of archived articles.Component Item Submit .Content Section Archive List . “———” Embed an external web page via an iframe into your site Link .Content Category Table .Contact Item Link .Content Category Blog . selected by category A link to a summary view with article intros and ’read more’ links.Content Item Description A link to a dynamically generated page or article. phrase or spaces e.Content Section Blog . selected by section A link to a summary view of archived articles. the page must exist before you create the menu link item A link to a contact record.3: Summary of Menu Link Options 80 .Front End interface Link .7 Taking it to the next stage Menu Link Type Link .URL Blog .Content Section Table . the contact must exist before you create the menu link item A link to an external Newsfeed (RSS / XML feed) A link to an internal (within your site) or external URL on the web A link to a summary view with article intros and ’read more’ links.Content Category Archive Blog .Content Separator / Placeholder Wrapper Table 7. with intros and ’read more’ links. with intros and ’read more’ links.Contact Category Table .g. selected by section Display a list of the categories in the selected section Display the Title links only from a category Display the Contact links only from a category Display a Table of links to external newsfeeds in the chosen category Display a Table of external web URL links in the chosen category Link to the ’Home page’ of a Component Link to the home page of a component which is already linked into the menu elsewhere POST content into the database (used for Front End editing) Insert a dummy un-linked word.Static Content Link . the page must exist before you create the menu link item A link to a static generated page or article.

81 . Now we can enter submenu items 9. Leave all other items unchanged at this point 16.7 Taking it to the next stage Sub menus Beneath each menu item you can create one or more levels of sub-menu. select Visitors. Click the New Button in the button bar 3. Click the large Save button 17. Opening Times and How to find us) in the new Visitor category. Go to: Menu > mainmenu 10. Go to: Menu > mainmenu 2. Select Link . In the Parent Item list. Let’s add a Visitor Section on our Zoo site and show how to create sub-menu items beneath it.Visitors/General Visitor Page’ 6. Select ’Website Content . Select ’Website Content . Enter Name: ’Admission Prices’ 13. First we create a new category called Visitors (see Chapter X) Next we add some Visitor Pages (General Visitor Page. For example.Visitors/Admission Prices’ 14. You have now successfully created a menu item with 3 sub menu links beneath it. Click the New Button in the button bar 11. This is how you set this menu link to be a sub-menu and tell Joomla! that you wish it to appear under the Visitors main menu link 15.Content Item 4.Content Item 12. Select Link . page links are used here for simplicity) Then we create the Visitors Menu Link 1. on a larger site you might wish to have Products as a top level menu item and beneath that have individual menu items for different product ranges. Click the large Save button 8. Repeat steps 9-16 to add two more submenu links for Opening Hours and 18. Leave all other items unchanged at this point 7. Enter Name: ’Visitors’ 5. Admission Prices.3. you can link any type of content or component to a submenu link as shown in Table 7. (Note.

You can also add a CSS module class suffix to create unique styling classes for this module display 8.4 Banners Advertising banners are easily managed by this module. 9. The Banners function consists of two parts. From the Administrator Front End Go to Modules > Site Modules 2. and a Component which is used to create and manage individual clients and banners. The Banner Client parameter enables you to restrict the banners shown by this module to a single client by inserting the client ID number (look this up manually from the Banners Component display and insert it. The menu suffix allows individual list items (li) to be styled. If you want to display more that one banner on your site then you will need to create a copy of the banner module for each location in which you want to display it. You do this using the Copy function from the Module Manager. but this doesn’t make much sense). Banners are normally set to Public. then you need to use a 3rd party component called Extended Menu (see Chapter 8 Section 5 for details) since the standard Joomla! Menu is not sufficiently flexible.by adding a module suffix and a menu suffix. Set position to ’banner’ (for example) 6. Styling Menus with CSS The menu module provides two options to generate specific menu classes. 7. in the left or right hand column which only appear when the appropriate link on the Top menu is pressed. a Module which displays the banner on your site. If not set then any banner from the published list will be displayed here) 82 . User access can be set to Public or Registered (you can set it to Special too.7 Taking it to the next stage NOTE: If you want to create a ’split menu’ using for example a horizontal Menu as the top level menu and sub menus. Click Published radio button ’ Yes’ 7. The configuration screen for this module appears: Site Module: Edit [Banners] 4. Click the ’Banners’ link 3. To display a banner on your site (we will add one for the Zoo as an example) 1. Click Show Title ’No’ 5. Note: The banner artwork needs to be created in a separate graphics program such as GIMP.

Click the New button 13. 8.7 Taking it to the next stage 10. 11. ’Elephant Rides’ 14. We will upload the pictures for our site into the ’Banners’ folder. If all is well. 1. client contact and email address. Finally you need to tell Joomla! which menu pages the Banner should appear on . highlight the relevant file and click on Open. From the Administrator Front End Go to Components > Banners > Manage Clients 2. To do this first select the folder ’Stories’ using the pull down menu option Directory within the Media Manager file display area. 10. 9. Press the Save button 5. You don’t need to put anything in the notes field.g. Click the New button 3. 6. Now you need to upload the banner graphic via the Media Manager. Click show Banner = Yes (This publishes the banner) 18. Press the large Upload button in the button bar and wait while the image is uploaded. Press the Save button You now need to set up at least one client and one banner in the Banner Component before Joomla! will start to display banners. Tick Unlimited impressions (unless you are selling a specific number of impressions in which case the enter the number here) 16. Navigate to the folder where you have stored the banner graphic(s). Select the banner graphic you have uploaded using the Banner Image Selector. and then click on the Browse button. leaving the file path inserted in the file upload field next to the browse button. 4. Go to Site > Media Manager 7. This brings up a file upload window on your PC. Select Client from the pull down menu. Enter a URL to the page on your site or on the advertisers site where the user should be redirected when they click on the banner 17. 83 . you new banner graphic will appear in the banner image space. Now we need to add the banner in the Banner component From the Administrator Front End Go to Components > Banners > Manage Banners 12. Give the Banner a name e. Enter the Client name. Anytown Zoo 15. The file upload window closes.we will select All from the Menu Item Link(s) list 11. This may take a while depending on the speed of your connection and the size of the file.

a Module which displays the poll on your site. The configuration screen for this module appears: Site Module: Edit [Polls] 4. Click Published radio button ’ Yes’ 8.7 Taking it to the next stage Note: if the banner is missing check that you have loaded it to the banners subdirectory/folder in the Media Manager. You can also add a CSS module class suffix to create unique styling classes for this module display (see Chapter 10) 9. 7. To display a poll on your site (we will add one for the Zoo as an example) 1. Joomla! will rotate these across your visitors page views. From the Administrator Front End Go to Components > Polls 2. 1. If you have multiple banners. Tell us what you think 5. Click the New button 84 . 19. Enter a Title for the Polls e. but this doesn’t make much sense). The Polls function consists of two parts. Press the Save button Now we use the Polls component to set up your first poll. To hide the banner go back and select show Banner = No.g. 10. Click Show Title ’Yes’ 6. Set position to ’Right’ (for example) 7.5 Polls Want to know what you’re audience thinks about important or trivial topics on your site? Joomla! makes it easy to add an online poll feature and to customize it to your requirements. User access can be set to Public or Registered (you can set it to Special too. or unpublish the Banners Module in Module Manager. Press the Save button You have now published your first banner. Finally you need to tell Joomla! which menu pages the Poll should appear on we will select mainmenu | Home from the Menu Item Link(s) list 11. From the Administrator Front End Go to Modules > Site Modules 2. Click the ’Polls’ link 3. and a Component which is used to create and manage individual polls.

g. A couple of examples are the Joomla! site itself (we have a Joomla! news feed on the Learn Joomla! site) and the BBC’s news site. Latest Joomla! News 85 . You can add more polls later. together with a number of responses (up to 12 allowed) For the Zoo demo we suggest: Title: How often do you go to the Zoo? Options: Every week Once a month 2 or 3 times a year Once a year Rarely Never 4. The configuration screen for this module appears: Site Module: New 4. Enter a Title for the Module e. From the Administrator Front End Go to Modules > Site Modules 2. or you can simply display one of more links from an RSS feed at a suitable place on your site. Now enter a Question (title) for your poll.6 Incorporating external Newsfeeds into your site Newsfeeds are a great way of getting regularly changing and up-to-date information onto your site with virtually no effort or cost at all. Select Published = Yes 5.7 Taking it to the next stage 3. NOTE: Always check the terms and conditions of newsfeeds before adding them to your site in case of any restrictions which might result in issues with the copyright owner at a later date There are two ways in which you can incorporate these links. to keep the site up to date. Display a Newsfeed directly on your Home page To display a newsfeed on the home page (or any other menu item) of your site: 1. and unpublish this poll. Many websites provide RSS XML feeds of regularly updated links from their site which you can add to your own to provide additional appropriate content. You can have a whole section of external information feeds using the Newsfeed component. 7. They can provide an important way of keeping your site fresh and encourage more traffic. Click Save Your poll is now showing live on the site. Click the ’New’ button 3.

The remaining parameters control how the RSS feed will appear on your site. TIP: If you click on the orange RSS button on site which provide an RSS feed. You can also decide whether to just show the link. I recommend that you experiment with switching the various newsfeed parameters on and off and view the results in order to work out what is best for your site. Simply highlight this complete link and then copy and paste it into the RSS URL feed field in the Site Module: Edit screen 12. 10-12 generally works pretty well. we will set it to 3 10. 13. The default is 5. Click Show Title ’Yes’ 6. your browser will display the XML associated with this field and the http:// link will appear in the URL window at the top of your browser.7 Taking it to the next stage 5. In general if you take a look at the HTML code generated by the Joomla! page with your newsfeed embedded you can identify the CSS class tag and then add a suitable CSS style in your style sheet (go to Site>Template Manager>Site Templates. Click Published radio button ’ Yes’ 8. There is a specific newsfeed CSS tag called ’newsfeed’ which can be used to do this. Enter -rightsidebar into the Module Class Suffix field(if using the LJ template) 9. Whether you choose to do this will depend on the specific newsfeed and how much information they provide. or the associated description as well. Decide how many articles links you want displayed by this module. You can choose to display the syndicated title. 86 . select your template and click edit CSS) Using the Newsfeed component If you want to give your users access to lots of different newsfeeds from your site. Set position to ’Right’ (for example) 7. You now need to enter the RSS URL into the newsfield box in its entirety (including the http:// bit) 11. image and description if you choose (I often find that these are unsuitable for my site so I generally switch them off and set my own title for the feed (see 4 & 5 above). then the newsfeed component is the best solution. Press the Save button and your done TIP: Newsfeeds are often supplied with bulleted styling which may not suit your site. Writing some specific CSS to style the newsfeed can improve the presentation enormously. If you do display the description associated with each link you can choose to truncate it to a smaller number of words.

You can provide a title and descriptive text for your newsfeed links page and there is a CSS tag to allow you to provide unique stying to this newsfeed table and the associated newsfeeds if required. Go to Components > Newsfeeds > Manage Categories 2.7 Taking it to the next stage You need to create a link from your menu to the newsfeed component and then set up each feed individually. Repeat steps 4-7 for each new feed that you wish to add 9. Now you can set up your newsfeed RSS links. Set the number of articles that you wish to appear on the feed summary page. highlight the category (e.g. and press Save. Go to Menu > mainmenu (or the name of the menu you are editing if different) 10. Click New.g.g. As described above collect the full RSS feed links (including the http:// bit) that you wish to add to your site. this brings up the Category: New [ Newsfeeds: ] screen and then give the category a Title and an alias (e. Make changes as required to newsfeeds (edit using Components > >) and CSS until you are satisfied with the results. Newswire). Go to Components > Newsfeeds > Manage Newsfeeds. 13.g. Now you need to link the newsfeed table to your menu. Go to your site preview. Click the New Button 11. 6 7. From within the Component box on the top right of your screen select Table Newsfeed Category (either click the link or select the radio button and press Next) 12. Click Save 8. externalnews) and press Save 3. The Add Menu Item screen is displayed. I recommend that if you want to provide access to a few newsfeeds (up to 20-30) that you create a single newsfeed category and display these in a table. externalnews) in the list of available categories. Give your menu link a name (e. but I feel this will be overkill for most websites. Here what to do: 1. e. The newsfeed component is capable of managing a huge number of newsfeed links in multiple categories. and click New 5. refresh and click the new link in the menu you have created to view the newsfeed table 14. Give the newsfeed a name (this is the only description which will appear in the table of your newsfeed links so make sure the wording is suitably descriptive) 6. 87 . You also need to set up at least 1 category of newsfeeds before you can start entering individual feed information. 4.

Set the module to be published and the position required (e. You can change the title and add a description displayed above the Syndicate button 11. To offer RSS syndication you need to configure the syndication component and publish and configure the syndicate module. To do this you must use the Front Page component. or go to Content > Frontpage Manager. Setting the word count to 0 will ensure that only the headline link is syndicated. without the users having to visit your website. Here’s what to do: 1. Now go to Modules > Site Modules and click the Syndicate link 9. Go to Component > Syndicate 2. Click the Save button Your site is now being syndicated and can be read by RSS newsreaders! 88 . Decide how many items you want to syndicate it is unusual to syndicate more that 10 items but it depends how often your site is updated 6. Any article which is published to the Front page will be linked on your RSS feed. Set the order in which the links will be displayed this can be different to the Front Page ordering. As well as providing information from others sites on your website using RSS feeds. use the Front Page Manager button which is accessible from the Administrator Control Panel. Click the Save button 8. although it doesn’t need to be linked or published for the RSS feed to work. 10. Enter a Name. 4. Left) and the CSS suffix (-rightsidebar). particularly if your content is regularly updated.g. Decide if you want to syndicate the whole article or just the first 20-30 words and enter the setting accordingly.7 Taking it to the next stage 7. Ensure that caching is enabled 3. and could be most recent first (typical setting) or possibly the articles with the most hits (most popular) 7. 5.7 Syndicating your site Syndication means that content from your site can be published on other websites or read using suitable RSS newsreaders. you may also want to provide an RSS feed yourself. This information will be delivered to the subscriber as a ’header’ to the list of articles. To view the items which are currently included on your Front Page and hence will be included in your RSS feed. Description and an image (typically a logo/button) if required.

txt to .co.uk/content/blogsection/3/39/ (This is the ’SEO friendly’ version of the URL above) 6. To make this take effect. 5. contact your hosting provider or systems administrator.htaccess. If so.learnjoomla. 1. or from the Administrator Control Panel home page click the Global Configuration button.learnjoomla. Click the Save button There are also a range of more powerful 3rd party SEO extensions for Joomla! which can assist you in further improvements to SEO positioning.co. Depending on the way in which your hosting server is configured. e. This is an Apache webserver directive. Click the SEO tab 3. Select Search Engine Friendly URLs: = Yes 4.8 Optimizing for Search Engines & Short Links By default Joomla! generates a fairly long and meaningless (to the average user) URL for its web pages. you may get an 505 server error when you change this filename. 89 . and change it back temporarily.uk/index. and ’friendlier’ static links.php?option=com_content&task=blogsection&id=3&Itemid= In order to generate more meaningful links (to include in printed material for example. 2. http://www. If the change is successful. While you are on the SEO tab. without SEO: http://www. as well as getting better search engine listings) you can change a setting in Global Configuration. you will now get a more search engine friendly ’static’ URL.7 Taking it to the next stage 7. Here is an example for the FAQ link on the Learn Joomla! website. you can also choose dynamic titles for your pages 7.g. Go to: Site > Global Configuration. you also need to rename a file in your root web directory called htaccess.

e-Commerce and Gallery & Multimedia. visit http://extensions. such as a forum or picture gallery. pieces of software to allow Joomla! and another application. Communication. while other extensions are what’s known as bridges. there is a good chance someone has already written an extension to do the job. meaning that whatever your requirement. to be installed together and share visual styling and user management. and so I have decided that these fall outside the scope of this beginners guide. The directory is divided into sections such as Banner Ads & Affiliates.what else) which is a searchable and browseable directory of extensions divided into categories. Some of these are written specifically for Joomla! and are very easy to install. Now we come to the most exciting part of working with Joomla!. At time of writing there were over 1.org. 90 . making use of the huge 3rd party development effort that has built up around this software.8 Using 3rd Party Add-on Components and Modules In this section you will learn how to: • Find out about third party software plugins and install them to extend the ca- pability of the standard Joomla! installation • Build a shop • Install a forum • Extend the capabilities of some of the standard Joomla! components • Operate a mailing list • Use 10 tried and tested extensions to expand your site capability • Where to go to learn more So far. all the features and functions that we have used have been built into the standard Joomla! installation. The larger components are full blown applications in their own right.000 extensions in the directory. almost all of it available for free and open source. The site features user ratings and reviews which are particularly useful in drawing up a shortlist to evaluate in view of the total number of extensions available.joomla. To get an idea of the total number of plug in extensions available for Joomla!. Installing these large applications and integrating them with Joomla! is fairly complicated and not easy for a beginner. This is a great site (built in Joomla! .

8. We will learn how to download. These are: • An online Shop: VirtueMart • A forum: JoomlaBoard • A Document Management application: Docman • An email newsletter: AcaJoom • An enhanced Menu builder module: Extended Menu NOTE: Most of the software applications described here are developed by individuals or small teams working at their own expense. install and configure a few of the most popular types of third party applications. CAUTION: Remember we are working in the Open Source world. It is built and maintained by Soeren Eberhardt and published under the GPL. inevitably some of the extensions are of variable quality. Building an ecommerce online shopping site is a really a book in its own right so we will take you as far as getting the application running and installed on your site and 91 . There are many software packages both commercial and open source to help you set up an online shop. Virtuemart can be used to sell both physical products and downloadable products such as eBooks and software. and I strongly advise you to test and evaluate any third party extension on a test server. You get all the Joomla! tools and features to provide a support environment to your shop. I then also recommend another ten extensions which are tried and tested. please consider making a small donation to help support their ongoing efforts. Virtuemart is used to run the LearnJoomla! shop that you used to buy this eBook. which makes building your shop very quick and easy to create and maintain. If you use the application and find it useful.1 Building an online Shop Selling products and services on the Internet is one of the most popular applications of a website. A great deal of the software is excellent. The component that we are going to use to build our shop is called VirtueMart. before using it in earnest with a live website. The big advantage of using Joomla! to set up your online shop is it’s very easy. but some has a few rough edges. All the extensions chosen a open source.8 Using 3rd Party Add-on Components and Modules I have therefore selected a small number of powerful 3rd party applications which are designed to be easily installed in Joomla! for the subject of this chapter. Virtuemart is an excellent solution for small or medium sized online stores. and applicable to a wide range of sites.

NoChex or WorldPay. which at time of writing was 1.winzip.8 Using 3rd Party Add-on Components and Modules then suggest that you read the excellent documentation supplied by Virtuemart to complete the fine tuning of your shop. to enable encrypted communications. Only get the stable version as development versions are not suitable for running a production ecommerce solution.4Mb in size. When the file has completed downloading. We want the latest stable version of the software. Login to the Administrator Control Panel 5. and you should also get an SSL certificate for your site. The file is approximately 1. 3. Here’s what to do: 4. Click the browse button and navigate to the folder/directory where you unzipped the Virtuemart files 92 . NOTE: If you are planning to take payments online you will need to have a merchant account such as that provided by Paypal. although there may be a more recent release when you go there.net 2. Getting Started First of all we need to download and unzip the latest files from Virtuemart.tar. WARNING: Do not attempt to install the downloaded ZIP file using the component installer before unzipping it as this will fail When you have unzipped the file you will have a folder/directory containing the following files: One component (com_virtuemart_1.com) or open with the compressed (zipped) folders tool included in Windows XP file Manager. Go to http://www.x. but they are not essential to correct operation of the shop.x. The other modules provide additional functionality as shown in the table and can be installed if your require these functions. you must unzip it using a tool such as WinZip (30-day evaluation version available free from www. 1.gz) One main module (mod_virtuemart_1.07. Go to Installers > Components 6.0. Click the download button and save the ZIP file to your local PC.gz) Eight additional Modules Two Mambots The component and the main module must be installed as the minimum requirement for the online shop to work.tar.0.virtuemart.

tar. The module should now be successfully installed. Give your menu link a name (e. 93 .xx is the version no of the file you downloaded) and click ’Upload module’. 1.gz (where x. Go to Installers > Modules Click the browse button and navigate to the folder/directory where you unzipped the Virtuemart files Select the file mod_virtuemart_x. 8. Now we need to create a menu link to the store component and place the shopping cart module on our home page and others as required.tar. You can now choose to complete the installation with sample data installed or with no data.gz (where x.xx. Installation of the Virtuemart shop is now complete Note: If the VirtueMart main module is not published.8 Using 3rd Party Add-on Components and Modules Select the file com_virtuemart_x. you will see a "Welcome to Virtuemart" screen. From within the Component box on the top right of your screen select Component (either click the link or select the radio button and press Next) 4. Click Go Directly to the Shop > > to complete installation without sample data Click Install SAMPLE DATA > > to complete installation with sample data 9. DO NOT be tempted to press any other buttons until it completes as this could result in a faulty installation. Click the New Button 3. 10.g. This final step will take a little while. Shop). Next we have to install the main module. (30 seconds or more) depending on the speed of your server.xx. 11. VirtueMart will not work properly. and next it needs to be published Go to Modules > Site Modules Click the module entry for Virtuemart Module Select “Published? = Yes” 12. You will now see the main Virtuemart control panel which has been installed into the Joomla! Administrator. which is required to browse the categories and products. This will take a little while depending on the speed of your connection. and press Save. 7.xx is the version no of the file you downloaded) and click ’Upload Component’. Press Save. Go to Menu > mainmenu (or the name of the menu you are editing if different) 2. If the installation has worked properly. The Add Menu Item screen is displayed.

From the Administrator Front End Go to Modules | Site Modules 2. Generally this module is displayed on the home page and the shop home page as a minimum. The configuration screen for this module appears: Site Module: Edit [ Virtuemart Module ] 3. Click Published radio button ’ Yes’ 5. Then select the information display parameter you wish to set for the module. refresh and click the new link in the menu you have created to view the Shop. Enter -rightsidebar into the Module Class Suffix field 6. including changing the name of the module to Shopping Cart or Shop for example. I will just give you a basic guide to the keys steps here you will need to make the detailed decisions as to what content to enter. Allow enough time to get it right and don’t expect to be able to do it all in 15 minutes! Go to the Virtuemart horizontal Administration Menu Components > Virtuemart 94 . Note that you are creating a shop here with all the commercial decisions and legal requirements of a physical store. so you will need to have done your planning.8 Using 3rd Party Add-on Components and Modules 5. research and preparation to get this right.. Click the Save button Refresh your website page and you will now have a display box with summary details of your shop in the right hand column 8. You can customize various parameters which control the information displayed by the module. Set position to ’Right’ 4. To enable this function: 1.1. Under Pages / Items select all the pages you wish the Virtuemart module to appear on 7. Go to your site preview. 8.1 Setting up your shop We need to set up some basic configuration for the shop before we can start entering the details of our products. This module displays the contents of the users shopping cart and links to the categories of your store. Now we need to publish the shopping cart or basket module. Click on the link ’Virtuemart Module’. NOTE You can make the Virtuemart component your Home Page by setting it to be the first item in your menu if your site is predominantly a shop.

com.1. From here you control the way you want your shop to work. Note that if you have a very large product catalogue there is a facility to import your listing from an external database using . but if you need help you should contact your web hosting company.csv format.yourdomain. The shop will not work correctly until at least one category is defined. whether you want to sell downloadable or physical products and the method(s) of shipping. e. 8. British Pounds are set correctly. appearance and URL.8 Using 3rd Party Add-on Components and Modules 1. Contact Details and your Currency. Go to Store > Edit Store and work through the form to enter the details of your shop. When you have your secure URL link for your site you should enter it in Admin > Configuration via the Path & URL tab and enter it is the SECUREURL field IMPORTANT: In order to secure your website when collecting customer details you should have a secure website with an SSL certificate to enable you to set up https://shop. Go to Products > Use CSV Upload. 1. Virtuemart uses the categories to display a top level view of your store so think carefully about how your customers will want to browse your store and define the categories accordingly. Go to Admin > Configuration. This will take some time for you to set up fully and you will need to think carefully about how you want your shop to trade. Go to Tax > Add tax rate and add the correct tax rate according to your country. Setting up a secure webserver is outside the scope of this book. 3. 2. this function is not performed by 95 . You will need an image of your store’s logo which will be added to various display screen invoices on the website and emails and you will also need terms and conditions which are added in this page. Go to Products > Add Product and add your products one at a time. together with a Description of your store. Go to Products > Categories > Add category and set up at least one category for your products to be organized under and publish them. To get going now put in as much information as you can and make sure your email address and the currency and currency display style e.g. 2. they can be added later by going back and editing the store. You will enter basic Store Information. Artonezero are one such company that provides secure Joomla! hosting at reasonable prices. repeating this step for as many products as you need. Don’t worry if you don’t have these items now.2 How to take payments On-line In order to take payments online you will need a 3rd party payment processing company to handle the credit card payments for you.g. the features which you want to enable or disable.

2. You will see a view entitled Payment Method List. and the ones that are currently supported by Virtuemart are shown at Store > List payment methods. ePDQ. Only the methods that you have selected will be presented to the customer when they complete the checkout procedure to pay for the items in their shopping basket 7. It is possible to write scripts for payment processing companies not on the current list and you are referred to Virtuemart’s website for more details. In which case you should select these methods too. The choice of payment company to process credit and debit card payments is a commercial one and the use of NoChex and Paypal not meant as a recommendation. select the configuration tab. Payment methods which are accepted by your site are indicated by a green tick in the Active column of the table. Once you have set up one or more payment processor accounts you are ready to go to step 2. Depending on your business. a British payment processing company. We will select Paypal and NoChex. to handle it’s payments. Before you can set up payment processing in Virtuemart. you may will to take orders on account. or cash on delivery in addition to accepting credit card payments. Click on the Button marked List Payment methods 4. a) Now enter your Paypal email address (the exact email you use to login to your Paypal account) 96 . 6. 5. Verisign and others. and ensure that all other methods are deselected. Go to Components > Virtuemart This takes you to the Virtuemart Control Panel 3. but it is by no means exhaustive. If you do not have an online payment processing provider already. you will want to research the options available. together with Paypal and I will show how to set up your shop to use NoChex and Paypal to handle payments as examples. How to take payments with NoChex and Paypal 1.8 Using 3rd Party Add-on Components and Modules Virtuemart. The Joomla! Payment methods suppliers list is a good start. Now click on the Paypal link on the List Payment Methods screen. On the payment method form. these just happen to be the companies which Learn Joomla! uses to process payments for it’s ebook. The LearnJoomla website shop uses NoChex. or switch it off by clicking on the green tick. You can switch on a payment method by clicking once on the red cross in the active column. These services are offered by a number of companies. you need to have set up a Seller’s account at the payment processing company of your choice. The method is very similar for WorldPay.

8. When customers now complete their checkout from the shopping basket. you are now able to accept payments from your website. they will be offered Paypal or NoChex as the payment options.8 Using 3rd Party Add-on Components and Modules b) Set the status which will be returned depending on whether the payment is successfully made: i. Order status for successful transactions = Confirmed ii. You are now able to process NoChex payments via your shopping site 10. If you supply a 97 . See the Virtuemart documentation for more details d) You will see below the script which is executed when a payment is requested. On the payment method form. once the payment has be accepted the customer is returned to the download page for the product 12. click on the NoChex link from the List Payment Methods screen. Decide if you want to accept payments from Unverified buyers c) There is also a test mode which can be used to carry out test transactions. Order status for failed transactions = Cancelled iv. You will then see exactly the process as viewed by the customer. c) Press the Save button. You should consider carefully the security of your server before doing this. do not change the settings on the initial screen. Do not change this unless you are a competent PHP programmer. 11. Congratulations. and can encourage regular traffic onto your site. and as a minimum ensure that you have an SSL certificate installed on your server for the transaction to be encrypted. To add NoChex. I normally set up a product in the shopping basket for a nominal £1 or 1 EUR to do the test. Order status for pending payments = Pending iii. You are now able to process Paypal payments via your shopping site 9. 8. exchange views and ideas.2 How to add a Forum to your site A forum is a great way of providing a community for your users to meet. If you are selling a downloadable product. a) Enter your NoChex email address in the field provided (the email address you have elected to accept payments on) b) NOTE: The NoChex method requires you to store customer credit card details on your server. I now strongly recommend that you carry out a live payment test on your site before you release it to customers. Select the configuration tab. Press the Save button. and that you put in place appropriate security procedures to protect customer’s financial information.

I am going to show you how to install JoomlaBoard. Members of the Joomla! community have worked hard to integrate these large community forum packages with Joomla! and have developed so called bridge components to connect the two together. These include vbulletin. Click the browse button and navigate to the folder/directory where you unzipped the JoomlaBoard files Select the file com_joomlaboard_x-x-x. Go to Installers > Components 5. 7. it can be an effective way to provide support to your users. There are a number of dedicated forum packages (formerly known as bulletin boards). This will take a little while depending on the speed of your connection. You may wish to print it out to read later. which at time of writing was 1. The screen which you can now see contains useful information about upgrading. 98 . phpBB. 1. installing sample data and documentation. a forum component written specifically for Joomla! which is easy to install and fully integrated. Login to the Administrator Control Panel 4. That’s it! JoomlaBoard is installed. 6. The file is approximately 1MB in size. 3. such that a solution can be viewed over and over again and users can comment and improve on the information in the original post. you will see a "Joomlaboard Connecting the World" screen. with a message INSTALL Successful. although details of how to do these integrations are available on the Joomla! forums or via http://extensions. We want the latest stable version of the software. I have judged these to be outside the scope of a beginners guide.8 Using 3rd Party Add-on Components and Modules product.org if you need these applications for your site. The most successful of these are large applications in their own right supporting many thousands of users and are very sophisticated pieces of software. 8. Instead. Go to http://www. If the installation has worked properly. Click the download button and save the ZIP file to your local PC. although there may be a more recent release when you go there. It is very suitable for small or medium sites and is simpler to use than the larger forum applications.net 2.12.zip (where x-x-x is the version no of the file you downloaded) and click ’Upload Component’. and SMF. These can be quite tricky to install and configure correctly and also require work to get consistency of user interface and design. Only get the stable version as development versions are not suitable for running a production forum solution.tsmf. First of all we need to download and unzip the latest files from the JoomlaBoard developer TSMF.Joomla!.

and whether to provide RSS feeds or PDF downloads of forum topics. 3. 1. From here you can control the forum display parameters. and to require the user to provide a valid email address. Finally. and then create a menu link from our website to access the forum. which brings you to the first configuration screen. set up our first forum board. From here you can choose whether the forum is visible to public visitors. Now you can set a) the name of your forum in the Board Title field b) a valid email address to receive emails from the forum c) There are also options to customize the forum offline message. Press the Save button to finish 8. From here you set up one or more forums. Select the Security tab. Go to Components > JoomlaBoard Forum 2. There are a number of other options which can be set. and the text area size. Set these to make JoomlaBoard fit properly in your template. but these are not essential to the operation of your forum. Click on the Advanced tab and set the access permissions for the forum 99 . there is an option to send an email to a moderator. 7. if you choose to have postings moderated. Select the Frontend tab. or only to registered users. and whether to provide postings in a flat format or threaded d) This is also the section where you can set the forum offline 4. Click New Give the Forum a name and a description. Select Forum Administration 10. If you choose to make the forum visible to public users you can require users to be registered and login in order to make a post. and you can view these at your leisure. You can also set other options related to the user profile display. setting the number of messages and threads per page. You also set parameters related to the user from this tab. Now we need to set a few simple configuration options.8 Using 3rd Party Add-on Components and Modules So that wasn’t very difficult was it? JoomlaBoard is a very good demonstration of the benefits of Joomla! and how you can add a huge amount of functionality to your website in just a few minutes by using the power of the Joomla! developer community. Go to Components > JoomlaBoard Forum 9. Select the JoomlaBoard configuration button. under the Basics tab. 5. 6. or you can allow anyone to post. Here you can choose whether to show the users real name or username.

or your selected moderator.org/sf/projects/simpleboard Although JoomlaBoard is a fully featured and functional forum. which at time of writing was DOCMan 1.5. Show No reply Message. These can be placed in any suitable module position.8 Using 3rd Party Add-on Components and Modules Finally click on the Moderation tab. 2.1 How to get and install Docman DocMan was developed by Johan Janssens who is the lead developer on Joomla! version 1. 100 .or you want to provide access to downloadable software.mambodocman. A bit of work enhancing your stylesheet can improve the look and appearance of your forum considerably. The show latest subjects is often placed on the home page.mambodocman.3 Installing a document management system If you want to offer your users access to a collection or library of documents such as PDF or Word documents to download. There are a number of optional modules from JoomlaBoard which you can download and install. If you select you. 8.x. and set whether post are moderated. it can look a bit basic mainly because little attention has been paid to the visual styling and formatting of a JoomlaBoard forum. Show Latest Subjects and Forum Statistics. number of lines to display and so on.com First of all we need to download and unzip the latest files for DOCman 1. and select the download tab. The extension we are going to install is DocMan. then you need a document management system.3. These can all be downloaded from http://developer. Go to the www. and repeat to add each separate Forum category. 11. 12. 8. it can be obtained from www. check that each Forum/category has been published from the Joomla Broad Administration view. which you will see widely used on sites offering templates.3.com website. how-to tutorials and other useful Joomla! documents.Joomla!. After a few seconds the Download dialog from your browser should appear and you can save the file in an appropriate directory. will need to approve each post before it appears on the forum. Download the latest release. Click on the link and then select the tick box on the next screen against the package release link and click the Download Selected button 3. Click Save. Finally. You can customize the number of topics to show. These are Top & Last Users.

zip (where 1. If you are not sure. Select between no access for public users. From the permissions tab. 3.Success". a) If you need to update the document library.g. accept the default setting.e. 4.3-RC-2.2 Configuring DOCman The next step is to configure DOCman. Click on the Front End tab. browse only or browse and download. You may also allow front end users to upload files to the Document library. non-registered users can download documents. and then you can link it into your Menu. DOCman will set a default value for the DOCman files directory which is automatically worked out from your server directory path. Login to the Administrator Control Panel 2. Click the browse button and navigate to the folder/directory where you unzipped the DOCMan files. 1. Go to Components > DOCman > Configuration 2. /home/username/docman (make sure that your directory permissions are set correctly to allow Docman to read and write to this directory. and there is an extensive set of controls for setting the permissions of users allowed to upload files. and the users groups allowed to approve these for download. 5. 101 . This will take a little while depending on the speed of your connection. If the installation has worked properly.xx is the version no of the file you downloaded) and click ’Upload Component’. 4. Browse to the file docmanV1. you can take the document library offline temporarily by selecting Section is down = Yes b) The number of documents per page can be varied as well as the ordering. This is the component file. e. Go to Installers > Components 3. You can either leave this setting. and test your new settings.XX. You may prefer to require users to be registered to download your files or documents so that you can keep track of who has taken copies.3. you can determine whether public. or you can change it to your own. i. Click on Continue 8. you will see the message "Upload component . When you have unzipped the file you will have a folder/directory containing the following files: docmanV1. You can also flag new documents. Next we need to install the component.zip.8 Using 3rd Party Add-on Components and Modules 4. Here’s what to do: 1.

Depending on the speed of your Internet connection the upload may take a little while. or upload method. To set up your download. Press Save when you have completed configuring DOCman. Now you can upload files to your library directly from the Administrator control panel. 1. e. Before uploading documents you need to set at least one category. which links to the file and which provides the necessary information about it to the potential user 4. select upload a file from your computer and click the Next button. To create a Document for your file download. 6. From the DOCMan . under Select Document c) Set a Category for the file d) You can optionally add a thumbnail image for the file. You will be notified of a successful upload and given the option to add it to a document immediately. click on the Files button then select click the Upload button. You can also enable logging to get detailed information on who is downloading your files. e. Give the category a name. e) You can individually set viewing permissions. 7. a) Firstly. Click on the Category button. and from the new screen press Add. add a description (optional) to appear on the Document Manager page and press Save 3.8 Using 3rd Party Add-on Components and Modules 5. click on the Documents button. DOCman asks you for the source of the file. 6. add a document for each file to the document library.Documents screen. Documentation or Templates. Go to Components > DOCman > Configuration > Management to access the DOCman control panel 2. click the Add button.g. Now you can add items to be downloaded to the library. set the creation date and add a description to be associated with the document if required. From the security tab. select it and then press the Submit button. 5. You do this in two stages. if required. Press Browse to navigate to the file on your computer which you wish to upload to the document library.this doesn’t have to be the same as the filename b) Choose the correct file which you have already uploaded to your server. go to the DOCman control panel.g. you can enable settings to prevent other sites from directly linking to your download section and ’stealing’ your download service by linking to it. upload files to the server b) Second. separately from the DOCman Global configuration settings. From the DOCman control panel. 102 . the minimum information you need to provide is a) A name for the file .

and be a source of regular income. It should also be very targeted easy to read and interesting. or the field that you’re working in.acajoom. The newsletter components that we are going to use is called Acajoom News. A good e-mail newsletter can work wonders for your business. which can be useful to display in a column on the home page of your website if downloads are an important part of your site. by setting a URL instead of a link to an uploaded file when you Select Document 9. all that they require is that you provide your username and is thus word to get access to the download. and installing and configuring them is very easy.1 How to get and install Acajoom Acajoom News can be downloaded from www. Documentation. There are a number of additional modules available for download from the SourceForge repository which provide a display of most recent and popular downloads/documents available. and shares its user information to build the mailing list. where you can find a full range of information.8 Using 3rd Party Add-on Components and Modules f) Click the Save button 8.com/. The good news is that there are several excellent e-mail newsletter components available for Joomla!. Acajoom is closely integrated with Joomla!.4 Setting up an email newsletter An e-mail newsletter is a great way of keeping in touch with your users. If you now check on the front end of your live site you will now find that you have a file/document available to download.com. 8. 8.3. whether it is to give them information about the new developments on your site. select DOCman as the component required. leaving you with the more demanding task of coming up with fresh informative copy that will engage your users. NOTE: You can link to a file on a different or third party server if you have permission to do so. Tutorials and a Forum. including News.3 Where to go next for more information DOCMan has it’s own website. A word of warning however. producing a newsletter which people want to read and stay subscribed to requires a lot of effort and particularly a lot of thought into the needs and requirements of your users. and 103 . 8.4. http://www.mambodocman. DOCman is linked into your menu in the normal way by going to Menu manager > mainmenu and adding a Component link.

After 10-20 secs installation is completed and you will be taken to the Acajoom installation screen. you need to add a list. Login to the Administrator Control Panel 2. 4. Here’s how to install this component: 1. Click the browse button and navigate to the folder/directory where you downloaded the Acajoom News ZIP file and click ’Upload Component’. with Acajoom’s Wizard .acajoom.1. A list can be of two types. Provide a short description of the list. and enter your email address and password in the ’Download Acajoom’ section and click the Download button. The installer installs the component. After a few seconds the Download dialog from your browser should appear and you can save the file in an appropriate directory.at the bottom of the screen it tells you ’Upload component . 2. NOTE: Message at the top of the screen [Acajoom module is not published. Go to Installers > Components 3.com. and whether newsletter or autoresponder Description Set the name of the List e. Click here to publish it!] You do not need to respond to this message until later or you can publish the module straight away.Success’ Here is how to get started using Acajoom to manage your email newsletters: 1.0. 2. You are taken to the New List screen with three tabs: Description | Template | Subscription Status Here you can publish the list. Go to the www.8 Using 3rd Party Add-on Components and Modules of course they add you to their newsletter! First of all we need to download and unzip the latest files for Acajoom News. show the list on the website (visible on front end). mambot and the Acajoom module automatically This will take a little while depending on the speed of your connection. Click the New button to create a new list. AnyTown Zoo News. You don’t need to unzip this file further.g. Click the download button. First. either a newsletter or an auto-responder. You’ll see that Acajoom use DOCMan to handle their downloads! The latest release at time of writing was Acajoom News 1. the component is ready to be installed in Joomla!. 104 . 1. We’ll start at STEP 1.

Your new mailing will be shown in the newsletter list 1. Template This tab enables you to create an HTML design for your newsletter. You can create two versions . and a one off action to add all the existing users of your site to be added to the newsletter mailing list Beneath this you can add a message to be sent to subscribers when they unsubscribe from your list 3. The bounce email address is the address any email which cannot be delivered will be returned to. NOTE: IF you set this different to the sender address it will result in anti-spam systems rating your email as possible SPAM.an HTML edition with images and a text only version for those people who request a text only version You can choose to add content from the website and attachments if you so wish using the tabs on the right hand side. Click Save. 105 . Click New to create your first mailing This will take you to a screen entitled ’Edit a Newsletter’ Here you enter the Subject line and the newsletter content . STEP2 of the Wizard is displayed 5. and the email address. Click the Save button to save your news letter 4. Then click back to your Control Panel (CPanel) and click the configuration button. 7. A sample design is provided Subscription You can choose to allow all new users of the website to be automatically be added to the newsletter. Click on the link for Newsletter Management and Select your list using the pull down menu ’AnyTown Zoo News’ 6.you can include pictures in it in the same way that you would create articles in Joomla!.8 Using 3rd Party Add-on Components and Modules Sender information Set the name of the person who will be shown as the list sender. Then click back to your Control Panel (CPanel) and click the configuration button.

password and SMTP mail server correctly. Edit the newsletter.2 Where to look/go next for more information For more details on using Acajoom click on the Help button to go to the Acajoom Forums. Next you are recommended to check the email settings and also to publish the Acajoom module NOTE You may need to set SMTP authentication settings for your email program if for example you are sending the email from a separate SMTP mail server if you are using JSAS to develop your site. Click Save button when you have finished 8. Select published = yes and review the parameters available for the module and set them to the settings you require.8 Using 3rd Party Add-on Components and Modules STEP 3 of the Wizard is displayed 2. The Acajoom Subscriber Module needs to be published before you can send your newsletter. You can use the Preview function to send a test to yourself to view the resultant newsletter before you send it. Go to Lists and Click the radio button in front of your news letter and press the Published button 2.4. test as appropriate. There is a link on the Acajoom menu to do this otherwise you can select the module by going to Modules > Site modules and click on the Acajoom Subscriber Module 5. 1. then you will need to set your email username. 3. You can now send your newsletter and set others up. Go back to Components > Acajoom > Configuration and you will be taken to STEP 4 confirming that you have completed the set up process. Click the radio button in front of your news letter and press the Send button 4. 106 . 4. Go to Cpanel > Newsletters 3. 6. and use the preview function to re-test. Help is available on screen by hovering the mouse over the dotted links next to the parameter.

however it is not particularly well documented by the author. and does require a fairly high level of skill from the developer particularly with regard to the use of CSS for styling.Joomla!.5 Get more from Menus with Extended Menu module ADVANCED MODULE This module extends the standard Joomla! menu module and is capable of implementing a wide range of multi-level navigation methods. and are able to use CSS to style your web sites. Download file from SourceForge: mod_exmenu_pathway_1.html 8. 8. We will show how to implement two of the most common menu systems. since it provides all the navigation logic for the site and connects all the parts together. 8. such as splitting the menu between a horizontal top menu and a sub-menu in the right-hand column.5.de/extended-menu.extended_menu/ 107 .org/sf/frs/do/viewRelease/projects. you may find that the standard Joomla! menu module does not offer you sufficient styling options to be able to create the richness of user navigation that you need.1 Introduction The menu system is at the heart of your Joomla! website. For example if you want to provide multi-level menus. but it does require good CSS skills and Joomla! know-how and understanding of how the mainmenu module works.3.8 Using 3rd Party Add-on Components and Modules 8. drop down menus using CSS (no Javascript) and split menus. If you are an experienced website designer.zip There is also an enhanced Pathway module which works with extended menu to provide a consistent breadcrumb trail.0.1.2 How to Get it Extended Menu can be downloaded from the author’s website at: http://de. It is very important for developing larger and more complex navigation systems. It also requires a certain amount of experimentation and trial and error in order to understand exactly how the system works.3 What you get Extended Menus is supplied as a single module mod_exmenu_1. This is a very powerful module which piggy-backs on the existing Joomla! module. This module is capable of implementing a wide range of multilevel navigation methods.5. the extended menu module can be indispensable in certain situations.zip http://developer.siteof. then you need the Extended Menu module. Despite these limitations of documentation.5.0.

8 Using 3rd Party Add-on Components and Modules 8.5. Select the file mod_exmenu_1. 2. Click the browse button and navigate to the folder/directory where you downloaded the extended menu module zip file 3. while using ext_menu to deliver the connectivity and styling.x 108 .Yes" 5. 1. 3. Go to Installers > Modules 2. with your entire hierarchy of links filled out. Click the Save button 8. and that the corresponding position is set in the extended menu module.5.4 How to install it 1. but does not completely replace it. See figure 8. To do this: a) Go to Modules > Site Modules b) You will see a list of all the modules Joomla! has installed by default. Click once on the published icon [ ] in the published column next to the name of the mainmenu module using your mouse. Unpublish the mainmenu module. The module should now be successfully installed IMPORTANT: Extended Menu builds on the functionality of mainmenu module. Ensure it is correctly positioned in your template.0. 4. This will toggle the icon to a red ’X’ indicating that the module is no longer published to your site.5 How to build a split menu I will show you how to built a two level split menu system with a top level menu in the horizontal position. 6. DO NOT delete the mainmenu module.zip and click Upload module. you should merely un-publish it. including sub menus. Publish the extended menu a) Go to Modules > Site Modules b) Click the module entry for Extended Menu c) Select "Published . Open the extended menu module by clicking on the link in Module Manager. Make sure your mainmenu is complete. You continue to use mainmenu module from the Menu Manager to build your menu structure.3. and ensure the setting Menu Name is set to main menu. and a sub menu in the left column which changes according to the menu item selected in the top menu.

and then sub-menu items for General Visitor Page. Download extended menu module and install it using Installers > Modules. First build your menu using Menu Manager > Main Menu All the links that you wish to appear on the submenu should be created in Menu Manager as submenu links ( see chapter 7. You will see that there are a large number of parameters (around 50) which can be set for Extended Menu. I will set out here the critical parameters which need to be set to make the split menu work. This can make it seem very complicated for the first time user and the documentation doesn’t make it very clear which items are essential and which optional. and leave the rest as per the defaults or blank: a) b) c) d) e) f) g) h) i) j) k) l) m) n) o) Menu name = mainmenu Source type = Menu Menu style = Flat List Expand Menu = Yes Expand until level = 1 Maximum Depth = 2 Hide First Entry = No Show parent = No Begin with current Item Level = No Begin with Level = 0 Split Menu = 1 Menu Count = 1 Level Class = Mainlevel and sublevel Active Menu Class = Both Element ID = Yes 109 .3) to the appropriate top menu item in the mainmenu (e. in chapter 7 we saw how to create a top menu item for Visitors. Admission Prices. Ensure that you have unpublished the mainmenu module (see 8.2.g. Many of the other parameters control visual presentation and I suggest you experiment with these and see how they affect the output of your menu.4 above) in Module Manager (Modules > Site Modules) 3. Opening Times and How to find us) 2.in our case.8 Using 3rd Party Add-on Components and Modules 1. Published = Yes Enter the following key settings. Open up the new extended menu module. Position = Top Set Show title = No.5. Set the position of your menu to the top horizontal menu .

g. provides a number of templates on his website (see link below) which enable you to create dynamic multi-level menus. the author of extended menu.com/articles/dropdowns for a full description of the 110 . e. Open up the new copy of the extended menu module and enter the following settings: Set the position of your menu to the left menu . Published = Yes Enter the following parameters.6 How to build dynamic menus using CSS Daniel Ecer. please go back and check that you have set the parameters exactly as given above. ( See http://www. If the method has not worked. You can perform fine control over the design and presentation of the menu using CSS with the parameters provided. ’suckerfish’. Position = Left Set Show title = No.alistapart. 6. Make a second copy of the extended menu module by selecting the tick box next to it’s name and clicking the big Copy button at the top. and experiment. using the strangely named CSS technique. You should now be able to display the left hand sub menu by clicking on the appropriate top menu item. 8. Visitors. Refer to the Extended menu website for parameter details.8 Using 3rd Party Add-on Components and Modules p) Enable Menu Template = No 4. and leave the rest as per the defaults or blank: a) b) c) d) e) f) g) h) i) j) k) l) m) n) o) p) Menu name = mainmenu Source type = Menu Menu style = Flat List Expand Menu = Yes Expand until level = 1 Maximum Depth = 2 Hide First Entry = No Show parent = Yes Begin with current Item Level = No Begin with Level = 1 Split Menu = 1 Menu Count = 1 Level Class = Mainlevel and sublevel Active Menu Class = Both Element ID = Yes Enable Menu Template = No 5. Go to Modules > Site Modules.5.

Alternatively.html 5.7 Where to look/go next for more information If you need more information than I have provided here I recommend that you check out the material on the authors website: http://de. and then sub-menu items for General Visitor Page. Ensure that you have unpublished the mainmenu module (see 8.siteof.ini file which sets parameters in extended menu. Set the position of your menu to the menu position required .siteof. see our website for more details. and then unzipped into your current default site template folder on the server (you will need FTP or SFTP access to your website in order to be able to do this step. Daniel’s templates contain a menu.html template.4 above) in Module Manager (Modules > Site Modules) 3.2. Open up the new extended menu module. and experiment until you get the desired effect. First build your menu using Menu Manager > Main Menu All the links that you wish to appear on the submenu should be created in Menu Manager as submenu links ( see chapter 7. Admission Prices. and a menu. Then proceed as follows: 1.3) to the appropriate top menu item in the mainmenu (e. Learn Joomla! does offer a commercial support service.css and amended as required to match the visual elements of your site. Download extended menu module and install it using Installers > Modules. Click Save You should now experiment with the other parameters to see how they affect your menu presentation and performance 8. If you still can’t find what you’re looking for then I would suggest you consider posting a question to the Joomla! forum and try to find some users who have already had experience with the module.html and work through the parameters. together with CSS for the menu.5.html If you get stuck try a search on the Joomla! forums for extended menu.) The CSS file will need to be pasted into (or called from) your template_css. Opening Times and How to find us) 2. 111 .g. in chapter 7 we saw how to create a top menu item for Visitors. if all else fails.de/extended-menu-templates. 4. For more details on dynamic menus go to http://de. These templates should be downloaded.5. Position = Top Set Show title = No.de/extended-menu-parameters.8 Using 3rd Party Add-on Components and Modules suckerfish method). Published = Yes a) Set Enable Menu Template = Yes b) Set Template Name = menu.in our case.

as its name suggests. but obviously that will depend on your user needs and the exact requirements that they have. Advice. It also has many additional uses.1 Community Builder As we mentioned in the chapter about user management. Here are 10 more third-party extensions. and create detailed user profiles. Tips and warnings: This is a big component and needs time to investigate and understand how it works. 112 . our recommended third-party extensions can only scratch the surface of what is possible. Although the software is open source. the Joomla! user model does have some limitations. with the ability to define connections between users. a major area of growth amongst Web 2. which I use regularly and find invaluable. In particular it is not possible to add additional fields of information for each user nor is it possible to set up new groups and define additional levels of access to information. Community Builder is a very popular extension from Joomlopolis and it makes significant enhancements to the Joomla! user model.000 3rd-party applications. How to get it: http://www. the full documentation is chargeable (25 euros). plus modules providing enhanced login. and modules providing information on user connections and profiles. I’ve tried to show you how to use some of the most useful applications that you might want to use when you first start to expand Joomla!. for example should you wish to separate free publicly registered users from paying members. Notes. It is very highly rated by the Joomla! community.joomlapolis. 8.6 10 more indispensable extensions With over 1.com/ What you get: The main Community Builder components. 8.8 Using 3rd Party Add-on Components and Modules If after trying all these steps with extended menu you are still experiencing difficulties. I haven’t provided detailed instructions to install these. it can be used for building an online community of users.0 type web sites.6. you may also wish to look at the Joomla! extensions directory and take a look at the other menu plugins which might offer alternative solutions to your problem. but by now you should have enough experience of Joomla! to be able to take these in your stride. How to install it: Instructions are provided on the Joomlopolis website. and online status.

8 Using 3rd Party Add-on Components and Modules

8.6.2 Guest book - Easybook
Guest books are still remarkably popular on many personal websites and indeed on small business websites such as holiday cottage lets, or specialist hobby or interest sites. There are a number of guestbook components available to Joomla! and we have selected Easybook from Easy-Joomla!.org in Germany which is easy to install and configure. It has a wide range of configuration options, including CSS layout control. A key issue with any software component which allows third-party users to add comments, is the issue of SPAM, when sites can be deluged with unpleasant, offensive or just plain annoying postings which are nothing to do with the subject. Good component design can minimize the possibility of this occurring (Easybook has a SPAM, and ’bad word’ filter), but you must also watch out for password management, and deliberate abuse of the site by users who can register a username and password and then start spamming your site. It is therefore important for you to keep the regular eye on any third-party postings component, and be ready to suspend users or delete content as required. How to Get it: http://forge.Joomla!.org/sf/projects/easyjoomla/ What you get: The Easybook 1.1 component (version 1.1, and a module allowing you to display the latest guestbook posting elsewhere, e.g. on your home page) How to install it: Standard component installation. README installation instructions provided Advice: Notes, Tips and warnings: The original documentation is in German, which can make modification slightly tricky for english speakers.

8.6.3 Adding a Weblog using MamBlog
These days everyone is Blogging, and Mamblog, as the name suggests, is a Weblog component which was developed for Mambo, but which works fine with Joomla! There are several weblog components for Joomla!, but this one is my favourite. Hunt around on the Joomla! extensions site and you will also find other modules to enhance your weblog which are compatible with MamBlog. With some time and patience you can build Weblog functionality which will compete with Wordpress and other dedicated Blog software tools, and have full control over layout. How to Get it: www.jxdevelopment.com/index.php?option=com_remository&func=fileinfo&id=76 What you get: The Mamblog v 1.0 component How to install it: Full instructions for installation and use are at http://www.jxdevelopment.com/content/view/61/30/ Advice, Notes, Tips and warnings: If you just want a standard Weblog, then you will find a dedicated package such as Wordpress or b2evolution simple and straightforward

113

8 Using 3rd Party Add-on Components and Modules
to install and get up and running fast. Use MamBlog (and other third party modules) if you have a Joomla! site and you want to add Weblog functionality to the site ’mix’.

8.6.4 A flexible banner system - Artbanners
Many sites use advertising banners to promote contents on their own sites as well as links to third party sites. The banner component within Joomla! is fairly basic in terms of its capabilities, and if you are looking for a more sophisticated than a management system then I recommend the Arts Banners component which is widely used to display multiple graphic banners in the right or left hand column of a website. Art Banners can also display Flash animations. How to Get it: At time of writing the art banners website was offline, a not too uncommon experience in the open source world, which makes it very important to keep archive copies of all the software you download for future use. The components was available from http://forum.Joomla!.org/index.php/topic,89960.0.html at time of writing but the reader is recommended to check the latest information in the Joomla! extensions directory prior to downloading. What you get: The artbanners component to manage banners, and a module to position the banner on the page How to install it: Standard component install. README included with the component Advice, Notes, Tips and warnings: See above, the Art Banners site was down at time of writing so you need to check the current location for download. This is a very nice component and well worth the trouble to find it.

8.6.5 Forms / database component - mosforms
The standard Joomla! installation does not provide the ability to design forms to capture user input, other than the basic contact enquiry form. To create forms you need a third party component such as mosforms. Using mosforms you can design a variety of data entry forms that will store data in a MySQL database, without the need to understand SQL programming language. mosforms has a lot of flexibility, and like extended menu it is a powerful component, but one which requires some skill and time to master. How to Get it: http://forge.Joomla!.org/sf/projects/mosforms What you get: A component, a couple of modules and some mambots How to install it: The developers website http://mosforms.pollen-8.co.uk has documentation

114

8 Using 3rd Party Add-on Components and Modules
Advice, Notes, Tips and warnings: Developing forms is complicated and requires some understanding of database structure. Allow sufficient time to develop and test your form. The current software is beta and some users have reported problems with bugs. Other form builders are also available - you may want to check the Joomla! extensions site for alternatives if mosforms doesn’t do exactly what you want.

8.6.6 Content Item module
This is an extremely useful module which enables you to place content from articles in any position on a page, not just in the mainbody area. I find it invaluable and have used it on almost every Joomla! site I have developed. For example, you can use it to provide content ’tasters’ on the home page, or to provide an extended ’latest news’ display, including the first paragraph of the article as well as the headline in the news summary display. How to Get it: http://developer.Joomla!.org/sf/projects/content_item_module What you get: One module How to install it: Standard module installation. See the sourceforge site for more documentation about configuration. Advice: Notes, Tips and warnings: What are you waiting for - download it!

8.6.7 Blogg-X
Blogg-X is a small Windows, Mac or Linux program which allow articles to be uploaded to a Joomla! website without accessing the website via the front or back end interface. This tools enables you to quickly post content to the site, delete articles and publish unpublished articles. You can also post articles to multiple sites, thus saving time for busy editors. How to Get it: www.iobinary.com/component/option,com_remository/Itemid,35/func,select/id,2/ What you get: A standalone program which install on your computer and connects to your Joomla! site database. A mambot which has to be installed on the server. How to install it: Instructions provided in the downloadable file Advice, Notes, Tips and warnings: If you or your users (writers, editors) just want to publish articles to your site this is a simple and easy to use tool which doesn’t require training on editing Joomla! websites. Particularly useful if you have a large volume of articles to publish daily.

115

6.html This is invaluable for optimizing your site to get the best possible positioning in search engine listings such as Google.php?option=com_docman&task=cat_view&gid=8&Itemid=33 What you get: The mycontent component How to install it: Standard component install.co. Tips and warnings: Joomlaspan the developers also produce a range of other advertising and affiliate program related modules and components for Joomla! 8.learnjoomla. How to Get it: http://joomlicious. friendly URLs for any of Joomla!’s content and component items”. Tips and warnings: Highly recommended by the Joomla! community. and ensures that you stay within the rules for IP blocking.html 116 . How to get it: http://projects.co.joomlaspan.OpenSEF According to their website “OpenSEF is a Joomla! 1.j-prosolution. mycontent allows users to create a content item for any section.learnjoomla.6.x component that extends Joomla!’s SEF (Search Engine Friendly) URL mechanism allowing you to define arbitrary.com/Joomla!-downloads/ What you get: Various modules How to install it: More details on the developers website. Choose different size adverts and position on the pages you want.com/index.co.com/en/projects/os-projects/project-opensef. How to Get it: http://www.9 AdSense Allows publishing of Google Adsense adverts on your site in various module positions. Authors and publishers can see all their content in a single list. clicks and clickthroughs. Instructions provided on developers website Advice.php?option=com_content&task=blogsection&id=3&Itemid=39 you can set the URL as http://www.com Advice: Notes. instead of http://www.10 Search Engine Optimisation (SEO) . Users with Publisher access can publish content with one click from the mycontent list.6.uk/content/blogsection/3/39/ or even www.0.8 mycontent Mycontent simplifies the process of publishing articles from the Joomla! front end. http://www.joomlaspan.uk/index.8 Using 3rd Party Add-on Components and Modules 8. mycontent addresses a weakness in the core Joomla! front end editing functionality. instead of having to have multiple links from the usermenu. Notes. 8.learnjoomla. So.uk/hints-and-tips.

One of the joys of working with Open Source software is that you never know when your going to find a gem or if the software for which you had high hopes turns out to be a dud.7 What next .html Advice: Notes. I recommend you to get it! 8. Whether you want to improve your search engine ranking or just have easy to quote URLs for printed material. That way. Now is a good time to start browsing and exploring http://extensions. A good idea is to install a test site on a local server using JSAS to evaluate extensions before loading them to your production site. Good Luck! 117 . if they don’t work properly or cause problems with other software you can just delete the test site and try again and no damage is caused to your live site. Tips and warnings: This is an invaluable and widely used component which addresses a weak area in the core Joomla! software.org and downloading and trying out other applications. Don’t forget that it is up to you to test these extensions and make sure that they work robustly on your site. If you have installed a number of the components and modules in this chapter you will have gained valuable experience in using third party software.8 Using 3rd Party Add-on Components and Modules What you get: The OpenSEF component How to install it: A tutorial is provided at http://projects..com/en/documents/opensef/install-opensef.j-prosolution.Joomla..

css). A Joomla! template contains layout and visual styling instructions which describe the look of the site and which controls the areas of the screen where the dymanic content generated from your database is displayed. This milestone site explains CSS and how Joomla! Templates work better than a thousand words from me.com and see how changing the CSS stylesheet completely changes the appearance of the same single static web page. It contains an HTML file (index.php. a simple. The first time I saw this website I got CSS immediately. Joomla! templates work in the same way as the CSS ZenGarden page.php code 118 . If you are familiar with Cascading Stylesheets (CSS) as a technique for web page design you will know how these can completely change the appearance and layout of a web page. As explained in Chapter 2.csszengarden.1 Introduction The appearance of a Joomla! website can be changed within a few minutes by applying a new Joomla! template. or positions into which content can be flowed. If you’re not aware of the power of CSS I recommend that you spend five minutes now looking at CSSZenGarden http://www.9 Introduction to Templates In this section you will learn: • The role of templates in Joomla! • About template positions • How to install a template 9. each time a web page is displayed. image files and and XML file to tell Joomla! how everything fits together. Certain areas of the index. the content from your database is laid out and styled dynamically by Joomla!.php). piece of HTML code which defines areas of the page. content free. a CSS stylesheet (template_css.php file are given position names by functions in the index. There are two key files in a template: • index.

119 .php code which is reproduced in Listing 10. an example Figure 9. typefaces and lines and other elements. • The stylesheet template_css.1 shows the template positions which are available for one of the templates supplied with this book.1. banners.9 Introduction to Templates Figure 9.css controls the exact layout of the positions on the page and all the styling of colours.1: Template positions for the LJ_metro01 template and it is into these positions that Joomla! modules such as search boxes. LJ_metro01. They are defined in the index. and so on can be outputted to the correct location within the template layout. lists of articles. In each module there is a parameter to define in which position their output will be displayed. More details about this file in Chapter 10. 9.2 Template positions.

You can adjust your module position to fit the new template from the Module Manager by opening the module and adjusting the position parameter. 120 .uk/index. Text styling may also be affected as each template will have its own CSS. So one template might have a ’top’ position for a horizontal menu to be placed while another does not.remember positions that are available in one template are missing from another or the position name is used for a different layout area. You can try the free templates I have supplied with this ebook. simpler and less cluttered. and then add ?tp=1 to the end of the url to see the positions overlaid on your template on screen e. and I also suggest you visit the links in Appendix A and download 10-12 varied templates for yourself and then spend an hour seeing how these can completely change your site design. Personally.9 Introduction to Templates NOTE Note that all Joomla! templates do not have the same positions defined in the template code. TIP To see the positions which have been defined by a template. a personal site or a corporate design. WARNING: Do not be tempted to unzip the template ZIP file when you have downloaded it. In addition templates have different CSS classes to control look and feel and these generally require CSS suffices to be defined in module parameter settings to allow access to these styles.co.php?tp=1 9. I like designs with much more white space. Joomla! does not enforce any controls on which positions must be included in a template or the position names which must be included. install it in Joomla! as the default template (see below). and you will have your own preferences too. The two free templates supplied with Joomla! won’t be everyone’s cup of tea.3 Trying out templates When you are new to Joomla! one of the first things that you will almost certainly want to do is to get your hands on a lot more Joomla! templates to try out the effect of them on your site. This means that you cannot change from one template to another and expect your site layout and operation to be exactly the same as before. whether it is for a games website.g http://demo. It really depends on the template developer and the layout they have designed. Some simple templates have just 3 or 4 positions while other more advanced designs have 10 or more positions.learnjoomla. Bear in mind that a new template can create some unexpected results . Joomla! uses the ZIP format to package all the template files into a single file and Joomla! will unzip the file and copy all the contents in the the correct locations.

9. Now go back to the Preview browser window that you opened earlier and press the page reload button. Then press the Upload File and Install. However.5 Taking templates to the next stage Many third party designers have made Joomla! templates available for free. for example LJ_metro01. the next chapter. When the page refreshes you will see that the layout and design has completely changed to the new template style but the links and content remain the same. Whatever the reason. Click on Continue. After a second or two the page will refresh and you will see that the green default tick icon is now set against the LJ_metro01 template. Go to Installers > Templates > Site 2. If so. 121 . and there are some fantastic professionally designed templates available for a few pounds or dollars that may be perfect for your needs (Full details of these suppliers are in Appendix A). In the Template Manager you will now see there is a new item LJ_metro01. 4. the good news is that if you have basic web design knowledge you can quite quickly learn to create your own template and test it out on Joomla!. there may still be occasions where you want to create your own template: because you have to meet corporate design guidelines for a client.zip. 3. and click Open to select it.4 Installing a new Template To load a new template into a Joomla! site: 1. or simply because you are a great designer and anything other than your own design will be second best. 5. ’Make your own Template’ is written for you. You have successfully installed a new template. to give yourself features and functions not available off the shelf. Click the Browse button which brings up a File Upload window on your PC.9 Introduction to Templates 9. Click the radio button in front of the LJ_metro01 template row to select it and then click the button Default in the Button Bar. This takes you to the Template Manager Menu (Note: to get here in future use Site>Template Manager>Site templates ). together with some information about the developer and the template itself. After a few seconds you will get the Message file Upload Template : Success. Navigate to your LearnJoomla PC folder and select the ZIP file of the template you have downloaded.

10 Make your own template This is an advanced chapter which assumes a knowledge of HTML web design skills. such as an organisation’s branding guidelines. 122 . either to meet an exact client requirement. The final quality of the design will depend on your own creative and programming expertise.1 Tools Required In addition to your Joomla! installation on a public server or your local JSAS installation you will need an HTML editor. and CSS layout techniques. or because you want the site to have its own unique look. If you do not have these please refer to the tutorial material described in Appendix B before attempting to build a template.php file • What CSS IDs and classes you need to use to style your template • How to build the XML description file and package your template into a ZIP file • How to use the supplied templates as examples to learn how to develop your own Although there are hundreds of Joomla! design templates available. It is recommended that you do not attempt to design your own template until you have a reasonable knowledge of the structure of Joomla! and have downloaded and examined a range of free and commercial templates and understood how they are constructed. In this chapter you will learn: • How to create a Joomla! and W3C compliant index. you may prefer to design your own template. It is assumed that you have a basic knowledge of HTML design. With the instructions and information provided in this chapter you will be able to create your own template which can conform to W3C specifications. a graphics editor and I strongly recommend you use the Mozilla Firefox browser with the Web Developer plug in. Included with this book are two sample templates which you can use as a starting point to help you build your own design (LJ_metro01 and LJ_andreas01. ) 10. Recommended Open Source tools are given in Appendix B. however anyone with basic web design skills should end up with a usable template.

(Also see Chapter 9). Links to suppliers of free and commercial templates are given in Appendix A. 4. 5. 7. a) If you are an experienced web designer you may wish to code all the design by hand using a text editor such as Notepad. Give thought as to how to use the Joomla! module and component functions to deliver the information required.css files and understand how they are put together. Use the Web Developer plugin for Firefox to view the CSS boxes and CSS classes for a Joomla! template (see example in Fig 7. c) Whichever way you go you will need to insert Joomla! PHP functions into your CSS boxes to output the Joomla! content to the correct position on your web page. When you are happy with the final design you will rebuild your template archive file to included all the ’tweaks’ and changes you have made in Joomla!. Familiarize yourself with a number of existing Joomla! templates and examine their index. 123 .php and template_css.10 Make your own template 10. 1. Break your page design into a set of CSS boxes and identify which position label is to be applied to each CSS box. Add the suffix ?tp=1 to the end of the URL for a Joomla! site to see the positions included in the template 2. 2. 3. TIP: Here are a couple of ways to understand the structure of a Joomla! template visually 1. set out step by step. From here you will probably want to adjust and modify the design ’live’ via the HTML and CSS editors in Joomla! which gives a real time feedback of the impact of the changes you have made to your design. Sketch out the structure of your website page on paper or in your favourite graphics editor. Package your template. b) If you are less experienced in web design you may wish to use a tool such as Dreamweaver or NVU to design your page.1) by selecting the options Display Div Order and Display ID and Class details. upload it onto your development site and set it as the default template 6.2 Steps Involved Here is the overall approach I recommend you take. Research any third party plug-ins required to deliver extra functionality and download and evaluate these on a local Joomla! installation.

co.png</filename> <filename>README_LJ_Metro01</filename> </images> <css> <filename>css/template_css.uk</authorUrl> <version>1.jpg</filename> <filename>template_thumbnail.0</version> <description>The Open Source Metro01 template</description> <files> <filename>index.lloyd@learnjoomla.gif</filename> <filename>img/title.co.1 Example templateDetails. A Joomla! template is supplied as a single ZIP file containing all the files required for the template.learnjoomla. An XML file in the ZIP file describes the contents to enable the files to be installed correctly.png</filename> <filename>img/tab_top_bg.1 Listing 10.xml file <mosinstall type="template" version="1.’What’s in a template?’ In order to create a template for Joomla! you need to understand the detailed structure of a template.0.3 The Template file structure .php</filename> <filename>templateDetails.10 Make your own template 10.xml</filename> </files> <images> <filename>img/body_bg. If you unzip the file you will find the following files are included: 124 .css</filename> </css> </mosinstall> When you obtain a Joomla! template (such as the LearnJoomla LJ_metro01.zip) it is supplied as a ZIP file ready to be uploaded and installed via the Site Template Manager.g. LJ_metro01. e.zip.png</filename> <filename>img/content_sep.uk</authorEmail> <authorUrl>www.x"> <name>LJ_metro01</name> <creationDate>1 Jan 06</creationDate> <author>Drugo/Mike Lloyd</author> <copyright>Drugo/Artonezero Limited</copyright> <authorEmail>mike. and what the functions are to insert content from Joomla! into a template. how the layout is created to place Joomla! modules in. See example in Listing 10.

After the template has been installed. ’footer’. • index. but in order to get a high quality design it should be supported by a CSS file. The output generated by the Joomla! CMS is displayed on a web page using a number of PHP functions which are summarized in Table 10.10 Make your own template 10. Joomla! makes use of this XML file to load web pages built using the template so you must get it right. ’left’. ’right’.png All images included with the template must be listed. otherwise Joomla! may not find it correctly. • css/template_css.3 The index.php file with embedded CSS styles. • images/graphics_XX.css. ’user2’. ’user1’. it is normal practice to use an external stylesheet.php file Although it is possible to build a simple template as a single index.3.1 The core files (required) • templateDetails. Sometimes designers split the CSS into several files for maintainability.css The CSS of the template.note the uppercase D) An XML for- mat meta data file that is used for installing a template via the Administrator web interface.php file and the XML file archived in a ZIP file). this enables a visual image of the template to be displayed from the Joomla! Administrator Template Manager. It is recommended (but not essential) to put these in an images directory. it defines the positions where modules may be inserted in the design (e.3.php The file defines the layout of the site with a mixture of XHTML and PHP.php file in more detail. and so forth). A basic layout can be done with this file only. 10. As well as creating all the CSS boxes or tables which comprise the visual layout. 10.png A web browser screenshot of the template (usu- ally reduced to around 140 pixels wide and 90 pixels high).1 125 . copyright and include a full list of the files which comprise the template.xml (Case sensitive .3. (in which case the template will consist of the index. Let’s examine the index.g.2 Additional files (Optional) • template_thumbnail. This file should always be named template_css. The XML file describes the author.

See example below: <!-. articles and the output of other components as determined by the value of option in the URL. as follows: 0 = (default display) Modules are displayed in a column.e. ?> This function assembles various head tags including the title tag and several meta tags..Begin : Individual module --> <div class="moduletable[suffix]"> <h3>Module Title</h3> Module output </div> <!-. without tables.Begin : Individual module --> <table cellpadding="0" cellspacing="0" class="moduletable[suffix]"> <tr> <th valign="top">Module Title</th> </tr> <tr> <td> Module output </td> </tr> </table> <!-.End : Individual module --> 126 . See example below: Module 1 Output Module 2 Output Module 3 Output -2 = Modules are displayed in X-Joomla! format.10 Make your own template The key functions are: mosShowHead <?php mosShowHead(). i. mosLoadModules <?php mosLoadModules($position_name [.End : Individual module --> -1 = Modules are displayed as raw output and without titles. using a single CSS box <div>. See example below: <!-. mosShowPathway <?php mosPathWay().$style])?> This is a very flexible function which displays the output from all modules that are assigned to the position_name position for the current page.. ?> This function displays the main text body. The "style" argument allows control over the way in which the (X)HTML is output. or pathway element mosMainBody <?php mosMainBody(). ?> This function inserts an automatic breadcrumb trail.</div>.

. Each module is output in the cell of a wrapper table.. --> </td> </tr> </table> mosCountModules <?php mosCountModules($position_name)?> Counts the number of modules that may be shown on the current page in the position_name position.. stretch-able rounded corners.. for example. See example below: <!-. 127 . See example below: <!-.Begin : Module wrapper --> <table cellspacing="1" cellpadding="0" border="0" width="100%"> <tr> <td align="top"> <!-.Begin : Individual module --> <div class="module[suffix]"> <div> <div> <div> <h3>Module Title</h3> Module output </div> </div> </div> </div> <!-.10 Make your own template -3 = Modules are displayed in a format that allows.Begin : Individual module --> <table cellpadding="0" cellspacing="0" class="moduletable[suffix]"> <tr> <th valign="top">Module Title</th> </tr> <tr> <td> Module output </td> </tr> </table> <!-.the next module.End : Individual module --> </td> <td align="top"> <!-.using 4 separate CSS Boxes <div>.End : Individual module --> 1 = Modules are displayed horizontally... This is useful for hiding unused positions.</div>..

10 Make your own template PHP Function <?php mosShowHead(). Inserts a live date function in your web page Inserts the Joomla! website name in your webpage Returns the directory path to your web root directory <?php mosMainBody(). The Navigation Menu. ?> <?php mosLoadComponent($name)?> <?php mosLoadModules($position_name [. for example. The live date is inserted using another PHP function.1: PHP Template Functions Additional functions are used to reference the date.$style])?> <?php mosCountModules($position_name)?> <?php echo date(’D j M Y’). ?> Table 10. directory and website title. Each module is output in the cell of a wrapper table -1 = Modules are displayed as raw output and without titles -2 = Modules are displayed in X-Joomla! format -3 = Modules are displayed in a format that allows.php file example with all the basic elements you require. These are: 1. Basic CSS Box positioning and styling is provided using CSS styles in a separate stylesheet. For example "banners". 128 . Includes the output of the component as determined by the value of option in the URL. the <HEAD> tag information is automatically generated on the fly and inserted using the mosShowHead command 3. the various display modules and the main content in the page body are displayed via CSS boxes using PHP functions 4. Loads a component. Displays all modules that are assigned to the "position_name" position for the current page.php 5. Do not include the "com_" prefix. ?> <?php echo mosConfig_live_site. ?> Description Assembles various head tags including the title tag and several meta tags. The "style" argument is optional but may be: 0 = (default display) Modules are displayed in a column 1 = Modules are displayed horizontally. The Logo is linked from the index. the PHP header function 2. 6.2 shows an index. Listing 10. stretchable rounded corners Counts the number of modules that may be shown on the current page in the "position_name" position. This is useful for hiding unused positions. ?> <?php echo $mosConfig_sitename.

?> </head> <body> <div id="wrap"> <div id="wrap_top"></div> <div id="main"> <div id="head"> <?php mosLoadModules ( ’top’.dtd"> <html xmlns="http://www.zip) and you can install this template now on your Joomla! installation to investigate it more closely.org/TR/xhtml1/DTD/xhtml1-transitional. -2 ). -2 ). ?></div> </div> </div> </body> </html> This template file was included with your book (it’s called LJ_metro01.w3.css\" type=\"text/css\"/>" .10 Make your own template Listing 10.?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.php file with positions highlighted in red <?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed. ?> <?php mosLoadModules ( ’user1’.w3. ?> <h1 class="title"><?php echo $mosConfig_sitename.2 A sample index.0 Transitional//EN" "http://www. ?> <?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template] /css/template_css." ). ?> <?php mosMainBody(). ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.><?php echo _ISO. -2 ). ?> <?php mosLoadModules ( ’bottom’. ?>" /> <?php mosShowHead(). } ?> <meta http-equiv="Content-Type" content="text/html. 129 . ?></h1></div> <div id="content"> <?php mosPathWay(). ?></div> <div id="footer"><?php mosLoadModules ( ’footer’.org/1999/xhtml"> <head> <?php if ( $my->id ) { initEditor(). -2 ).ico\" />" . -2 ). ?></div> <div id="rightbar"> <?php mosLoadModules ( ’right’.

divs. h1. such as .4.1 Joomla! CSS Classes I have been unable to discover an official Joomla! Reference document describing all the Joomla! Specific CSS IDs and classes. 2-3 hours spent examining all the Joomla! output pages in detail using the Firefox Web Developer plug-in will give you a real feel for the way the pages are laid out.php.10 Make your own template 10.2 Generic CSS There are a few classes that are used across several different components and modules.button for buttons. I recommend this exercise to anyone who really wants to know how Joomla! web pages are constructed. and so on). In addition.4. 3rd party add in extensions also have their own classes (as well as often using standard Joomla! classes) to control elements of their presentation. Most modules and components allow the addition of a css suffix so that it is possible to style individual pages. Some are shared 130 . p. and styles related to specific design elements in the template (e. If any reader knows of any additional styles which I have missed please email me or post in the Learn Joomla! Forum and I will update the book and let all the other readers know. do use the Display ID and Class details option of the Firefox Web Developer toolbar to track these down. modules or components.inputbox for form elements. and by studying the source code and I believe that this is as good a reference as you will find for the CSS styles.g.4 The CSS styling file Most commercial templates use one or more separate CSS stylesheets to style all the key elements of the Joomla! output. 10. If your not sure what options are available for 3rd party extensions. I have supplied a commented CSS stylesheet with all the classes described here with your eBook for reference. Incidentally. There are some generic classes which apply to all articles. there are the default non Joomla! CSS styles (html. Joomla! has an extensive range of CSS IDs and Classes built in which you can use to make your website look just the way you want. and so I have analyzed a standard Joomla! Website (the one built using the default sample content) using the Firefox Web Developer plug-in (select option Display ID and Class details). In addition. h2. allowing good control over presentation. ids or table elements) which you define in your template design in index. body. The Joomla! Specific CSS breaks down into two parts. and . of course. and then there are specific classes related to each Joomla! element. blog views or menus separately. 10.

for example in a different colour or brightness. using -left and -right suffices in the appropriate module parameters.3 Specific CSS Menu/navigator Styling the menus is a key element in both the visual presentation of the site and in aiding navigation.moduletable . Otherwise the output is not formatted. Search. and a.contentpane . which is fairly self explanatory.moduletable is a generic class used for all modules. The individual menu link items are given the class . 10. Blog. or enclosed in <div> </div>. so that you can highlight the currently selected menu item visually. . login button the print/email/pdf buttons/text at the top of an article or Blog page author.small is used for both the author field of an article and for the More links on a Blog view or Section view.pagenav . e. and these can also be styled by combining with li or ul. Blog Seen in body of newsflash e.mainlevel or . and ’1’ in mosLoadModule in the index.sublevel. Contact.inputbox .componentheading . (Only one level of submenu class is supported). so you need to be careful in selected an appropriate style for this field which works for both.buttonheading .componentheading is used for the main page title for a range of components includ- ing Search. search button.any page suffices applied here affect the page viewed when clicking the menu item).g. . On a simple template you may decide to provide a single moduletable style. When using options ’0’. You may set CSS suffices to both the moduletable styling and the individual menu item. Additionally the currently selected menu item is given the ID active_menu. a:visited. .small Description Title of a Component e. 131 . e. For more complex designs you can create two or more styles using suffixes.10 Make your own template between different types of use.g. The individual menu is styled by selecting the module parameters via Module Manager (not via the Menu Manager .php template the output is set as tables and you can use this class to style all the table elements. Login. and Section Views.g a different style for left and right hand columns.back_button .button .contentdescription .4. td th and tr. Class .g.contentpaneopen . the link to a section in a section table view. a:hover and a:link. Login (the main component front page) Contacts.

and when doing so an Article index is displayed. These elements can also be styled.pagenavbar Prev-Next Links . Class #active_menu .article_seperator a class defining the end of an article which can be used to style a page seperator such as a coloured line .mainlevel . You should also consider looking at the extended_menu module (see Chapter 8) if you have more advanced styling needs. You may want to study some existing template stylesheets to see exactly how they have been tackled. You can also style any embedded images and the image caption.toclink text of links in article index to separate screens in split article box ’article Index’ .modifydate Date shown as Last Updated .10 Make your own template Styling menus properly can be quite complicated. Class Description . together with a page count.createdate Date of article creation .pagenavcounter the page 1 of 3 text which is inserted in a multi-screen split page .contentheading Article title . you can break a long article into multiple pages. Finally. For the finest level of control you can even apply a page class suffix in the parameters tab of a content item (via the Content Items: Edit screen) in order to define unique styles for the CSS elements on that article.mosimage_caption The image caption 132 .navbar The navigation bar .contenttoc table of contents Pages/articles split into multiple screens .sublevel Description this is the menu link item currently in use Each menu item Each sublevel menu item (only to 1 sub level depth) Article page A number of styles are provided for styling the individual elements of an article page. including giving individual li elements their own unique numbering (useful for positioning dividers). as this module allows you to style individual elements more precisely.mosimage An embedded image class . if you want to get the maximum quality. create and modify dates and the navigation links. including the title.

Class .g.pollstableborder .latestnews .g prev. and this one.blog_more .. Contacts.category Description The Heading row of the table with the Column titles Alternate lines in the table can be styled using this class .poll the poll title the box enclosing the poll #voteid1.syndicate .. so that you can easily style the table with for example different background tones or colours to make it easier to read. Individual rows in a table are given the classes .article_seperator.’ summary links box The individual Blog links to additional articles Table view. etc.wrapper Description Styles the text link in the summary Latest news display box Styles the text link in the summary Popular display box . next) the category link word displayed in a section table display Specific Modules Class . You can style the heading elements of a table..sectiontableentry2 on alternate lines.sectiontableentry1 .3 etc the IDs for the poll radio buttons The RSS syndication module box Styling the iframe embedded in the page 133 . Sections This is the CSS used for Tables of Article links.blogsection Description the entire Blog summary panel enclosing all the blog summary paragraphs the ’Read More’ link The Blog ’More . e.mostread ..sectiontableentry1 and .sectiontableentry2 . Different background colours to make it easier to read rows of information The footer row of the table with buttons (e. and these are also used by the front page component which is a variant of the Blog component Class .readon .10 Make your own template Blog display Blog uses all the article page classes such as .blog . and the footer which is generally navigation buttons or links.2. Newsfeeds.sectiontablefooter .sectiontableheader .

small . Class #mod_login_username #mod_login_password #mod_login_remember Description the username field the password field the remember me clickbox Search elements There are three principle search elements: the search module. Both of these latter two pages have their own classes and IDs.} in the template_css.g. This is done by replacing the icons via the Media Manager rather than using CSS classes. but it can easily be added by entering the line .css stylesheet manually using the CSS editor in Joomla! Administrator).inputbox and .highlight{background-color: #fbf803.button (if you style these it will affect other forms such as Contact Us) In addition there are IDs to style individual fields.x. Class or ID #search_searchword #searchphraseany #searchphraseall #searchphraseexact #search_ordering . a simple search box input field.0. which provides the more advanced search options. as well as the option to set a CSS suffix in the login module. in addition to standard classes such as . The search term can be highlighted in the results using the . the Search component.heading class (this is not implemented in the standard Joomla! Templates supplied with 1.inputbox. You may also consider replacing the standard contact icons with your won designs to match the visual style of your template.search . using a yellow highlighter pen style’ Contacts Form IDs are provided to style most of the elements in the contact form.10 Make your own template Login Module The login module uses the styles . and the search results page. which is styled via the search module or by styling generic Joomla! styles.highlight Description the search component IDs the plain search box displayed by the module heading of search results highlight search word in search results summary display e. 134 .

it is shown in listing 10. #content and #extras.2. and pretty standard amongst Joomla! templates. but there may be occasions where you want to change these. template_css. There are 5 key CSS boxes. This new design has three columns instead of two to allow for a new left hand menu with large buttons. See Fig.php is just a few lines. First we will build the index.2 135 . First we start by creating a visual. #leftside.css. to hold the design together. we will assume that you already know how to do this. #header. The file header for index. (Note I have not marked on every css element to avoid confusion.contact email #contact_name #contact_email #contact_subject #contact_text Description User Menu The user menu allows access to front end editing. (There are also other CSS Boxes such as #wrap.10 Make your own template ID or Class #emailForm .building a template the process Let’s look at making a new template for Anytown Zoo: let’s suppose they’ve decided they want something a bit more friendly and informal.5 An example . and positioned and styled in the CSS stylesheet. and the Editor.1). 10. #frontphoto.php.they can be seen by examining the code). When we have a design that our client has signed off.) The markup shows how we will put the design together. graphic mock up of the new layout in our favourite graphics editor (Fig 10. In most cases you will probably use the default styles for these elements.zip) and use the Web Developer Firefox plugin to examine it in more detail. and there are classes for the elements of the forms used to style the forms to input information. with the IDs. 10. if you want to view everything you can install the template (LJ_Zoo01. the buttons. These will be defined in the index. we mark it up with the exact sizes and colours ready to create our layout code with CSS ’boxes’ and CSS Stylesheet. The purpose of this tutorial will be to show you the steps involved in creating the Joomla! specific code. or that you will use a web design book such as those listed in the Appendices to work out how to write this code.php file. but I will not refer to these further . We will not go into the details of creating the (X)HTML code or the CSS for the basic design.

1: A new 3 column design visual for the AnyTown Zoo template 136 .10 Make your own template Figure 10.

10 Make your own template Figure 10.2: The Visual ’marked up’ for coding (only some markup shown) 137 .

?>.dtd"> <html xmlns="http://www. This is shown in Listing 10.w3. 4.php file <HEAD> .4 138 . That’s it.css\" type=\"text/css\"/>" .</head> tags we insert our first Joomla! specific code..10 Make your own template Listing 10.w3.}> tests to see if the user is logged in and whether to view the page in edit mode 5. You can pretty well use this standard header code for any template Next we need to create the body of the template using <div> . such as page title and meta tags is generated dynamically by Joomla! The command <?php mosShowHead().css\" type=\"text/css\"/>" .. ?> is placed here to enable this code to be outputted each time a web page is loaded. The command <?php if ($my->id) {initEditor()..0 Transitional//EN" "http://www. } ?> <meta http-equiv="Content-Type" content="text/html. You can also use this command in your template to automatically reference this stylesheet without explicitly referring to it’s name." ).. In between the <head> . A statement invoking PHP 2. 6.ico\" />" .org/1999/xhtml"> <head> <?php if ( $my->id ) { initEditor(). </div> tags to create our CSS boxes and within those insert our template positions.. The W3C compliant header code.3 The index.><?php echo _ISO. ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon. All of the standard HTML header information.?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. </HEAD> code <?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed. The external stylesheet is called using the link <?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/ $GLOBALS[cur_template]/css/template_css. in this case set to ’transitional’ 3.org/TR/xhtml1/DTD/xhtml1-transitional. ?> </head> This header code comprises: 1.. ?>" /> <?php mosShowHead(). ?> <?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/ $GLOBALS[cur_template]/css/template_css.

footer..php template is very simple.</div> tags.. we must include all the layout positioning for the CSS boxes. ?> <?php mosLoadModules ( ’bottom’. In our CSS stylesheet template_css. ?> command. ?> </div> </div> </body> </html> In the body code enclosed by the <body>. ?> </div> <div id="extras"><?php if (mosCountModules( "left" )) {mosLoadModules ( ’left’. ?> </div> <div id="footer"><?php mosLoadModules ( ’footer’. tr and th. we have inserted positions inset. -2 ). styling HTML table elements.. We need to be aware of this when defining our Joomla! specific styles. and right using the <?php mosLoadModules ( ’user1’.-2).-2).10 Make your own template Listing 10..e. there are no modules within this position on the specific dynamic page which is being created (because they are not linked on the menu page). where we replace the string ’user1’ with the appropriate name of the position we wish to create within a pair of <div>. user1. </BODY> code <body> <div id="wrap"> <div id="header"> <h1 class="title"><?php echo $mosConfig_sitename. If we had set the mosLoadModules output style to 0 (the default) then the module would be output in a table and the CSS stylesheet styles would need to be different.. -2 ). As you can see. td. That’s all there is to it..-2). no Joomla! specific code there. ?></h1> </div> <div id="frontphoto"> <?php mosLoadModules ( ’inset’.e.} ?> </div> <div id="content"> <?php mosPathWay(). i. The layout positioning is all standard CSS.</body> tags. You will notice that in a couple of places we have enclosed the mosLoadModules command within another PHP function thus <?php if (mosCountModules( "left" )) {mosLoadModules ( ’left’.php file <BODY> . -2 ). If the function mosCountModules returns a zero. i.css. then no code will be outputted by Joomla! and this position will be ’hidden’. -2 ). ?> <?php mosLoadModules ( ’user1’.. the index. bottom.} ?>. We have set the mosLoadModules output style to -2. We are 139 . left.. ?> <?php mosMainBody(). </div> tags. ?> </div> <div id="leftside"><?php mosLoadModules ( ’left’. and the styling.4 The index. This means that the modules will be output within a single CSS box called moduletable within a pair of <div> . -2 ).

font and background colour. } /* #frontphoto { margin:50px 0 0 10px.php has set the position #right to be in the CSS box with the label #extras). #content. margin:0 0 10px. width:250px. padding:0.sans-serif. no special Joomla! IDs or classes at this stage. font-size:2. margin:0 0 0 0./images/front.gif) top center repeat-y.Arial. background-color:inherit. In this first part of the file we set the general stylesheet settings using the body definition./images/bg. border:0.10 Make your own template using a mixture of absolute positioning and floats. } */ #frontphoto{ background: url(’. The Joomla! specific CSS can also be extended to identify specific elements within the design by adding CSS suffixes inside the Joomla! modules to enable code to be generated which allows styling of specific elements. #extras. } #header h1 { font-family:"Comic Sans MS". The full template_css. } /***** Header *****/ #header { margin:10px 0 0. } 140 .Tahoma.jpg’) no-repeat.zip template file supplied with this ebook.. The visual styling uses a mixture of standard CSS and some specific Joomla! CSS IDs and classes. Let’s look at extracts of the CSS file section by section. font-weight:bold. text-decoration:none. color:#e10a17.sans-serif.. Note that this is all standard CSS. We have now laid out the page and set the positions where the Joomla! code will be output (for example the mosLoadModules function in the index. /***** Body and main container *****/ body { margin:0 auto. #footer. float:left. color:#303030.css file can be examined by unzipping the LJ_Zoo01. background:#f4f4f4 url(. We then position the CSS boxes #wrap. height:200px. including typeface and text and line spacing. #frontphoto and #header. height:45px.2em. with the leftside.Arial. content and extras CSS Boxes being floated left. } #header h1 a{ color:#505050. background-color:inherit. border:0. padding:0. font:76% Verdana. #leftside.

background-color:inherit. margin:0 0 5px. margin:10px 0 15px. padding:0. padding:7px 5px. line-height:1.10 Make your own template In the next section we set up our left hand column. background-color:#f4f4f4. . border-left:4px solid #cccccc. } #leftside div. color:#6dac2a.5em. } #leftside h2. margin:0 0 5px. font-size:1. } 141 . color:#505050.Arial.sans-serif. width:126px.moduletable-left p { margin:10px 0 0. width:140px. Note the use of the CSS suffix -left which is added to moduletable to create a unique class for styling modules in the left hand column. font-size:0. padding:0. float:left.moduletable-left /***** Left sidebar *****/ #leftside { clear:left.9em. padding:0.4em.moduletable-left { clear:left. } #leftside div.#leftside h3 { font-family:"Comic Sans MS".

border-left:4px solid #6db058.10 Make your own template In the next section of the stylesheet. padding:0. padding:5px 1px 5px 5px.current { ul { ul a { 142 . /***** Main menu *****/ #leftside div. list-style:none. width:125px. } #leftside div.4em.moduletable ul#mainlevel background-color:#dfebdc.moduletable ul#mainlevel background-color:#fff1bb.moduletable ul#mainlevel width:140px. padding:0. font-weight:bold. we will style the menu navigation bar. Note that we style the elements within the moduletable div which Joomla! has inserted inside our #leftside div. margin:0 0 18px. color:#505050.moduletable ul#mainlevel margin:0 0 0 15px. } #leftside div. text-decoration:none. } { li { li a { li a:hover. line-height:1. color:#505050.moduletable ul#mainlevel padding:3px 1px 3px 5px. } #leftside div. width:130px. float:left. margin-bottom:5px.9em.ul.avmenu li a. } #leftside div. width:115px. border-left:4px solid #ffbe01. font-size:0. padding:0 0 5px 0. } #leftside div.moduletable ul#mainlevel width:140px. display:inline.

We have also included another version of this template. font-weight:bold. margin:0 0 10px. margin:0 0 8px. we have now coded the (X)HTML and stylesheet.4em. /***** Main content *****/ #content { margin:0 0 5px 150px. template_css. } #content .3. border-left:1px solid #f0f0f0.#contentwide h3 { font-family:"Comic Sans MS". color:#303030.xml. font-size:1. and the image files in a folder. The CSS is placed in a sub folder called css and the images in a folder called images.contentheading and . If we do not style every specific Joomla! element. padding:0 10px 0 10px. but styled in cool Scandinavian grays and blues for use as a general 3 column template.#contentwide td. setting the size and colour of the article heading with the . and save the file as LJ_zoo01. color:#e29528.mosimage { padding:1px. We create an XML file to describe the contents of this ZIP file in a text editor such as Notepad.6em.mosimage. } #content h3.3 Then put all the files. index. It’s called LJ_zoo01. } So. based on the Open Source template of the same name. And it’s done! We have created and installed a new template file. which is basically the same template.contentheading { font-family:"Comic Sans MS". then we save this file as templateDetails.sans-serif. border:4px solid #f0f0f0. Enjoy! You can examine the CSS of these templates and the other supplied LJ_metro01. color:#007fc2.Arial.zip.Arial.php. it will pick up the default body classes.xml. templateDetails. See listing 10. You can try my version out now as we have included this template with your ebook.contentheading. font-size:1. background:#cccccc.sans-serif.8em.zip. called LJ_andreas01. } #content td. 143 .zip.zip template to help you see the specific CSS styling. 10.#contentwide . Finally we zip it all up into a Zip file archive using WinZip. See Fig.componentheading classes. line-height:1. We upload our new template zip file to the site template manager and set as the default template.10 Make your own template Finally we style the main content area.css. Next. we need to package our template. display:inline.

10 Make your own template Figure 10.3: The LJ_andreas01 template 144 .

You are free to download any design you like and modify it to work in Joomla!. A couple of the templates I have used for the Learn Joomla! ebook started off in this way. why not trying modifying an existing design from someone who is? There are hundreds of free open source web templates at Open Source Web Design www. 10.10 Make your own template OK. Go to Site > Template Manager > Site Templates Simply click the radio button in front of the template you wish to edit and then click on either the large Edit HTML or Edit CSS buttons. If you use a template in a live site though don’t forget to let the designer know and leave them a copyright notice somewhere. now it’s over to you to try out your own first template and give yourself full control over the power of Joomla! design. Make the changes to your code.7 A free resource for template ideas If you are not a graphic designer.org. The editor is a simple tool and does not provide an ’Undo’ button. and then refresh the preview of your site or select Site > Preview > In New Window to see the effect your changes have had. TIP: Before editing your HTML or CSS live take a backup copy of the file in case you make a mistake and need to undo your changes.oswd. 10.php or css file ’live’ from the Template Manager screen. 145 .6 Editing a template ’in situ’ You can edit a template index. press the Save button.

add the appropriate -suffix in the CSS field templateDetails. and place it in the position where the text is required. using the MCE editor to style as required.learnjoomla.xml so that Joomla! loads it when the template is installed.uk/index. 1. How do I delete it completely? Appendix C sets out all the steps needed to remove the sample content.e. How do I put some static text in a display box in a column or other user defined position? To do this you need to create a new module. These tips should saves you hours of wasted time searching the forums. and Click the New button b) Give the module a title. http://demo. d) Now go to the bottom of the display.g.co. e. If you have suggestions for more simple solutions to problems which you think should be added to this list please email them to ideas@learnjoomla. and enter your text in the Custom Output box. 146 . the help text and the Joomla! code to implement them. when I try to open it again it it’s locked? How do I unlock it? Log in as a Super Administrator. and closed it but now there is a padlock showing against the article and we can’t access it to edit it again.g. e) Clive the Save button. but which can be incredibly difficult and time consuming to work out when you are developing a site for the first time. From the Administrator Control Panel go to System > Global Checkin This will unlock any items which have been checked out and locked. Tips & Howtos Here you can find the answers to some simple problems which you may encounter when building your website. and set the position. I (or a colleague) was editing an article in the Content manager.11 Hints.g. e.co. 3. i.uk and we will add them to the website and to future editions of the eBook. Your text will now appear in the position selected. a) Go to Modules > Site Modules. including modules 2. I installed the sample content by mistake. e. Joomla! sites. ’Hints & Tips’.php?tp=1 4. How can I check the available module positions in my template? You can add ?tp=1 after any Joomla! URL to see the available module positions in your currently loaded template. right c) If you need to chose a moduletable visual style.

see Chapter 8. v.<br /> Please check back again soon”.Joomla!.4 6. ?> in the appropriate location in your index. vi.6 5.ico to replace the default icon at location /images/favicon. use the Content Item 3rd Party module .ico extension) in your template file.jpg. $mosConfig_live_site = http://www. ii. here’s what to do: a) Copy over your files. How do I move my Joomla! site from my existing server to a new domain on my server or to a new website host? To move your Joomla! site from either one folder to another or one server to another. d) Note: You may also need to ensure you have configured your . $mosConfig_absolute_path = /home/Joomla!/public_html. it displays a large Joomla! logo and text stating “This site is down for maintenance. i. How do I put a still image in a display box in a column or other user defined position? The easiest way to do this is using the ArtBanners 3rd party component and to place a copy of the ArtBanners module in the position where you want the image to appear. Alternatively you can FTP a replacement favicon. 147 .php file to reflect the new values.htaccess file in the new location. How do I change the graphic displayed when the site is offline? When you take your site offline for updating. either via ftp or SSH/command line b) Backup and then restore your database perhaps using phpmyadmin or SSH/command line(this step only needed if moving site from one server to another.php file 9. $mosConfig_password = password. How to change the favourite icon (displayed in the browser URL field?) Ensure that you have included a bitmap of your icon called favicon. Tips & Howtos f) If you want to place dynamic text in a display box which is not in the main display area.ico (from your web root) 7. with your own artwork. $mosConfig_cachepath = /your absolute path/cache.) c) Edit the following values in your configuration. setting the image size to 350 x 71 pixels. iii. You can change the text from Global Configuration. $mosConfig_user = Joomla!_Joomla!. iv. To change this graphic to one more suitable to the design of your site. See Chapter 8.11 Hints.6. How to display a live date on my homepage? Use the PHP function <?php echo date(’D j M Y’). use FTP to replace the file /images/Joomla!_logo_black. Make sure that the file is described in the XML file.6.org. 8.ico (you can create a bitmap in GIMP and rename it to the . $mosConfig_db = Joomla!_Joomla!.

Now edit your CSS file template_css. Edit the file /language/english. and save the file. Tips & Howtos 10. this one is a hack as there is no clean Joomla! solution to this requirement at present. Upload it to the image directory of your template file e. ’GO’? OK. This took me almost a day to work out when I was starting Joomla! Design your GO button and save it as a . so the line now reads DEFINE(’_SEARCH_TITLE’. How do I replace the normal search button with my own button graphic e.. and remove the text Search.3. This is simpler than installing DOCMan.2) 12. How do I highlight the search term in my search results in a different colour? Add the following line to your template_css.gif file.css and add the following style (NOTE: You will need to set the margin and padding. If you have a large number of files to maintain. select the radio button next to your template. etc accordingly to meet your template design requirements).”). 13. How do I upload PDF files and link them in the body of my article page to download? The easiest way to do this is to upload your files using the Media Manager. /templates/LJ_metro01/img/go.highlight{background-color: #fbf803. and you also need to copy the MySQL database using PHPMyAdmin or other tool provided by your hosting provider.css file for the currently active template.php (or the appropriate language file). and store them there. You can then use the Media Manager feature which generates the correct URL to your PDF file when you select it and cut and paste this URL as a link in the appropriate place in your article page using the link button in MCE editor. 11. document management for a few files. .’Search’). background colour. line height. Find the line DEFINE(’_SEARCH_TITLE’. and press the Edit CSS button against the default template.g. Now add the suffix -search to your Search module parameters from the Module Manager 148 .g.} Go to Site > Template Manager > Site Templates. . What files do I need to backup to create a complete backup of my Joomla! site? You need to copy all the files and directories in the root (/) directory of your webspace.11 Hints. Add the line and press Save.gif. then DOCman may be a better solution (see Chapter 8. I suggest you create a sub folder called PDF within the ’Stories’ sub directory.

htpasswd <limit GET PUT POST> require valid-user </limit> You then add username and password (s) in the . See man htpasswd on any Linux Apache server.gif) no-repeat center center.. main page design here . has no code output on the home page which will cause the ’Splash’ page to appear. </body> 15. How do I create a different home splash page when I can only have one index.11 Hints. in your . Ensure that the position user1 (or whichever position you use. text-indent: -1000em. padding: 0 5px.htpasswd is set to the root directory of your web space) AuthType Basic AuthName "Members Only" AuthUserFile /var/www/web1/. <body> ... 16. height: 19px. margin: 0 0 0 5px. border-style: none. width: 25px. border-style: none. Tips & Howtos . How to add password access control to your website to make it completely inaccessible except to approved users If you are using Apache..button-search { background: transparent url(.. color: #fff. } ?> ... } else { . Ensure that user1 has output on all other pages.htaccess file you require the following code: (where /var/www/web1/. /*background-color: #ae200d. splash home page design here . ELSE statement to provide two alternatives as in the sample code below.*/ } 14. margin: 0 0 0 5px. line-height: 19px../img/go. cursor: pointer. padding: 0 10px 0 0. cursor: pointer..htpasswd file.php page in my template? Use the function mosCountModules in a PHP IF. ’How do they do that?’ If you are visiting a site built in Joomla! and you want to know which extension 149 . <?php if (mosCountModules(“right”)) { .

I have successfully used this method to track down several interesting extensions which I found on other nicely designed Joomla! web sites. and you can then search for it in the Joomla! extensions directory or Google for more information. Tips & Howtos they have used to provide the function that you are interested in take a look at the URL. If there is a com_ extension in there you will be able to extract the name of the components.11 Hints. 150 .

151 . Many of the Joomla! resources available freely on the net will help you. It is beyond the scope of a beginners book to explain about building plug ins. However now that you are up to speed on using Joomla! you will find that there is a great deal of useful information aimed at the Intermediate and Advanced developer on the Joomla! site. modules. Your single best source of information is however the Joomla! forums where you can find thousands of other developers all eager to share their knowledge. The Joomla! Extensions database is an invaluable resource on the hundreds of 3rd Party plugins available and includes feedback from other users and the editor to guide you to the best solutions for your needs.12 Where to go next to build your expertise and skills Hopefully this book has got you started with the development of a Joomla! website and now you are a Joomla! addict! The book however only scratches the surface of what Joomla! can do and how to work with it. components and mambots.

org Joomla! Local PC server Joomla! Stand Alone Server ’JSAS’ .joomla.an invaluable source of help and contacts http://forum. most of them also offer several free templates to get you to their site! http://www.org The Joomla! Forum .A Useful websites Joomla! Links: The main Joomla! website. Check here for latest news.joomla. Here’s the link from the main Joomla! website.org The Joomla! User Manual .joomla.joomla.a reference manual for Joomla! It may be downloaded from: http://help.org The Joomla! 3rd Party extensions website for add-on components and modules http://extensions.joomla.org/content/blogcategory/19/51/ 152 .com Templates: Sources of free Joomla! Templates: A number of commercial template suppliers supply one or two free templates to attract you to their site. Also check out the commercial suppliers indicated below. documentation and downloads http://www.joomlasolutions.A complete tool for running Joomla! on your PC for building Joomla! sites without setting up web hosting first http://jsas.

uk .com .try Googling for a full range): www.UK hosting http://joomla-hosting-directory.Simple.com (UK supplier .UK supplier with a large catalogue of website designs Joomla! Web Hosting (a small sample .artonezero.uk .A directory of US Joomla! Hosting Companies Suppliers of Commercial Support and Assistance for Joomla!: www.rockettheme.joomlart.Learn Joomla!’s publishers) www.com (UK Developers of Joomla! websites .learnjoomla.joomladesigns.joomlashack. high quality templates www.joomlafactory.com/ .High quality templates from US supplier www.owned by Learn Joomla!’s publishers) www.hosting-netexplorers.High quality graphically rich templates with a US flavour www.uk (Yes. clean designs from UK supplier www.joomlancers.co.co.A Useful websites Suppliers of Commercial Templates (a selection of recommended suppliers): www. we offer commercial support!) www.com .com .cmslounge.com .owned by Learn Joomla!’s publishers) www.artonezero.uk (UK supplier of UK oriented templates .Find a Joomla! freelancer to work on your project 153 .Well designed.co.com .co.

An Open Source HTML Editor.B Open Source Software Tools & Tutorials Joomla! contains the basic tools you need to build your website.webxact. www.wc3. In the commercial software tools arena.An Open Source Image Editor.www.gimp. Illustrator and Dreamweaver. accessibility and privacy .vnu.mozilla. which can deliver the same results if you don’t want to spend a fortune on software.com/en-US/firefox/central/ Web Developer Plug in . www.inkscape. Adobe is the market leader in high quality products. Tiny MCE.HTML editor VNU . Firefox .com 154 . test web content for quality.com/work/webdeveloper/ W3C .watchfire. www. It also has an excellent colour coded source code viewer built in. including Photoshop.http://chrispederick.org 2.org Bobby. and it even includes a small WYSYWIG embedded HTML editor. because of it’s conformance to the W3C web standards and the number of excellent plug in tools available. You should find the following useful: 1.Graphics Editors The GIMP .org 3. which will work very well with Joomla! However there are also some excellent open source tools.org Inkscape .An Open Source Vector Graphics Editor.www.Development Tools and Test Tools I strongly recommend Firefox as your development browser of choice.

http://www. Publisher: Apress.com CSS from the ground up .csszengarden.com/editorial/basics/ Books Beginning CSS Web Development Author: Simon Collison.www. ISBN: 1-59059-689-7 155 .wpdfd.B Open Source Software Tools & Tutorials Web Development Tutorials CSS Garden .

Before you can start building your site you will need to remove this content. categories and menu structure installed. Here are the steps required to delete all contents via the Administrator interface 1. All the items will be moved to the waste bin 5. Go to Content > Static Content Manager 6. Go to Content > Category Manager 11. Click the tick box in the items header bar (between # and Title). Click the large button marked ’Trash’ on the navigator bar. Go to the Home Page and click the large button Marked Trash Manager. Click the large button marked ’Trash’ on the navigator bar. unless you un tick the box marker ’Install sample content’ you will have a number or articles. 10. sections. All the items will be moved to the waste bin 8. 13.C Instructions for deleting all content and structure from a standard Joomla! install When you initially install Joomla!. Go to Content > All Content Items 3. Go to Content > Section Manager 156 . All the text articles have now been permanently deleted. You get a warning explaining that this is not a reversible step. All the items will be moved to the waste bin (Note: All content items must be deleted from Trash before the Category containing that content can be deleted). Log in as the Super Administrator (admin) 2. Click the tick box in the items header bar (between # and Category Name). Click the tick box in the items header bar (between # and Title). Ticks will appear in front of all the content items 7. Ticks will appear in front of all the content items 12. 9. Ticks will appear in front of all the content items 4. Click the large button marked ’Trash’ on the navigator bar. Click the large button marked Delete. Click the tick box in the items header bar (between # and Title). Press the delete button. Ticks will appear in front of all the content items.

Click on the Stories folder. Ticks will appear in front of all the content items 18. For each item. 32. Click the tick box in the items header bar (between # and Category). Click on the Banners folder. Ticks will appear in front of all the link items 30. Click the tick box in the items header bar (between # and Section Name). click the trashcan icon to delete the banner. Select the Menu Items tab. Ticks will appear in front of all the polls 27. 23. Go to Components > Poll Manager. Go to Components > WebLinks > WebLink Items. Click the large button marked Delete. Press the delete button. Click the large button marked ’Trash’ on the navigator bar.C Instructions for deleting all content and structure from a standard Joomla! install 14. Click the large button marked ’Trash’ on the navigator bar. Go to Home > Trash Manager. 29. Click the large button marked ’Trash’ on the navigator bar. You get a warning explaining that this is not a reversible step. click the trashcan icon to delete the directory or image. Go to Menu > Main Menu 17. Click the large button marked ’Trash’ on the navigator bar. All the items will be moved to the waste bin 19. Top Menu and User Menu to remove all the menus links 20. All the items will be moved to the waste bin 157 . For each item. 21. Click the tick box in the items header bar (between # and Title). Click the tick box in the items header bar (between # and Menu). Ticks will appear in front of all the sections 15. 26. All the items will be moved to the waste bin 31. When finished click the icon to go up to the root image directory 24. All the items will be moved to the waste bin 28. Click the tick box in the items header bar (between # and Title). Ticks will appear in front of all the menu items. All the items will be moved to the waste bin 16. Go to Components > WebLinks > WebLink Categories. All the menu links have now been permanently deleted. When finished click the icon to go up to the root image directory 25. Go to Home > Media Manager. Ticks will appear in front of all the categories 33. 22. Click the large button marked ’Trash’ on the navigator bar. Click the tick box in the items header bar (between # and Poll Title). Repeat the above steps for Other Menu.

Click the large button marked ’Trash’ on the navigator bar. Go to Components > News Feeds > Manage News Feeds.19. Ticks will appear in front of all the newsfeed items 36.6.20 with the tick bar and press the Unpublish button.17. Finally. 158 .5. Go to Components > News Feeds > Newsfeed Categories. Click the large button marked ’Trash’ on the navigator bar.C Instructions for deleting all content and structure from a standard Joomla! install 34. you will need to switch off (un-published) the modules which will not be used in the initial working example. 35.4.18. and you are ready to perform the Worked Example in Chapter 5. All the items will be moved to the waste bin 40. Ticks will appear in front of all the categories 39. Click the tick box in the items header bar (between # and Category). Select items 3.16. 41.15. Congratulations! You have now deleted all the sample content supplied with the standard Joomla! installation. All the items will be moved to the waste bin 37.13. 38. You will then see a red ’X’ in the published column. Go to Modules > Site Modules 42. Click the tick box in the items header bar (between # and Newsfeed).14.

Select Content Items Manager 159 . Go to Media Manager from the home page 2. Now put the full copy excluding intro paragraph in Main Text box.D Basic End User Instructions Here are some instructions for end users which I have provided to clients with Joomla! websites. Enter article title phrase and chose/enter a short title alias word 6. again select all and format as paragraph 9. Enter date/time for news release to appear in Start Publishing box 10. Open the PDF folder by clicking on it 3. Select category ’latest news’ 5. Feel free to adapt them top your needs if suitable. To enter a new News story. Select all copy entered in this box and choose format ’paragraph’ 8. Go to Content Items Manager 2. ? 1. Select section ’news’ 4. Type or cut and paste in the paragraph to appear on the news summary page in the Intro Text box 7. Click Save button How do I upload new PDFs and change the link in the careers page. Go back to the Main Menu 7. Click the ’Published’ tick box 11. Select the new file using the mouse when it is uploaded and you will get the link HTML code showing in ’ Image/URL Code’ 5. Click New button 3. with an embargoed start time/date: 1. Click the browse button to select and upload the PDF file 4. Copy this link to the clipboard in its entirety/paste into notepad if required to keep it temporarily 6.

D Basic End User Instructions
8. Select the first link to Careers, the one in Category ’About’ 9. Click the mouse pointer in the link that you wish to edit 10. Press the Link Button (looks like a chain - hover message is ’Insert/Edit link’) 11. Replace the link URL with the one you copied to the clipboard/notepad 12. Click the Update button 13. Click the big Save button at the top of the page

“I want to add Jane Doe to the staff list and I have a photo & bio. Looking at the CMS, I can’t see a place for photos. I can see a reference in the actual text to an embedded photo, but can’t find any link/mechanism to follow?” Here are the steps: 1. Size the photo for Jane Doe to be the same dimensions as the other management images 2. Upload it using the Media Manager to the Stories folder 3. Go to Home Page > Content Items Manager 4. Select Management Team 5. Type in the copy for Jane Doe’s bio, and format the copy to paragraph format, heading to Heading3. Check the other copy to ensure it is consistent. 6. Position the cursor before the first character of the main paragraph of text 7. At the bottom of the text window is a button marked Insert Image. Press it once. This inserts the image tag {mosimage} 8. Go to the panel on the left hand side of the page, and select the images tab 9. Your new image recently uploaded should be in the Gallery images window. Highlight it with a click of the mouse and then press the > > button to add it to the list of images for this page in the right hand window (Content images) 10. Highlight the image in the Content Images window with a click of the mouse and the image will appear on screen below as the ’Active Image’ 11. Set Image align left and press the Apply button 12. Save the page with the Save button at the top of the screen (if you get it wrong abort and start again) 13. All done

160

E Glossary
Admin Templates Templates used to define the layout of the Administrator (Backend) area of your Joomla! web site. Administrator A User level within Joomla! with access to some Administrator (Backend) and all Site (Front-end) functions. Alt attribute Author-defined alternate text for an image. The browser displays this text rather than the image, and it describes to the reader what he or she is missing on a page. It is a good practice to include the alt attribute for each image on a page to improve the display and usefulness of your document for instances in which the browser cannot load images, for users unable to view images due to sight impairment, or for people who have text-only browsers. See also Image Tag. Archive Content items can be archived and managed through the Administrator (Back-end). Archive Module provides a way of displaying archived items on your web site. Article Discrete piece of content within the Joomla! hierarchy, which may be associated with a particular Section/Category combination or may be a Static Content Item; usually displayed in the main body of your page. Within the Content hierarchy, Section is the top level and is a container for Categories. Category is the next level and is a container for the third level, Articles. See also Content Item. Author User level within Joomla! With access only to Site (Front-end) functions. See also Editor, Publisher, and Registered. Back-end (Administrator Back-end) Administrators Control Panel, where site Managers, Administrators, or Super Administrators log in to manage all aspects of their web site, including both features and content. See also Front-end (Site Front-end). Banners - -A Joomla! Core Component, which allows you to manage and display banner ads for your web site. In the Administrator (Back-end), you can set up banners, input and associate clients with their specific banners, and specify impressions as a number or unlimited. The number of impressions seen and clicks are recorded and displayed in the Back-end under Components/Banners/Manage Banners. Banners are displayed on the Site (Front-end) using the banners module.

161

E Glossary
Blog A style of content presentation within Joomla!, displaying some or all of the content items in a certain section or category. The title may appear as a link or both the title and the introductory text, with a Read More link displayed. Often the News page is written in Blog style. Browser A Software program used to view and interact with various types of Internet resources available on the World Wide Web. FireFox, Internet Explorer, and Safari are three common examples. Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) provide the ability to separate the layout and styles of a web page from the data or information. Styles such as fonts, font sizes, and margins can be specified in one place, then the web pages feed off this one master list, Category - Collection of related content items; for instance, the category Airplanes may contain the content items Biplanes, Fixed wing, and Jets. Within the Content hierarchy, Section is the top level and is a container for Categories. Category is the next level and is a container for the third level, Articles. See also Article and Section. Category Name The long name to be displayed in headings, e.g. Contact Our Corporate Headquarters in Virginia. Category Title - -The short name to appear in menus, e.g. Contact Us Check Out (an item) - -When a user edits a file, they check it out. This prevents other users from being able to edit the item at the same time, thus preventing loss of data upon saving. Check-in - -This function, available from the Site (Front-end) for registered users with editing privileges, allows a user to make the items they were working on, previously locked and un editable, available again. See also Global Check-in. Client-side Scripting Class of computer programming on the web, which is executed client side by the users web browser, instead of server-side (on the web server). This type of computer programming is an important part of the Dynamic HTML (DHTML) concept, enabling web pages to be scripted; that is, to have different and changing content depending on user input, environmental conditions (such as the time of day), or other variables. See also Server-side Scripting. CMT Acronym for Components, Modules, and Templates. CMTP - -Acronym for Components, Modules, Templates and Plugins. Components - -Content elements or applications that are usually displayed in the center of the main content area of a template. This depends on the design of the template in use. Components are core elements of Joomla!s functionality. These core elements include Banners, Contact, News Feeds, Polls and Web Links. Members of the

162

fast. etc. Plugins or Languages that extend your Joomla! installation. DOM is also the basis for a wide range of application programming interfaces. Document Object Model (DOM) Form of representation of structured documents as an object-oriented model. among other things. Database An organized collection of records that you can search.org and various other web sites. The Joomla! Core software contains some built-in CMTPs. Category hierarchy. Core Zip-file This contains the official standard Joomla! Installation. DHTML code makes use of style sheets and JavaScript. See also Author. contains global variable information specific to your own Joomla! Installation. These elements can already be bundled into the core or they can be third-party elements. and Registered. See also DOMIT. which means you can add. enables. This may be downloaded from http://developer.Joomla!. Content Item A Content Item is an item within the Section.-User level within Joomla! With access only to Site (Front-end) authoring and editing functions.Joomla. and written purely in PHP. such as database user name. 163 . Publisher. It is lightweight. Dynamic HTML (DHTML) An extension of HTML. Extensions Components. Joomla! Is database-driven software. Configuration File . DOMIT An xml parser for PHP based on the Document Object Model (DOM) Level two specification. admin password. See also Record.E Glossary Joomla! Community produce third party Joomla! Components on a continuous basis. but can be extended with third-party developers add-ons. the inclusion of small animations and dynamic menus in Web pages. some of which are standardized by the W3C. Templates. sort. edit or delete content that is stored in Joomla!!s database. They are freely available to download from http://developer. See also Modules.org and a number of other web sites. found in the root directory of your Joomla! Installation. and analyze rapidly.php file. See also Static Content Item Content Management System (CMS) Software for dynamically managing web site content directly on the server.-The configuration. See also DOM. the official World Wide Web Consortium (W3C) standard for representing structured documents in a platform.and languageneutral manner. Modules. Editor .

164 . Performing a Global Check-in will make those items available again. See also HTML. Site (Front-end). PHP Installers A menu option allowing access to Component. You may configure the display of the Frontpage by editing the menu item associated with it. the authoring language used to create documents on the World Wide Web. a content category. See also Back-end (Administrator Back-end).E Glossary Front-end (Site Front-end) Web site that is seen by your visitors (or registered users). PHP Joomla! . pointing to the full content item. JavaScript A common computer programming language developed by ECMA for use in web pages. The ordering of your Frontpage Content Items is done using the Frontpage Manager option under the Content menu option. Module or Templates screens from which zip files can be uploaded for installation on your Joomla! Web site. See also JavaScript. it will remain checked out. a menu item or a link. An item can be an article. images are defined with the <img> tag. Intro Text and Main Text are used in Content Items in the Section/Category hierarchy but not in Static Content Items. classified as either Site (Front-end) or Administrator (Backend).Joomla! Is one of the finest Open Source Web Content Management Systems available. Intro Text Required field that must contain content when creating a new content item or editing an existing content item. See also Alt attribute. Group Collection of user levels. JavaScript is relatively small and fast and is used for providing interactivity on web pages. Frontpage Built-in Component. which shows all the published content items from your site marked with the parameter Show on Frontpage. Language. This option is only available in the Administrator (Back-end) or as a User Menu item for logged-in users. a Read More link will be shown. If text has been added to the Main Text field and the content item is checked to Show on Frontpage. Image tag In HTML. See also: Main Text HTML Short for Hyper Text Markup Language. usually the Home menu item. Item An Item is a discrete piece of content within the Joomla! Hierarchy. Global Check-in When an item is checked out and it is not saved or cancelled correctly (such as with a connection error or the use of back on the browser). See also Administrator (Back-end). and thus un editable for all other users. Mambots. This option is only available to Super Administrators.

. Joomla! User Joomla! Users are arranged in two groups with different levels of access control. or the Control Panel. etc.E Glossary Joomla! Administrator The Joomla! Administrator is an application for administering your Joomla! Web site directly on the server. Joomla! provides a number of Mambots in the core distribution. Media Files Media files such as . a single Group or a User Group and Child Groups. Manager. Users with access to the Frontend include Anonymous. Polls. task-oriented function that intercepts content before it is displayed and manipulates it in some way. An example of a module PHP code is <php mosLoadModules ( module position ).jpg. Calendar of events and content items etc. >. Admin Section. They are freely available on http://developer. 3rd party component and module searchers. Manager users have access to some Backend and all Frontend functions. See also Module Position 165 . Members of the Joomla! Community produce Joomla! Modules on a continuous basis. There are also three levels with access to the Backend. e. Mambot A Mambot is a small. It is sometimes also referred to as any of the Administrator. third party components. Top menu. Modules are small content items that can be displayed anywhere that your template allows it to be displayed. Modules are very easy to install in the Admin Section. Joomla! modules may include: Main Menu. etc. Super Administrator Mass Mail A core Joomla! component that allows E-mails to be sent to All User Groups. etc. .png or . It shows up after clicking the ’Read On’ link in the Frontend of your site. Hit Counter. WYSIWYG editors. Media files can be included in Content Items via Image tab on Edit Content Item pages. Main Text When creating or editing a Content Item.Joomla. Backend. Main Body Defined in the PHP code as <php mosMainBody(). Editor and Publisher. Administration Section. the Main Text box contains the text you do not want to show on the Front Page. Newsflash. e. this displays content from Joomla! Components.bmp files can be used in Content Items and are organized via the Media Manager. Template Chooser. >.org for download. Registered. WYSIWYG editors include media managers. Administrator and Super Administrator.gif.g. Author.g. See also: Intro Text Manager A user level within Joomla!. Modules Modules extend the capabilities of Joomla! Giving the software new functionality. See also Administrator.

up to 12 vote options and on which page(s) it should be displayed. All the source code for Joomla! Is open source and is readable and changeable by any user. See also Modules Newsfeed A Newsfeed is a way of sharing content between different sites. The code is produced by the DOMIT parser. bottom and 23 author-defined positions. Open Source (OS) Open Source is a general term describing several parts of the Free Software Licence movement. You can define the Poll title. top. Joomla! Offers you the possibility to both offer and display Newsfeeds. Content items can be managed with a start and end date of publishing. Module positions are not confined by their name. Preview The Preview icon enables a popup window for you to see from the Backend that your content item would look like in the Frontend of your site. See also HTML. the left module position. This sharing method is meant for creating a news introduction in the way the provider wants it and it normally has a link to the providers web site. modules. right.org. menus or modules. Polls A core Joomla! Component that allows a poll to be displayed on your Joomla! Web site. installed elements will only display on your Web site if they are published. There are 27 pre named positions. Parameters Parameters can be used to alter the presentation of specific items. Alternatively. e.php file extension. mambots and scripts that are freely set up and managed by their authors at /http://developer. > may be placed anywhere in the template. PHP can be written as scripts that reside on the server and may produce HTML output that downloads to the web browser. For example. PHP Hypertext Preprocessor is an open source server side programming language extensively used for web scripts and to process data passed via the Common Gateway Interface from HTML forms etc. the time delay in seconds (Lag) between votes. Left.g. Projects Projects can be components. 166 . Thus. Atom.Joomla. etc). JavaScript patTemplate patTemplate is a system within Joomla! To help create Joomla! Site Templates. templates. PHP can be embedded within HTML pages that are then saved with a . The types of Newsfeeds currently available to display and produce (RSS versions. coded as <php mosLoadModules ( left ).E Glossary Module Position Names for the placement of modules within a template. Public Backend See Backend Public Frontend See Frontend Publish(ed) This defines the state of various parts of your Joomla! Installation.

Syndication A process.E Glossary See also Unpublish(ed) Publisher A user level within Joomla! Publisher users only have access to Frontend functions. It is sometime referred to as the Frontend. See also Client-side scripting Static Content Item A Static Content Item is a content item that does not belong to the Sections/Category/Content Item hierarchy. by which a web site is able to share information. and . Templates Defining the layout of your Joomla! Web site. as well as for the Administrator (Backend) called Administrator Templates. Manager. with other web sites. .jsp. 167 . A section might be called Transport. templates can be created for the Site (Front-end) of your site (called Site Templates). See also Administrator Templates. it usually sends a HTML page that can be viewed in any web browser. such as Articles. Site The Joomla! Site is the Web site displayed to your visitors or users. each row of each table is a database record. patTemplate and Site Templates.asp. See also Administrator. It is part of the Section/Category/Content Item hierarchy. See also Database Registered User A user level within Joomla! Registered users only have access to Frontend functions. Editor and Publisher Server-side scripting Programs that are interpreted by the web server when a page is requested.php. When the server finishes processing a script. Editor and Registered Record A database record is a description of a single item as stored in a database. See also Author. See also Content Item Section A Section is a collection of Categories that are related in some way. Scripts have special extensions such as . using a Newsfeed. containing all the content added in the Admin Section. See also Category. categories in this section might be Boats. See also Admin Templates and Templates Super Administrator User level within Joomla! With access to all Administrator (Back-end) and Site (Front-end) functions. In a relational database. Site Templates Site Templates define the layout of your Joomla! Web sites Frontend. You can assign different templates to various pages of your web site. See also Author. Cars and Airplanes.

See also Publish(ed). WYSIWYG Editor Editing tool which uses a WYSIWYG (an acronym for What You See Is What You Get) interface to allow easy editing of items in a non-code format. article and link management and several other features. individual pages. indicating whether that particular piece is visible on the site or operational (very much like an onoff switch). Web Links. organized into categories. 168 . which may be displayed above it in the Site (Frontend). This can be used to wrap an application (like a forum or a gallery). Content items can be managed with a start and end date of publishing. or even an entire web site. The workspace can include: HTML editor. An alternative name is an Iframe.E Glossary Title Name given to an Article. Title Alias Alternative title for Articles. Unpublish(ed) State of various parts of your Joomla! Installation. For example. Wrapper Built-in Joomla! Component.Core component that manages and displays hyperlinks to other web sites. The workspace dynamically updates as you select tools and menu options. used by SEF scripts and dynamic title/meta scripts. Workspace Section of the Joomla! Admin where the business of configuration and content publishing takes place. used to pull in and display any URL within your web site. installed elements will not be displayed on your web site if they are unpublished.

44 CMS. text within. 154 Global Settings. 13 Front end. 113 Home. 16 column. 95 ID. 10 Copyright. 18 Front Page. 98 JSAS. 26 Joomla Stand Alone Server. 43 GPL. 72 Blogg-X. 28 Content Item. 22 JoomlaBoard. 13 Guest book. 114 extensions. 11 author. 18 Backup. 64 enquiry form.php. 19 Category Manager. Joomla. 114 Banners. 28 Acajoom. 90 Fantastico. 115 Categories. 116 Apache. 100 document management. 114 forum. 11 back end. 22 Artbanners. 2 cPanel. 147 file permissions. 23 DocMan. 23 169 . 45 Adding pictures.ico. 13 Blog. 82 banners. 146 Community Builder. 97 free. 65 date. 18. 79 installation. 21 dial-up. 113 Editing. 29 favicon. 95 CSS. 64 editing. 68 GIMP. 148 banner. 52 Administrator Interface. 28 forms. 100 e-mail newsletter. 114 benefits. 19 configuration. 114 Artonezero.Index 777. 28 credit card. 48 Horizontal Menu. 112 Components. 115 Conventions. 39 Adsense. 103 Access level. 40 Demo. 52 Hosting. 147 default template. 130 Customer editing. 103 Easybook. 2. 63 Adding New Content. 113 Blog view.

116 Parent. 19 SEF. 52 Menu Manager. 28 shop. 119. column. highlight. 95 Paypal. 147 Mycontent. 37 User Menu. new. 24 VirtueMart. building. 56 search button. 107 menu. 125 pictures. Installation. 91 Web Developer. 19. 84 Popular. 70 Newsfeed component. 32 Unlock. AnyTown. Administrator. 22 PHP. 52 place content. 86 Newsfeeds. 48 Menu. 146 User Manual. 72 Syndication. 114 News. Latest. 113 Wordpress. site. 76 Template. 113 Mambots. 64 User. 88 Table view. 115 Polls. 154 Web Links. 61 MamBlog. 19 Media Manager. 88 sample content. template functions. 41 Module Manager. 147 strftime. 91 shopping cart. 43 sample content. deleting. 43 site offline. 116 SEO. 55 Login Form. 37 170 . 96 PDF. 103 NoChex. 85 Newsletter.Index key steps. 121 Trash Manager. 32 Search. 81 Menus. display. 58 splash page. 81 Summary Views. 51 Template Manager. 146 RSS. sub. 55 password. 94 Site Offline. 78 module. 96 OpenSEF. email. 40 template. Administrative. Self Registered. 113 Zoo. 114 move. 116 Shell access. 116 search term. 29. 148 Search Engine Optimisation. 25 payments. 116 MySQL. 78 Sub menus. 22. item. 72 virtual drive. graphic. 60 Users. 34 links. installing. 146 Sample Data. 71 positions. 19 mosforms. Extended. 148 PHP. 59 Users. 42 Modules. 55 Weblog. 148 Sections. 60 Views. 48 Troubleshooting. 135 Template. 149 still image. 147 Site Session Lifetime. 149 password. 87.

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->