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

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

. . . More about Templates . . . . . . . . . . . . . . . . . .3. . . . . .1. .2 Latest News . . . . . . 7. .3 Installing the Login Form module . . . . .1 How to create Summary Views of your content 7.5 Controlling access to Content . . . . . . . . . . . . . . . . . . . . . . 8. . . 6. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3. . . . . . . . . . . . .1. .4 5. .6 Incorporating external Newsfeeds into your site . 6. . . . .7 News Menu Link . . . . .2 How to add a Forum to your site . . . . . .1. .3. . . . . . . .1. . . .7 User Editing Tools . . . . . . . . . . . 8. . . . . . . 6. 7. . . . . . . .2 How to set up a user to add content and edit it on the website . . . . . Adding the Links Section . . . 8. . . . . . . . . . . . .2 How to create Table Views of your content . . . . . . . . . . .1.3. . . . . . . .7 Syndicating your site . . . . . . . . . .1 Enhancing the home page (and other pages) . . . . . . . . . . . . . . . . . . . .3. . .3. . . . . . . . . . . . 8 Using 3rd Party Add-on Components and Modules 8. . . . .2 How to take payments On-line . . . . . . . . 8. . . . . . . 7. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8. . . . . . . . . . . . . . . . . 6. . . . . . . . . 6. . . . . . .1 How to get and install Docman . . . . . . . . . . . . . . . . .Contents 5.1. . . . . .5 Polls . 7. . . . . . . .3. . . . . .1 Modules to add greater functionality . . 7. . . . . .1.1 User management . 6. . . . .8 Optimizing for Search Engines & Short Links . . .3 Where to go next for more information . . . . . . . . .3 Limitations of standard Joomla! user management (and the solution) 7 Taking it to the next stage 7. . .2. . . . .4 Banners .1. . . . . . . 7. . . . . . . . . . . . . . . .2 Creating Views of your content . . 6. . . . . . .3 Building Menus to structure your site . . . . .3 Installing a document management system . . . . . . . .1. . . . 8. . . . . . . . . . . . . . . . . . 7. . . . . . . . . . . . . . . .1. . . . . . . . . . .1. . . . . . . . . . . . .1. . . . . . . . . . . . . . . .3 5. .3 Popular .1 How to get and install Acajoom . . . . . . .2 To set up a new user . . . . . . . . . . . . . . . . . 8. . . . . . . . . . . 8. . . . . . . . . . . . .1 Building an online Shop . . . . . . . . . . . .1 Setting up your shop . . . . 7. . . 7. . . .4. Adding the Contact Us Page . . . . 4 . . . . . . . . . . . . . . . . . . . . . .6 5. . . . . . . . .4 Setting up an email newsletter . . . . . . . . . .2. . . . . . .4 Testing the Login Form . . .5 5. . . . . . . . . . . . . . . . . . . 7.2 Configuring DOCman . . . . . . . . . . . . . . . . . 6. . . . . . . . 8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6 User content editing from the website . . . . . . . . . . . . . . . . . . . . . . . . 6. . . . . . . . . . . . . . . . . . . . . .3. . . . . . . 7. . . . . . . . . 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 Configuration . .

. . . . . . . .2 Guest book . . . . . .4. . . . . . . . . . . . . 10. . . .4 A flexible banner system . . . . .5. . . . . . . . . . . . . . . .1 Community Builder . . . . . . . . . . .2 Steps Involved . . . . . . . . . . .5. . . . . . an example . . . . . . 9. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5 How to build a split menu . .10 Search Engine Optimisation (SEO) . . . . . . . . . .6. . . 10.3 The Template file structure . . . . . . . . .3 Specific CSS . . . . . . . . . . .7 Where to look/go next for more information . . . . . . . . . . . . . . . . . . 9. . . . .6. . .2 Template positions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10. . . . . .5 8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . 5 . . . .3. . . . . . . . . . . . . . . . . . . 8. . . . . . . .3 What you get . . . . . . . . . . . . . . . .5. . . . . . . . . . .6. . . . 9. . 10. . . .2 Additional files (Optional) . . . . .4. . . . . .4. . . . . . . . . . . . 8. . . . . . . . 8. . . . . . . . . . 10. . . . . . . . . . . . . . . . . . . . . 10.Artbanners . . . . . . . . . . . .OpenSEF What next . . . . . . . . . . . . .1 Joomla! CSS Classes . . . . .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. . .3 Trying out templates . . . . . .5. . . . . . . . . . .6 How to build dynamic menus using CSS . . . . . . . . . . . . .3. .6. . . . .5. . .1 Tools Required . . .5 An example . . . . . . . . . . 8. . . . . . . . . . 8. . .1 Introduction . . . . . . . . . . . . . . .6. . . . . . . . . . . .4 How to install it . . . . 10. . . . . . . . .4. . . .3. . . . . . . 8. 8. . . .building a template the process . . . . . . . . 9.4 The CSS styling file . . . . . .5 Taking templates to the next stage 10 Make your own template 10. . . . . . . . . . . . .5 Forms / database component . . . . . . . . . . . . . . . .5. . . . . . . 8. .7 A free resource for template ideas .3 The index. . . . . 8.1 Introduction . . . . . . . . .6.6 Editing a template ’in situ’ . . . . . . . . . . . . 8. . . . . . . . . . .2 Generic CSS . . . . . . . . . . . . . .8 mycontent . . . . . . . . . . . . . . . . . 10. 8. . . . . . . .2 How to Get it . . . .6. . . . . . . . . . . . 8. . . 8. . 8. . . . . . . . . . .5. . . . . .7 9 Introduction to Templates 9. . . . . . . . . . . . . . . . Get more from Menus with Extended Menu module . . . . . . .3 Adding a Weblog using MamBlog . . . . . . . . . . . . . . . . . . . . . . . . . .mosforms . . . 8. . . . . . . 10. . .Contents 8. . . . . . .Easybook . . . . . . . . . . . . . . . . . ..4 Installing a new Template . . . . . . .6. . .6. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6 8. . . . . . .1 The core files (required) . . . .6 Content Item module . . . 8. . . . . . . . . . 8. . . .’What’s in a template?’ 10. . 10. . . . . . .7 Blogg-X . . . . . . . . . . . . . . . . . . . . . . . . 10. . . . . . . . . . . . . . . . . . . . . . .2 Where to look/go next for more information . . . . . . .php file . . . . . . . . . . . . . . 10 more indispensable extensions . .9 AdSense . . . . . . . . . . . . . . . . . . .

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 .

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

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

x A Joomla! version 1. 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. 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. and you already know about Joomla! concepts. This book covers Joomla! version 1.uk for more details 9 .x eBook is planned for early 2007. This is not a book for developers planning to do component or module development. with great PHP skills and award winning graphic designers.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.0.learnjoomla.co. See http://www.5.

rather than a reference manual. click Template Manager from the options presented. 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. ?>"> NOTE: Useful hints. Tips and Hints are linked from the Index.Using this book If you are new to Joomla! Read through the Introduction and the Tour and take a look at the online demo. 10 . All the Notes. before installing Joomla! as explained in Chapter 3. however you can use the Table of Contents or the Index to go directly the concept you wish to research. You may wish to go straight to the template section if you need to modify or build your own template .7. and select the submenu option Site Templates. Learn Joomla! is designed primarily as a tutorial guide. If you have some Joomla! experience You may have bought this book to fill in gaps in your Joomla! understanding. 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. and 8 as these build on the key concepts you learn in Chapter 5. tips or warnings are enclosed in boxes as explanation. Conventions Navigation: The instruction Site > Template Manager > Site templates means Go to the Site item on the pull down menu. <?php echo _ISO. You should work through the example Chapter 5 first before working through Chapters 6. 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.this section does not require you to read the earlier material first. If you are interested in understanding how visual design in Joomla! works you can go straight to Chapter 9. CSS and PHP) samples are displayed as <meta http-equiv="Content-Type" content="text/html. XML.

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

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

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

