P. 1
Learn Joomla

Learn Joomla

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

More info:

Published by: Dallas H Pham on Jun 29, 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/10/2012

pdf

text

original

Sections

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

Joomla! Version 1.0.x

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

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

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

2

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

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

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

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 .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Shop as appropriate. 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. 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. 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 the more reasons to persuade them to stay and explore your site the better. This keeps the home page fresh and regularly changing a very important factor in determining if your viewer are to keep revisiting your site. 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. or multiple columns in the main body of your site. We chose to use a simple page of content as the home page in our example to keep things very simple.1. This is not the case. A-Z or a manual 68 . 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.g. However at the click of a button we can place a module on the front page (and any other pages too) which will make the information on the home page richer.1 Enhancing the home page (and other pages) So far we have produced a very simple home page which just displays some text and a picture. Its often said that you have just a few seconds to grab the attention of a potential viewer surfing past. 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. Its a fact well known to web designers that the home page is the most important page on the site. It could be designed using XHTML/CSS to add more graphics.7 Taking it to the next stage 7. When you install Joomla! with the sample content provided by the installation program. or another component e. Using the Front Page Component As we explained when building our example site in the previous chapter. the module Frontpage is installed by default as the first link on the mainmenu and therefore as the Home Page. Therefore if your site is regularly being updated with new articles. by a variety of orders such as date. tables and more images without using any more Joomla! functions.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

components and mambots. It is beyond the scope of a beginners book to explain about building plug ins. 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. modules. Many of the Joomla! resources available freely on the net will help you. 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.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. 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. 151 .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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