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

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

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

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

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

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

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

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

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

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

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

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

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

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

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. At the heart of a Joomla! website is a database which contains raw text articles. 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.for example news headline summaries.1. These have been entered and stored by an author or an editor via the Joomla! Administrator Control Panel using the ’Content Manager’ tool. 17 . I will now explain in more detail about each of the elements of Joomla! and how they contribute to the working of the database. pictures. Figure 2.1: How Joomla! generates a website Let’s try and explain this using a diagram. lists of links or search results. and a web page is built dynamically and sent back to the website viewer.2 A Brief Tour of Joomla! Figure 2. links and other files. 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.

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

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

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

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

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

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

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

3 Installing Joomla!

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

25

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

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

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

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

26

3 Installing Joomla!

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

27

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.g. A-Z or a manual 68 . by a variety of orders such as date. Its often said that you have just a few seconds to grab the attention of a potential viewer surfing past. It could be designed using XHTML/CSS to add more graphics. tables and more images without using any more Joomla! functions. This can lead to confusion with people who are new to Joomla! who think that the Frontpage component has to be used as the home page. This keeps the home page fresh and regularly changing a very important factor in determining if your viewer are to keep revisiting your site. or multiple columns in the main body of 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. or another component e. We chose to use a simple page of content as the home page in our example to keep things very simple. Therefore if your site is regularly being updated with new articles. the module Frontpage is installed by default as the first link on the mainmenu and therefore as the Home Page.1.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. 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. 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. 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. This is not the case. 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. When you install Joomla! with the sample content provided by the installation program. the first link on the mainmenu module defines the page or component that appears on the Home Page of your website. It can display them in a single column. Shop as appropriate. Its a fact well known to web designers that the home page is the most important page on the site.7 Taking it to the next stage 7.

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

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

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

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. 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 . 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 .g. you have to create the section again if you don’t like the results. ordered and displayed to our requirements we use a component which Joomla! calls a Blog view. 72 . Examples of such views are: • New stories or press releases. hold down the CTL button and select mainmenu>home and mainmenu>links with the mouse 11. 7. possibly with photos • FAQs • a directory • and many more . In order to provide selective views of this content.2 Creating Views of your content You can create views of your content pages linked to your menu in one of two ways. with either links and brief summaries (the so-called Joomla! blog format) or in a tabular form. Click the Save button Refresh your website page and you will now have a Popular Items display box with up to 3 link3 to latest new stories which will appear on the Links or Home page of your site. . In order to limit the article links displayed to the News category we need to enter the Category ID (a number e. In the section marked Menu Item Link(s): .7 Taking it to the next stage 9.2.e. Joomla! organizes our content in a hierarchical database structured by section and content.. Note that you cannot change from one style to another..g. It will be styled with the correct CSS styling for the display box ion the right hand column according to page accesses and displays links to the article 7.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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. 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. components and mambots. It is beyond the scope of a beginners book to explain about building plug ins. 151 . modules. Your single best source of information is however the Joomla! forums where you can find thousands of other developers all eager to share their knowledge.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. Many of the Joomla! resources available freely on the net will help you.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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