and even if a function is not available to perform a specialist requirement. 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. text formatting. payment systems. marketing tools and so on. user management. such as user registration. image galleries. you can make certain con- tent available only to registered users. 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. as well as a web based editing tool to enter and edit site contents. several different menu styles. a variety of article display styles. or to respond to changing user needs. • By taking advantage of user management features. • Joomla! has a wide range of features in the basic software application. new functions can be created as plug ins by experienced PHP/MySQL developers. 14 . forms. and the presentation of information can be changed easily without the need to rewrite lots of specialist code. The range of plug ins is pretty comprehensive and will meet many website owners needs and new functions are being added every day. user comments. font styles and layout. banner ad management. such that resources can be managed. This template comprises PHP code and a CSS design template which defines colours. making it easy to download and try them out without spending money licencing code. 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. shopping baskets.1 Introduction to Joomla! and it may be done by authors and editors without web development skills. Using Joomla! the website owner has many options for the development of the site. such as discussion forums. blogs. • 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. Thus a website developed in Joomla! is fully dynamic. Search Engine Optimisation. • By using plug ins a complicated site can be up and running within days. community tools. access control. and new user needs met as feedback is received. 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. in an organic way.

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

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.2 Inside Joomla! In a website developed with Joomla!. design and structure of the website.the words and the pictures . see Chapter 3). the pictures and the items for sale or download from the site. where the content is stored in a database. (Note: if you just want to experiment there is a development version. JSAS. In technical terms.from the presentation. and no need to understand HTML programming. forums or tablular views of links to articles on your site. You will also need a template which controls the graphic design and layout of your site. To create a web site using Joomla!. There are just a couple of templates included with Joomla!. the navigation. which can be installed on your PC. the visual presentation and the special functions such as shopping baskets.e. are separated from the articles. 16 . The visual presentation of each article is standardised and controlled via the visual template.1 Introduction Joomla! is software to enable you to build web sites in a way that separates the content . 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. just the skills needed to use a word processor or an email program. 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.2 A Brief Tour of Joomla! 2. You will also need a domain name for your website. Joomla! software is classified as a content management system (CMS) which allows you to build what is known as a dynamic web site. Apart from that you need a PC with broadband access and some image processing software to prepare your pictures for the website. i. 2. the structure of the site. such that it is easy to add to or change the content without any special programming or design skills. such that the text may be entered by the author into the website database with minimal styling.

1. 17 . links and other files. lists of links or search results.1: How Joomla! generates a website Let’s try and explain this using a diagram. and a web page is built dynamically and sent back to the website viewer. 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. These have been entered and stored by an author or an editor via the Joomla! Administrator Control Panel using the ’Content Manager’ tool. I will now explain in more detail about each of the elements of Joomla! and how they contribute to the working of the database. 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. Figure 2.2 A Brief Tour of Joomla! Figure 2. pictures.for example news headline summaries. This information is then filtered through various Joomla! software modules and components to create different views of the data . 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.

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

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

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

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

PHP.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. and is essential if you do not have a permanent broadband connection to enable you to develop your site. In order to install Joomla! you must have web space on a server with the following applications (minimum versions shown) installed: • MySQL version 3. This package will install MySQL. JSAS enables you to configure up to five test sites on your PC.x or higher • PHP version 4. I recommend everyone to install this product on their PC. the ’Joomla! Stand-Alone Server’ which you can download and install to your Windows PC. 3. it is extremely useful when getting familiar with Joomla!.13.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. Apache Web server and Joomla! to your PC and configured them correctly together with a set of useful tools.19 or higher Or you must install the above applications environment on your local PC (Linux or Windows). 22 .23. Joomla! is a set of PHP programs which connect to a MySQL database.x or higher • Apache Web server version 1. However there is an excellent package available called JSAS. which is installed on a Web server and which is administered via a Web browser.2. 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.

This will save you a lot of time and frustration particularly if you have a lot of image files to upload to your site. live on your site.1 Installation instructions for JSAS Note: The JSAS package is approximately 22 MB in size and takes 1. Run jsas-setup_xxx.3 Installing Joomla! Figure 3.JSAS Here’s what to do: 1. Installing the local server .exe. Go to http://jsas. and use a proper FTP client such as WinSCP3 to upload files.1. If you do not already have a website host.joomlasolutions.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). and preferably one which gives you linux shell access.1: The JSAS Control Panel 3. or if you wish to edit templates. as this will make the job of developing and maintaining your Joomla! site so much simpler. The installation takes several minutes to complete and you are required to agree to various installation options. Just click ’yes’ each 23 .com/ 2. as you are able to directly change file permissions. Download the installer which is a single Windows . I strongly recommend that you use a host that is specialises in Joomla! .exe file(approx 22Mb) 3. 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.

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

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

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

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. At the next screen. Ensure that you set your file/directory permissions correctly as explained in the section above to enable installation to proceed. 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. This will often need to be of the form username_databasename where username is your login for cPanel. 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. 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. However you should check with your hosting provider’s documentation to check the exact naming structure required for databases. This is meant to make installation as simple as clicking a link. Here’s how to install Joomla! if your web hosting company uses cPanel. Using cPanel From the main cPanel page go to Databases > MySQL R Databases 1. However in my experience the Fantastico installation isn’t always set up correctly. 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. one by one. 3. • If you have an up to date cPanel control panel for your web space you can upload the file. Let’s assume we have called the database LJ_anytownzoo. 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.2.3 Installing Joomla! WARNING: Many web hosting companies use a tool called Fantastico to give their users access to lots of Open Source programs. entitled MySQL Account Maintenance go to the field entry labelled New Database: enter a name for your new database. which doesn’t allow you to unzip or decompress files. 29 .2 Creating your MySQL Database All the data and indexes for your Joomla! website are stored in a MySQL database.

1. go to your homepage in your browser (e.g. http://www.com). and you can skip the database creation step once you have uploaded the Joomla! installation files. Next you need to tell cPanel which user will administrate your database and it’s privileges.3 Completing the installation using your Web Browser When you have finished uploading the files and folders. Using PHPMyAdmin Some web hosts will give you access to PHPMyAdmin to create your database. You should now see the pre-installation page generated by Joomla!. For example. You need to make a note of the database name and user/password for use in the web based installation. With this hosting company service Joomla! does all the work of creating the MySQL database for you. 30 . Artonezero (www. Finally we need to use the function Add Users To Your Databases: to allocate select this user and add it to the database.2. which will be of the form prefix_username.com) have accounts which use the ISPConfig control panel rather than cPanel. 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. You can use an existing user (if you have one) otherwise create a new user.3 Installing Joomla! 2.artonezero.yourdomain. (See Fig 3.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. and their gold accounts allow shell access. let’s say we use the create user function to create the user LJ_admin . password secret 3. 3.

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

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

3 Installing Joomla! 9. Login with username and password You’re ready to go! 33 . you must delete the Joomla! installation directory using your shell account or FTP manager for your webspace (not via the web installer) 14. Before you can log in to the Administrator interface. If you now refresh your website address. Step 4 Congratulations Joomla! is installed 12. Enter Site Name For our demo site enter Learn Joomla! Demo Zoo Site Click Next > > 10.yourdomain. Go to www.com. Make a note of username and password which have been set 13.yourdomain.com/administrator 16. you should now see the site showing with default template 15. www. 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.

number of columns.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. Upload your sample images using the Media Manager . Build the menu .See Chapter 3 3.owned by Learn Joomla!’s publisher). banners etc 5. Switch off modules which are not required . If permissions problems set owner and file permissions correctly until shown correctly.See Chapter 5 10. Don’t forget to delete the installation directory. Create the sample pages for initial site building . with references to relevant sections of the book. 2. Install Joomla! into your webspace and save your administrator and MySQL database passwords carefully.See Chapter 3 4.See Chapter 5 8.See Chapter 5 11. Devise the sections and categories for your site.See Chapter 9 7. Find a suitable pre-designed template or build your own (this may take longer than one day from scratch) .See Chapters 9 and 10 6.See Chapter 5 9. Download the latest Joomla! installation file from www. here are the key steps involved in creating a Joomla! website. Upload to your webspace using SFTP or your hosting providers web based FTP tool . On paper. 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). .See Chapter 6 34 . 1. Collect together sample content for each of the sections in your site including text copy and images .Joomla.See Chapter 5 12. Upload the template and set as default . 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 . or your favorite graphics program work out the layout of the site: home page. subsequent pages.org. and create these using the Section and Category Manager tools .

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

sometimes called a brochureware site. This is the most important chapter in the book. 36 . so I recommend you don’t skip any of this material.that’s why you want to use Joomla!.Building a Simple Website Joomla! is a powerful development framework. but which many clients have required at one time or another.5 A Worked Example . this complexity can be a problem when you are new to Joomla! and want to get started. But a new developer has to learn to walk before she or he can run. 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. Although you probably want to do something more ’Web 2. Our step by step worked example will therefore switch off most of the advanced features and show you how to build a simple site. right? However. Were going to work with a simple website design that is a little old fashioned now. and we’ll then add in the extra functions later a step at a time. 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.0’ than this with Joomla! eventually. 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 .

2 A blank Sheet Our starting point is a new installation of Joomla! without any content.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. If not.co. Our first website (see Fig 5. For full descriptions of the function on each administrator screen click on the Help button for context sensitive help. concentrating only on those functions needed to create our website. I suggest you install JSAS on your computer (assuming you are running Windows) and then set up a sample website without any content installed. England.1.1.1) will be a standard type which is familiar to many web designers.Building a Simple Website NOTE: In this tutorial we will not give an exhaustive description of each screen and the functions available. 37 . 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.5 A Worked Example .1 Starting at the beginning 5. 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.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. you are ready to start. or refer to the Joomla! User Manual (see Appendix A for the PDF link to download the User Manual in PDF format) 5.learnjoomla. and a live demo can be seen at http://demo.

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

but this may just be a few minutes. done that? Let’s get started and fill our empty database.2 First Look at the Administrator’s Interface Our initial text and images need to be entered into the database using the Administrator tool.yourdomain. OK. NOTE: With this book we provided two free design templates and sample content.g. known as the Control Panel. http://www. 3. (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.2.com/administrator (on a hosted server) or http://localhost:85/anytownzoo/administrator (using JSAS) This will bring up the Joomla! Administrator Login: 2. Please copy these into a new folder on your computer. Here’s what to do: 1. CMS . before diving in and starting programming or designing. Let’s take a couple of minutes to familiarize ourselves with the Administrator interface as there is a lot on screen. 39 .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. To enter the Administrator Interface open your web browser and type in the URL for your Joomla! installation as follows: e. 5. and work out the underlying structure first.5 A Worked Example . text and images. See Fig 2. 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.A different approach With a static website the design starts with creating the web page HTML code.You will now see the main Joomla! Administrator Interface Home Screen.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.

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

Go to Modules > Site Modules 2. To do this: 1. We are going to use these functions in later chapters.3. Syndicate. 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. 41 . Polls.Building a Simple Website Figure 5. but for now we will switch them off.5 A Worked Example . For each of the modules (Login Form. Who’s Online) click once on the published icon in the published column next to the name of the module using your mouse. Popular. Latest News. See Fig 5. This will toggle the icon to a red ’X’ indicating that the module is no longer published to your site.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. Newsflash. You will see a list of all the modules Joomla! has installed by default.

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

you must have at least one section and one category (but you can have as many sections or categories as you like). 7. 2. as well as other settings to do with user management which are covered in the next chapter. 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. Click the option ’Site Offline’ to Yes and press the big Save button at the top of the page. All of our content (words. There is an option on the ’Site’ tab which you should configure now. 43 . Reload the browser window showing your site and you will see that these modules have now disappeared. 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.2. The Articles or Pictures are individual labeled documents or photographs filed in the folders. 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. 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. 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. You can set your meta tags. now we are ready to start entering content. There are others which can be changed later.Building a Simple Website 3. favourite icon and so on from this screen. 5. 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.3) In order to enter content into the Joomla! database. and within each section. 8. Return to the Home screen in Administrator Control Panel 5. it is divided into Categories. 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. These can all be done later at a convenient time. You will be able to preview your site on your PC provided you are logged in as Administrator in another window in your browser. Our content or data is stored in Sections. (See Fig.2 Entering our sample content OK.5 A Worked Example . 4. 6. pictures) is stored in a database.

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

5 A Worked Example . (See Fig 5. the Main text (which is optional. Open a Content Item: New page. but as we shall see later it is good practice to store the main body of the article in this area). Title Alias. 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. Cut and paste the text under the heading Introduction into the Intro text window. Parameters.Building a Simple Website 5.4) 4. Click the Save button 45 .3 Entering Words and Pictures Adding New Content To add a new document to the database there are two routes you can take. Images. Open your text editor (notepad) and open the sample content file provided with the book home page copy.2. 2. Section and Category and Intro text. It is not necessary to enter anything into any of these tabbed data entry forms to perform the initial setting up of a page. Let’s enter the copy for our home page: 1. 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. and the right hand section with the tabs Publishing. and all the items can be modified subsequently from the Content Items Manager. Entering content The Content Item: New entry page has three main areas: The Item details consisting of the item Title. and the Content Item: New function is displayed. Enter the Title: Welcome to Anytown Zoo Enter the Title Alias: welcome 3. Cut and paste the text under the heading Main body into the Main Text window. Set the Section to Website Content and the Category to home. (this information is all required to save the new page of information).

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

We connect all the different items and categories of information together and access them using a menu. They are set up in this way to assist the developer to understand the possibilities of Joomla! menu systems. 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. See Table 5. These are Main Menu. 47 . without having to type in HTML code directly. however the good news is the the next 7 pages will be much quicker.com for more information and a manual. Tiny MCE is developed by Moxiecode Systems AB.1. 5.5 A Worked Example . 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. the editor will also allow you to use the CSS styles to format content in your page. User Menu and Other Menu. These are in fact four separate copies of the mainmenu module with different names and different parameter settings. see http://tinymce. much longer that it would have taken to make a simple HTML page using a traditional method. Congratulations you have now entered your first page of copy! That whole process took a while. and to allow several different menus to be included in one site demonstration. There are four menus included by default in a Joomla! standard installation. WARNING: Unless content is linked to a menu it is not possible to make it available to users. Top Menu.Building a Simple Website THE TINY MCE HTML EDITOR: Joomla! provides a nice embedded WYSIWYG HTML editor to help you format your content pages.3 Connecting it together building the menu Now we are going to assemble our initial pages and build a simple website.moxiecode. As well as the standard HTML tags.

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. Click the large New Button in the button bar 48 . 3. control the order in which they are displayed. You will see there is already a single link called ’Home’ which is linked to the Front Page component. the Module CSS suffix is set to -nav Top Menu Other Menu User Menu A third menu. for when the first two are not enough! The Menu for Front End users to give access to article and link submission and editing. however for now. constantly updated information rich home page. The item selected to be linked in position 1 of the main menu is designated your sites Home Page. with the first link set to load the Front Page component as the ’Home Page’ 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. It is set up as a vertical menu. for example it can be a Shop Catalog very important if you are building an online shop in Joomla!. we will just use a simple page item for the Home page of our worked example. Now to add the new home page. and the content item to which they are linked. We will discuss the use of the Front Page component in a later chapter.3. 2.5 A Worked Example . The Home page can also be any other component. We are going to delete this link.Building a Simple Website Menu Main Menu Description The default menu. it is only visible when users are logged in (access permissions set to registered) Table 5. This linked item can be a single dynamic content page. 1. 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.1: The four standard Joomla! menus 5.1 Home Page Menu Link The mainmenu has an important function in addition to aiding navigation. It is set up as a horizontal menu.

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

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. and you can navigate to the pages that you have entered by clicking on the menu. Go to: Menu > mainmenu 2. Links to 4 This enables up to 6 single column articles with summary text. 5. To do this: 8. Click on it to view the news summary. For this view we decide to have a single column with one animal per line. 50 ..4 More about Templates The site is displayed via the default template. Click Save Reload the browser window showing your site and view your new The Animals summary page within a single column. Click on The Animals content link 10. 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. Set # Leading to 0. Columns to 1.3. Leave all other items unchanged at this point 7.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. Select ’Category: Website Content / Services’ 6. 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. Click the New Button in the button bar 3. madeyourweb. Intro to 6. The display of information is controlled by parameters associated with the menu item. These can be changed once the menu link has been created by clicking on the menu link name in the Menu Manager (see below). Select Blog Content Category 4.5 A Worked Example . You will note that the first item is full screen width and the next two are in columns. Enter Name: ’The Animals’ 5. and 4 with links only 11. Go to: Menu > mainmenu 9.

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

Press it once. and linked to user No User. 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.Building a Simple Website Inserting an image into a page 1. Select Category contacts. 5. and select the images tab. however in this case we are just going to add a single company contact.5 6. At the bottom of the text window is a button marked Insert Image. 3. to use in a departmental or employee directory. and then type in details for the various contact information fields we have provided sample content in the file in your LearnJoomla folder.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. border set to 0 and add a caption ’Giraffe’ and press the Apply button 9.5 A Worked Example . 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. The contacts component can store a complete directory of contacts. 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. See Fig. Click on the content item link for Giraffe 3. 1. Go to: Components > Contacts > Manage Contacts to load the Contact Manager 2. such as VirtueMart which we will describe in a later chapter. A Joomla! component is an application plug in which performs a specific function. 54 . Click on the New Button in the Button Bar to bring up the Contact: New entry screen. Your new giraffe thumbnail image recently uploaded should be in the Gallery images window.3. This inserts the image tag {mosimage} 5. From the Administrator Control panel select Content Items Manager 2. 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. Set Image align left. Position the cursor before the first character of the main paragraph of text 4. 4. Go to the panel on the left hand side of the page.

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

1. 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. 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.Building a Simple Website 6. Click the Search module link to open its configuration screen. 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. 56 . 5. 5. Now you can add the sample links we have provided 7. This brings up the link database entry screen.5 A Worked Example . To add a link click the New button in the Button Bar 9. see Chapter 11 Hints and Tips TIP: To highlight the search term in the results like a yellow highlighter pen. Go to Modules > Site Modules 2. change the position to bottom this corresponds to the search module position in our LJ_metro01 template.com) and a short description of the information to be found on the site.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. 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. Using the drop down box.1 Congratulations you have now built your first Joomla! website. If you add 4-5 links for the working example this will give you a good idea of the capability of this function. 3.google. Click Save 4.3. 10. see Chapter 11 Hints and Tips Your sample website should now look like Fig. Go to: Components > Weblinks > Weblink Items 8. Press the Save button. All you need to do to add search to your site is to enable the search module and position it where you want it. Type in the Link Details which includes the wording you want to see for the link.

edit and publish information on the site. including whether a user can view an article a menu or even a complete section on your site. With it you can control how users of your site access different pieces of data or sections on the website. 57 . and reserve full access to registered users only.1. 6. This might be because you want the users to pay for this access.1 User management You do not need to install any additional software in order to enable user management.6 Adding Users to your Site In this section you will learn how to: • Make use of user management in your site. either from a simple front end interface. You can however disable it (or at least user access to it). You have the option to manually control the addition of registered users for your site or to allow users to register themselves. For example you can allow public access users (anonymous users) access to an limited subset of information. You can also set up users to author. 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. understand how it works. 6. or using the Administrator control panel. and where to use it • Enable users to register themselves and retrieve their password if they lose 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!. if you don’t want to use it (see below).1 Configuration There are a number of global settings which need to be configured before starting to implement the user management capability. and sets it out as a serious Content Management System.

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

Additional information (sections and pages) may be made available to a user once logged in. You can use an email address as a username if so desired. Type in the users name.org) 59 .2 To set up a new user There are two ways that new users can be added to your site.Joomla!. according to the access privileges you wish them to hold. 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. This simple utility generates unlimited pages of random 8 character passwords so you don’t have to try to invent them yourself. TIP: If you have shell access on a Linux system either install or ask your systems administrator to install PWGEN. and email address and create and enter a username and a password (entered twice for accuracy checking). edit and publish any content by logging into the site.6 Adding Users to your Site 6. 2. b) Author Group: These users are given access to submit new content and edit their own content items/pages by logging into the site. d) Publishers Group: These users are given access to submit. Access provided to a child group (like Registered) is inherited by the parent groups (like Author) unless specifically denied by the Super Administrator. c) Editor Group: These users are given access to submit and edit any content by logging into the site. 3. 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. Allocate the user to a group. Here’s how to do this: 1. TIP: You can bulk import users from a spreadsheet using a third party component called JUICE: Joomla! User Import Component (see extensions. 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).1.

however they are allocated to groups in the back end which gives them access to the administrator control panel. 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. Managing Menus. i. Categories and Content Items. You can give these front end users some editing capability via a user menu (see below). On a large site you might have several editors (or Manager) each responsible for managing and maintaining a content area.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. Administrative Users There is a third type of user which may be set up manually. Statistics. Managing Modules and Managing Mambots 60 . the public facing website. 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). Manager Group: Managers have all the access rights of the Publisher Group in the front end.Preview. the tool that you are using to build the site). and they also have access to the Media Manager. Menu Items. and they also have access to Trash Manager. Administrative users can login from the front end too. Frontpage Manager and the Archive Manager 2. which is available for those users that you wish to allow to login to the administrator control panel (i. You want to allow anyone who finds the site and is interested in its contents to decide to become a member. Managing Content via Sections. You can determine which group to assign a user to depending on the privileges they require to do their job. 1. but they are not able to make structural changes to the site. You add these users manually via the User Manager as above. There are three back end administrative user groups with different privileges which are allowed to log in via the Administrator control panel. are not able to login to the administrator control panel. The automated system allows you to handle a much larger daily volume of registrations with minimal resources. Administrator Group: Administrators have all the rights of the Manager Group. and you may have more than one Webmaster (Administrator or Super Administrator) responsible for making changes to the site functionality and structure. but only have access to the limited front end functionality.e.e. Managing Components. Managing Users.

the text which is appended in this field id added to the basic CSS class moduletable) We put in here -left.g. but it is usually placed in either the left or right hand column. This is normally displayed on the home page. but can be included on as many areas of the site as you wish. 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 . 6. as it will now not be displayed as Login Form but as your new name e. Customer Login. 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. Go to Modules > Site Modules 3.zip template CSS stylesheet. The Login Form module can be loaded in any position. In particular Super Administrator access is required to change or manage templates and change Global Settings.6 Adding Users to your Site 3. Here’s what to do: 1.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. I recommend adding it to your forum and shop pages as well if you have them (see later section). take care when you next need to access the module link from the Site Modules Manager. 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. Login to the Administrator Control Panel interface as the Super Administrator 2. Click on the Login Form link NOTE: If you change the name of this module to something more appropriate for your site design. 61 .1.

in front of the person’s name or username.4 Testing the Login Form I recommend that you test out all the functions of the Login Form. The following should be tested: 1.g. both to acquaint yourself with the interface as it will be seen by your users and to confirm that everything is working correctly. 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. NOTE: You can change any of these settings again later if you aren’t happy with the way your Login Form looks.’ 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. english.” Note that you must activate the account by clicking on the activation link when you get the e-mail before you can login. including the automated emailing function. or an active alias e. ’). 6.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. 3. 2.g. 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.. 62 .1. requested username and password in the form and press the Send Registration button. To replace this with a more suitable phrase you can edit the language file in the /language directory e.uk. Enter your name.php. The line to edit is DEFINE(’_HI’.co. For example you could replace ’hi. support@anytownzoo. Click on the register link to register yourself. 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.’Hi.

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

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

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). • Log out The exact functionality of the user menu is defined by the user group of which the user is a member. they will see a pen and paper icon next to the article headline on the website page (see Fig 6. make visible. without the assistance of the developer. In addition. Here’s how to do this: 65 . 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. Registered user: Any registered user (including self registered users) will see the user menu if it is published when they login.e.1). They are only able to submit (but not publish) web links. i. When users who are members of the back end groups login to the front end they will have equivalent privileges to a Publisher. manager or administrators groups cannot submit articles or check in items. Author: An author has access to all the functions of the user menu to edit his/her articles/content. editor. once logged in.6 Adding Users to your Site • Your details: Edit user registration details such as name. 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. the new articles/content on the website. 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. publisher. 6. By clicking on this icon they will be able to edit the article/content from the front end.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. However users who are not members of the author.

user management) for more details (http://extensions. Add the Login menu module to a suitable page on your website. 6. See the Joomla! 3rd Party extensions website (core enhancements. adding her/him to the Publisher group (see page 50. 3. Take frequent backups of the site (preferably nightly) in case the customer accidentally deletes important content by mistake! 6. 2. 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.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. you need to consider adding in a third-party module such as the Community Builder extension which is described in the next chapter. Installing the Login Form module) 4. Add the user manually. edited as appropriate to your site design. User content editing from the website). Publish the User Menu to the site. 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. 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.org) 66 . or provide a menu link called login linked to the Login Component (see page 53. making it accessible only to Special users (see page 55.6 Adding Users to your Site 1. This extends the basic Joomla! user model and gives far greater flexibility on the information which may be stored and the access control provided. If the facilities described in this chapter are insufficient for the user management on your site. Add users manually).Joomla!. Give the user/customer a copy of the simple editing instructions provided in Appendix D Basic End User Instructions.

It has introduced us to the basics of developing website in Joomla!. 67 .1 Modules to add greater functionality You will recall that earlier in the book we explained about components (applications) and modules (functions). Contacts and Search. 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. The positions where you can display them on your page depend on your template and what positions are available. You won’t need to install any more software to introduce these functions. Now. 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. these were Links. and may only have 3 or 4 positions available. these are the tools that we use to add functionality and exploit the power of our content database.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. 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. More powerful templates may have 12 or more positions available for module placement. which arguably you wouldn’t need a content management system to do. We are going to switch on some of the functionality that we disabled at the start of the tutorial. Simple templates are more restricted on where modules can be placed. 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. I am going to show you some of the real power of Joomla!. this could be produced by a competent designer and PHP programmer in fairly short time using a MySQL database. and your desired design. We have already made use of three components in building our simple site for Anytown Zoo. it’s already included in the standard Joomla! install. 7.

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. This is not the case. by a variety of orders such as date. It could be designed using XHTML/CSS to add more graphics. tables and more images without using any more Joomla! functions. Shop as appropriate. Its a fact well known to web designers that the home page is the most important page on the site. the first link on the mainmenu module defines the page or component that appears on the Home Page of your website. or another component e. or multiple columns in the main body of your site.g. A-Z or a manual 68 . 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. We chose to use a simple page of content as the home page in our example to keep things very simple.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. Its often said that you have just a few seconds to grab the attention of a potential viewer surfing past. 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.1. 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.7 Taking it to the next stage 7. When you install Joomla! with the sample content provided by the installation program. so the more reasons to persuade them to stay and explore your site the better. Using the Front Page Component As we explained when building our example site in the previous chapter. It can display them in a single column. the module Frontpage is installed by default as the first link on the mainmenu and therefore as the Home Page. 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. 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.

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

• 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. 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.2 Latest News As the title suggests. The configuration screen for this module appears: Site Module: Edit [ Latest News ] 3. this module displays the headlines from the most recent news releases as links in a table.1. This takes you to the screen Edit Menu Item :: Component [ FrontPage ] . • How many items you wish to be displays at the full width of the main body of your site. 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. There are a comprehensive set of parameters which can be set to control the appearance of items on the Front Page. From the Administrator Front End Go to Modules > Site Modules 2. go to Menu > mainmenu and click on the home page link. 2. To enable this function: 1. Click Published radio button ’ Yes’ 70 . Generally this module is displayed on the home page. e. 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..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. -yoursuffix to your Front Page to allow it to be styled individually. Details of each of these parameters and their effect can be seen by hovering your mouse pointer over the item description e. Set position to ’Right’ 4. Click on the link ’Latest News’. how many to be displayed in columns and how many columns there should be.g.g # Leading. From here you can see the parameters on the right hand side of the screen.

The default is 5. 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. The default is 5. Click on the link ’Popular’. Decide how many articles links you want displayed by this module. 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. Enter -rightsidebar into the Module Class Suffix field 6.g.7 Taking it to the next stage 5.1. Decide how many articles links you want displayed by this module. we will set it to 3 8. Enter -rightsidebar into the Module Class Suffix field 7. From the Administrator Front End Go to Modules > Site Modules 2. Site Module: Edit [ Popular ] 4. 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. In the section marked Menu Item Link(s): . In order to limit the article links displayed to the News category we need to enter the Category ID (a number e. The configuration screen for this module appears: 3. 71 . Click Published radio button ’ Yes’ 6. Enter the category ID number into this field as shown. 15) which corresponds to the category of the news items 8. Set position to ’Right’ 5. hold down the CTL button and select mainmenu > home and mainmenu > links with the mouse 9. To enable this function: 1. we will set it to 3 7. If you want to choose from content items in several categories the numbers should be separated by commas.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. It will be styled with the correct CSS styling for the display box ion the right hand column 7. You can find the category ID number from the appropriate column in the Category Manager.

In order to provide selective views of this content.e.2. 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 .. Examples of such views are: • New stories or press releases. 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. 7. In the section marked Menu Item Link(s): . 72 . hold down the CTL button and select mainmenu>home and mainmenu>links with the mouse 11. Note that you cannot change from one style to another.g. with either links and brief summaries (the so-called Joomla! blog format) or in a tabular form.2 Creating Views of your content You can create views of your content pages linked to your menu in one of two ways. ordered and displayed to our requirements we use a component which Joomla! calls a Blog view. . 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 . you have to create the section again if you don’t like the results. Joomla! organizes our content in a hierarchical database structured by section and content. In order to limit the article links displayed to the News category we need to enter the Category ID (a number e.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. 15) which corresponds to the category of the news items 10.g..7 Taking it to the next stage 9. 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. possibly with photos • FAQs • a directory • and many more .

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

1 74 . A-Z or Z-A. by author.g 6. if we add the suffix ’-animals’ in this parameter field we will get the unique CSS classes shown in Table 7-x. 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.g. However you can’t decide to use a section to select items. access control. 5. and Display ID & Class details to get a view of your page with the CSSboxes and table elements with their associated classes. 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. and you can’t change the link to a different type of item. 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. Each parameter has help text describing it’s function which you can view by hovering the mouse over the dotted underlined link. most or least recent. In particular you can control the following attributes of the display: a) The number of columns into which summaries are placed. only registered viewers. and to override the global settings on the display of icons and links and descriptions. before only the headline link is shown). The best way to understand this function is to experiment. You can override these settings by changing Leading (the number of items which are displayed single column). 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. TIP: You can check the CSS for any page by using the Web Developer plug in for the Firefox browser. 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.7 Taking it to the next stage be available to all viewers. for example. or only special viewers (e. i. Intro (the number of summaries shown e. a single content item link. and Links (how many items to show as links to content at the bottom of the page). By default Joomla! creates a couple of full page width summaries and then starts placing content summaries into two columns.e. Choose the options Display Block Size. back end users). You can put any string you like as the suffix. Click Save to confirm your changes. 4. or a URL. e. 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.g. Columns (how many columns to put summaries in after the Leading articles have been shown full page width) .

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

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

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

Then you 78 . Click the New button 3.abbreviated month name according to the current locale %B . For example.abbreviated weekday name according to the current locale %A . You should now type in the name of the new menu. and operation of your site. footer 4.2: Date Format parameters (strftime) 7.day of the month as a decimal number (range 01 to 31) %D .time in 24 hour notation Table 7.year as a decimal number including the century %m .3 Building Menus to structure your site The menu builder is the key to controlling the structure. and p. Go to Menu > Menu Manager 2. You can now go to Menu > Footer to edit your new menu . via Menu > mainmenu.same as %m/%d/%y %Y .m. Normally these can be the same name.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. e. navigation.m.time in a.month as a decimal number (range 01 to 12) %r . Enter the names footer.g mainmenu. let’s create a footer menu for our Zoo site. 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. bringing you to the Menu Manager [ mainmenu ].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. the second the name you use in the Site Module and Menu Manager sections.full weekday name according to the current locale %b . Creating a new menu You create a menu using the Menu Manager 1. notation %R .7 Taking it to the next stage Parameter %a . Click the Save button 5.

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

“———” Embed an external web page via an iframe into your site Link .Contact Item Link . phrase or spaces e.Weblink Category Component .Static Content Link . 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. 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 static generated page or article.Content Separator / Placeholder Wrapper Table 7. selected by category A link to a summary view with article intros and ’read more’ links.Newsfeed Category Table .Content Section Table .Content Item Description A link to a dynamically generated page or article.URL Blog . the page must exist before you create the menu link item A link to a contact record.Contact Category Table .Content Section Blog .Content Section Archive List .g. 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.3: Summary of Menu Link Options 80 . with intros and ’read more’ links.7 Taking it to the next stage Menu Link Type Link .Front End interface Link .Component Item Submit .Content Category Table .Newsfeed Link . selected by category A link to a summary view of archived articles.Content Category Blog . with intros and ’read more’ links.Content Category Archive Blog .

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

The configuration screen for this module appears: Site Module: Edit [Banners] 4. To display a banner on your site (we will add one for the Zoo as an example) 1. The Banners function consists of two parts. 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. Banners are normally set to Public. 7. If not set then any banner from the published list will be displayed here) 82 . 9.4 Banners Advertising banners are easily managed by this module. Click Published radio button ’ Yes’ 7. 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. a Module which displays the banner on your site. 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.by adding a module suffix and a menu suffix. From the Administrator Front End Go to Modules > Site Modules 2. You do this using the Copy function from the Module Manager.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. The menu suffix allows individual list items (li) to be styled. but this doesn’t make much sense). and a Component which is used to create and manage individual clients and banners. User access can be set to Public or Registered (you can set it to Special too. Click the ’Banners’ link 3. Set position to ’banner’ (for example) 6. in the left or right hand column which only appear when the appropriate link on the Top menu is pressed. You can also add a CSS module class suffix to create unique styling classes for this module display 8. Click Show Title ’No’ 5. Styling Menus with CSS The menu module provides two options to generate specific menu classes. Note: The banner artwork needs to be created in a separate graphics program such as GIMP.

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

The Polls function consists of two parts. Set position to ’Right’ (for example) 7. Click Show Title ’Yes’ 6. Click the ’Polls’ link 3. The configuration screen for this module appears: Site Module: Edit [Polls] 4. From the Administrator Front End Go to Components > Polls 2. User access can be set to Public or Registered (you can set it to Special too. Click the New button 84 . 19.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. or unpublish the Banners Module in Module Manager. but this doesn’t make much sense). Joomla! will rotate these across your visitors page views. To hide the banner go back and select show Banner = No. 1. From the Administrator Front End Go to Modules > Site Modules 2. Click Published radio button ’ Yes’ 8. and a Component which is used to create and manage individual polls. 10. Press the Save button Now we use the Polls component to set up your first poll. If you have multiple banners. 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. Enter a Title for the Polls e. Tell us what you think 5.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. Press the Save button You have now published your first banner.g. a Module which displays the poll on your site. To display a poll on your site (we will add one for the Zoo as an example) 1. 7.

Select Published = Yes 5.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.7 Taking it to the next stage 3. You can add more polls later. They can provide an important way of keeping your site fresh and encourage more traffic. Now enter a Question (title) for your poll. Latest Joomla! News 85 . 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. The configuration screen for this module appears: Site Module: New 4. Click the ’New’ button 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. Click Save Your poll is now showing live on the site. 7. and unpublish this poll. 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. or you can simply display one of more links from an RSS feed at a suitable place on your site. Enter a Title for the Module e. From the Administrator Front End Go to Modules > Site Modules 2. You can have a whole section of external information feeds using the Newsfeed component.g. 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. 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.

If you do display the description associated with each link you can choose to truncate it to a smaller number of words. Set position to ’Right’ (for example) 7. Press the Save button and your done TIP: Newsfeeds are often supplied with bulleted styling which may not suit your site. 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. Decide how many articles links you want displayed by this module. You can choose to display the syndicated title. 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. 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). Writing some specific CSS to style the newsfeed can improve the presentation enormously. The remaining parameters control how the RSS feed will appear on your site. 86 . Click Published radio button ’ Yes’ 8. 10-12 generally works pretty well. Enter -rightsidebar into the Module Class Suffix field(if using the LJ template) 9.7 Taking it to the next stage 5. Whether you choose to do this will depend on the specific newsfeed and how much information they provide. There is a specific newsfeed CSS tag called ’newsfeed’ which can be used to do this. You now need to enter the RSS URL into the newsfield box in its entirety (including the http:// bit) 11. 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. 13. then the newsfeed component is the best solution. TIP: If you click on the orange RSS button on site which provide an RSS feed. Click Show Title ’Yes’ 6. 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. You can also decide whether to just show the link. Simply highlight this complete link and then copy and paste it into the RSS URL feed field in the Site Module: Edit screen 12. or the associated description as well. we will set it to 3 10. The default is 5.

e. externalnews) and press Save 3.g. As described above collect the full RSS feed links (including the http:// bit) that you wish to add to your site. but I feel this will be overkill for most websites.g. 87 . Click the New Button 11. 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. 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. Here what to do: 1. and press Save. Go to Components > Newsfeeds > Manage Categories 2. The newsfeed component is capable of managing a huge number of newsfeed links in multiple categories. 4. Repeat steps 4-7 for each new feed that you wish to add 9. Now you need to link the newsfeed table to your menu. Set the number of articles that you wish to appear on the feed summary page. Go to Components > Newsfeeds > Manage Newsfeeds. Click Save 8. this brings up the Category: New [ Newsfeeds: ] screen and then give the category a Title and an alias (e. and click New 5. 13.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. Go to Menu > mainmenu (or the name of the menu you are editing if different) 10. 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. The Add Menu Item screen is displayed. Now you can set up your newsfeed RSS links.g. Give your menu link a name (e. You also need to set up at least 1 category of newsfeeds before you can start entering individual feed information. refresh and click the new link in the menu you have created to view the newsfeed table 14. externalnews) in the list of available categories. highlight the category (e. 6 7. Make changes as required to newsfeeds (edit using Components > >) and CSS until you are satisfied with the results. Newswire). Click New. Go to your site preview.g. 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.

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

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

meaning that whatever your requirement. there is a good chance someone has already written an extension to do the job. This is a great site (built in Joomla! .org. to be installed together and share visual styling and user management.joomla. while other extensions are what’s known as bridges. At time of writing there were over 1. all the features and functions that we have used have been built into the standard Joomla! installation. The directory is divided into sections such as Banner Ads & Affiliates. pieces of software to allow Joomla! and another application. 90 . Installing these large applications and integrating them with Joomla! is fairly complicated and not easy for a beginner. To get an idea of the total number of plug in extensions available for Joomla!. Now we come to the most exciting part of working with Joomla!. The larger components are full blown applications in their own right.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. making use of the huge 3rd party development effort that has built up around this software. 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. visit http://extensions. and so I have decided that these fall outside the scope of this beginners guide. e-Commerce and Gallery & Multimedia. almost all of it available for free and open source.000 extensions in the directory. Some of these are written specifically for Joomla! and are very easy to install. such as a forum or picture gallery.what else) which is a searchable and browseable directory of extensions divided into categories. Communication.

please consider making a small donation to help support their ongoing efforts. install and configure a few of the most popular types of third party applications.1 Building an online Shop Selling products and services on the Internet is one of the most popular applications of a website. Virtuemart is an excellent solution for small or medium sized online stores. If you use the application and find it useful. It is built and maintained by Soeren Eberhardt and published under the GPL. 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. and applicable to a wide range of sites. before using it in earnest with a live website. Virtuemart can be used to sell both physical products and downloadable products such as eBooks and software. 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 . A great deal of the software is excellent. but some has a few rough edges. The big advantage of using Joomla! to set up your online shop is it’s very easy. CAUTION: Remember we are working in the Open Source world. 8. The component that we are going to use to build our shop is called VirtueMart. There are many software packages both commercial and open source to help you set up an online shop.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. All the extensions chosen a open source. 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. We will learn how to download. inevitably some of the extensions are of variable quality. 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.

to enable encrypted communications.gz) One main module (mod_virtuemart_1.07.4Mb in size.x.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.tar. and you should also get an SSL certificate for your site. Go to Installers > Components 6. NoChex or WorldPay. The file is approximately 1.tar. NOTE: If you are planning to take payments online you will need to have a merchant account such as that provided by Paypal. which at time of writing was 1.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. 3.winzip.0. Here’s what to do: 4. Go to http://www. Click the browse button and navigate to the folder/directory where you unzipped the Virtuemart files 92 . 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.net 2. although there may be a more recent release when you go there. The other modules provide additional functionality as shown in the table and can be installed if your require these functions. but they are not essential to correct operation of the shop. We want the latest stable version of the software.com) or open with the compressed (zipped) folders tool included in Windows XP file Manager.x. Getting Started First of all we need to download and unzip the latest files from Virtuemart.0. Click the download button and save the ZIP file to your local PC. When the file has completed downloading. Only get the stable version as development versions are not suitable for running a production ecommerce solution. Login to the Administrator Control Panel 5. 1. you must unzip it using a tool such as WinZip (30-day evaluation version available free from www.virtuemart.

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

so you will need to have done your planning. Then select the information display parameter you wish to set for the module. To enable this function: 1. Under Pages / Items select all the pages you wish the Virtuemart module to appear on 7. Set position to ’Right’ 4. 8.8 Using 3rd Party Add-on Components and Modules 5. Generally this module is displayed on the home page and the shop home page as a minimum. refresh and click the new link in the menu you have created to view the Shop.. You can customize various parameters which control the information displayed by the module. From the Administrator Front End Go to Modules | Site Modules 2. 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. 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. research and preparation to get this right.1. including changing the name of the module to Shopping Cart or Shop for example. Click on the link ’Virtuemart Module’.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. The configuration screen for this module appears: Site Module: Edit [ Virtuemart Module ] 3. Now we need to publish the shopping cart or basket module. Enter -rightsidebar into the Module Class Suffix field 6. Go to your site preview. 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. Click Published radio button ’ Yes’ 5. 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 . This module displays the contents of the users shopping cart and links to the categories of your store. Note that you are creating a shop here with all the commercial decisions and legal requirements of a physical store.

Go to Products > Add Product and add your products one at a time. together with a Description of your store.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. repeating this step for as many products as you need. Contact Details and your Currency. 8. 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.g. Setting up a secure webserver is outside the scope of this book. 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.csv format. British Pounds are set correctly. From here you control the way you want your shop to work.yourdomain. 2. Go to Store > Edit Store and work through the form to enter the details of your shop. 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.com. appearance and URL.g. whether you want to sell downloadable or physical products and the method(s) of shipping. 1. the features which you want to enable or disable. Go to Products > Categories > Add category and set up at least one category for your products to be organized under and publish them. Go to Tax > Add tax rate and add the correct tax rate according to your country. Go to Admin > Configuration. this function is not performed by 95 . 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. Artonezero are one such company that provides secure Joomla! hosting at reasonable prices.8 Using 3rd Party Add-on Components and Modules 1. Don’t worry if you don’t have these items now. The shop will not work correctly until at least one category is defined. 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. they can be added later by going back and editing the store. e.1. 2. 3. Note that if you have a very large product catalogue there is a facility to import your listing from an external database using . Go to Products > Use CSV Upload. but if you need help you should contact your web hosting company. You will enter basic Store Information.

Payment methods which are accepted by your site are indicated by a green tick in the Active column of the table. and ensure that all other methods are deselected. We will select Paypal and NoChex. you may will to take orders on account. You can switch on a payment method by clicking once on the red cross in the active column. Go to Components > Virtuemart This takes you to the Virtuemart Control Panel 3. The Joomla! Payment methods suppliers list is a good start. 5. Once you have set up one or more payment processor accounts you are ready to go to step 2. These services are offered by a number of companies. a) Now enter your Paypal email address (the exact email you use to login to your Paypal account) 96 . Now click on the Paypal link on the List Payment Methods screen. 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. to handle it’s payments. Verisign and others. a British payment processing company. Before you can set up payment processing in Virtuemart. On the payment method form. select the configuration tab. together with Paypal and I will show how to set up your shop to use NoChex and Paypal to handle payments as examples.8 Using 3rd Party Add-on Components and Modules Virtuemart. you need to have set up a Seller’s account at the payment processing company of your choice. 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. How to take payments with NoChex and Paypal 1. 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. The method is very similar for WorldPay. ePDQ. Click on the Button marked List Payment methods 4. 6. 2. If you do not have an online payment processing provider already. but it is by no means exhaustive. you will want to research the options available. Depending on your business. In which case you should select these methods too. 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. or cash on delivery in addition to accepting credit card payments. 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.

you are now able to accept payments from your website. they will be offered Paypal or NoChex as the payment options. 8. When customers now complete their checkout from the shopping basket.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 supply a 97 . and that you put in place appropriate security procedures to protect customer’s financial information. click on the NoChex link from the List Payment Methods screen. do not change the settings on the initial screen. You will then see exactly the process as viewed by the customer. Do not change this unless you are a competent PHP programmer. c) Press the Save button. 8. Order status for pending payments = Pending iii. and as a minimum ensure that you have an SSL certificate installed on your server for the transaction to be encrypted. 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. You are now able to process NoChex payments via your shopping site 10. Select the configuration tab. Congratulations. You should consider carefully the security of your server before doing this. exchange views and ideas. once the payment has be accepted the customer is returned to the download page for the product 12. Press the Save button.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. To add NoChex. If you are selling a downloadable product. Order status for successful transactions = Confirmed ii. 11. I normally set up a product in the shopping basket for a nominal £1 or 1 EUR to do the test. You are now able to process Paypal payments via your shopping site 9. and can encourage regular traffic onto your site. I now strongly recommend that you carry out a live payment test on your site before you release it to customers. See the Virtuemart documentation for more details d) You will see below the script which is executed when a payment is requested. Order status for failed transactions = Cancelled iv. On the payment method form. 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.

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

6. Click New Give the Forum a name and a description. From here you can choose whether the forum is visible to public visitors. and to require the user to provide a valid email address.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. 1. Press the Save button to finish 8. there is an option to send an email to a moderator. or only to registered users. From here you set up one or more forums. Select Forum Administration 10. Here you can choose whether to show the users real name or username. 7. Select the Security tab. under the Basics tab. 5. 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. 3. 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. Set these to make JoomlaBoard fit properly in your template. There are a number of other options which can be set. which brings you to the first configuration screen. and whether to provide RSS feeds or PDF downloads of forum topics. and then create a menu link from our website to access the forum. but these are not essential to the operation of your forum. From here you can control the forum display parameters. Select the Frontend tab. You also set parameters related to the user from this tab. setting the number of messages and threads per page. and the text area size. Click on the Advanced tab and set the access permissions for the forum 99 . and you can view these at your leisure. or you can allow anyone to post. if you choose to have postings moderated. 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. Now we need to set a few simple configuration options. You can also set other options related to the user profile display. Go to Components > JoomlaBoard Forum 2. Select the JoomlaBoard configuration button. Finally. Go to Components > JoomlaBoard Forum 9. set up our first forum board.

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

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

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

NOTE: You can link to a file on a different or third party server if you have permission to do so.8 Using 3rd Party Add-on Components and Modules f) Click the Save button 8. The good news is that there are several excellent e-mail newsletter components available for Joomla!. It should also be very targeted easy to read and interesting.3 Where to go next for more information DOCMan has it’s own website. 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. 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.mambodocman. Documentation. 8. by setting a URL instead of a link to an uploaded file when you Select Document 9. DOCman is linked into your menu in the normal way by going to Menu manager > mainmenu and adding a Component link. 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. 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. and 103 . 8. including News. and installing and configuring them is very easy.com/. Tutorials and a Forum.1 How to get and install Acajoom Acajoom News can be downloaded from www. all that they require is that you provide your username and is thus word to get access to the download. or the field that you’re working in. A word of warning however.com. whether it is to give them information about the new developments on your site. Acajoom is closely integrated with Joomla!. The newsletter components that we are going to use is called Acajoom News. where you can find a full range of information. and be a source of regular income.3. A good e-mail newsletter can work wonders for your business.acajoom.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. http://www. 8.4.

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

Click the Save button to save your news letter 4. The bounce email address is the address any email which cannot be delivered will be returned to. 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. STEP2 of the Wizard is displayed 5.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. Then click back to your Control Panel (CPanel) and click the configuration button. 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 . and the email address. Click on the link for Newsletter Management and Select your list using the pull down menu ’AnyTown Zoo News’ 6. You can create two versions .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.you can include pictures in it in the same way that you would create articles in Joomla!. NOTE: IF you set this different to the sender address it will result in anti-spam systems rating your email as possible SPAM. 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 Save. Template This tab enables you to create an HTML design for your newsletter. Your new mailing will be shown in the newsletter list 1. 7. Then click back to your Control Panel (CPanel) and click the configuration button.

Click the radio button in front of your news letter and press the Send button 4. password and SMTP mail server correctly. Click Save button when you have finished 8. then you will need to set your email username. 4. Go to Lists and Click the radio button in front of your news letter and press the Published button 2. 1. 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. 106 . Go to Cpanel > Newsletters 3. You can now send your newsletter and set others up. test as appropriate. 3. and use the preview function to re-test. Go back to Components > Acajoom > Configuration and you will be taken to STEP 4 confirming that you have completed the set up process.4. 6.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. The Acajoom Subscriber Module needs to be published before you can send your newsletter. Edit the newsletter.8 Using 3rd Party Add-on Components and Modules STEP 3 of the Wizard is displayed 2. 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. Select published = yes and review the parameters available for the module and set them to the settings you require. You can use the Preview function to send a test to yourself to view the resultant newsletter before you send it. Help is available on screen by hovering the mouse over the dotted links next to the parameter.

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

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

2. in chapter 7 we saw how to create a top menu item for Visitors. I will set out here the critical parameters which need to be set to make the split menu work. Ensure that you have unpublished the mainmenu module (see 8.g.4 above) in Module Manager (Modules > Site Modules) 3. 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 . 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.8 Using 3rd Party Add-on Components and Modules 1. Set the position of your menu to the top horizontal menu . Admission Prices. Published = Yes Enter the following key settings. 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. Open up the new extended menu module. Opening Times and How to find us) 2.in our case. Download extended menu module and install it using Installers > Modules. and then sub-menu items for General Visitor Page. 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.5. Position = Top Set Show title = No.3) to the appropriate top menu item in the mainmenu (e. You will see that there are a large number of parameters (around 50) which can be set for Extended Menu.

provides a number of templates on his website (see link below) which enable you to create dynamic multi-level menus. If the method has not worked. Position = Left Set Show title = No. 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 . using the strangely named CSS technique. Refer to the Extended menu website for parameter details. Published = Yes Enter the following parameters. 6. You should now be able to display the left hand sub menu by clicking on the appropriate top menu item. 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. You can perform fine control over the design and presentation of the menu using CSS with the parameters provided.alistapart.com/articles/dropdowns for a full description of the 110 .8 Using 3rd Party Add-on Components and Modules p) Enable Menu Template = No 4. please go back and check that you have set the parameters exactly as given above.g. Go to Modules > Site Modules. ’suckerfish’. Visitors. 8. the author of extended menu.6 How to build dynamic menus using CSS Daniel Ecer. e. ( See http://www. 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.5.

Click Save You should now experiment with the other parameters to see how they affect your menu presentation and performance 8. Open up the new extended menu module. in chapter 7 we saw how to create a top menu item for Visitors. see our website for more details.8 Using 3rd Party Add-on Components and Modules suckerfish method).siteof.de/extended-menu-parameters. For more details on dynamic menus go to http://de.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.siteof. Admission Prices.5. and then sub-menu items for General Visitor Page. Set the position of your menu to the menu position required . Opening Times and How to find us) 2. 4. 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. together with CSS for the menu.de/extended-menu-templates. Download extended menu module and install it using Installers > Modules. Position = Top Set Show title = No.in our case.2. and experiment until you get the desired effect.css and amended as required to match the visual elements of your site.html template.html 5. Learn Joomla! does offer a commercial support service. Published = Yes a) Set Enable Menu Template = Yes b) Set Template Name = menu. 111 . 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.html and work through the parameters. Alternatively.) The CSS file will need to be pasted into (or called from) your template_css. Then proceed as follows: 1.3) to the appropriate top menu item in the mainmenu (e.ini file which sets parameters in extended menu.g.4 above) in Module Manager (Modules > Site Modules) 3.html If you get stuck try a search on the Joomla! forums for extended menu. Daniel’s templates contain a menu. These templates should be downloaded. 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. Ensure that you have unpublished the mainmenu module (see 8.5. and a menu. if all else fails.

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

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

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

org and downloading and trying out other applications.html Advice: Notes. Don’t forget that it is up to you to test these extensions and make sure that they work robustly on your site. I recommend you to get it! 8. 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. That way.com/en/documents/opensef/install-opensef.. 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.7 What next .. 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. Whether you want to improve your search engine ranking or just have easy to quote URLs for printed material.Joomla. 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.j-prosolution.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. Now is a good time to start browsing and exploring http://extensions. Tips and warnings: This is an invaluable and widely used component which addresses a weak area in the core Joomla! software. Good Luck! 117 .

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. the content from your database is laid out and styled dynamically by Joomla!. There are two key files in a template: • index.css). a CSS stylesheet (template_css.php file are given position names by functions in the index. image files and and XML file to tell Joomla! how everything fits together.php.php).com and see how changing the CSS stylesheet completely changes the appearance of the same single static web page. If you’re not aware of the power of CSS I recommend that you spend five minutes now looking at CSSZenGarden http://www. This milestone site explains CSS and how Joomla! Templates work better than a thousand words from me. content free. 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. a simple.1 Introduction The appearance of a Joomla! website can be changed within a few minutes by applying a new Joomla! template. It contains an HTML file (index. As explained in Chapter 2. each time a web page is displayed. Joomla! templates work in the same way as the CSS ZenGarden page. piece of HTML code which defines areas of the page.php code 118 . or positions into which content can be flowed. 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. The first time I saw this website I got CSS immediately. Certain areas of the index.csszengarden.

banners.2 Template positions. lists of articles.1. 9. In each module there is a parameter to define in which position their output will be displayed.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.9 Introduction to Templates Figure 9. typefaces and lines and other elements. More details about this file in Chapter 10. 119 .css controls the exact layout of the positions on the page and all the styling of colours. an example Figure 9.php code which is reproduced in Listing 10.1 shows the template positions which are available for one of the templates supplied with this book. • The stylesheet template_css.

Some simple templates have just 3 or 4 positions while other more advanced designs have 10 or more positions. and you will have your own preferences too.co. WARNING: Do not be tempted to unzip the template ZIP file when you have downloaded it.php?tp=1 9. a personal site or a corporate design. and then add ?tp=1 to the end of the url to see the positions overlaid on your template on screen e. install it in Joomla! as the default template (see below).remember positions that are available in one template are missing from another or the position name is used for a different layout area. Joomla! does not enforce any controls on which positions must be included in a template or the position names which must be included. 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. Text styling may also be affected as each template will have its own CSS. TIP To see the positions which have been defined by a template. Bear in mind that a new template can create some unexpected results . So one template might have a ’top’ position for a horizontal menu to be placed while another does not. 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.uk/index.9 Introduction to Templates NOTE Note that all Joomla! templates do not have the same positions defined in the template code.g http://demo. You can adjust your module position to fit the new template from the Module Manager by opening the module and adjusting the position parameter. whether it is for a games website. I like designs with much more white space. The two free templates supplied with Joomla! won’t be everyone’s cup of tea. 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. simpler and less cluttered. You can try the free templates I have supplied with this ebook. 120 . It really depends on the template developer and the layout they have designed. 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. Personally.learnjoomla.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.

zip. This takes you to the Template Manager Menu (Note: to get here in future use Site>Template Manager>Site templates ). to give yourself features and functions not available off the shelf.4 Installing a new Template To load a new template into a Joomla! site: 1.9 Introduction to Templates 9. 4. If so. However. You have successfully installed a new template. 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.5 Taking templates to the next stage Many third party designers have made Joomla! templates available for free. Whatever the reason. for example LJ_metro01. In the Template Manager you will now see there is a new item LJ_metro01. 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!. Click the Browse button which brings up a File Upload window on your PC. 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). 5. 3. there may still be occasions where you want to create your own template: because you have to meet corporate design guidelines for a client. Then press the Upload File and Install. 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. 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. or simply because you are a great designer and anything other than your own design will be second best. and click Open to select it. 121 . the next chapter. ’Make your own Template’ is written for you. 9. Navigate to your LearnJoomla PC folder and select the ZIP file of the template you have downloaded. Go to Installers > Templates > Site 2. After a few seconds you will get the Message file Upload Template : Success. together with some information about the developer and the template itself. Now go back to the Preview browser window that you opened earlier and press the page reload button.

a graphics editor and I strongly recommend you use the Mozilla Firefox browser with the Web Developer plug in. If you do not have these please refer to the tutorial material described in Appendix B before attempting to build a template. and CSS layout techniques.1 Tools Required In addition to your Joomla! installation on a public server or your local JSAS installation you will need an HTML editor. In this chapter you will learn: • How to create a Joomla! and W3C compliant index. With the instructions and information provided in this chapter you will be able to create your own template which can conform to W3C specifications. Recommended Open Source tools are given in Appendix B.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. 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. or because you want the site to have its own unique look. It is assumed that you have a basic knowledge of HTML design. such as an organisation’s branding guidelines. however anyone with basic web design skills should end up with a usable template. either to meet an exact client requirement.10 Make your own template This is an advanced chapter which assumes a knowledge of HTML web design skills. 122 . 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. The final quality of the design will depend on your own creative and programming expertise. ) 10. you may prefer to design your own template.

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. upload it onto your development site and set it as the default template 6. set out step by step. Links to suppliers of free and commercial templates are given in Appendix A.css files and understand how they are put together. 7. Give thought as to how to use the Joomla! module and component functions to deliver the information required. 4. TIP: Here are a couple of ways to understand the structure of a Joomla! template visually 1. 3. 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!. 123 . 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.10 Make your own template 10. Package your template. 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.1) by selecting the options Display Div Order and Display ID and Class details. Familiarize yourself with a number of existing Joomla! templates and examine their index. 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. 2. Research any third party plug-ins required to deliver extra functionality and download and evaluate these on a local Joomla! installation. (Also see Chapter 9). Break your page design into a set of CSS boxes and identify which position label is to be applied to each CSS box.php and template_css.2 Steps Involved Here is the overall approach I recommend you take. Use the Web Developer plugin for Firefox to view the CSS boxes and CSS classes for a Joomla! template (see example in Fig 7. 5. Sketch out the structure of your website page on paper or in your favourite graphics editor. Add the suffix ?tp=1 to the end of the URL for a Joomla! site to see the positions included in the template 2. 1.

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

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

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

127 .. stretch-able rounded corners. Each module is output in the cell of a wrapper table..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> <!-.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> <!-.End : Individual module --> </td> <td align="top"> <!-.. for example..the next module.End : Individual module --> 1 = Modules are displayed horizontally.</div>.using 4 separate CSS Boxes <div>. --> </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.10 Make your own template -3 = Modules are displayed in a format that allows. This is useful for hiding unused positions.. See example below: <!-. See example below: <!-...

128 . 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. 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().php 5. for example.2 shows an index. ?> <?php mosLoadComponent($name)?> <?php mosLoadModules($position_name [. This is useful for hiding unused positions. 6. ?> Table 10. 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. ?> <?php echo mosConfig_live_site. The Logo is linked from the index.10 Make your own template PHP Function <?php mosShowHead(). Listing 10. These are: 1. The "style" argument is optional but may be: 0 = (default display) Modules are displayed in a column 1 = Modules are displayed horizontally. ?> <?php echo $mosConfig_sitename. Do not include the "com_" prefix.1: PHP Template Functions Additional functions are used to reference the date. For example "banners". ?> Description Assembles various head tags including the title tag and several meta tags. The Navigation Menu. Loads a component. directory and website title. The live date is inserted using another PHP function. Displays all modules that are assigned to the "position_name" position for the current page. Basic CSS Box positioning and styling is provided using CSS styles in a separate stylesheet. the various display modules and the main content in the page body are displayed via CSS boxes using PHP functions 4. stretchable rounded corners Counts the number of modules that may be shown on the current page in the "position_name" position. the PHP header function 2.php file example with all the basic elements you require.$style])?> <?php mosCountModules($position_name)?> <?php echo date(’D j M Y’).

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

and styles related to specific design elements in the template (e. The Joomla! Specific CSS breaks down into two parts. 10.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. body. If your not sure what options are available for 3rd party extensions. 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). p. 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.1 Joomla! CSS Classes I have been unable to discover an official Joomla! Reference document describing all the Joomla! Specific CSS IDs and classes. 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. allowing good control over presentation. I recommend this exercise to anyone who really wants to know how Joomla! web pages are constructed. I have supplied a commented CSS stylesheet with all the classes described here with your eBook for reference. Incidentally. 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. h2. There are some generic classes which apply to all articles. such as . ids or table elements) which you define in your template design in index.2 Generic CSS There are a few classes that are used across several different components and modules. and by studying the source code and I believe that this is as good a reference as you will find for the CSS styles.4. h1. of course. 3rd party add in extensions also have their own classes (as well as often using standard Joomla! classes) to control elements of their presentation. modules or components.button for buttons. divs. blog views or menus separately. and .inputbox for form elements.4. In addition.10 Make your own template 10. do use the Display ID and Class details option of the Firefox Web Developer toolbar to track these down. and so on). 10. Some are shared 130 . In addition. Most modules and components allow the addition of a css suffix so that it is possible to style individual pages. and then there are specific classes related to each Joomla! element.g.php. there are the default non Joomla! CSS styles (html.

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

as this module allows you to style individual elements more precisely. These elements can also be styled.navbar The navigation bar .toclink text of links in article index to separate screens in split article box ’article Index’ . you can break a long article into multiple pages.contenttoc table of contents Pages/articles split into multiple screens . Class Description . including giving individual li elements their own unique numbering (useful for positioning dividers). Class #active_menu .mainlevel . if you want to get the maximum quality. You should also consider looking at the extended_menu module (see Chapter 8) if you have more advanced styling needs. together with a page count. Finally.pagenavbar Prev-Next Links . create and modify dates and the navigation links.createdate Date of article creation .article_seperator a class defining the end of an article which can be used to style a page seperator such as a coloured line . 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.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.10 Make your own template Styling menus properly can be quite complicated.pagenavcounter the page 1 of 3 text which is inserted in a multi-screen split page .mosimage_caption The image caption 132 . and when doing so an Article index is displayed. You can also style any embedded images and the image caption.mosimage An embedded image class .modifydate Date shown as Last Updated . including the title.contentheading Article title . You may want to study some existing template stylesheets to see exactly how they have been tackled.

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

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

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

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

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

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

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

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

border-left:4px solid #cccccc. padding:0.4em. margin:10px 0 15px.9em.#leftside h3 { font-family:"Comic Sans MS". margin:0 0 5px. margin:0 0 5px. .moduletable-left /***** Left sidebar *****/ #leftside { clear:left.Arial. padding:0.sans-serif. color:#505050. font-size:1. } 141 . background-color:inherit. padding:7px 5px. 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. line-height:1. width:140px.10 Make your own template In the next section we set up our left hand column. background-color:#f4f4f4.moduletable-left p { margin:10px 0 0.5em. float:left. } #leftside div. width:126px.moduletable-left { clear:left. font-size:0. padding:0. color:#6dac2a. } #leftside h2. } #leftside div.

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

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

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

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.oswd. The editor is a simple tool and does not provide an ’Undo’ button.7 A free resource for template ideas If you are not a graphic designer. Make the changes to your code. 145 . 10. 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. A couple of the templates I have used for the Learn Joomla! ebook started off in this way. and then refresh the preview of your site or select Site > Preview > In New Window to see the effect your changes have had.org.php or css file ’live’ from the Template Manager screen. now it’s over to you to try out your own first template and give yourself full control over the power of Joomla! design. 10. press the Save button. 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.10 Make your own template OK.6 Editing a template ’in situ’ You can edit a template index. 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. You are free to download any design you like and modify it to work in Joomla!.

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

here’s what to do: a) Copy over your files. with your own artwork.see Chapter 8. i. How do I change the graphic displayed when the site is offline? When you take your site offline for updating. it displays a large Joomla! logo and text stating “This site is down for maintenance. Make sure that the file is described in the XML file. 8. iii.6.) c) Edit the following values in your configuration. How to display a live date on my homepage? Use the PHP function <?php echo date(’D j M Y’). $mosConfig_cachepath = /your absolute path/cache. $mosConfig_absolute_path = /home/Joomla!/public_html. use FTP to replace the file /images/Joomla!_logo_black. ?> in the appropriate location in your index.6.ico to replace the default icon at location /images/favicon. See Chapter 8. v. iv. Tips & Howtos f) If you want to place dynamic text in a display box which is not in the main display area.php file 9.php file to reflect the new values. How to change the favourite icon (displayed in the browser URL field?) Ensure that you have included a bitmap of your icon called favicon. vi. $mosConfig_db = Joomla!_Joomla!. 147 . use the Content Item 3rd Party module .htaccess file in the new location.ico (you can create a bitmap in GIMP and rename it to the . setting the image size to 350 x 71 pixels.Joomla!. $mosConfig_user = Joomla!_Joomla!.<br /> Please check back again soon”.ico extension) in your template file.4 6.jpg. To change this graphic to one more suitable to the design of your site. You can change the text from Global Configuration. 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. Alternatively you can FTP a replacement favicon.org. $mosConfig_password = password. d) Note: You may also need to ensure you have configured your .11 Hints.ico (from your web root) 7. $mosConfig_live_site = http://www. 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. ii. 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.6 5.

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

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

and you can then search for it in the Joomla! extensions directory or Google for more information.11 Hints. 150 . 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. I have successfully used this method to track down several interesting extensions which I found on other nicely designed Joomla! web sites.

modules. Many of the Joomla! resources available freely on the net will help you. 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. 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. components and mambots. 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. 151 .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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)//-->