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 c Michael A Lloyd 2007 Copyright 째 First Published January 2007 Typeset in LATEX 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
Contents 1 Introduction to Joomla! 1.1 Key beneďŹ ts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.2 Building a Joomla! Website . . . . . . . . . . . . . . . . . . . . . . . . . 1.3 Examples of Joomla! websites . . . . . . . . . . . . . . . . . . . . . . . .
13 13 15 15
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 . . . . . . . . . . . . . . . . . . .
. . . . . . . .
16 16 16 18 19 19 19 21 21
. . . . . .
22 22 23 26 26 29 30
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
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
34
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 . . . . . . . . . . . . . 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 . . . . . . . . . . . . . . . . . . . .
36 37 37 37 39 40 43 45 47 48 49
3
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
Contents 5.3.3 5.3.4 5.3.5 5.3.6 5.3.7
News Menu Link . . . . . . . . . . More about Templates . . . . . . . Adding the Contact Us Page . . . Adding the Links Section . . . . . Adding a Search Facility to the site
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
49 50 54 55 56
6 Adding Users to your Site 6.1 User management . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.1.1 ConďŹ guration . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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)
. . . . . . . . . .
57 57 57 59 61 62 63 64 64 65 66
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 . . . . . .
. . . . . . . . . . . . .
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
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 ConďŹ guring 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 . . . . .
4
. . . . .
. . . . . . . . . .
. . . . .
. . . . . . . . . .
. . . . .
. . . . . . . . . .
. . . . .
. . . . . . . . . .
. . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . .
. . . . . . . . . . . . . . . . . . . . . . .
Contents
8.5
8.6
8.7
8.4.2 Where to look/go next for more information . 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 . 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 What next ... . . . . . . . . . . . . . . . . . . . . . . . .
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
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
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
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 . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
122 122 123 124 125 125 125 130 130 130 131 135 145 145
5
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
Contents 11 Hints, Tips & Howtos
146
12 Where to go next to build your expertise and skills
151
A Useful websites
152
B Open Source Software Tools & Tutorials
154
C Instructions for deleting all content and structure from a standard Joomla! install 156 D Basic End User Instructions
159
E Glossary
161
6
List of Figures 2.1 2.2 2.3
How Joomla! generates a website . . . . . . . . . . . . . . . . . . . . . . The Joomla! Administrator Control Panel . . . . . . . . . . . . . . . . . Joomla! content is structured into Sections and Categories . . . . . . .
17 18 20
3.1 3.2 3.3 3.4
The JSAS Control Panel . . . . . . . . . . . . . . . . Make a note of your new database settings . . . . The Joomla! Installer pre-installation check screen The Joomla! Installer database settings . . . . . . .
. . . .
. . . .
23 25 27 31
5.1 5.2 5.3 5.4 5.5
The AnyTown Zoo ’Worked Example’ website . . . . . . . . . . . . . The Joomla! Template Manager showing template selection method . Default Joomla! Modules installation settings in Module Manager . . The Tiny MCE HTML Editor . . . . . . . . . . . . . . . . . . . . . . . Inserting an Image into an article . . . . . . . . . . . . . . . . . . . . .
. . . . .
38 41 42 46 53
7.1 7.2
Example CSS styling displayed by Firefox Web Developer plugin . . . A Table View of the News articles . . . . . . . . . . . . . . . . . . . . . .
75 77
9.1
Template positions for the LJ_metro01 template . . . . . . . . . . . . . 119
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
10.1 A new 3 column design visual for the AnyTown Zoo template . . . . . 136 10.2 The Visual ’marked up’ for coding (only some markup shown) . . . . . 137 10.3 The LJ_andreas01 template . . . . . . . . . . . . . . . . . . . . . . . . . 144
7
List of Tables 5.1
The four standard Joomla! menus . . . . . . . . . . . . . . . . . . . . . .
48
7.1 7.2 7.3
Controlling the Blog page CSS styles . . . . . . . . . . . . . . . . . . . . Date Format parameters (strftime) . . . . . . . . . . . . . . . . . . . . . Summary of Menu Link Options . . . . . . . . . . . . . . . . . . . . . .
76 78 80
10.1 PHP Template Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
8
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, with great PHP skills and award winning graphic designers, and you already know about Joomla! concepts, 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. This is not a book for developers planning to do component or module development. It’s a book for people who are short of time and want to build quality content based websites and want to know how to make Joomla! do it for them quickly. This book covers Joomla! version 1.0.x A Joomla! version 1.5.x eBook is planned for early 2007. See http://www.learnjoomla.co.uk for more details
9
Using this book If you are new to Joomla! Read through the Introduction and the Tour and take a look at the online demo, before installing Joomla! as explained in Chapter 3. 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, 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. You should work through the example Chapter 5 first before working through Chapters 6,7, and 8 as these build on the key concepts you learn in Chapter 5. If you are interested in understanding how visual design in Joomla! works you can go straight to Chapter 9.
If you have some Joomla! experience You may have bought this book to fill in gaps in your Joomla! understanding. Learn Joomla! is designed primarily as a tutorial guide, rather than a reference manual, however you can use the Table of Contents or the Index to go directly the concept you wish to research. All the Notes, Tips and Hints are linked from the Index. You may wish to go straight to the template section if you need to modify or build your own template - this section does not require you to read the earlier material first.
Conventions Navigation: The instruction Site > Template Manager > Site templates means Go to the Site item on the pull down menu, click Template Manager from the options presented, and select the submenu option Site Templates. 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, XML, CSS and PHP) samples are displayed as <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>">
NOTE: Useful hints, tips or warnings are enclosed in boxes as explanation.
10
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, ATTICA Cybernetics in Oxford, England. He worked with many leading book publishers and TV companies, pioneering the new interactive medium before the Internet took off. Amongst other projects he created the UK’s first CD ROM Encylopedia, the Hutchinson Multimedia Encyclopedia, and produced the BBC Shakespeare, the Ordnance Survey maps on CD ROM and the Thomson Directory on CD ROM. During this time Mike raised substantial venture capital from UK VC group 3i. In 1997 Mike set up an Internet Service Provider called Red Moon Internet, and was a pioneer in the Fixed Wireless Broadband market in the UK. He also owned and ran a web development company called Xios. Mike established Artonezero in 2006 to pursue new Web 2.0 projects. The company encompasses web publishing, development, and hosting, and Joomla! is at the heart of most of these new projects. More details can be found at www.artonezero.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, where he put micros into everything from washing machines to toy trains, and where he wrote his first manual - for the 9900 microprocessor family. Mike moved into electronics marketing in the early 1980s with Texas Instruments. Since then Mike has worked at PA Technology as a consultant, and as product marketing manager for the UK schools computer supplier Research Machines, helping to develop and launch their first IBM compatible PCs. Mike has a degree in Electronic & Electrical Engineering from Birmingham University. He is married with a young son and lives in London.
11
Preface Every so often a product comes along which seems to come from nowhere on the Internet and suddenly breaks through into public attention. Joomla! is one of the next such products, but it’s success has been built on firm foundations. 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. At time of writing it is number 395 on Alexa, making it one the world’s most popular 400 websites. The reason for Joomla!’s success is that it is a modular, open source platform. Joomla! comes with a set of built in functions, but if you don’t like these or they don’t do what you want you can quite simply, find a better one from the hundreds available or write your own. Add to that a simple-to-design, high quality templating system, and support for the LAMP platform and you have a magic formula for success in the Content Management System arena. To date, Joomla! has been widely used by the open source community, the public sector and some knowledgeable developers. Joomla!’s use in the commercial web development market is limited to date, but growing. I believe, however, that Joomla! is poised to be the next Open Source crossover product to make an impact in the Commercial market. Commercial users are short of time and they want answers quickly, to satisfy management, clients or their accountant. Hence the reason for this book, 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. I’d love to hear about your new Joomla! site. You can write to me about these, or any other issue raised by the book at mike.lloyd@learnjoomla.co.uk, or visit the website at www.learnjoomla.co.uk Enjoy Joomla! Mike Lloyd London, January 2007
12
1 Introduction to Joomla! Joomla! is an open source Content Management System (CMS) for developing and editing dynamic web sites. Put simply, a CMS separates the content, the words and pictures, that make up the site from the site design and presentation, enabling a team of people to create, develop and maintain a website, each concentrating on their specialist skill. For smaller sites, this may be a team of two, the site designer, and the content editor. A few very talented individuals may possess the skills to do everything themselves, enabling one person to produce sites which can complete with the best of those produced by large organisations. Joomla!, which is an application built as a new branch from an earlier open source CMS application called Mambo, has won a number of awards, and has a large, enthusiastic and growing group of users and developers. Joomla! is a PHP application which runs on standard open source servers including Apache and My SQL,and is typically hosted on LINUX servers. For anyone with a 512kbps or better broadband connection to the Internet and a reasonably fast server, it is easy to develop web sites with Joomla! using a Web browser interactively while logged into the server, and this is the recommended development model. For those with slow connections, or working offline, there is a PC application to simulate the server to assist the application process.
1.1 Key benefits The key benefits of Joomla!, 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, and can be
freely downloaded and installed and used by anyone. In contrast many commercial CMS applications are expensive and have commercial restrictions controlled by the licensee. • 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, Apache, MySQL, PHP hosting. • All text and images, and other content, are stored in a database on the server
rather than as individual HTML pages. This makes updating of content simple,
13
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, and the presentation of information can be changed easily without the need to rewrite lots of specialist code. • The design and presentation of a web site created with Joomla! is controlled by a
design template which is completely separate from the words and images stored in the content database. Thus it is possible to completely redesign the look of the site while leaving the content unchanged, if for example a company or organisation undergoes a re-branding exercise, or to respond to changing user needs. This template comprises PHP code and a CSS design template which defines colours, font styles and layout. • Joomla! has a wide range of features in the basic software application, such
as user registration, access control, text formatting, a variety of article display styles, several different menu styles, banner ad management, as well as a web based editing tool to enter and edit site contents. • By taking advantage of user management features, you can make certain con-
tent available only to registered users, 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, such as discussion forums, shopping baskets, payment systems, user management, community tools, image galleries, forms, blogs, user comments, Search Engine Optimisation, marketing tools and so on. Most of these plugins are also freely available under the GPL Open Source licence, making it easy to download and try them out without spending money licencing code. The range of plug ins is pretty comprehensive and will meet many website owners needs and new functions are being added every day. • By using plug ins a complicated site can be up and running within days, 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, and additional
functions (such as a discussion forum or online polls) can be added later to enhance the site, in an organic way, such that resources can be managed, and new user needs met as feedback is received. Using Joomla! the website owner has many options for the development of the site, and even if a function is not available to perform a specialist requirement, new functions can be created as plug ins by experienced PHP/MySQL developers.
14
1 Introduction to Joomla!
1.2 Building a Joomla! Website To build a Joomla! website you need to prepare three elements before you get started: 1. A Joomla! installation on a suitable server with webspace and hostname, e.g. www.learnjoomla.co.uk 2. To define a structure for your content and how it will be interlinked and navigated (see chapters 2 and 5) 3. A visual design for the site, showing where various content items are displayed (see chapters 5, 9 and 10)
1.3 Examples of Joomla! websites Joomla! can be used for the smallest personal site or Blog, to a large multilingual site, with editors and contributors worldwide. And you can start small, and keep growing. Joomla! user module makes it particularly useful for membership sites, and those sites where the members want to interact or communicate together, the so-called Web 2.0 websites. 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
2 A Brief Tour of Joomla! 2.1 Introduction Joomla! is software to enable you to build web sites in a way that separates the content - the words and the pictures - from the presentation, design and structure of the website, such that it is easy to add to or change the content without any special programming or design skills; just the skills needed to use a word processor or an email program. In technical terms, Joomla! software is classified as a content management system (CMS) which allows you to build what is known as a dynamic web site, where the content is stored in a database. To create a web site using Joomla!, 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. (Note: if you just want to experiment there is a development version, JSAS, which can be installed on your PC, see Chapter 3). You will also need a domain name for your website. Apart from that you need a PC with broadband access and some image processing software to prepare your pictures for the website. You will also need a template which controls the graphic design and layout of your site, There are just a couple of templates included with Joomla!, 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.
2.2 Inside Joomla! In a website developed with Joomla!, the structure of the site, i.e. the navigation, the visual presentation and the special functions such as shopping baskets, forums or tablular views of links to articles on your site, are separated from the articles, the pictures and the items for sale or download from the site. The visual presentation of each article is standardised and controlled via the visual template, such that the text may be entered by the author into the website database with minimal styling, and no need to understand HTML programming.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.
16
2 A Brief Tour of Joomla!
Figure 2.1: How Joomla! generates a website Let’s try and explain this using a diagram, Figure 2.1. The diagram illustrates how the different internal elements of a typical Joomla! website work together to create the page that is seen by the viewer. At the heart of a Joomla! website is a database which contains raw text articles, pictures, links and other files. These have been entered and stored by an author or an editor via the Joomla! Administrator Control Panel using the ’Content Manager’ tool. 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. This information is then filtered through various Joomla! software modules and components to create different views of the data - for example news headline summaries, lists of links or search results. 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, and a web page is built dynamically and sent back to the website viewer. I will now explain in more detail about each of the elements of Joomla! and how they contribute to the working of the database.
17
2 A Brief Tour of Joomla!
Figure 2.2: The Joomla! Administrator Control Panel
2.3 Administrator Interface Once the Joomla! application software is installed (which is done from a web browser using a simple web based installer), the website is built from a web browser Administration interface (the administrator), which is also known as the back end software. The front end of the software is the your purpose built website, the development of which is described in this guide. One of the nice features about Joomla! is that all of the development and authoring functions are available via a browser, and do not require the use are of a special authoring program, which means that you can develop and maintain the site from a computer connected to the Internet anywhere in the world. The Joomla! Administrator interface, or control panel is the screen from which you as the Webmaster, or systems administrator, of your website perform all the functions involved in setting up, building your website as well as maintaining its and inputting data. It can also be used by authors and editors to import new content for the site. See Figure 2.2.
18
2 A Brief Tour of Joomla!
2.4 Design Template The look and feel of the site, its visual presentation, 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. 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. Thus the look of the website can be completely changed in a few clicks. This templating method has created a market in inexpensive ready to use templates for use with Joomla!, some of which are designed to a very high commercial standard. However anyone with a basic knowledge of HTML and CSS can create a template layout using the information provided in this guide.
2.5 Content Structure Sections and Categories Information in Joomla!, whether text or images is stored as elements in a database, and the web pages shown on the users screen are created dynamically on the fly when they are selected. The content is structured into Sections and Categories. A simple way to think of this structure is that if the database is a filing cabinet, a Section is a drawer, while a category is a file folder within a drawer. These folders contain pages of information, images and other data, which are the individual content items. See Figure 2.3. Content items can be time sensitive, e.g. A press release can be embargoed until 11am on a Monday morning, or news items can be archived at the end of the day or week. Thus the information displayed will be changed automatically, without human intervention, and this can all be pre-planned.
2.6 Plug-ins Components, Modules and Mambots Joomla! is designed in a modular fashion, enabling plug in functions to be installed simply and easily from the Administrator interface. 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. Full details of these can be found on the Joomla! Website at http://extensions.joomla.org At the time of writing this database showed over 1,000 extensions available. Components are mini-applications, such as advertising banner management, discussion forums or shopping baskets. Modules provide specific functions, such as summary views of most popular articles, user polls, exporting of CSS news feeds and so forth. Mambots provide small functions such as updating the content of a page or article according to a script.
19
2 A Brief Tour of Joomla!
Figure 2.3: Joomla! content is structured into Sections and Categories
20
2 A Brief Tour of Joomla!
2.7 User Management Users are at the core of the Joomla! content management system, and most modules are ’user aware’. From the Front End, control to content can be restricted to different groups of registered users, whilst for those producing the site, different levels of access control can be allocated to users for editing, authoring and management of the publishing process. Users can post content to the side from a browser anywhere on the Internet without the need for any special software or licence. There are modules to handle user registration, front end editing, user profile management, and this information can be shared with other applications installed as components such as forums and shopping carts.
2.8 Joomla! Demo For a practical demonstration of a Joomla! website go to http://demo.joomla.org To log in as an Administrator and view the Administrator interface, you need to register as a user on the site, and activate your user profile. This is to reduce the level of misuse of the demo site. Your username and password will then allow you to log in as an administrator. For a more detailed evaluation, get the standalone Joomla! server JSAS as described in the next chapter.
21
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, which is installed on a Web server and which is administered via a Web browser. In order to install Joomla! you must have web space on a server with the following applications (minimum versions shown) installed: • MySQL version 3.23.x or higher • PHP version 4.2.x or higher • Apache Web server version 1.13.19 or higher
Or you must install the above applications environment on your local PC (Linux or Windows).
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. Joomla! is a set of PHP programs which connect to a MySQL database. However there is an excellent package available called JSAS, the ’Joomla! Stand-Alone Server’ which you can download and install to your Windows PC. This package will install MySQL, PHP, Apache Web server and Joomla! to your PC and configured them correctly together with a set of useful tools. I recommend everyone to install this product on their PC, it is extremely useful when getting familiar with Joomla!, and is essential if you do not have a permanent broadband connection to enable you to develop your site. 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. JSAS enables you to configure up to five test sites on your PC.
22
3 Installing Joomla!
Figure 3.1: The JSAS Control Panel
3.1.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). 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. If you do not already have a website host, I strongly recommend that you use a host that is specialises in Joomla! , and preferably one which gives you linux shell access, as this will make the job of developing and maintaining your Joomla! site so much simpler, as you are able to directly change file permissions, and use a proper FTP client such as WinSCP3 to upload files. This will save you a lot of time and frustration particularly if you have a lot of image files to upload to your site, or if you wish to edit templates, live on your site. Installing the local server - JSAS Here’s what to do: 1. Go to http://jsas.joomlasolutions.com/ 2. Download the installer which is a single Windows .exe file(approx 22Mb) 3. Run jsas-setup_xxx.exe. The installation takes several minutes to complete and you are required to agree to various installation options. Just click ’yes’ each
23
3 Installing Joomla! time.The installation program puts Joomla!, Apache, MySQL and PHP on your PC and sets all the correct file permissions so you don’t need to do so. 4. Run JSAS for the first time once the installation is completed. This will set up the various programs and will then close down. WARNING: JSAS uses a virtual drive W and runs a background C:> MS-DOS window for apache.exe. Do not close this window 5. Run JSAS for a second time and you will see the JSAS control panel. See Fig 3.1 6. Click on ’About my JSAS’ to view the user documentation 7. Click /run MyJSAS 8. Click on Create New Site 9. Enter your site title (e.g. Anytown Zoo) 10. Enter folder Name (e.g. anytownzoo) 11. Enter My SQL database to Create (e.g. jos_anytownzoo) 12. Click ACCEPT 13. My JSAS will now show a site named Anytown Zoo with a link underneath labelled |Browse Folder| 14. Now click on the Advanced Options link at the bottom of the list of Sites. This brings up a new right hand panel. At the top is listed the Anytown Zoo site, and there is a link in green text underneath entitled Install Joomla!. 15. Clicking this link brings up a pop up window (see Fig. 3.2) which gives you the parameters you will require to complete the Joomla! installation settings. Make a note of these. Click OK and JSAS starts extracting Joomla! and installing it to your new site. This may take a few minutes depending on the speed of your PC. 16. When the installation is complete you will be returned to the main control panel. If you click the link |Browse Folder| under the site Link for Anytown Zoo you will see a pop up folder showing that all the Joomla! files have been installed. You will need to open this window to delete the installation files folder once the set up process is completed. Close the Window. 17. Now click on the link for Anytown Zoo in the MyJSAS panel on the right hand side. This will bring up a browser window with the Joomla! Web Installer, showing the Pre-installation check. (See Fig 3.3) You will see that JSAS has set all the file and directory permissions correctly for you and that all the necessary files are writable. 18. Click Next. The GPL licence is shown for information. You don’t have to agree to it. Click Next
24
3 Installing Joomla!
Figure 3.2: Make a note of your new database settings 19. You are now at the Step1 screen. Enter the following settings: Host Name: ’localhost’ MySQL User Name: ’root’ MySQL Password: [leave blank] MySQL Database Name: ’jos_anytownzoo’ [As we set earlier] Ensure Install Sample Data is NOT ticked Do not tick any of the other boxes 20. Click Next. Joomla! installer pops up a box saying ’Are you sure these settings are correct’. Doublecheck them and then click Yes when you are happy 21. This should only take a few seconds to complete. Please wait until the Step 2 screen is displayed and the message SUCCESS! 22. Now Enter the name of your site in the space provided e.g. Anytown Zoo and click Next > > 23. Step 3 screen displays the URL of your site http://localhost:85/anytownzoo and the path to the directory files on your server, W:\www\anytownzoo 24. Enter your email address is the space provided 25. Joomla! suggests a random Administrator password, we will replace this with our own password e.g secret WARNING: Make a careful note of the Administrator password otherwise you will be unable to login and administer your site 26. Leave all the other settings unchanged and then click Next > > 27. Congratulations! Joomla! is installed 28. You now need to delete the installation folder, Go to the JSAS control panel and click the link |Browse Folder| under the site Link for Anytown Zoo. This brings
25
3 Installing Joomla! up a folder with your Joomla! site files. Select the installation folder and delete it. 29. You can now click view site or Administration from the Step 4 Web installer screen. You have successfully installed a Joomla! site on your local PC. You can now proceed to the next chapter and start the Worked example. NOTE: To access the Administrator control panel in future using JSAS you need to type http://localhost:85/anytownzoo/administrator/ in your browser and ensure that JSAS is running beforehand.
3.2 Installing Joomla! on a Web Hosting server Here are the minimum server requirements for Joomla! 1.0.x • PHP 4.2.x or above - http://www.php.net • MySQL 3.23.x or above - http://www.mysql.com • Apache 1.13.19 or above - http://www.apache.org
You must ensure that you have MySQL, XML and Zlib support built into your PHP (most commercial web hosting firms will have done this already) Here’s how to install Joomla! 1.0.x on your web server
3.2.1 Getting the Files Go to the Joomla! Home page (www.joomla.org) and click on the download Joomla! 1.0.x button. This will take you to the http://forge.joomla.org site and the latest stable 1.0 version of Joomla! will be list here for download, at time of writing this was Joomla_1.0.12-Stable-Full_Package.zip. It’s very important to download the latest version to ensure that you have all the current security patches. The file is a compressed archive so you will need to unpack it before you can run the installer. The exact method of installation used to get the uncompressed files loaded to your webspace will depend on the facilities provided by your web hosting supplier. First of all you need to get the installation files loaded onto your server and set the correct permissions for each file and directory. After that, Joomla! has a nice, friendly, web browser based installation tool which makes the rest of the process very easy.
26
3 Installing Joomla!
Figure 3.3: The Joomla! Installer pre-installation check screen
27
3 Installing Joomla! Shell access If you have ’shell’ access, i.e. you can telnet or ssh into your webspace, then you should do the following:
1. Download the Joomla_1.0.xx-Stable-Full_Package.tar.gz file from http://forge.joomla.or and copy it to the root directory of your webspace using FileZilla, WinSCP3 or your choice of favourite FTP client program. 2. Then uncompress the file $ tar zxvf Joomla_1.0.xx-Stable-Full_Package.tar.gz <enter>
3. This will install the directory structure and files correctly. 4. Next check the file permissions. All files should have the permission set to 775. 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. Alternatively you can change the permissions of the images/, media/,uploadfiles/ and administrator/backups directories to 707, after you have uploaded them. $ chmod -R 707 /images <enter> (repeat for all the directories)
6. The configuration file configuration.php should be set to 777 to allow installation. $ chmod 777 configuration.php <enter>
7. For additional security change configuration.php to 644 after making all your configuration changes. $ chmod 644 configuration.php <enter>
8. 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 - without providing shell access. The good news is that if your hosting company uses cPanel then it’s almost certain that your space will meet the basic Apache, PHP and MySQL requirements.
28
3 Installing Joomla! WARNING: Many web hosting companies use a tool called Fantastico to give their users access to lots of Open Source programs. This is meant to make installation as simple as clicking a link. However in my experience the Fantastico installation isn’t always set up correctly, 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. Here’s how to install Joomla! if your web hosting company uses cPanel. • If you have an up to date cPanel control panel for your web space you can
upload the file, 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, which doesn’t allow you to unzip or decompress files, 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. You will then need to check the permissions of the appropriate files to ensure they are set appropriately before proceeding with the web based installer. Depending on the facilities by your web hosting company you may need to unzip the file locally on your PC and then upload each uncompressed file/directory to your server web space using a file manager, one by one. 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. Ensure that you set your file/directory permissions correctly as explained in the section above to enable installation to proceed.
3.2.2 Creating your MySQL Database All the data and indexes for your Joomla! website are stored in a MySQL database. Using cPanel R Databases From the main cPanel page go to Databases > MySQL°
1. At the next screen, entitled MySQL Account Maintenance go to the field entry labelled New Database: enter a name for your new database. This will often need to be of the form username_databasename where username is your login for cPanel. However you should check with your hosting provider’s documentation to check the exact naming structure required for databases. Let’s assume we have called the database LJ_anytownzoo.
29
3 Installing Joomla! 2. Next you need to tell cPanel which user will administrate your database and it’s privileges. You can use an existing user (if you have one) otherwise create a new user, which will be of the form prefix_username, let’s say we use the create user function to create the user LJ_admin , password secret 3. Finally we need to use the function Add Users To Your Databases: to allocate select this user and add it to the database, selecting the option Privileges=ALL 4. You need to make a note of the database name and user/password for use in the web based installation. Using PHPMyAdmin Some web hosts will give you access to PHPMyAdmin to create your database. Please refer to your hosting companies instructions for creating a database and user and allocating the user to the database Database created automatically Some web hosts will allow Joomla!!s installation program to create the database automatically if you have the right permissions. For example, Artonezero (www.artonezero.com) have accounts which use the ISPConfig control panel rather than cPanel, and their gold accounts allow shell access. With this hosting company service Joomla! does all the work of creating the MySQL database for you, and you can skip the database creation step once you have uploaded the Joomla! installation files.
3.2.3 Completing the installation using your Web Browser When you have finished uploading the files and folders, go to your homepage in your browser (e.g. http://www.yourdomain.com). 1. You should now see the pre-installation page generated by Joomla!. (See Fig 3.3) If you don’t see this page there is a problem with the initial installation of the files into your web root directory and you need to go back and check the steps again.
30
3 Installing Joomla!
Figure 3.4: The Joomla! Installer database settings
31
3 Installing Joomla! TROUBLESHOOTING: 1. Check that you have not left an index.html or other home page file in your web root directory 2. Ensure that Apache, MySQL and PHP are all set up correctly on your server (it is common for Apache/PHP to need configuring to display .php files correctly on a fresh server installation) 3. Ensure all the files were correctly uploaded to your site and in the original directory structure 4. Go to www.yourdomain.com/installation.index.php - if this does not display you will need to contact your hosting provider, systems administrator, 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. Joomla! checks that you have the correct versions of software installed on your computer and that critical permissions are set correctly. If all is well, then all the result of the checks are shown in green. A red entry highlights a problem which should be fixed before continuing. 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.2.1.1 above. If there are any problems with Required or Recommended settings these should be referred to your hosting provider. Click Next > > to continue 3. Review licence GPL (you don’t need to agree to it as it is provided for information only), Click Next > > to go to Step 1 4. You can now start the Installation. Step 1 requires you to provide the settings for the MySQL database. See Fig. 3.4 5. 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. IMPORTANT: De-select Install Sample Data, i.e. ensure that the box is NOT ticked 7. 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, then Click OK or Cancel to change Now you need to wait a few seconds as your site is set up ... 8. All being well you will see the next screen, Step 2 SUCCESS!
32
3 Installing Joomla! 9. Enter Site Name For our demo site enter Learn Joomla! Demo Zoo Site Click Next > > 10. 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â&#x20AC;&#x2122;d Password: secret Click Next > > 11. Step 4 Congratulations Joomla! is installed 12. Make a note of username and password which have been set 13. Before you can log in to the Administrator interface, you must delete the Joomla! installation directory using your shell account or FTP manager for your webspace (not via the web installer) 14. If you now refresh your website address, www.yourdomain.com, you should now see the site showing with default template 15. Go to www.yourdomain.com/administrator 16. Login with username and password Youâ&#x20AC;&#x2122;re ready to go!
33
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, here are the key steps involved in creating a Joomla! website, with references to relevant sections of the book. 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). 1. 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 - owned by Learn Joomla!’s publisher). 2. Download the latest Joomla! installation file from www.Joomla.org. Upload to your webspace using SFTP or your hosting providers web based FTP tool - See Chapter 3 3. Install Joomla! into your webspace and save your administrator and MySQL database passwords carefully. If permissions problems set owner and file permissions correctly until shown correctly. Don’t forget to delete the installation directory. - See Chapter 3 4. On paper, or your favorite graphics program work out the layout of the site: home page, subsequent pages, number of columns, banners etc 5. Find a suitable pre-designed template or build your own (this may take longer than one day from scratch) - See Chapters 9 and 10 6. Upload the template and set as default - See Chapter 9 7. Collect together sample content for each of the sections in your site including text copy and images - See Chapter 5 8. Devise the sections and categories for your site, and create these using the Section and Category Manager tools - See Chapter 5 9. Upload your sample images using the Media Manager - See Chapter 5 10. Create the sample pages for initial site building - See Chapter 5 11. Build the menu - See Chapter 5 12. Switch off modules which are not required - See Chapter 6
34
4 The One Day Guide to Building a Joomla! Website 13. Install any additional modules and components required - See Chapter 6 14. Set the module positions and display order - See Chapter 6 15. Test 16. Correct content, links, module settings, adjust template if required 17. Add/Edit remaining content Youâ&#x20AC;&#x2122;re done!
35
5 A Worked Example - Building a Simple Website Joomla! is a powerful development framework. But a new developer has to learn to walk before she or he can run. 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 - that’s why you want to use Joomla!, right? However, this complexity can be a problem when you are new to Joomla! and want to get started. Our step by step worked example will therefore switch off most of the advanced features and show you how to build a simple site, and we’ll then add in the extra functions later a step at a time. Were going to work with a simple website design that is a little old fashioned now, but which many clients have required at one time or another, sometimes called a brochureware site. Although you probably want to do something more ’Web 2.0’ than this with Joomla! eventually, it’s a pretty timeless example and illustrates how to construct a Joomla! site and at the end of the exercise you will understand how Joomla! works. This is the most important chapter in the book. Once you have worked through it step by step you will have a good understanding of the key concepts which underlie the structure of Joomla! and how to develop sites with it, so I recommend you don’t skip any of this material.
36
5 A Worked Example - Building a Simple Website NOTE: In this tutorial we will not give an exhaustive description of each screen and the functions available, concentrating only on those functions needed to create our website. For full descriptions of the function on each administrator screen click on the Help button for context sensitive help, or refer to the Joomla! User Manual (see Appendix A for the PDF link to download the User Manual in PDF format)
5.1 Starting at the beginning 5.1.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, England, 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. Our first website (see Fig 5.1) will be a standard type which is familiar to many web designers, and a live demo can be seen at http://demo.learnjoomla.co.uk/exampleone
It has: • Home Page • Simple single-level horizontal Navigator menu with roll overs • About Us page • ’Products’/services section • News section • Links page • Search function • ’Contact us’ page with a form for the potential customer/visitor to send in an
enquiry
5.1.2 A blank Sheet Our starting point is a new installation of Joomla! without any content. If you have installed Joomla! following the instructions in Section 2 (or your ISP has done it for you), you are ready to start. If not, I suggest you install JSAS on your computer (assuming you are running Windows) and then set up a sample website without any content installed. 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
5 A Worked Example - Building a Simple Website
Figure 5.1: The AnyTown Zoo ’Worked Example’ website
38
5 A Worked Example - 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. OK, done that? Let’s get started and fill our empty database. CMS - A different approach With a static website the design starts with creating the web page HTML code. In a dynamic CMS like Joomla! we start with the content, and work out the underlying structure first. NOTE: With this book we provided two free design templates and sample content, text and images. Please copy these into a new folder on your computer. (For the purposes of this book I will assume that you have put them in a folder called ’LearnJoomla’ in your My Web Pages Folder although you can obviously put them where ever you are most comfortable storing content.) Building a Joomla! websites does requires a little planning of the structure in advance, before diving in and starting programming or designing, but this may just be a few minutes.
5.2 First Look at the Administrator’s Interface Our initial text and images need to be entered into the database using the Administrator tool. Here’s what to do: 1. To enter the Administrator Interface open your web browser and type in the URL for your Joomla! installation as follows: e.g. http://www.yourdomain.com/administrator (on a hosted server) or http://localhost:85/anytownzoo/administrator (using JSAS) This will bring up the Joomla! Administrator Login: 2.Type in the username ’admin’ and the password that you set when you installed Joomla! in chapter 3 (in our case secret ) NOTE: If you do not get the administrator login at the this screen please make sure that you deleted the installation directory once the installation procedure was completed. 3.You will now see the main Joomla! Administrator Interface Home Screen, known as the Control Panel. See Fig 2.2. Let’s take a couple of minutes to familiarize ourselves with the Administrator interface as there is a lot on screen.
39
5 A Worked Example - Building a Simple Website 1. At the top of the screen are pull down menus Home, Site, Menu, Content, Components, Modules, Mambots, Installers, Messages, System, Help 2. There are also icons showing if there are system messages awaiting and the number of users logged into the system. Finally there is a link to Log out of Joomla!. 3. All of the functions of Joomla! Administrator are accessible via the pull down menus. 4. In the middle of the screen there are a number of large buttons, Add New Content, Content Items Manager and so forth. These are one click short cuts to popular Joomla! Administrator functions such as adding a new article or photograph (use Add New Content or Media manager), and provide a quicker way to access frequently used functions rather than using the pull down menus. 5. On the right hand side of the screen is a section showing currently logged in users, and with tabs running along the top (Logged, Components, Popular, Latest Items and Menu Stats). As a beginner you will probably not make use of this section, at least to start with. We will concentrate on accessing the command functions via the pull down menus, as the allocation of functions to the button menus is a little idiosyncratic and the sooner you get used to where functions live in Administrator, the quicker you will be able to start moving your way around.
5.2.1 Change the default template NOTE: The instruction Site > Template Manager > Site templates means, go to the Site item on the pull down menu, click Template Manager from the options presented, and select the submenu option Site Templates. If you do this now, Site>Template Manager>Site templates The Administrator window displays a list of installed templates or design skins which change the appearance of the site. By default the template rhuk_solarflare is installed as indicated by the green tick in the default column. If you now open a browser window and go to your live site e.g. http://localhost:85/anytownzoo/ (for JSAS) or http://www.yourdomain.com (on a server) you will see the default template with no content. Personally I find this default template somewhat confusing for the beginner, so let’s switch to the other template provided. Click the ’radio button’ in front of the madeyourweb template, and then click the large button at the top of the screen marked Save. (See Fig 5.2)
40
5 A Worked Example - Building a Simple Website
Figure 5.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. 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. We are going to use these functions in later chapters, but for now we will switch them off. To do this: 1. Go to Modules > Site Modules 2. You will see a list of all the modules Joomla! has installed by default. See Fig 5.3. For each of the modules (Login Form, Syndicate, Latest News, Popular, Newsflash, Polls, Who’s Online) click once on the published icon in the published column next to the name of the module using your mouse. This will toggle the icon to a red ’X’ indicating that the module is no longer published to your site.
41
5 A Worked Example - Building a Simple Website
Figure 5.3: Default Joomla! Modules installation settings in Module Manager
42
5 A Worked Example - Building a Simple Website 3. Reload the browser window showing your site and you will see that these modules have now disappeared. 4. Return to the Home screen in Administrator Control Panel 5. 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. There is an option on the ’Site’ tab which you should configure now. There are others which can be changed later. 6. Click the option ’Site Offline’ to Yes and press the big Save button at the top of the page. 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. 7. You will be able to preview your site on your PC provided you are logged in as Administrator in another window in your browser. 8. Take a minute to look at the settings on the other tabs if you roll your mouse pointer over the (i) button next to each parameter you will get pop up help advising what each setting does. You can set your meta tags, favourite icon and so on from this screen, as well as other settings to do with user management which are covered in the next chapter. These can all be done later at a convenient time.
5.2.2 Entering our sample content OK, now we are ready to start entering content. All of our content (words, pictures) is stored in a 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. 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. Our content or data is stored in Sections, and within each section, it is divided into Categories. 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. The Articles or Pictures are individual labeled documents or photographs filed in the folders. (See Fig. 2.3) In order to enter content into the Joomla! database, you must have at least one section and one category (but you can have as many sections or categories as you like). 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.
43
5 A Worked Example - Building a Simple Website In our simple example, we will have just one section or drawer called Website Content, and divide the content up using different categories or folders that describe the different sections of the website which we will call Home, Services, and News. Let’s set up the structure: 1. 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). 2. Click the New button in the button bar below the pull down menu. This brings up a new screen called Section: New [ New Section ] 3. In the Title field enter ’Website Content’ 4. In the Section Name field enter ’content’ 5. Do not change any of the other settings or enter other items. (You can add setting later via the Section Manager if required) 6. 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. Now we will add our categories. 7. Go to: Content > Category Manager This brings up a new screen called Category: New [ Content ] 8. Click the New button in the button bar below the pull down menu. 9. In the Category Title field enter ’Home Page’ 10. In the Category Name field enter ’home’ 11. The Section field should already be set to Website Content (as this is the only Section you have created), however if it is not, select it using the pull down handle. (If you forget to set a section Joomla! will remind you) 12. Do not change any of the other settings or enter other items. (You can add more settings later via the Category Manager if required) 13. Click the Save button You are returned to the Category Manager view and your new category is displayed in a list. Now repeat these steps to add additional Categories as follows: Services (Category Title: Services, Category Name: services) News (Category Title: News, Category Name: news) You should now have three categories listed in the Category Manager, and you are now ready to enter the sample content.
44
5 A Worked Example - Building a Simple Website
5.2.3 Entering Words and Pictures Adding New Content To add a new document to the database there are two routes you can take. 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 Content Item: New function is displayed. 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. Entering content The Content Item: New entry page has three main areas: The Item details consisting of the item Title, Title Alias, Section and Category and Intro text, (this information is all required to save the new page of information), the Main text (which is optional, but as we shall see later it is good practice to store the main body of the article in this area), and the right hand section with the tabs Publishing, Images, Parameters, Meta Info and Link to Menu running along the top. It is not necessary to enter anything into any of these tabbed data entry forms to perform the initial setting up of a page, and all the items can be modified subsequently from the Content Items Manager. Let’s enter the copy for our home page: 1. Open a Content Item: New page. Set the Section to Website Content and the Category to home. 2. Enter the Title: Welcome to Anytown Zoo Enter the Title Alias: welcome 3. Open your text editor (notepad) and open the sample content file provided with the book home page copy. Cut and paste the text under the heading Introduction into the Intro text window. Cut and paste the text under the heading Main body into the Main Text window. (See Fig 5.4) 4. Click the Save button
45
5 A Worked Example - Building a Simple Website
Figure 5.4: The Tiny MCE HTML Editor
46
5 A Worked Example - Building a Simple Website THE TINY MCE HTML EDITOR: Joomla! provides a nice embedded WYSIWYG HTML editor to help you format your content pages, without having to type in HTML code directly. As well as the standard HTML tags, the editor will also allow you to use the CSS styles to format content in your page. 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. Tiny MCE is developed by Moxiecode Systems AB, see http://tinymce.moxiecode.com for more information and a manual. Congratulations you have now entered your first page of copy! That whole process took a while, much longer that it would have taken to make a simple HTML page using a traditional method, however the good news is the the next 7 pages will be much quicker. Now you should create the following pages using the sample copy provided • About • Services1 • Services2 • Services3 • News1 • News1 • News2
Use the Item Titles and Aliases given in the sample copy exactly as written so that they match the instructions given in this book.
5.3 Connecting it together building the menu Now we are going to assemble our initial pages and build a simple website. We connect all the different items and categories of information together and access them using a menu. WARNING: Unless content is linked to a menu it is not possible to make it available to users. There are four menus included by default in a Joomla! standard installation. These are Main Menu, Top Menu, User Menu and Other Menu. See Table 5.1. These are in fact four separate copies of the mainmenu module with different names and different parameter settings. They are set up in this way to assist the developer to understand the possibilities of Joomla! menu systems, and to allow several different menus to be included in one site demonstration.
47
5 A Worked Example - Building a Simple Website Menu Main Menu
Top Menu
Description The default menu, with the first link set to load the Front Page component as the ’Home Page’ link. It is set up as a vertical menu. It is set up as a horizontal menu, the Module CSS suffix is set to -nav
Other Menu User Menu
A third menu, for when the first two are not enough! The Menu for Front End users to give access to article and link submission and editing, it is only visible when users are logged in (access permissions set to registered) Table 5.1: The four standard Joomla! menus
5.3.1 Home Page Menu Link The mainmenu has an important function in addition to aiding navigation. The item selected to be linked in position 1 of the main menu is designated your sites Home Page. This linked item can be a single dynamic content page, a static page (we will discuss static pages later) or it can be a special component called Front Page which enables you to display excerpts from several dynamic pages all on your Home page at the same time and is ideal for creating a busy, constantly updated information rich home page. The Home page can also be any other component, for example it can be a Shop Catalog very important if you are building an online shop in Joomla!. We will discuss the use of the Front Page component in a later chapter, however for now, we will just use a simple page item for the Home page of our worked example. 1. 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, control the order in which they are displayed, and the content item to which they are linked. 2. You will see there is already a single link called ’Home’ which is linked to the Front Page component. We are going to delete this link. 3. 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. Now to add the new home page. Click the large New Button in the button bar
48
5 A Worked Example - Building a Simple Website 2. Click the Link - Content Item link within the left hand Content box 3. In the Add Menu Item :: Link - Content Item screen enter the Description’Home’ in the space provided for Name 4. Select the Item Website Content - Home Page /Welcome to Anytown Zoo item in the Content to Link box 5. Leave all other items unchanged at this point 6. 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 may change a number of parameters related to this link by clicking on it again in the future. 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. You cannot edit a menu link e.g change a content link to a component link once it is set up. I wasted some time when I was new to Joomla! trying to work out how to do this you can’t . 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.
5.3.2 About Menu Link Now repeat the above steps to create an ’About’ link on the menu
5.3.3 News Menu Link Our first two links are to individual content pages. Now we are going to link a summary view of content to create a news items summary display. To do this we will use a display tool which Joomla! calls a Blog view. 1. Go to: Menu > mainmenu 2. Click the New Button in the button bar 3. Select Blog Content Category 4. Enter Name: ’News’ 5. Select ’Category:
Website Content / News’
6. Leave all other items unchanged at this point 7. Click the large Save button
49
5 A Worked Example - 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. Click on it to view the news summary. You will note that the first item is full screen width and the next two are in columns. The display of information is controlled by parameters associated with the menu item. These can be changed once the menu link has been created by clicking on the menu link name in the Menu Manager (see below). 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. Go to: Menu > mainmenu 2. Click the New Button in the button bar 3. Select Blog Content Category 4. Enter Name: ’The Animals’ 5. Select ’Category:
Website Content / Services’
6. Leave all other items unchanged at this point 7. Click the large Save button Reload the browser window showing your site and you will see your new animals menu link has been published to the site. For this view we decide to have a single column with one animal per line. To do this: 8. Go to: Menu > mainmenu 9. Click on The Animals content link 10. Set # Leading to 0, Intro to 6, Columns to 1, Links to 4 This enables up to 6 single column articles with summary text, and 4 with links only 11. Click Save Reload the browser window showing your site and view your new The Animals summary page within a single column. 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..
5.3.4 More about Templates The site is displayed via the default template, madeyourweb, and you can navigate to the pages that you have entered by clicking on the menu.
50
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
5 A Worked Example - Building a Simple Website Inserting an image into a page 1. From the Administrator Control panel select Content Items Manager 2. Click on the content item link for Giraffe 3. Position the cursor before the first character of the main paragraph of text 4. At the bottom of the text window is a button marked Insert Image. Press it once. This inserts the image tag {mosimage} 5. Go to the panel on the left hand side of the page, and select the images tab. See Fig. 5.5 6. Your new giraffe thumbnail 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) 7. 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. Set Image align left, border set to 0 and add a caption ’Giraffe’ and press the Apply button 9. 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.3.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. A Joomla! component is an application plug in which performs a specific function, 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, such as VirtueMart which we will describe in a later chapter. 1. Go to: Components > Contacts > Manage Contacts to load the Contact Manager 2. The contacts component can store a complete directory of contacts, to use in a departmental or employee directory, however in this case we are just going to add a single company contact. 3. Click on the New Button in the Button Bar to bring up the Contact: New entry screen. 4. Select Category contacts, and linked to user No User, and then type in details for the various contact information fields we have provided sample content in the file in your LearnJoomla folder.
54
5 A Worked Example - Building a Simple Website 5. On the right hand side of the Contact: New entry screen there is a panel with three tabs, Publishing, Images and Parameters. We are most interested in Parameters at this stage, so click the parameters tag. This enables us to control which of the fields are displayed on the website, for example if you don’t want to display icons, country, fax or vcard, just hide these options. You can also customize the email form text at this location. 6. 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). 7. Now we have to add the Contact Us page to the menu. 8. Go to: Menu > Main Menu 9. Click The New button in the button bar to take you to the New Menu Item screen. 10. In the components box, select the radio button against Link Contact Item, then press the Next Button in the Button Bar. This takes you to the Add Menu Item :: Link Contact Item screen. Type in the Title Contact Us and click the item you have just created in the Contact to Link display window to highlight it. Leave the other items untouched 11. NOTE Parent Item Top means link to the top level of the menu, menus can also have sub menus. 12. Click on the Save button on the Button Bar. 13. Now go back to your browser preview window and click the reload button and hey presto you have a new menu item. Click on it to see your new contact details and enquiry form page. 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, Save them and then check the results by refreshing the preview window.
5.3.6 Adding the Links Section The links section is provided by another Joomla! component, Web Links. Like the contacts section, Web Links is capable of managing a very large numbers of links, sorted into categories. However for our simple website we will create just one category called Recommended Links 1. Go to: Components > Weblinks > Weblink Categories 2. Click the New button in the Button Bar 3. Enter Category Title: ’Recommended Links’ 4. Enter Category Name: ’links’ 5. Press the Save button.
55
5 A Worked Example - Building a Simple Website 6. Now you can add the sample links we have provided 7. Go to: Components > Weblinks > Weblink Items 8. To add a link click the New button in the Button Bar 9. This brings up the link database entry screen. Type in the Link Details which includes the wording you want to see for the link, the URL which the link will connect to (NOTE you do not need to type in the http:// part links can just be in the form www.google.com) and a short description of the information to be found on the site. 10. Press the Save button. If you add 4-5 links for the working example this will give you a good idea of the capability of this function.
5.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. All you need to do to add search to your site is to enable the search module and position it where you want it. 1. Go to Modules > Site Modules 2. Click the Search module link to open its configuration screen. Using the drop down box, change the position to bottom this corresponds to the search module position in our LJ_metro01 template. 3. Click Save 4. 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. 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. Type a word in and hit Enter on your keyboard You will get a number of results TIP: To add a Search button graphic such as Go instead of the grey button, see Chapter 11 Hints and Tips TIP: To highlight the search term in the results like a yellow highlighter pen, see Chapter 11 Hints and Tips Your sample website should now look like Fig. 5.1 Congratulations you have now built your first Joomla! website.
56
6 Adding Users to your Site In this section you will learn how to: • Make use of user management in your site, understand how it works, and
where to use it • Enable users to register themselves and retrieve their password if they lose it. • Install the login module to allow users to login to the site • Control access to content and navigation • Set up users to edit and add content to the site
User access control is a very powerful feature that is built into the heart of Joomla!, and sets it out as a serious Content Management System. With it you can control how users of your site access different pieces of data or sections on the website, including whether a user can view an article a menu or even a complete section on your site. For example you can allow public access users (anonymous users) access to an limited subset of information, and reserve full access to registered users only. This might be because you want the users to pay for this access, 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. You can also set up users to author, edit and publish information on the site, either from a simple front end interface, or using the Administrator control panel.
6.1 User management You do not need to install any additional software in order to enable user management. You can however disable it (or at least user access to it), if you don’t want to use it (see below). You have the option to manually control the addition of registered users for your site or to allow users to register themselves.
6.1.1 Configuration There are a number of global settings which need to be configured before starting to implement the user management capability.
57
6 Adding Users to your Site 1. From the Administrator Control Panel home page click the Global Configuration button. There are several options on the ’Site’ tab which control the user management settings, which you must configure. These are: a) front-end login. Set to No to disable the frontend user login and registration set to Yes to use the functionality of the Login Form. If set to No the following 5 options are not applicable, if set to Yes, these should be set according to your requirements.a)show unauthorized links clicking Yes allows any links to content items which have be set to registered access to be shown, although the user has to login to click the link (what happens if you do this and you are not logged in). Selecting No means that the links to registered access content are hidden from the viewer. b) allow user registration. If Yes selected this enables users to self register, otherwise the system administrator has to register them manually from the User Manager. 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. If set to Yes a user is sent an email to verify with a web link to click before their user account is activated. Otherwise they have login access immediately once they submit their registration via the Login Form. d) require unique e-mail. If set to Yes, two different users cannot share the same email address. e) front-end user params. This is an advanced option, set to Yes. 2. Next, from the server tab page, set Site Session Lifetime. Set the timeout after login for logged in front end users (in seconds). The default is 900 seconds, or 15 minutes which is a good general setting. Shorten it if your users are in a public access area where they may not spend long on a terminal 3. Next, from the Mail tab email should be configured according to your requirements for email to be sent to users. The From Name: Is the name that uses will see in their email inbox, e.g. ’AnyTown Zoo’, and the Mail From: is the actual email address from which the email will appear to have been sent. e.g. webmaster@anytownzoo.co.uk. 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. You will probably want to use a generic address such as webmaster@anytownzoo.co.uk rather than your own email address. You have now completed setting the global user management settings for your site.
58
6 Adding Users to your Site
6.1.2 To set up a new user There are two ways that new users can be added to your site. 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). Here’s how to do this: 1. Type in the users name, 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. 2. TIP: If you have shell access on a Linux system either install or ask your systems administrator to install PWGEN. This simple utility generates unlimited pages of random 8 character passwords so you don’t have to try to invent them yourself. 3. Allocate the user to a group, according to the access privileges you wish them to hold. Typically the choices are: a) Registered Group: These users are able to login to the site. Additional information (sections and pages) may be made available to a user once logged in. Access provided to a child group (like Registered) is inherited by the parent groups (like Author) unless specifically denied by the Super Administrator. b) Author Group: These users are given access to submit new content and edit their own content items/pages by logging into the site. c) Editor Group: These users are given access to submit and edit any content by logging into the site. d) Publishers Group: These users are given access to submit, edit and publish any content by logging into the site. When to add users via the User Manager Adding users manually via the User Manager is a good solution when you have a relatively small number of new users to add on a daily basis, for example if you are running a subscription site for information services such as a professional newsletter or a members only site such as a Chamber of Commerce site where you want to vet and possibly charge members for access to parts of your site. TIP: You can bulk import users from a spreadsheet using a third party component called JUICE: Joomla! User Import Component (see extensions.Joomla!.org)
59
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). 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). You want to allow anyone who ďŹ nds the site and is interested in its contents to decide to become a member. The automated system allows you to handle a much larger daily volume of registrations with minimal resources. Administrative Users There is a third type of user which may be set up manually, which is available for those users that you wish to allow to login to the administrator control panel (i.e. the tool that you are using to build the site). 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. On a large site you might have several editors (or Manager) each responsible for managing and maintaining a content area, and you may have more than one Webmaster (Administrator or Super Administrator) responsible for making changes to the site functionality and structure. You add these users manually via the User Manager as above, however they are allocated to groups in the back end which gives them access to the administrator control panel. Note that users in groups allocated to the front end, i.e. the public facing website, are not able to login to the administrator control panel. You can give these front end users some editing capability via a user menu (see below), but they are not able to make structural changes to the site. There are three back end administrative user groups with different privileges which are allowed to log in via the Administrator control panel. You can determine which group to assign a user to depending on the privileges they require to do their job. Administrative users can login from the front end too, but only have access to the limited front end functionality. 1. Manager Group: Managers have all the access rights of the Publisher Group in the front end, and they also have access to the Media Manager,Preview, Statistics, Menu Items, Managing Content via Sections, Categories and Content Items, Frontpage Manager and the Archive Manager 2. Administrator Group: Administrators have all the rights of the Manager Group, and they also have access to Trash Manager, Managing Users, Managing Menus, Managing Components, Managing Modules and Managing Mambots
60
6 Adding Users to your Site 3. Super Administrator Group: The Super Administrator is equivalent to ’root’ permission in Linux and has access to and can change any aspect of the Joomla! website. In particular Super Administrator access is required to change or manage templates and change Global Settings.
6.1.3 Installing the Login Form module To give your website users access to user management you simply need to add the ’Login Form’ module to your website. This is normally displayed on the home page, but can be included on as many areas of the site as you wish. I recommend adding it to your forum and shop pages as well if you have them (see later section). The Login Form module can be loaded in any position, but it is usually placed in either the left or right hand column. Here’s what to do: 1. Login to the Administrator Control Panel interface as the Super Administrator 2. Go to Modules > Site Modules 3. Click on the Login Form link NOTE: If you change the name of this module to something more appropriate for your site design, take care when you next need to access the module link from the Site Modules Manager, as it will now not be displayed as Login Form but as your new name e.g. Customer Login. Don’t panic if you can’t find the Login Form any more! The settings required for the Login Form module are as follows: DETAILS:
• Title: Change to ’Customer Login’ or another more suitable phrase • Show title: Select ’Yes’ • Position: Select ’left’ • Module Order: This can only be changed from the Module Manager screen (see below) • Access Level: Public • Published: Yes (ensure the module is visible on the site) PAGES/ITEMS: (Indicates on which menu pages the Login Form is displayed)
• Select mainmenu | Home (NB you can easily change this later) PARAMETERS:
• Module class suffix (defines a unique CSS class to enable the Login module to be visually styled via the CSS stylesheet - the text which is appended in this field id added to the basic CSS class moduletable) We put in here -left, 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.zip template CSS stylesheet.
61
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’, in front of the person’s name or username. To replace this with a more suitable phrase you can edit the language file in the /language directory e.g. english.php. The line to edit is DEFINE(’_HI’,’Hi, ’);. For example you could replace ’hi,’ 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. NOTE: You can change any of these settings again later if you aren’t happy with the way your Login Form looks. 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.1.4 Testing the Login Form I recommend that you test out all the functions of the Login Form, both to acquaint yourself with the interface as it will be seen by your users and to confirm that everything is working correctly, including the automated emailing function. The following should be tested: 1. Click on the register link to register yourself. If your installation is set up not to allow multiple users for the same email address you will need to use a second email address, or an active alias e.g. support@anytownzoo.co.uk. 2. Enter your name, requested username and password in the form and press the Send Registration button. 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.” Note that you must activate the account by clicking on the activation link when you get the e-mail before you can login. 3. If the username is already in use you will get a pop up box informing you that it is not available and asking you to choose another username.
62
6 Adding Users to your Site 4. Once you have registered, and assuming email is correctly configured on your email server, you will receive two emails after a few minutes. One to the email address you have just registered asking you to click on a web link to confirm your email address, and a second to your Administrator email address informing you that a new user has registered. 5. 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. You can now login using the username and password you chose during the registration.” 6. You can now log in using the login form with the username and password you have created. Upon logging in you have successfully tested the registration and log in process.
6.1.5 Controlling access to Content You may recall from the previous chapter that when we we using the Content manager to enter our content, each article that you entered in the database allowed you to specify whether it was accessible by public users, registered or special users. When Entering or Editing articles using the Content Manager, you can set the access level accordingly from the Publishing tab. Public User - This is the default setting. This allows any casual visitor to your site (or anonymous visitor, to use the technical term) to view the article or content. Registered User - This allows any user who has a registered login to the site to view the article or content. Special User - This access level will only allow users from the back end user groups of Manager, Administrator or Super Administrator to view the article or content. Controlling access to Areas of the Site The user groups (public, registered or special) can also be used to control access and visibility of modules, components or links on your site. It is commonly used to hide parts of the website by restricting visibility of links on the menu, or items within a component such as files in the 3rd party plug in DocMan document manager, so that the additional content is only available to registered users. Here is an example of how to hide a menu link: 1. Go to Menu > mainmenu 2. Click on the Link About 3. From the Edit Menu Item :: Link - Content Item, select Access Level Registered.
63
6 Adding Users to your Site 4. Press the Save button. If you now view your website as an anonymous user (i.e. not logged in) you will no longer be able to see the link. Login, and it will appear again. Repeat the process, setting Access Level Public to restore your site to it’s previous state. This method is also used to control access to the User Menu which is described in the next section.
6.1.6 User content editing from the website Once you have enabled user access, you can provide a second very powerful feature, the ability for users to add or edit content on the site via the front end (the public facing website itself) without need to use the Administrator interface. The user menu is a module which provides additional functionality to logged in users. (To be precise it is an instance of the main menu module, called user menu, which has links which are restricted to registered users). Using the Module Manager, 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. From the Administrator Front End Go to Modules > Site Modules 2. Click on the link ’User Menu’. The configuration screen for this module appears: Site Module: Edit [ User Menu] 3. Set position to ’Right’ (or the position you require in your site) 4. Click Published radio button ’ Yes’ 5. Set Access Level = ’Special’ 6. Set Menu style to ’Horizontal’ or ’Vertical’ depending on the position you are giving it 7. 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. If you need to do any special CSS styling, add a suffix to the CSS module and menu classes, e.g -usermenu 9. Press the Save button
6.1.7 User Editing Tools When a user logs into the website via the Login Form, a new menu appears, the user menu. The following functions are available from the menu:
64
6 Adding Users to your Site • Your details: Edit user registration details such as name, 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. • Log out
The exact functionality of the user menu is defined by the user group of which the user is a member. 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, editor, publisher, manager or administrators groups cannot submit articles or check in items. They are only able to submit (but not publish) web links. Author: An author has access to all the functions of the user menu to edit his/her articles/content. In addition, once logged in, they will see a pen and paper icon next to the article headline on the website page (see Fig 6.1). By clicking on this icon they will be able to edit the article/content from the front end. 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, i.e. make visible, the new articles/content on the website. When users who are members of the back end groups login to the front end they will have equivalent privileges to a Publisher. 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.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, without the assistance of the developer. Here’s how to do this:
65
6 Adding Users to your Site 1. Add the user manually, adding her/him to the Publisher group (see page 50, Add users manually). 2. Publish the User Menu to the site, making it accessible only to Special users (see page 55, User content editing from the website). 3. Add the Login menu module to a suitable page on your website, or provide a menu link called login linked to the Login Component (see page 53, Installing the Login Form module) 4. 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, edited as appropriate to your site design. 6. 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. Take frequent backups of the site (preferably nightly) in case the customer accidentally deletes important content by mistake!
6.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. 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.
If the facilities described in this chapter are insufficient for the user management on your site, you need to consider adding in a third-party module such as the Community Builder extension which is described in the next chapter. This extends the basic Joomla! user model and gives far greater flexibility on the information which may be stored and the access control provided. See the Joomla! 3rd Party extensions website (core enhancements, user management) for more details (http://extensions.Joomla!.org)
66
7 Taking it to the next stage In this section you will learn: • How modules add functionality to your site • How to install and configure the standard modules and components which are
supplied with Joomla! So far we have built a simple site, which arguably you wouldn’t need a content management system to do, this could be produced by a competent designer and PHP programmer in fairly short time using a MySQL database. It has introduced us to the basics of developing website in Joomla!. Now, I am going to show you some of the real power of Joomla!, and how you can quickly add powerful information display and editing features which will lift your site above what can be programmed from scratch in a few days and let you compete with the major league websites. Adding these features is simple once you have created your structure and this is where the time you spent setting up the structure of your site will really pay off. You won’t need to install any more software to introduce these functions, it’s already included in the standard Joomla! install. We are going to switch on some of the functionality that we disabled at the start of the tutorial.
7.1 Modules to add greater functionality You will recall that earlier in the book we explained about components (applications) and modules (functions), these are the tools that we use to add functionality and exploit the power of our content database. 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. We have already made use of three components in building our simple site for Anytown Zoo, these were Links, Contacts and Search. 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. The positions where you can display them on your page depend on your template and what positions are available, and your desired design. Simple templates are more restricted on where modules can be placed, and may only have 3 or 4 positions available. More powerful templates may have 12 or more positions available for module placement.
67
7 Taking it to the next stage
7.1.1 Enhancing the home page (and other pages) So far we have produced a very simple home page which just displays some text and a picture. It could be designed using XHTML/CSS to add more graphics, tables and more images without using any more Joomla! functions. 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. Its a fact well known to web designers that the home page is the most important page on the site. Its often said that you have just a few seconds to grab the attention of a potential viewer surfing past, so the more reasons to persuade them to stay and explore your site the better. Using the Front Page Component As we explained when building our example site in the previous chapter, the first link on the mainmenu module defines the page or component that appears on the Home Page of your website. We chose to use a simple page of content as the home page in our example to keep things very simple. When you install Joomla! with the sample content provided by the installation program, the module Frontpage is installed by default as the first link on the mainmenu and therefore as the Home Page. This can lead to confusion with people who are new to Joomla! who think that the Frontpage component has to be used as the home page. This is not the case. 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. Therefore if your site is regularly being updated with new articles, 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. This keeps the home page fresh and regularly changing a very important factor in determining if your viewer are to keep revisiting your site. 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, or another component e.g. Shop as appropriate. 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. It can display them in a single column, or multiple columns in the main body of your site, by a variety of orders such as date, A-Z or a manual
68
7 Taking it to the next stage order. It can also display links to other content. You control how much or how little information is displayed by a set of parameters. The Front Page component has a second important function. 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. NOTE: The front page component is a bit of a misleading name since it can be added anywhere in the menu structure. This is important if you want to set up an RSS feed for your site, but don’t want to use the Front Page component as your home page. 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, or go to Content > Frontpage Manager. 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. 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. Here’s how to do it: 1. Go to Menu > mainmenu (or the name of the menu you are editing if different) 2. Click the New Button 3. From within the Component box on the top right of your screen select Component (either click the link or select the radio button and press Next) 4. The Add Menu Item :: Component screen is displayed. Give your menu link a name (e.g. Home), highlight the Frontpage component in the list of available components, and press Save. 5. You are returned to the mainmenu screen. Your new menu link is shown at the bottom of the list. You may now control the order in which it appears on your menu. 6. NOTE: If this link is to be the Home page it needs to be set as item order 1. (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). 7. To set the parameters of the Front Page display click on the link you have just created from within the mainmenu screen. The parameters controlling the component are now displayed in the right hand column and you may set these as required. You can edit these, save, then view the results iteratively until you are happy with the appearance of your home page.
69
7 Taking it to the next stage Controlling the appearance of items on your Front Page The parameters which control the appearance of your Front Page are accessed are created when you link the component to your menu. • To control the appearance of your Front Page you need to decide: • How many items you wish to display on the page and in which order they
should be displayed. • How many items you wish to be displays at the full width of the main body of
your site, how many to be displayed in columns and how many columns there should be, e.. 2, 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.g. -yoursuffix to your Front Page to allow it to be styled individually. 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, go to Menu > mainmenu and click on the home page link. This takes you to the screen Edit Menu Item :: Component [ FrontPage ] . From here you can see the parameters on the right hand side of the screen. There are a comprehensive set of parameters which can be set to control the appearance of items on the Front Page. Details of each of these parameters and their effect can be seen by hovering your mouse pointer over the item description e.g # Leading. 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.1.2 Latest News As the title suggests, this module displays the headlines from the most recent news releases as links in a table. Generally this module is displayed on the home page. To enable this function: 1. From the Administrator Front End Go to Modules > Site Modules 2. Click on the link ’Latest News’. The configuration screen for this module appears: Site Module: Edit [ Latest News ] 3. Set position to ’Right’ 4. Click Published radio button ’ Yes’
70
7 Taking it to the next stage 5. Enter -rightsidebar into the Module Class Suffix field 6. Decide how many articles links you want displayed by this module. The default is 5, we will set it to 3 7. In order to limit the article links displayed to the News category we need to enter the Category ID (a number e,g, 15) which corresponds to the category of the news items 8. In the section marked Menu Item Link(s): , hold down the CTL button and select mainmenu > home and mainmenu > links with the mouse 9. 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. It will be styled with the correct CSS styling for the display box ion the right hand column
7.1.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. To enable this function: 1. From the Administrator Front End Go to Modules > Site Modules 2. Click on the link ’Popular’. The configuration screen for this module appears: 3. Site Module: Edit [ Popular ] 4. Set position to ’Right’ 5. Click Published radio button ’ Yes’ 6. Enter -rightsidebar into the Module Class Suffix field 7. Decide how many articles links you want displayed by this module. The default is 5, we will set it to 3 8. 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. 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. You can find the category ID number from the appropriate column in the Category Manager. Enter the category ID number into this field as shown. If you want to choose from content items in several categories the numbers should be separated by commas.
71
7 Taking it to the next stage 9. .e.g. In order to limit the article links displayed to the News category we need to enter the Category ID (a number e,g, 15) which corresponds to the category of the news items 10. In the section marked Menu Item Link(s): , hold down the CTL button and select mainmenu>home and mainmenu>links with the mouse 11. 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. 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.2 Creating Views of your content You can create views of your content pages linked to your menu in one of two ways, with either links and brief summaries (the so-called Joomla! blog format) or in a tabular form. Note that you cannot change from one style to another, you have to create the section again if you don’t like the results.
7.2.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, Examples of such views are: • New stories or press releases, with links to the full story • List of products or services with a brief descriptive paragraph and image and a
link to the full description • a summary of documents in a library • a list of staff , possibly with photos • FAQs • a directory • and many more ...
Joomla! organizes our content in a hierarchical database structured by section and content. In order to provide selective views of this content, ordered and displayed to our requirements we use a component which Joomla! calls a Blog view. 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 ,
72
7 Taking it to the next stage namely a personal journal or Weblog. The Joomla! Blog view is a much more powerful tool and is not to be confused with a Weblog. You can create a summary view of content from one or more sections, or from one or more categories. You do this by creating a menu item, which can be either a top level menu item or a sub menu item. You will recall we created a summary (Blog) view of the animals category in our Zoo website in Chapter 5. Here’s how we did it: 1. Go to: Menu > mainmenu 2. Click the New Button in the button bar 3. Select Blog Content Category 4. Enter Name: ’The Animals’ 5. Select ’Category: Website Content / Services’ 6. Leave all other items unchanged at this point 7. Click the large Save button Reload the browser window showing your site and you will see your new animals menu link has been published to the site. For this view we decide to have a single column with one animal per line. To do this: 8. Go to: Menu > mainmenu 9. Click on The Animals content link 10. Set # Leading to 0, Intro to 6, Columns to 1, Links to 4 This enables up to 6 single column articles with summary text, and 4 with links only 11. Click Save Let’s look at this in a bit more detail in our Anytown Zoo demo site. The Main Menu is the core element which links our website navigation structure together, and we build a view when we create a new menu link. 1. Go to: Menu > mainmenu 2. Click on the menu link for animals. This brings up the Edit Menu Item :: Blog Content Category screen. 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, the category of content items which are used to select the items for viewing, and you can move the link to be a submenu link of another menu item if required. You can also choose to ’unpublish’ the link (i.e. hide it without deleting it, and you can decide whether it will
73
7 Taking it to the next stage be available to all viewers, only registered viewers, or only special viewers (e.g. back end users), i.e. access control. However you can’t decide to use a section to select items, and you can’t change the link to a different type of item, e.g. a single content item link, or a URL. If you want to do that you must delete the blog link and create a different menu link item of the type required. 4. There is a huge amount of flexibility over the presentation of the summary view with more than 25 display parameters for the Blog view which may be set. Each parameter has help text describing it’s function which you can view by hovering the mouse over the dotted underlined link. In particular you can control the following attributes of the display: a) The number of columns into which summaries are placed. By default Joomla! creates a couple of full page width summaries and then starts placing content summaries into two columns. You can override these settings by changing Leading (the number of items which are displayed single column), Intro (the number of summaries shown e.g 6, before only the headline link is shown), Columns (how many columns to put summaries in after the Leading articles have been shown full page width) , and Links (how many items to show as links to content at the bottom of the page). The best way to understand this function is to experiment. 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, A-Z or Z-A, most or least recent, by author, 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. d) You can also choose whether to view text information associated with the category (which is entered via the category manager), and to override the global settings on the display of icons and links and descriptions. 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. If you do this you will need to add style(s) to the CSS stylesheet to make use of this feature. You can put any string you like as the suffix. for example, if we add the suffix ’-animals’ in this parameter field we will get the unique CSS classes shown in Table 7-x. 5. Click Save to confirm your changes. TIP: You can check the CSS for any page by using the Web Developer plug in for the Firefox browser. Choose the options Display Block Size, and Display ID & Class details to get a view of your page with the CSSboxes and table elements with their associated classes. See the example in Fig 7.1
74
7 Taking it to the next stage
Figure 7.1: Example CSS styling displayed by Firefox Web Developer plugin
75
7 Taking it to the next stage CSS class .componentheading-animals .blog-animals .contentpaneopen-animals .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.1: Controlling the Blog page CSS styles
7.2.2 How to create Table Views of your content As an alternative to a Blog view, you can create a Table with links to content pages from one or more sections or one or more categories. In this view, no description text is shown, only a link to the content item, together with the optional information of Date, Author and number of hits. There are a wide range of parameters which can be set to control the appearance of the table. Here’s how to add a table view to our Zoo website: 1. Go to: Menu > mainmenu 2. Click the New Button in the button bar 3. Select Table - Content Category 4. Enter Name: ’News Table’ 5. Select ’Category: Website Content / News’ 6. Leave all other items unchanged at this point 7. 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. Fig. 7.2 shows the table which is displayed when you click on the link. Let’s refine the appearance of the table to our requirements. 8. Go to: Menu > mainmenu 9. Click on News Table content link, to view the Edit Menu Item :: Table - Content Category screen. We have a full set of parameters which can be adjusted for the Table view. 10. By default, most of the Joomla! table options are switched on. If you have a lot of entries in the table, then the ability to sort and filter the table via the controls in the table headers are very useful, however for a small table you may wish to switch off some of the functions. You can do this using Table Headings, Navigation Bar,Order Select, Display Select, Display Number and Filter. You can also choose to hide the Date, Author and Hits columns if you wish. 11. By default, 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. You can set the date
76
7 Taking it to the next stage
Figure 7.2: A Table View of the News articles style format using the Date Format parameter. This is done using the parameters of the PHP command strftime, a full list of which can be found here strftime parameters http://uk2.php.net/strftime/. e.g. to set the format to Thu, 19 Oct 06, insert the parameter string %a, %d %b %g into the Date format field. Table 7.2 shows a summary of the most relevant date parameters. See the full command parameter link for the full set of options. 12. The Table view also allows you to set the order in which links are displayed, and to display descriptive text from the category description, and an image if needed. 13. By default it also displays links to other categories. You may wish to hide these links by setting Other Categories = Hide 14. Finally as with the Blog view you can define your own CSS classes for this table using Page Class Suffix, and set Access Control. 15. When you have finished experimenting with the table, set Published = No, as this table is not part of the final website. You can always switch in on again if you want to experiment some more with tables. 16. Click Save
77
7 Taking it to the next stage Parameter %a - abbreviated weekday name according to the current locale %A - full weekday name according to the current locale %b - abbreviated month name according to the current locale %B - full month name according to the current locale %d - day of the month as a decimal number (range 01 to 31) %D - same as %m/%d/%y %Y - year as a decimal number including the century %m - month as a decimal number (range 01 to 12) %r - time in a.m. and p.m. notation %R - time in 24 hour notation Table 7.2: Date Format parameters (strftime)
7.3 Building Menus to structure your site The menu builder is the key to controlling the structure, navigation, and operation of your site, and time spent understanding this function now will pay dividends later on when you are working out a website design so that you know what layout design tools you have available. Creating a new menu You create a menu using the Menu Manager 1. Go to Menu > Menu Manager 2. Click the New button 3. You should now type in the name of the new menu. The ďŹ rst name is the name Joomla! uses in PHP code to refer to the menu, the second the name you use in the Site Module and Menu Manager sections. Normally these can be the same name. For example, letâ&#x20AC;&#x2122;s create a footer menu for our Zoo site. Enter the names footer, footer 4. Click the Save button 5. You can now go to Menu > Footer to edit your new menu - 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, e.g mainmenu, via Menu > mainmenu, bringing you to the Menu Manager [ mainmenu ]. Then you
78
7 Taking it to the next stage create a new menu link item by clicking the New button. Note: There are only limited options to change the menu link once it is created, if you get it wrong or change your mind later, then you must delete the link and rebuild it. For example, if you create a Blog view of a data category called News, and then decide you really wanted a Table View of a section called News, you must delete the original menu link using the Menu Manager, and build a new one to the correct type of data display. 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. Table 7.3 shows all the different ways you can display and link to content and components from a menu. In summary, you can: • Link to a page (dynamic or static, e.g. About, Terms & Conditions, Privacy Policy,
etc) • Link to a contact page (contact us) with specific contact information • Link to an external Newsfeed e.g. BBC Sport CSS XML feed • Link to a URL - which can be on your site or outside e.g. www.yahoo.co.uk • Link to various summary views of multiple dynamic pages, sorted in a variety
of orders, by latest date, A-Z, and so on. The views can either be purely links, or link plus intro text (the text in the Intro text part of the page) with a read more link, a so-called Table or Blog view • You can link directly to a Component, e.g Login, Search, Contacts, Front Page , or
a third Party component such as Shop or Forum • Or you can embed an eternal URL in a page on your site, using the Wrapper
link (or iframe). I recently did this for a Share price feed from the London Stock Exchange for a Business client. From a casual viewers point of view it is not clear that this part of the page is from an external URL. NOTE: Joomla! IDs Sections, Categories, individual Content items, Menu items are all given individual IDs by Joomla! when they are created. You can link to a content item, or filter the output of a table or Blog view by using this ID. To find the ID use the appropriate manager tool, e.g Section or Category Manager, Content Manager.
79
7 Taking it to the next stage Menu Link Type Link - Content Item
Link - Static Content
Link - Contact Item Link - Newsfeed Link - URL Blog - Content Category Blog - Content Category Archive
Blog - Content Section Blog - Content Section Archive
List - Content Section Table - Content Category Table - Contact Category Table - Newsfeed Category Table - Weblink Category Component - Front End interface Link - Component Item Submit - Content Separator / Placeholder Wrapper
Description A link to a dynamically generated page or article, the page must exist before you create the menu link item A link to a static generated page or article, the page must exist before you create the menu link item A link to a contact record, 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, selected by category A link to a summary view of archived articles, with intros and ’read more’ links, selected by category A link to a summary view with article intros and ’read more’ links, selected by section A link to a summary view of archived articles, with intros and ’read more’ links, selected by section Display a list of the categories in the selected section Display the Title links only from a category Display the Contact links only from a category Display a Table of links to external newsfeeds in the chosen category Display a Table of external web URL links in the chosen category Link to the ’Home page’ of a Component Link to the home page of a component which is already linked into the menu elsewhere POST content into the database (used for Front End editing) Insert a dummy un-linked word, phrase or spaces e.g. “———” Embed an external web page via an iframe into your site
Table 7.3: Summary of Menu Link Options
80
7 Taking it to the next stage Sub menus Beneath each menu item you can create one or more levels of sub-menu. For example, 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. Let’s add a Visitor Section on our Zoo site and show how to create sub-menu items beneath it. First we create a new category called Visitors (see Chapter X) Next we add some Visitor Pages (General Visitor Page, Admission Prices, Opening Times and How to find us) in the new Visitor category. (Note, you can link any type of content or component to a submenu link as shown in Table 7.3, page links are used here for simplicity) Then we create the Visitors Menu Link 1. Go to: Menu > mainmenu 2. Click the New Button in the button bar 3. Select Link - Content Item 4. Enter Name: ’Visitors’ 5. Select ’Website Content - Visitors/General Visitor Page’ 6. Leave all other items unchanged at this point 7. Click the large Save button 8. Now we can enter submenu items 9. Go to: Menu > mainmenu 10. Click the New Button in the button bar 11. Select Link - Content Item 12. Enter Name: ’Admission Prices’ 13. Select ’Website Content - Visitors/Admission Prices’ 14. In the Parent Item list, select Visitors. This is how you set this menu link to be a sub-menu and tell Joomla! that you wish it to appear under the Visitors main menu link 15. Leave all other items unchanged at this point 16. Click the large Save button 17. Repeat steps 9-16 to add two more submenu links for Opening Hours and 18. You have now successfully created a menu item with 3 sub menu links beneath it.
81
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, in the left or right hand column which only appear when the appropriate link on the Top menu is pressed, 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. Styling Menus with CSS The menu module provides two options to generate specific menu classes,by adding a module suffix and a menu suffix. The menu suffix allows individual list items (li) to be styled.
7.4 Banners Advertising banners are easily managed by this module. The Banners function consists of two parts, a Module which displays the banner on your site, and a Component which is used to create and manage individual clients and banners. Note: The banner artwork needs to be created in a separate graphics program such as GIMP. If you want to display more that one banner on your site then you will need to create a copy of the banner module for each location in which you want to display it. You do this using the Copy function from the Module Manager. To display a banner on your site (we will add one for the Zoo as an example) 1. From the Administrator Front End Go to Modules > Site Modules 2. Click the ’Banners’ link 3. The configuration screen for this module appears: Site Module: Edit [Banners] 4. Click Show Title ’No’ 5. Set position to ’banner’ (for example) 6. Click Published radio button ’ Yes’ 7. You can also add a CSS module class suffix to create unique styling classes for this module display 8. User access can be set to Public or Registered (you can set it to Special too, but this doesn’t make much sense). Banners are normally set to Public. 9. 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. If not set then any banner from the published list will be displayed here)
82
7 Taking it to the next stage 10. Finally you need to tell Joomla! which menu pages the Banner should appear on - we will select All from the Menu Item Link(s) list 11. 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. 1. From the Administrator Front End Go to Components > Banners > Manage Clients 2. Click the New button 3. Enter the Client name, client contact and email address. You don’t need to put anything in the notes field. 4. Press the Save button 5. Now you need to upload the banner graphic via the Media Manager. 6. Go to Site > Media Manager 7. We will upload the pictures for our site into the ’Banners’ folder. 8. 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. 9. Navigate to the folder where you have stored the banner graphic(s), 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. 10. 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. 11. Now we need to add the banner in the Banner component From the Administrator Front End Go to Components > Banners > Manage Banners 12. Click the New button 13. Give the Banner a name e.g. ’Elephant Rides’ 14. Select Client from the pull down menu, Anytown Zoo 15. Tick Unlimited impressions (unless you are selling a specific number of impressions in which case the enter the number here) 16. 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. Click show Banner = Yes (This publishes the banner) 18. Select the banner graphic you have uploaded using the Banner Image Selector. If all is well, you new banner graphic will appear in the banner image space.
83
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. 19. Press the Save button You have now published your first banner. To hide the banner go back and select show Banner = No, or unpublish the Banners Module in Module Manager. If you have multiple banners, Joomla! will rotate these across your visitors page views.
7.5 Polls Want to know what you’re audience thinks about important or trivial topics on your site? Joomla! makes it easy to add an online poll feature and to customize it to your requirements. The Polls function consists of two parts, a Module which displays the poll on your site, and a Component which is used to create and manage individual polls. To display a poll on your site (we will add one for the Zoo as an example) 1. From the Administrator Front End Go to Modules > Site Modules 2. Click the ’Polls’ link 3. The configuration screen for this module appears: Site Module: Edit [Polls] 4. Enter a Title for the Polls e.g. Tell us what you think 5. Click Show Title ’Yes’ 6. Set position to ’Right’ (for example) 7. Click Published radio button ’ Yes’ 8. You can also add a CSS module class suffix to create unique styling classes for this module display (see Chapter 10) 9. User access can be set to Public or Registered (you can set it to Special too, but this doesn’t make much sense). 10. 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. Press the Save button Now we use the Polls component to set up your first poll. 1. From the Administrator Front End Go to Components > Polls 2. Click the New button
84
7 Taking it to the next stage 3. Now enter a Question (title) for your poll, 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. Click Save Your poll is now showing live on the site. You can add more polls later, and unpublish this poll, to keep the site up to date.
7.6 Incorporating external Newsfeeds into your site Newsfeeds are a great way of getting regularly changing and up-to-date information onto your site with virtually no effort or cost at all. They can provide an important way of keeping your site fresh and encourage more traffic. 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. 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. 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, or you can simply display one of more links from an RSS feed at a suitable place on your site. 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. From the Administrator Front End Go to Modules > Site Modules 2. Click the ’New’ button 3. The configuration screen for this module appears: Site Module: New 4. Enter a Title for the Module e.g. Latest Joomla!
85
News
7 Taking it to the next stage 5. Click Show Title ’Yes’ 6. Set position to ’Right’ (for example) 7. Click Published radio button ’ Yes’ 8. Enter -rightsidebar into the Module Class Suffix field(if using the LJ template) 9. Decide how many articles links you want displayed by this module. The default is 5, we will set it to 3 10. You now need to enter the RSS URL into the newsfield box in its entirety (including the http:// bit) 11. TIP: If you click on the orange RSS button on site which provide an RSS feed, 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. Simply highlight this complete link and then copy and paste it into the RSS URL feed field in the Site Module: Edit screen 12. The remaining parameters control how the RSS feed will appear on your site. You can choose to display the syndicated title, 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). You can also decide whether to just show the link, or the associated description as well. Whether you choose to do this will depend on the specific newsfeed and how much information they provide. If you do display the description associated with each link you can choose to truncate it to a smaller number of words. 10-12 generally works pretty well. 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. 13. Press the Save button and your done TIP: Newsfeeds are often supplied with bulleted styling which may not suit your site. Writing some specific CSS to style the newsfeed can improve the presentation enormously. There is a specific newsfeed CSS tag called ’newsfeed’ which can be used to do this. 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, 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, then the newsfeed component is the best solution.
86
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. You also need to set up at least 1 category of newsfeeds before you can start entering individual feed information. The newsfeed component is capable of managing a huge number of newsfeed links in multiple categories, but I feel this will be overkill for most websites. 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. 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. Here what to do: 1. Go to Components > Newsfeeds > Manage Categories 2. Click New, this brings up the Category: New [ Newsfeeds: ] screen and then give the category a Title and an alias (e.g. externalnews) and press Save 3. Now you can set up your newsfeed RSS links. As described above collect the full RSS feed links (including the http:// bit) that you wish to add to your site. 4. Go to Components > Newsfeeds > Manage Newsfeeds, and click New 5. 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. Set the number of articles that you wish to appear on the feed summary page, e.g. 6 7. Click Save 8. Repeat steps 4-7 for each new feed that you wish to add 9. Now you need to link the newsfeed table to your menu. Go to Menu > mainmenu (or the name of the menu you are editing if different) 10. Click the New Button 11. 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. The Add Menu Item screen is displayed. Give your menu link a name (e.g. Newswire), highlight the category (e.g. externalnews) in the list of available categories, and press Save. 13. Go to your site preview, refresh and click the new link in the menu you have created to view the newsfeed table 14. Make changes as required to newsfeeds (edit using Components > >) and CSS until you are satisďŹ ed with the results.
87
7 Taking it to the next stage
7.7 Syndicating your site Syndication means that content from your site can be published on other websites or read using suitable RSS newsreaders, without the users having to visit your website. As well as providing information from others sites on your website using RSS feeds, you may also want to provide an RSS feed yourself, particularly if your content is regularly updated. To do this you must use the Front Page component, although it doesn’t need to be linked or published for the RSS feed to work. Any article which is published to the Front page will be linked on your RSS feed. To view the items which are currently included on your Front Page and hence will be included in your RSS feed, use the Front Page Manager button which is accessible from the Administrator Control Panel, or go to Content > Frontpage Manager. To offer RSS syndication you need to configure the syndication component and publish and configure the syndicate module. Here’s what to do: 1. Go to Component > Syndicate 2. Ensure that caching is enabled 3. Enter a Name, Description and an image (typically a logo/button) if required. This information will be delivered to the subscriber as a ’header’ to the list of articles. 4. Decide if you want to syndicate the whole article or just the first 20-30 words and enter the setting accordingly. Setting the word count to 0 will ensure that only the headline link is syndicated. 5. 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. Set the order in which the links will be displayed this can be different to the Front Page ordering, and could be most recent first (typical setting) or possibly the articles with the most hits (most popular) 7. Click the Save button 8. Now go to Modules > Site Modules and click the Syndicate link 9. Set the module to be published and the position required (e.g. Left) and the CSS suffix (-rightsidebar). 10. You can change the title and add a description displayed above the Syndicate button 11. Click the Save button Your site is now being syndicated and can be read by RSS newsreaders!
88
7 Taking it to the next stage
7.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. Here is an example for the FAQ link on the Learn Joomla! website, without SEO: http://www.learnjoomla.co.uk/index.php?option=com_content&task=blogsection&id=3&Itemid= In order to generate more meaningful links (to include in printed material for example, as well as getting better search engine listings) you can change a setting in Global Configuration. 1. Go to: Site > Global Configuration, or from the Administrator Control Panel home page click the Global Configuration button. 2. Click the SEO tab 3. Select Search Engine Friendly URLs: = Yes 4. To make this take effect, you also need to rename a file in your root web directory called htaccess.txt to .htaccess. This is an Apache webserver directive. Depending on the way in which your hosting server is configured, you may get an 505 server error when you change this filename. If so, contact your hosting provider or systems administrator, and change it back temporarily. 5. If the change is successful, you will now get a more search engine friendly ’static’ URL, e.g. http://www.learnjoomla.co.uk/content/blogsection/3/39/ (This is the ’SEO friendly’ version of the URL above) 6. While you are on the SEO tab, you can also choose dynamic titles for your pages 7. 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, and ’friendlier’ static links.
89
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. Now we come to the most exciting part of working with Joomla!, making use of the huge 3rd party development effort that has built up around this software, almost all of it available for free and open source. To get an idea of the total number of plug in extensions available for Joomla!, visit http://extensions.joomla.org. This is a great site (built in Joomla! - what else) which is a searchable and browseable directory of extensions divided into categories. 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. The directory is divided into sections such as Banner Ads & Affiliates, Communication, e-Commerce and Gallery & Multimedia. At time of writing there were over 1,000 extensions in the directory, meaning that whatever your requirement, there is a good chance someone has already written an extension to do the job. The larger components are full blown applications in their own right. Some of these are written specifically for Joomla! and are very easy to install, while other extensions are what’s known as bridges, pieces of software to allow Joomla! and another application, such as a forum or picture gallery, to be installed together and share visual styling and user management. Installing these large applications and integrating them with Joomla! is fairly complicated and not easy for a beginner, and so I have decided that these fall outside the scope of this beginners guide.
90
8 Using 3rd Party Add-on Components and Modules I have therefore selected a small number of powerful 3rd party applications which are designed to be easily installed in Joomla! for the subject of this chapter. I then also recommend another ten extensions which are tried and tested. CAUTION: Remember we are working in the Open Source world, inevitably some of the extensions are of variable quality. A great deal of the software is excellent, but some has a few rough edges, and I strongly advise you to test and evaluate any third party extension on a test server, before using it in earnest with a live website. We will learn how to download, install and configure a few of the most popular types of third party applications. All the extensions chosen a open source, and applicable to a wide range of sites. 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. If you use the application and find it useful, please consider making a small donation to help support their ongoing efforts.
8.1 Building an online Shop Selling products and services on the Internet is one of the most popular applications of a website. There are many software packages both commercial and open source to help you set up an online shop. The big advantage of using Joomla! to set up your online shop is it’s very easy. You get all the Joomla! tools and features to provide a support environment to your shop, which makes building your shop very quick and easy to create and maintain. 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. 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. Virtuemart is used to run the LearnJoomla! shop that you used to buy this eBook. 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
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. NOTE: If you are planning to take payments online you will need to have a merchant account such as that provided by Paypal, NoChex or WorldPay, and you should also get an SSL certificate for your site, to enable encrypted communications. Getting Started First of all we need to download and unzip the latest files from Virtuemart. 1. Go to http://www.virtuemart.net 2. We want the latest stable version of the software, which at time of writing was 1.07. although there may be a more recent release when you go there. Only get the stable version as development versions are not suitable for running a production ecommerce solution. Click the download button and save the ZIP file to your local PC. The file is approximately 1.4Mb in size. 3. When the file has completed downloading, you must unzip it using a tool such as WinZip (30-day evaluation version available free from www.winzip.com) or open with the compressed (zipped) folders tool included in Windows XP file Manager. WARNING: Do not attempt to install the downloaded ZIP file using the component installer before unzipping it as this will fail When you have unzipped the file you will have a folder/directory containing the following files: One component (com_virtuemart_1.0.x.tar.gz) One main module (mod_virtuemart_1.0.x.tar.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. The other modules provide additional functionality as shown in the table and can be installed if your require these functions, but they are not essential to correct operation of the shop. Here’s what to do: 4. Login to the Administrator Control Panel 5. Go to Installers > Components 6. Click the browse button and navigate to the folder/directory where you unzipped the Virtuemart files
92
8 Using 3rd Party Add-on Components and Modules Select the file com_virtuemart_x.xx.tar.gz (where x.xx is the version no of the file you downloaded) and click ’Upload Component’. This will take a little while depending on the speed of your connection. 7. If the installation has worked properly, you will see a "Welcome to Virtuemart" screen. 8. You can now choose to complete the installation with sample data installed or with no data. Click Go Directly to the Shop > > to complete installation without sample data Click Install SAMPLE DATA > > to complete installation with sample data 9. This final step will take a little while, (30 seconds or more) depending on the speed of your server. DO NOT be tempted to press any other buttons until it completes as this could result in a faulty installation. You will now see the main Virtuemart control panel which has been installed into the Joomla! Administrator. 10. Next we have to install the main module, which is required to browse the categories and products. Go to Installers > Modules Click the browse button and navigate to the folder/directory where you unzipped the Virtuemart files Select the file mod_virtuemart_x.xx.tar.gz (where x.xx is the version no of the file you downloaded) and click ’Upload module’. 11. The module should now be successfully installed, and next it needs to be published Go to Modules > Site Modules Click the module entry for Virtuemart Module Select “Published? = Yes” 12. Press Save. Installation of the Virtuemart shop is now complete Note: If the VirtueMart main module is not published, VirtueMart will not work properly. 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. 1. Go to Menu > mainmenu (or the name of the menu you are editing if different) 2. Click the New Button 3. From within the Component box on the top right of your screen select Component (either click the link or select the radio button and press Next) 4. The Add Menu Item screen is displayed. Give your menu link a name (e.g. Shop), and press Save.
93
8 Using 3rd Party Add-on Components and Modules 5. Go to your site preview, refresh and click the new link in the menu you have created to view the Shop. 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. Now we need to publish the shopping cart or basket module. This module displays the contents of the users shopping cart and links to the categories of your store. You can customize various parameters which control the information displayed by the module.. Generally this module is displayed on the home page and the shop home page as a minimum. To enable this function: 1. From the Administrator Front End Go to Modules | Site Modules 2. Click on the link ’Virtuemart Module’. The configuration screen for this module appears: Site Module: Edit [ Virtuemart Module ] 3. Set position to ’Right’ 4. Click Published radio button ’ Yes’ 5. Enter -rightsidebar into the Module Class Suffix field 6. Under Pages / Items select all the pages you wish the Virtuemart module to appear on 7. Then select the information display parameter you wish to set for the module, including changing the name of the module to Shopping Cart or Shop for example. 8. 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.1.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. 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. 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, research and preparation to get this right. 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
8 Using 3rd Party Add-on Components and Modules 1. Go to Store > Edit Store and work through the form to enter the details of your shop. You will enter basic Store Information, Contact Details and your Currency, together with a Description of your store. 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. Don’t worry if you don’t have these items now, they can be added later by going back and editing the store. To get going now put in as much information as you can and make sure your email address and the currency and currency display style e.g. British Pounds are set correctly. 2. Go to Tax > Add tax rate and add the correct tax rate according to your country. 3. Go to Admin > Configuration. From here you control the way you want your shop to work, e.g. the features which you want to enable or disable, appearance and URL, whether you want to sell downloadable or physical products and the method(s) of shipping. 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. 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.yourdomain.com. Setting up a secure webserver is outside the scope of this book, but if you need help you should contact your web hosting company. Artonezero are one such company that provides secure Joomla! hosting at reasonable prices. 1. Go to Products > Categories > Add category and set up at least one category for your products to be organized under and publish them. 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. The shop will not work correctly until at least one category is defined. 2. Go to Products > Add Product and add your products one at a time, repeating this step for as many products as you need. Note that if you have a very large product catalogue there is a facility to import your listing from an external database using .csv format. Go to Products > Use CSV Upload.
8.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, this function is not performed by
95
8 Using 3rd Party Add-on Components and Modules Virtuemart. 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. 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. The LearnJoomla website shop uses NoChex, a British payment processing company, to handle it’s payments, together with Paypal and I will show how to set up your shop to use NoChex and Paypal to handle payments as examples. The method is very similar for WorldPay, ePDQ, Verisign and others. How to take payments with NoChex and Paypal 1. Before you can set up payment processing in Virtuemart, you need to have set up a Seller’s account at the payment processing company of your choice. The choice of payment company to process credit and debit card payments is a commercial one and the use of NoChex and Paypal not meant as a recommendation, these just happen to be the companies which Learn Joomla! uses to process payments for it’s ebook. If you do not have an online payment processing provider already, you will want to research the options available. The Joomla! Payment methods suppliers list is a good start, but it is by no means exhaustive. Once you have set up one or more payment processor accounts you are ready to go to step 2. 2. Go to Components > Virtuemart This takes you to the Virtuemart Control Panel 3. Click on the Button marked List Payment methods 4. You will see a view entitled Payment Method List. 5. Payment methods which are accepted by your site are indicated by a green tick in the Active column of the table. You can switch on a payment method by clicking once on the red cross in the active column, or switch it off by clicking on the green tick. We will select Paypal and NoChex, and ensure that all other methods are deselected. Depending on your business, you may will to take orders on account, or cash on delivery in addition to accepting credit card payments. In which case you should select these methods too. 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. Now click on the Paypal link on the List Payment Methods screen. On the payment method form, select the configuration tab. a) Now enter your Paypal email address (the exact email you use to login to your Paypal account)
96
8 Using 3rd Party Add-on Components and Modules b) Set the status which will be returned depending on whether the payment is successfully made: i. Order status for successful transactions = Confirmed ii. Order status for pending payments = Pending iii. Order status for failed transactions = Cancelled iv. 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. See the Virtuemart documentation for more details d) You will see below the script which is executed when a payment is requested. Do not change this unless you are a competent PHP programmer. 8. Press the Save button. You are now able to process Paypal payments via your shopping site 9. To add NoChex, click on the NoChex link from the List Payment Methods screen. On the payment method form, do not change the settings on the initial screen. Select the configuration tab. a) Enter your NoChex email address in the field provided (the email address you have elected to accept payments on) b) NOTE: The NoChex method requires you to store customer credit card details on your server. You should consider carefully the security of your server before doing this, and as a minimum ensure that you have an SSL certificate installed on your server for the transaction to be encrypted, and that you put in place appropriate security procedures to protect customer’s financial information. c) Press the Save button. You are now able to process NoChex payments via your shopping site 10. When customers now complete their checkout from the shopping basket, they will be offered Paypal or NoChex as the payment options. 11. I now strongly recommend that you carry out a live payment test on your site before you release it to customers. I normally set up a product in the shopping basket for a nominal £1 or 1 EUR to do the test. You will then see exactly the process as viewed by the customer. If you are selling a downloadable product, once the payment has be accepted the customer is returned to the download page for the product 12. Congratulations, you are now able to accept payments from your website.
8.2 How to add a Forum to your site A forum is a great way of providing a community for your users to meet, exchange views and ideas, and can encourage regular traffic onto your site. If you supply a
97
8 Using 3rd Party Add-on Components and Modules product, it can be an effective way to provide support to your users, such that a solution can be viewed over and over again and users can comment and improve on the information in the original post. There are a number of dedicated forum packages (formerly known as bulletin boards). The most successful of these are large applications in their own right supporting many thousands of users and are very sophisticated pieces of software. These include vbulletin, phpBB, and SMF. Members of the Joomla! community have worked hard to integrate these large community forum packages with Joomla! and have developed so called bridge components to connect the two together. These can be quite tricky to install and configure correctly and also require work to get consistency of user interface and design. I have judged these to be outside the scope of a beginners guide, although details of how to do these integrations are available on the Joomla! forums or via http://extensions.Joomla!.org if you need these applications for your site. Instead, I am going to show you how to install JoomlaBoard, a forum component written specifically for Joomla! which is easy to install and fully integrated. It is very suitable for small or medium sites and is simpler to use than the larger forum applications. First of all we need to download and unzip the latest files from the JoomlaBoard developer TSMF. 1. Go to http://www.tsmf.net 2. We want the latest stable version of the software, which at time of writing was 1.12. although there may be a more recent release when you go there. Only get the stable version as development versions are not suitable for running a production forum solution. Click the download button and save the ZIP file to your local PC. The file is approximately 1MB in size. 3. Login to the Administrator Control Panel 4. Go to Installers > Components 5. Click the browse button and navigate to the folder/directory where you unzipped the JoomlaBoard files Select the file com_joomlaboard_x-x-x.zip (where x-x-x is the version no of the file you downloaded) and click ’Upload Component’. This will take a little while depending on the speed of your connection. 6. If the installation has worked properly, you will see a "Joomlaboard Connecting the World" screen, with a message INSTALL Successful. 7. That’s it! JoomlaBoard is installed. 8. The screen which you can now see contains useful information about upgrading, installing sample data and documentation. You may wish to print it out to read later.
98
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. Now we need to set a few simple configuration options, set up our first forum board, and then create a menu link from our website to access the forum. 1. Go to Components > JoomlaBoard Forum 2. Select the JoomlaBoard configuration button, which brings you to the first configuration screen, under the Basics tab. 3. 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, and whether to provide RSS feeds or PDF downloads of forum topics, 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. Select the Frontend tab. From here you can control the forum display parameters, setting the number of messages and threads per page, and the text area size. Set these to make JoomlaBoard fit properly in your template. You also set parameters related to the user from this tab. Here you can choose whether to show the users real name or username, and to require the user to provide a valid email address. You can also set other options related to the user profile display. 5. Select the Security tab. From here you can choose whether the forum is visible to public visitors, or only to registered users. 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, or you can allow anyone to post. Finally, there is an option to send an email to a moderator, if you choose to have postings moderated. 6. There are a number of other options which can be set, but these are not essential to the operation of your forum, and you can view these at your leisure. 7. Press the Save button to finish 8. Go to Components > JoomlaBoard Forum 9. Select Forum Administration 10. From here you set up one or more forums. Click New Give the Forum a name and a description. Click on the Advanced tab and set the access permissions for the forum
99
8 Using 3rd Party Add-on Components and Modules Finally click on the Moderation tab, and set whether post are moderated. If you select you, or your selected moderator, will need to approve each post before it appears on the forum. 11. Click Save, and repeat to add each separate Forum category. 12. Finally, check that each Forum/category has been published from the Joomla Broad Administration view. There are a number of optional modules from JoomlaBoard which you can download and install. These are Top & Last Users, Show No reply Message, Show Latest Subjects and Forum Statistics. These can be placed in any suitable module position. The show latest subjects is often placed on the home page. You can customize the number of topics to show, number of lines to display and so on. These can all be downloaded from http://developer.Joomla!.org/sf/projects/simpleboard
Although JoomlaBoard is a fully featured and functional forum, it can look a bit basic mainly because little attention has been paid to the visual styling and formatting of a JoomlaBoard forum. A bit of work enhancing your stylesheet can improve the look and appearance of your forum considerably.
8.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,or you want to provide access to downloadable software, then you need a document management system. The extension we are going to install is DocMan, which you will see widely used on sites offering templates, how-to tutorials and other useful Joomla! documents.
8.3.1 How to get and install Docman DocMan was developed by Johan Janssens who is the lead developer on Joomla! version 1.5, it can be obtained from www.mambodocman.com First of all we need to download and unzip the latest ďŹ les for DOCman 1. Go to the www.mambodocman.com website, and select the download tab. Download the latest release, which at time of writing was DOCMan 1.3.x. 2. 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. After a few seconds the Download dialog from your browser should appear and you can save the ďŹ le in an appropriate directory.
100
8 Using 3rd Party Add-on Components and Modules 4. When you have unzipped the file you will have a folder/directory containing the following files: docmanV1.3-RC-2.zip. This is the component file. Next we need to install the component. Here’s what to do: 1. Login to the Administrator Control Panel 2. Go to Installers > Components 3. Click the browse button and navigate to the folder/directory where you unzipped the DOCMan files. Browse to the file docmanV1.XX.zip (where 1.xx is the version no of the file you downloaded) and click ’Upload Component’. 4. This will take a little while depending on the speed of your connection. 5. If the installation has worked properly, you will see the message "Upload component - Success". Click on Continue
8.3.2 Configuring DOCman The next step is to configure DOCman, and then you can link it into your Menu. 1. Go to Components > DOCman > Configuration 2. DOCman will set a default value for the DOCman files directory which is automatically worked out from your server directory path. You can either leave this setting, or you can change it to your own, e.g. /home/username/docman (make sure that your directory permissions are set correctly to allow Docman to read and write to this directory. If you are not sure, accept the default setting. 3. Click on the Front End tab. a) If you need to update the document library, and test your new settings, 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 can also flag new documents. 4. From the permissions tab, you can determine whether public, i.e. non-registered users can download documents. Select between no access for public users, browse only or browse and download. You may prefer to require users to be registered to download your files or documents so that you can keep track of who has taken copies. You may also allow front end users to upload files to the Document library, and there is an extensive set of controls for setting the permissions of users allowed to upload files, and the users groups allowed to approve these for download.
101
8 Using 3rd Party Add-on Components and Modules 5. From the security tab, you can enable settings to prevent other sites from directly linking to your download section and ’stealing’ your download service by linking to it. You can also enable logging to get detailed information on who is downloading your files. 6. Press Save when you have completed configuring DOCman. Now you can upload files to your library directly from the Administrator control panel. 1. Go to Components > DOCman > Configuration > Management to access the DOCman control panel 2. Before uploading documents you need to set at least one category. Click on the Category button, and from the new screen press Add. Give the category a name, e.g. Documentation or Templates, add a description (optional) to appear on the Document Manager page and press Save 3. Now you can add items to be downloaded to the library. You do this in two stages. a) Firstly, upload files to the server b) Second, add a document for each file to the document library, which links to the file and which provides the necessary information about it to the potential user 4. From the DOCman control panel, click on the Files button then select click the Upload button. DOCman asks you for the source of the file, or upload method, e.g. select upload a file from your computer and click the Next button. 5. Press Browse to navigate to the file on your computer which you wish to upload to the document library, select it and then press the Submit button. Depending on the speed of your Internet connection the upload may take a little while. You will be notified of a successful upload and given the option to add it to a document immediately. 6. To create a Document for your file download, go to the DOCman control panel, click on the Documents button. From the DOCMan - Documents screen, click the Add button. 7. To set up your download, the minimum information you need to provide is a) A name for the file - this doesn’t have to be the same as the filename b) Choose the correct file which you have already uploaded to your server, under Select Document c) Set a Category for the file d) You can optionally add a thumbnail image for the file, set the creation date and add a description to be associated with the document if required. e) You can individually set viewing permissions, separately from the DOCman Global configuration settings, if required.
102
8 Using 3rd Party Add-on Components and Modules f) Click the Save button 8. NOTE: You can link to a file on a different or third party server if you have permission to do so, by setting a URL instead of a link to an uploaded file when you Select Document 9. 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. DOCman is linked into your menu in the normal way by going to Menu manager > mainmenu and adding a Component link, select DOCman as the component required. 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, 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.
8.3.3 Where to go next for more information DOCMan has it’s own website, http://www.mambodocman.com/, where you can find a full range of information, including News, Documentation, Tutorials and a Forum.
8.4 Setting up an email newsletter An e-mail newsletter is a great way of keeping in touch with your users, whether it is to give them information about the new developments on your site, or the field that you’re working in. A good e-mail newsletter can work wonders for your business, and be a source of regular income. A word of warning however, producing a newsletter which people want to read and stay subscribed to requires a lot of effort and particularly a lot of thought into the needs and requirements of your users. It should also be very targeted easy to read and interesting. The good news is that there are several excellent e-mail newsletter components available for Joomla!, and installing and configuring them is very easy, leaving you with the more demanding task of coming up with fresh informative copy that will engage your users. The newsletter components that we are going to use is called Acajoom News. Acajoom is closely integrated with Joomla!, and shares its user information to build the mailing list.
8.4.1 How to get and install Acajoom Acajoom News can be downloaded from www.acajoom.com, all that they require is that you provide your username and is thus word to get access to the download, and
103
8 Using 3rd Party Add-on Components and Modules of course they add you to their newsletter! First of all we need to download and unzip the latest files for Acajoom News. 1. Go to the www.acajoom.com, and enter your email address and password in the ’Download Acajoom’ section and click the Download button. You’ll see that Acajoom use DOCMan to handle their downloads! The latest release at time of writing was Acajoom News 1.1.0. Click the download button. 2. After a few seconds the Download dialog from your browser should appear and you can save the file in an appropriate directory. You don’t need to unzip this file further, the component is ready to be installed in Joomla!. Here’s how to install this component: 1. Login to the Administrator Control Panel 2. Go to Installers > Components 3. Click the browse button and navigate to the folder/directory where you downloaded the Acajoom News ZIP file and click ’Upload Component’. The installer installs the component, mambot and the Acajoom module automatically This will take a little while depending on the speed of your connection. 4. After 10-20 secs installation is completed and you will be taken to the Acajoom installation screen, with Acajoom’s Wizard - at the bottom of the screen it tells you ’Upload component - Success’ Here is how to get started using Acajoom to manage your email newsletters: 1. First, you need to add a list. A list can be of two types, either a newsletter or an auto-responder. We’ll start at STEP 1. Click the New button to create a new list. NOTE: Message at the top of the screen [Acajoom module is not published. Click here to publish it!] You do not need to respond to this message until later or you can publish the module straight away. 2. You are taken to the New List screen with three tabs: Description | Template | Subscription Status Here you can publish the list, show the list on the website (visible on front end), and whether newsletter or autoresponder Description Set the name of the List e.g. AnyTown Zoo News. Provide a short description of the list.
104
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, and the email address. The bounce email address is the address any email which cannot be delivered will be returned to. NOTE: IF you set this different to the sender address it will result in anti-spam systems rating your email as possible SPAM. Template This tab enables you to create an HTML design for your newsletter. 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, 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. Click the Save button to save your news letter 4. Then click back to your Control Panel (CPanel) and click the configuration button. STEP2 of the Wizard is displayed 5. Click on the link for Newsletter Management and Select your list using the pull down menu ’AnyTown Zoo News’ 6. Click New to create your first mailing This will take you to a screen entitled ’Edit a Newsletter’ Here you enter the Subject line and the newsletter content - you can include pictures in it in the same way that you would create articles in Joomla!. You can create two versions - 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. 7. Click Save. Your new mailing will be shown in the newsletter list 1. Then click back to your Control Panel (CPanel) and click the configuration button.
105
8 Using 3rd Party Add-on Components and Modules
STEP 3 of the Wizard is displayed 2. Next you are recommended to check the email settings and also to publish the Acajoom module NOTE You may need to set SMTP authentication settings for your email program if for example you are sending the email from a separate SMTP mail server if you are using JSAS to develop your site, then you will need to set your email username, password and SMTP mail server correctly. 3. You can use the Preview function to send a test to yourself to view the resultant newsletter before you send it. Edit the newsletter, test as appropriate, and use the preview function to re-test. 4. The Acajoom Subscriber Module needs to be published before you can send your newsletter. 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. Select published = yes and review the parameters available for the module and set them to the settings you require. Help is available on screen by hovering the mouse over the dotted links next to the parameter. 6. Go back to Components > Acajoom > Configuration and you will be taken to STEP 4 confirming that you have completed the set up process. You can now send your newsletter and set others up. 1. Go to Lists and Click the radio button in front of your news letter and press the Published button 2. Go to Cpanel > Newsletters 3. Click the radio button in front of your news letter and press the Send button 4. Click Save button when you have finished
8.4.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.
106
8 Using 3rd Party Add-on Components and Modules
8.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. It is very important for developing larger and more complex navigation systems, but it does require good CSS skills and Joomla! know-how and understanding of how the mainmenu module works.
8.5.1 Introduction The menu system is at the heart of your Joomla! website, since it provides all the navigation logic for the site and connects all the parts together. If you are an experienced website designer, and are able to use CSS to style your web sites, 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. For example if you want to provide multi-level menus, such as splitting the menu between a horizontal top menu and a sub-menu in the right-hand column, then you need the Extended Menu module. This is a very powerful module which piggy-backs on the existing Joomla! module, however it is not particularly well documented by the author, and does require a fairly high level of skill from the developer particularly with regard to the use of CSS for styling. It also requires a certain amount of experimentation and trial and error in order to understand exactly how the system works. Despite these limitations of documentation, the extended menu module can be indispensable in certain situations. This module is capable of implementing a wide range of multilevel navigation methods. We will show how to implement two of the most common menu systems, drop down menus using CSS (no Javascript) and split menus.
8.5.2 How to Get it Extended Menu can be downloaded from the author’s website at: http://de.siteof.de/extended-menu.html
8.5.3 What you get Extended Menus is supplied as a single module mod_exmenu_1.0.3.zip There is also an enhanced Pathway module which works with extended menu to provide a consistent breadcrumb trail. Download file from SourceForge: mod_exmenu_pathway_1.0.1.zip http://developer.Joomla!.org/sf/frs/do/viewRelease/projects.extended_menu/
107
8 Using 3rd Party Add-on Components and Modules
8.5.4 How to install it 1. Go to Installers > Modules 2. Click the browse button and navigate to the folder/directory where you downloaded the extended menu module zip file 3. Select the file mod_exmenu_1.0.3.zip and click Upload module. The module should now be successfully installed IMPORTANT: Extended Menu builds on the functionality of mainmenu module, but does not completely replace it. DO NOT delete the mainmenu module, you should merely un-publish it. You continue to use mainmenu module from the Menu Manager to build your menu structure, including sub menus, while using ext_menu to deliver the connectivity and styling. 1. Make sure your mainmenu is complete, with your entire hierarchy of links filled out. 2. Unpublish the mainmenu module. To do this: a) Go to Modules > Site Modules b) You will see a list of all the modules Joomla! has installed by default. Click once on the published icon [ ] in the published column next to the name of the mainmenu module using your mouse. This will toggle the icon to a red ’X’ indicating that the module is no longer published to your site. 3. Open the extended menu module by clicking on the link in Module Manager, and ensure the setting Menu Name is set to main menu. 4. Publish the extended menu a) Go to Modules > Site Modules b) Click the module entry for Extended Menu c) Select "Published - Yes" 5. Ensure it is correctly positioned in your template, and that the corresponding position is set in the extended menu module. 6. Click the Save button
8.5.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 a sub menu in the left column which changes according to the menu item selected in the top menu. See figure 8.x
108
8 Using 3rd Party Add-on Components and Modules 1. 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.2.3) to the appropriate top menu item in the mainmenu (e.g. in chapter 7 we saw how to create a top menu item for Visitors, and then sub-menu items for General Visitor Page, Admission Prices, Opening Times and How to find us) 2. Ensure that you have unpublished the mainmenu module (see 8.5.4 above) in Module Manager (Modules > Site Modules) 3. Download extended menu module and install it using Installers > Modules. Open up the new extended menu module. You will see that there are a large number of parameters (around 50) which can be set for Extended Menu. 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. I will set out here the critical parameters which need to be set to make the split menu work. 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. Set the position of your menu to the top horizontal menu - in our case, Position = Top Set Show title = No, Published = Yes Enter the following key settings, 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
8 Using 3rd Party Add-on Components and Modules p) Enable Menu Template = No 4. Go to Modules > Site Modules. 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. 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 , Position = Left Set Show title = No, Published = Yes Enter the following parameters, 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. You should now be able to display the left hand sub menu by clicking on the appropriate top menu item, e.g. Visitors. If the method has not worked, please go back and check that you have set the parameters exactly as given above. 6. You can perform fine control over the design and presentation of the menu using CSS with the parameters provided. Refer to the Extended menu website for parameter details, and experiment.
8.5.6 How to build dynamic menus using CSS Daniel Ecer, the author of extended menu, provides a number of templates on his website (see link below) which enable you to create dynamic multi-level menus, using the strangely named CSS technique, ’suckerfish’. ( See http://www.alistapart.com/articles/dropdowns for a full description of the
110
8 Using 3rd Party Add-on Components and Modules suckerfish method). Daniel’s templates contain a menu.html template, together with CSS for the menu, and a menu.ini file which sets parameters in extended menu. These templates should be downloaded, 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.) The CSS file will need to be pasted into (or called from) your template_css.css and amended as required to match the visual elements of your site. Then proceed as follows: 1. 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.2.3) to the appropriate top menu item in the mainmenu (e.g. in chapter 7 we saw how to create a top menu item for Visitors, and then sub-menu items for General Visitor Page, Admission Prices, Opening Times and How to find us) 2. Ensure that you have unpublished the mainmenu module (see 8.5.4 above) in Module Manager (Modules > Site Modules) 3. Download extended menu module and install it using Installers > Modules. Open up the new extended menu module. 4. Set the position of your menu to the menu position required - in our case, Position = Top Set Show title = No, Published = Yes a) Set Enable Menu Template = Yes b) Set Template Name = menu.html 5. Click Save You should now experiment with the other parameters to see how they affect your menu presentation and performance
8.5.7 Where to look/go next for more information If you need more information than I have provided here I recommend that you check out the material on the authors website: http://de.siteof.de/extended-menu-parameters.html and work through the parameters, and experiment until you get the desired effect. For more details on dynamic menus go to http://de.siteof.de/extended-menu-templates.html If you get stuck try a search on the Joomla! forums for extended menu. If you still can’t find what you’re looking for then I would suggest you consider posting a question to the Joomla! forum and try to find some users who have already had experience with the module. Alternatively, if all else fails, Learn Joomla! does offer a commercial support service, see our website for more details.
111
8 Using 3rd Party Add-on Components and Modules If after trying all these steps with extended menu you are still experiencing difficulties, 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.
8.6 10 more indispensable extensions With over 1,000 3rd-party applications, our recommended third-party extensions can only scratch the surface of what is possible. 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!, but obviously that will depend on your user needs and the exact requirements that they have. Here are 10 more third-party extensions, which I use regularly and find invaluable. I haven’t provided detailed instructions to install these, but by now you should have enough experience of Joomla! to be able to take these in your stride.
8.6.1 Community Builder As we mentioned in the chapter about user management, the Joomla! user model does have some limitations. 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, for example should you wish to separate free publicly registered users from paying members. Community Builder is a very popular extension from Joomlopolis and it makes significant enhancements to the Joomla! user model. It also has many additional uses; as its name suggests, it can be used for building an online community of users, with the ability to define connections between users, and create detailed user profiles, a major area of growth amongst Web 2.0 type web sites. How to get it: http://www.joomlapolis.com/ What you get: The main Community Builder components, plus modules providing enhanced login, and modules providing information on user connections and profiles, and online status. How to install it: Instructions are provided on the Joomlopolis website. Advice, Notes, Tips and warnings: This is a big component and needs time to investigate and understand how it works. Although the software is open source, the full documentation is chargeable (25 euros). It is very highly rated by the Joomla! community.
112
8 Using 3rd Party Add-on Components and Modules
8.6.2 Guest book - Easybook Guest books are still remarkably popular on many personal websites and indeed on small business websites such as holiday cottage lets, or specialist hobby or interest sites. There are a number of guestbook components available to Joomla! and we have selected Easybook from Easy-Joomla!.org in Germany which is easy to install and configure. It has a wide range of configuration options, including CSS layout control. A key issue with any software component which allows third-party users to add comments, is the issue of SPAM, when sites can be deluged with unpleasant, offensive or just plain annoying postings which are nothing to do with the subject. Good component design can minimize the possibility of this occurring (Easybook has a SPAM, and ’bad word’ filter), but you must also watch out for password management, and deliberate abuse of the site by users who can register a username and password and then start spamming your site. It is therefore important for you to keep the regular eye on any third-party postings component, and be ready to suspend users or delete content as required. How to Get it: http://forge.Joomla!.org/sf/projects/easyjoomla/ What you get: The Easybook 1.1 component (version 1.1, and a module allowing you to display the latest guestbook posting elsewhere, e.g. on your home page) How to install it: Standard component installation. README installation instructions provided Advice: Notes, Tips and warnings: The original documentation is in German, which can make modification slightly tricky for english speakers.
8.6.3 Adding a Weblog using MamBlog These days everyone is Blogging, and Mamblog, as the name suggests, is a Weblog component which was developed for Mambo, but which works fine with Joomla! There are several weblog components for Joomla!, but this one is my favourite. Hunt around on the Joomla! extensions site and you will also find other modules to enhance your weblog which are compatible with MamBlog. With some time and patience you can build Weblog functionality which will compete with Wordpress and other dedicated Blog software tools, and have full control over layout. How to Get it: www.jxdevelopment.com/index.php?option=com_remository&func=fileinfo&id=76 What you get: The Mamblog v 1.0 component How to install it: Full instructions for installation and use are at http://www.jxdevelopment.com/content/view/61/30/ Advice, Notes, Tips and warnings: If you just want a standard Weblog, then you will find a dedicated package such as Wordpress or b2evolution simple and straightforward
113
8 Using 3rd Party Add-on Components and Modules to install and get up and running fast. Use MamBlog (and other third party modules) if you have a Joomla! site and you want to add Weblog functionality to the site ’mix’.
8.6.4 A flexible banner system - Artbanners Many sites use advertising banners to promote contents on their own sites as well as links to third party sites. The banner component within Joomla! is fairly basic in terms of its capabilities, and if you are looking for a more sophisticated than a management system then I recommend the Arts Banners component which is widely used to display multiple graphic banners in the right or left hand column of a website. Art Banners can also display Flash animations. How to Get it: At time of writing the art banners website was offline, a not too uncommon experience in the open source world, which makes it very important to keep archive copies of all the software you download for future use. The components was available from http://forum.Joomla!.org/index.php/topic,89960.0.html at time of writing but the reader is recommended to check the latest information in the Joomla! extensions directory prior to downloading. What you get: The artbanners component to manage banners, and a module to position the banner on the page How to install it: Standard component install. README included with the component Advice, Notes, Tips and warnings: See above, the Art Banners site was down at time of writing so you need to check the current location for download. This is a very nice component and well worth the trouble to find it.
8.6.5 Forms / database component - mosforms The standard Joomla! installation does not provide the ability to design forms to capture user input, other than the basic contact enquiry form. To create forms you need a third party component such as mosforms. Using mosforms you can design a variety of data entry forms that will store data in a MySQL database, without the need to understand SQL programming language. mosforms has a lot of flexibility, and like extended menu it is a powerful component, but one which requires some skill and time to master. How to Get it: http://forge.Joomla!.org/sf/projects/mosforms What you get: A component, a couple of modules and some mambots How to install it: The developers website http://mosforms.pollen-8.co.uk has documentation
114
8 Using 3rd Party Add-on Components and Modules Advice, Notes, Tips and warnings: Developing forms is complicated and requires some understanding of database structure. Allow sufficient time to develop and test your form. The current software is beta and some users have reported problems with bugs. Other form builders are also available - you may want to check the Joomla! extensions site for alternatives if mosforms doesn’t do exactly what you want.
8.6.6 Content Item module This is an extremely useful module which enables you to place content from articles in any position on a page, not just in the mainbody area. I find it invaluable and have used it on almost every Joomla! site I have developed. For example, you can use it to provide content ’tasters’ on the home page, or to provide an extended ’latest news’ display, including the first paragraph of the article as well as the headline in the news summary display. How to Get it: http://developer.Joomla!.org/sf/projects/content_item_module What you get: One module How to install it: Standard module installation. See the sourceforge site for more documentation about configuration. Advice: Notes, Tips and warnings: What are you waiting for - download it!
8.6.7 Blogg-X Blogg-X is a small Windows, Mac or Linux program which allow articles to be uploaded to a Joomla! website without accessing the website via the front or back end interface. This tools enables you to quickly post content to the site, delete articles and publish unpublished articles. You can also post articles to multiple sites, thus saving time for busy editors. How to Get it: www.iobinary.com/component/option,com_remository/Itemid,35/func,select/id,2/ What you get: A standalone program which install on your computer and connects to your Joomla! site database. A mambot which has to be installed on the server. How to install it: Instructions provided in the downloadable file Advice, Notes, Tips and warnings: If you or your users (writers, editors) just want to publish articles to your site this is a simple and easy to use tool which doesn’t require training on editing Joomla! websites. Particularly useful if you have a large volume of articles to publish daily.
115
8 Using 3rd Party Add-on Components and Modules
8.6.8 mycontent Mycontent simplifies the process of publishing articles from the Joomla! front end. Authors and publishers can see all their content in a single list. Users with Publisher access can publish content with one click from the mycontent list. mycontent allows users to create a content item for any section, instead of having to have multiple links from the usermenu. How to Get it: http://joomlicious.com/index.php?option=com_docman&task=cat_view&gid=8&Itemid=33 What you get: The mycontent component How to install it: Standard component install. Instructions provided on developers website Advice, Notes, Tips and warnings: Highly recommended by the Joomla! community, mycontent addresses a weakness in the core Joomla! front end editing functionality.
8.6.9 AdSense Allows publishing of Google Adsense adverts on your site in various module positions, and ensures that you stay within the rules for IP blocking, clicks and clickthroughs. Choose different size adverts and position on the pages you want. How to Get it: http://www.joomlaspan.com/Joomla!-downloads/ What you get: Various modules How to install it: More details on the developers website, http://www.joomlaspan.com Advice: Notes, Tips and warnings: Joomlaspan the developers also produce a range of other advertising and affiliate program related modules and components for Joomla!
8.6.10 Search Engine Optimisation (SEO) - OpenSEF According to their website “OpenSEF is a Joomla! 1.0.x component that extends Joomla!’s SEF (Search Engine Friendly) URL mechanism allowing you to define arbitrary, friendly URLs for any of Joomla!’s content and component items”. So, instead of http://www.learnjoomla.co.uk/content/blogsection/3/39/ or even www.learnjoomla.co.uk/index.php?option=com_content&task=blogsection&id=3&Itemid=39 you can set the URL as http://www.learnjoomla.co.uk/hints-and-tips.html This is invaluable for optimizing your site to get the best possible positioning in search engine listings such as Google. How to get it: http://projects.j-prosolution.com/en/projects/os-projects/project-opensef.html
116
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.j-prosolution.com/en/documents/opensef/install-opensef.html Advice: Notes, Tips and warnings: This is an invaluable and widely used component which addresses a weak area in the core Joomla! software. Whether you want to improve your search engine ranking or just have easy to quote URLs for printed material, I recommend you to get it!
8.7 What next ... 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. Now is a good time to start browsing and exploring http://extensions.Joomla.org and downloading and trying out other applications. Don’t forget that it is up to you to test these extensions and make sure that they work robustly on your site. 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. A good idea is to install a test site on a local server using JSAS to evaluate extensions before loading them to your production site. That way, 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. Good Luck!
117
9 Introduction to Templates In this section you will learn: • The role of templates in Joomla! • About template positions • How to install a template
9.1 Introduction The appearance of a Joomla! website can be changed within a few minutes by applying a new Joomla! template. As explained in Chapter 2, the content from your database is laid out and styled dynamically by Joomla!, each time a web page is displayed. 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. It contains an HTML file (index.php), a CSS stylesheet (template_css.css), image files and and XML file to tell Joomla! how everything fits together. 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. If you’re not aware of the power of CSS I recommend that you spend five minutes now looking at CSSZenGarden http://www.csszengarden.com and see how changing the CSS stylesheet completely changes the appearance of the same single static web page. The first time I saw this website I got CSS immediately. This milestone site explains CSS and how Joomla! Templates work better than a thousand words from me. Joomla! templates work in the same way as the CSS ZenGarden page. There are two key files in a template: • index.php, a simple, content free, piece of HTML code which defines areas
of the page, or positions into which content can be flowed. Certain areas of the index.php file are given position names by functions in the index.php code
118
9 Introduction to Templates
Figure 9.1: Template positions for the LJ_metro01 template and it is into these positions that Joomla! modules such as search boxes, banners, lists of articles, and so on can be outputted to the correct location within the template layout. In each module there is a parameter to define in which position their output will be displayed. • The stylesheet template_css.css controls the exact layout of the positions on
the page and all the styling of colours, typefaces and lines and other elements.
9.2 Template positions, an example Figure 9.1 shows the template positions which are available for one of the templates supplied with this book, LJ_metro01. They are defined in the index.php code which is reproduced in Listing 10.1. More details about this file in Chapter 10.
119
9 Introduction to Templates NOTE Note that all Joomla! templates do not have the same positions defined in the template code. Some simple templates have just 3 or 4 positions while other more advanced designs have 10 or more positions. It really depends on the template developer and the layout they have designed. Joomla! does not enforce any controls on which positions must be included in a template or the position names which must be included. So one template might have a ’top’ position for a horizontal menu to be placed while another does not. 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. 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. TIP To see the positions which have been defined by a template, install it in Joomla! as the default template (see below), and then add ?tp=1 to the end of the url to see the positions overlaid on your template on screen e.g http://demo.learnjoomla.co.uk/index.php?tp=1
9.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. The two free templates supplied with Joomla! won’t be everyone’s cup of tea. Personally, I like designs with much more white space, simpler and less cluttered, and you will have your own preferences too, whether it is for a games website, a personal site or a corporate design. You can try the free templates I have supplied with this ebook, 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. Bear in mind that a new template can create some unexpected results - remember positions that are available in one template are missing from another or the position name is used for a different layout area. You can adjust your module position to fit the new template from the Module Manager by opening the module and adjusting the position parameter. Text styling may also be affected as each template will have its own CSS. WARNING: Do not be tempted to unzip the template ZIP file when you have downloaded it. 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.
120
9 Introduction to Templates
9.4 Installing a new Template To load a new template into a Joomla! site: 1. Go to Installers > Templates > Site 2. Click the Browse button which brings up a File Upload window on your PC. Navigate to your LearnJoomla PC folder and select the ZIP file of the template you have downloaded, for example LJ_metro01.zip, and click Open to select it. Then press the Upload File and Install. 3. After a few seconds you will get the Message file Upload Template : Success. Click on Continue. This takes you to the Template Manager Menu (Note: to get here in future 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. 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 second or two the page will refresh and you will see that the green default tick icon is now set against the LJ_metro01 template. 5. Now go back to the 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. You have successfully installed a new template.
9.5 Taking templates to the next stage Many third party designers have made Joomla! templates available for free, 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). However, there may still be occasions where you want to create your own template: because you have to meet corporate design guidelines for a client, to give yourself features and functions not available off the shelf, or simply because you are a great designer and anything other than your own design will be second best. If so, the next chapter, ’Make your own Template’ is written for you. Whatever the reason, 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!.
121
10 Make your own template This is an advanced chapter which assumes a knowledge of HTML web design skills. In this chapter you will learn: • How to create a Joomla! and W3C compliant index.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, you may prefer to design your own template, either to meet an exact client requirement, such as an organisation’s branding guidelines, or because you want the site to have its own unique look. With the instructions and information provided in this chapter you will be able to create your own template which can conform to W3C specifications. The final quality of the design will depend on your own creative and programming expertise, however anyone with basic web design skills should end up with a usable 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. It is assumed that you have a basic knowledge of HTML design, and CSS layout techniques. If you do not have these please refer to the tutorial material described in Appendix B before attempting to build a template. Included with this book are two sample templates which you can use as a starting point to help you build your own design (LJ_metro01 and LJ_andreas01. )
10.1 Tools Required In addition to your Joomla! installation on a public server or your local JSAS installation you will need an HTML editor, a graphics editor and I strongly recommend you use the Mozilla Firefox browser with the Web Developer plug in. Recommended Open Source tools are given in Appendix B.
122
10 Make your own template
10.2 Steps Involved Here is the overall approach I recommend you take, set out step by step. 1. Familiarize yourself with a number of existing Joomla! templates and examine their index.php and template_css.css files and understand how they are put together. Links to suppliers of free and commercial templates are given in Appendix A. (Also see Chapter 9). 2. TIP: Here are a couple of ways to understand the structure of a Joomla! template visually 1. Add the suffix ?tp=1 to the end of the URL for a Joomla! site to see the positions included in the template 2. Use the Web Developer plugin for Firefox to view the CSS boxes and CSS classes for a Joomla! template (see example in Fig 7.1) by selecting the options Display Div Order and Display ID and Class details. 3. Sketch out the structure of your website page on paper or in your favourite graphics editor. Give thought as to how to use the Joomla! module and component functions to deliver the information required. Research any third party plug-ins required to deliver extra functionality and download and evaluate these on a local Joomla! installation. 4. Break your page design into a set of CSS boxes and identify which position label is to be applied to each CSS box. 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. 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. 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. 5. Package your template, 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. 7. When you are happy with the final design you will rebuild your template archive file to included all the ’tweaks’ and changes you have made in Joomla!.
123
10 Make your own template
10.3 The Template file structure - ’What’s in a template?’ In order to create a template for Joomla! you need to understand the detailed structure of a template, how the layout is created to place Joomla! modules in, and what the functions are to insert content from Joomla! into a template. A Joomla! template is supplied as a single ZIP file containing all the files required for the template, e.g. LJ_metro01.zip. An XML file in the ZIP file describes the contents to enable the files to be installed correctly. See example in Listing 10.1 Listing 10.1 Example templateDetails.xml file <mosinstall type="template" version="1.0.x"> <name>LJ_metro01</name> <creationDate>1 Jan 06</creationDate> <author>Drugo/Mike Lloyd</author> <copyright>Drugo/Artonezero Limited</copyright> <authorEmail>mike.lloyd@learnjoomla.co.uk</authorEmail> <authorUrl>www.learnjoomla.co.uk</authorUrl> <version>1.0</version> <description>The Open Source Metro01 template</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> </files> <images> <filename>img/body_bg.png</filename> <filename>img/content_sep.png</filename> <filename>img/tab_top_bg.gif</filename> <filename>img/title.jpg</filename> <filename>template_thumbnail.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.zip) it is supplied as a ZIP file ready to be uploaded and installed via the Site Template Manager. If you unzip the file you will find the following files are included:
124
10 Make your own template
10.3.1 The core files (required) • templateDetails.xml (Case sensitive - note the uppercase D) An XML for-
mat meta data file that is used for installing a template via the Administrator web interface. The XML file describes the author, copyright and include a full list of the files which comprise the template. Joomla! makes use of this XML file to load web pages built using the template so you must get it right. • index.php The file defines the layout of the site with a mixture of XHTML and
PHP. As well as creating all the CSS boxes or tables which comprise the visual layout, it defines the positions where modules may be inserted in the design (e.g. ’left’, ’right’, ’footer’, ’user1’, ’user2’, and so forth). A basic layout can be done with this file only, but in order to get a high quality design it should be supported by a CSS file.
10.3.2 Additional files (Optional) • template_thumbnail.png A web browser screenshot of the template (usu-
ally reduced to around 140 pixels wide and 90 pixels high). After the template has been installed, this enables a visual image of the template to be displayed from the Joomla! Administrator Template Manager. • css/template_css.css The CSS of the template. Sometimes designers split
the CSS into several files for maintainability. This file should always be named template_css.css, otherwise Joomla! may not find it correctly. • images/graphics_XX.png All images included with the template must be
listed. It is recommended (but not essential) to put these in an images directory.
10.3.3 The index.php file Although it is possible to build a simple template as a single index.php file with embedded CSS styles, (in which case the template will consist of the index.php file and the XML file archived in a ZIP file), it is normal practice to use an external stylesheet. Let’s examine the index.php file in more detail. 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.1
125
10 Make your own template The key functions are: mosShowHead <?php mosShowHead(); ?> This function assembles various head tags including the title tag and several meta tags. mosShowPathway <?php mosPathWay(); ?> This function inserts an automatic breadcrumb trail, or pathway element mosMainBody <?php mosMainBody(); ?> This function displays the main text body, articles and the output of other components as determined by the value of option in the URL. mosLoadModules <?php mosLoadModules($position_name [,$style])?> This is a very ďŹ&#x201A;exible function which displays the output from all modules that are assigned to the position_name position for the current page. The "style" argument allows control over the way in which the (X)HTML is output, as follows: 0 = (default display) Modules are displayed in a column. See example below: <!-- Begin : Individual module --> <table cellpadding="0" cellspacing="0" class="moduletable[suffix]"> <tr> <th valign="top">Module Title</th> </tr> <tr> <td> Module output </td> </tr> </table> <!-- End : Individual module -->
-1 = Modules are displayed as raw output and without titles. See example below: Module 1 Output Module 2 Output Module 3 Output
-2 = Modules are displayed in X-Joomla! format, i.e. without tables, using a single CSS box <div>...</div>. See example below: <!-- Begin : Individual module --> <div class="moduletable[suffix]"> <h3>Module Title</h3> Module output </div> <!-- End : Individual module -->
126
10 Make your own template -3 = Modules are displayed in a format that allows, for example, stretch-able rounded corners,using 4 separate CSS Boxes <div>...</div>. See example below: <!-- Begin : Individual module --> <div class="module[suffix]"> <div> <div> <div> <h3>Module Title</h3> Module output </div> </div> </div> </div> <!-- End : Individual module -->
1 = Modules are displayed horizontally. Each module is output in the cell of a wrapper table. See example below: <!-- Begin : Module wrapper --> <table cellspacing="1" cellpadding="0" border="0" width="100%"> <tr> <td align="top"> <!-- Begin : Individual module --> <table cellpadding="0" cellspacing="0" class="moduletable[suffix]"> <tr> <th valign="top">Module Title</th> </tr> <tr> <td> Module output </td> </tr> </table> <!-- End : Individual module --> </td> <td align="top"> <!-- ...the next module... --> </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. This is useful for hiding unused positions.
127
10 Make your own template PHP Function
Description
<?php mosShowHead(); ?>
Assembles various head tags including the title tag and several meta tags.
<?php echo date(’D j M Y’); ?>
Includes the output of the component as determined by the value of option in the URL. Loads a component. For example "banners". Do not include the "com_" prefix. Displays all modules that are assigned to the "position_name" position for the current page. The "style" argument is optional but may be: 0 = (default display) Modules are displayed in a column 1 = Modules are displayed horizontally. 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, for example, stretchable rounded corners Counts the number of modules that may be shown on the current page in the "position_name" position. This is useful for hiding unused positions. Inserts a live date function in your web page
<?php echo $mosConfig_sitename; ?> <?php echo mosConfig_live_site; ?>
Inserts the Joomla! website name in your webpage Returns the directory path to your web root directory
<?php mosMainBody(); ?> <?php mosLoadComponent($name)?>
<?php mosLoadModules($position_name [,$style])?>
<?php mosCountModules($position_name)?>
Table 10.1: PHP Template Functions Additional functions are used to reference the date, directory and website title. Listing 10.2 shows an index.php file example with all the basic elements you require. These are: 1. the PHP header function 2. the <HEAD> tag information is automatically generated on the fly and inserted using the mosShowHead command 3. The Navigation Menu, the various display modules and the main content in the page body are displayed via CSS boxes using PHP functions 4. The Logo is linked from the index.php 5. The live date is inserted using another PHP function, 6. Basic CSS Box positioning and styling is provided using CSS styles in a separate stylesheet.
128
10 Make your own template Listing 10.2 A sample index.php file with positions highlighted in red <?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <?php if ( $my->id ) { initEditor(); } ?> <meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" /> <?php mosShowHead(); ?> <?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template] /css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?> </head> <body> <div id="wrap"> <div id="wrap_top"></div> <div id="main"> <div id="head"> <?php mosLoadModules ( ’top’, -2 ); ?> <h1 class="title"><?php echo $mosConfig_sitename; ?></h1></div> <div id="content"> <?php mosPathWay(); ?> <?php mosLoadModules ( ’user1’, -2 ); ?> <?php mosMainBody(); ?> <?php mosLoadModules ( ’bottom’, -2 ); ?></div> <div id="rightbar"> <?php mosLoadModules ( ’right’, -2 ); ?></div> <div id="footer"><?php mosLoadModules ( ’footer’, -2 ); ?></div> </div> </div> </body> </html>
This template file was included with your book (it’s called LJ_metro01.zip) and you can install this template now on your Joomla! installation to investigate it more closely.
129
10 Make your own template
10.4 The CSS styling file Most commercial templates use one or more separate CSS stylesheets to style all the key elements of the Joomla! output. Joomla! has an extensive range of CSS IDs and Classes built in which you can use to make your website look just the way you want.
10.4.1 Joomla! CSS Classes I have been unable to discover an official Joomla! Reference document describing all the Joomla! Specific CSS IDs and classes, 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), and by studying the source code and I believe that this is as good a reference as you will find for the CSS styles. 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. Incidentally, I recommend this exercise to anyone who really wants to know how Joomla! web pages are constructed. 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. The Joomla! Specific CSS breaks down into two parts. There are some generic classes which apply to all articles, modules or components, and then there are specific classes related to each Joomla! element. In addition, of course, there are the default non Joomla! CSS styles (html, body, p, h1, h2, and so on), and styles related to specific design elements in the template (e.g. divs, ids or table elements) which you define in your template design in index.php. Most modules and components allow the addition of a css suffix so that it is possible to style individual pages, blog views or menus separately, allowing good control over presentation. In addition, 3rd party add in extensions also have their own classes (as well as often using standard Joomla! classes) to control elements of their presentation. If your not sure what options are available for 3rd party extensions, do use the Display ID and Class details option of the Firefox Web Developer toolbar to track these down. I have supplied a commented CSS stylesheet with all the classes described here with your eBook for reference.
10.4.2 Generic CSS There are a few classes that are used across several different components and modules, such as .inputbox for form elements, and .button for buttons. Some are shared
130
10 Make your own template between different types of use, e.g. .small is used for both the author field of an article and for the More links on a Blog view or Section view, so you need to be careful in selected an appropriate style for this field which works for both. .moduletable is a generic class used for all modules. When using options ’0’, and ’1’ in mosLoadModule in the index.php template the output is set as tables and you can use this class to style all the table elements, td th and tr. Otherwise the output is not formatted, or enclosed in <div> </div>. On a simple template you may decide
to provide a single moduletable style. For more complex designs you can create two or more styles using suffixes, e.g a different style for left and right hand columns, using -left and -right suffices in the appropriate module parameters. .componentheading is used for the main page title for a range of components includ-
ing Search, Blog, Login (the main component front page) Contacts, and Section Views. Class .componentheading .contentpane .contentpaneopen .contentdescription .moduletable .inputbox .pagenav .back_button .button .buttonheading .small
Description Title of a Component e.g. Search, Contact, Login, Blog Seen in body of newsflash
e.g. search button, login button the print/email/pdf buttons/text at the top of an article or Blog page author, the link to a section in a section table view,
10.4.3 Specific CSS Menu/navigator Styling the menus is a key element in both the visual presentation of the site and in aiding navigation. The individual menu is styled by selecting the module parameters via Module Manager (not via the Menu Manager - any page suffices applied here affect the page viewed when clicking the menu item). You may set CSS suffices to both the moduletable styling and the individual menu item. The individual menu link items are given the class .mainlevel or .sublevel, which is fairly self explanatory. (Only one level of submenu class is supported), and these can also be styled by combining with li or ul, and a, a:visited, a:hover and a:link. Additionally the currently selected menu item is given the ID active_menu, so that you can highlight the currently selected menu item visually, for example in a different colour or brightness.
131
10 Make your own template Styling menus properly can be quite complicated, if you want to get the maximum quality. You may want to study some existing template stylesheets to see exactly how they have been tackled. You should also consider looking at the extended_menu module (see Chapter 8) if you have more advanced styling needs, as this module allows you to style individual elements more precisely, including giving individual li elements their own unique numbering (useful for positioning dividers). Class #active_menu .mainlevel .sublevel
Description this is the menu link item currently in use Each menu item Each sublevel menu item (only to 1 sub level depth)
Article page A number of styles are provided for styling the individual elements of an article page, including the title, create and modify dates and the navigation links. You can also style any embedded images and the image caption. Finally, you can break a long article into multiple pages, and when doing so an Article index is displayed, together with a page count. These elements can also be styled. 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. Class Description .contentheading Article title .navbar The navigation bar .createdate Date of article creation .contenttoc table of contents Pages/articles split into multiple screens .pagenavcounter the page 1 of 3 text which is inserted in a multi-screen split page .toclink text of links in article index to separate screens in split article box ’article Index’ .pagenavbar Prev-Next Links .modifydate Date shown as Last Updated .article_seperator a class defining the end of an article which can be used to style a page seperator such as a coloured line .mosimage An embedded image class .mosimage_caption The image caption
132
10 Make your own template Blog display Blog uses all the article page classes such as .article_seperator, and these are also used by the front page component which is a variant of the Blog component Class .blog .readon .blog_more .blogsection
Description the entire Blog summary panel enclosing all the blog summary paragraphs the ’Read More’ link The Blog ’More ...’ summary links box The individual Blog links to additional articles
Table view, Sections This is the CSS used for Tables of Article links, Newsfeeds, Contacts, etc. You can style the heading elements of a table, and the footer which is generally navigation buttons or links. Individual rows in a table are given the classes .sectiontableentry1 and .sectiontableentry2 on alternate lines, so that you can easily style the table with for example different background tones or colours to make it easier to read. Class .sectiontableheader .sectiontableentry1 .sectiontableentry2 .sectiontablefooter .category
Description The Heading row of the table with the Column titles Alternate lines in the table can be styled using this class ... and this one, e.g. Different background colours to make it easier to read rows of information The footer row of the table with buttons (e.g prev, next) the category link word displayed in a section table display
Specific Modules Class .latestnews .mostread .pollstableborder .syndicate .wrapper
Description Styles the text link in the summary Latest news display box Styles the text link in the summary Popular display box .poll the poll title the box enclosing the poll #voteid1,2,3 etc the IDs for the poll radio buttons The RSS syndication module box Styling the iframe embedded in the page
133
10 Make your own template Login Module The login module uses the styles .inputbox and .button (if you style these it will affect other forms such as Contact Us) In addition there are IDs to style individual fields, as well as the option to set a CSS suffix in the login module. 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, a simple search box input field, which is styled via the search module or by styling generic Joomla! styles; the Search component, which provides the more advanced search options, and the search results page. Both of these latter two pages have their own classes and IDs. The search term can be highlighted in the results using the .heading class (this is not implemented in the standard Joomla! Templates supplied with 1.0.x, but it can easily be added by entering the line .highlight{background-color: #fbf803;} in the template_css.css stylesheet manually using the CSS editor in Joomla! Administrator). Class or ID #search_searchword #searchphraseany #searchphraseall #searchphraseexact #search_ordering .search .small .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.g. using a yellow highlighter pen style’
Contacts Form IDs are provided to style most of the elements in the contact form, in addition to standard classes such as .inputbox. You may also consider replacing the standard contact icons with your won designs to match the visual style of your template. This is done by replacing the icons via the Media Manager rather than using CSS classes.
134
10 Make your own template ID or Class
Description
#emailForm .contact email #contact_name #contact_email #contact_subject #contact_text
User Menu The user menu allows access to front end editing, and there are classes for the elements of the forms used to style the forms to input information, the buttons, and the Editor. In most cases you will probably use the default styles for these elements, but there may be occasions where you want to change these.
10.5 An example - 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. The purpose of this tutorial will be to show you the steps involved in creating the Joomla! specific code. We will not go into the details of creating the (X)HTML code or the CSS for the basic design, we will assume that you already know how to do this, or that you will use a web design book such as those listed in the Appendices to work out how to write this code. First we start by creating a visual, graphic mock up of the new layout in our favourite graphics editor (Fig 10.1). This new design has three columns instead of two to allow for a new left hand menu with large buttons. When we have a design that our client has signed off, we mark it up with the exact sizes and colours ready to create our layout code with CSS ’boxes’ and CSS Stylesheet. See Fig. 10.2. (Note I have not marked on every css element to avoid confusion; 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.) The markup shows how we will put the design together. There are 5 key CSS boxes, with the IDs, #header, #frontphoto, #leftside, #content and #extras. (There are also other CSS Boxes such as #wrap, to hold the design together, but I will not refer to these further - they can be seen by examining the code). These will be defined in the index.php, and positioned and styled in the CSS stylesheet, template_css.css. First we will build the index.php file. The file header for index.php is just a few lines, and pretty standard amongst Joomla! templates, it is shown in listing 10.2
135
10 Make your own template
Figure 10.1: A new 3 column design visual for the AnyTown Zoo template
136
10 Make your own template
Figure 10.2: The Visual â&#x20AC;&#x2122;marked upâ&#x20AC;&#x2122; for coding (only some markup shown)
137
10 Make your own template Listing 10.3 The index.php file <HEAD> ... </HEAD> code <?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <?php if ( $my->id ) { initEditor(); } ?> <meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" /> <?php mosShowHead(); ?> <?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/ $GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?> </head>
This header code comprises: 1. A statement invoking PHP 2. The W3C compliant header code, in this case set to ’transitional’ 3. In between the <head> ...</head> tags we insert our first Joomla! specific code. All of the standard HTML header information, 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. 4. The command <?php if ($my->id) {initEditor();}> tests to see if the user is logged in and whether to view the page in edit mode 5. 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.css\" type=\"text/css\"/>" ; ?>. You can also use this command in your template to automatically reference
this stylesheet without explicitly referring to it’s name. 6. That’s it. You can pretty well use this standard header code for any template Next we need to create the body of the template using <div> ... </div> tags to create our CSS boxes and within those insert our template positions. This is shown in Listing 10.4
138
10 Make your own template Listing 10.4 The index.php file <BODY> ... </BODY> code <body> <div id="wrap"> <div id="header"> <h1 class="title"><?php echo $mosConfig_sitename; ?></h1> </div> <div id="frontphoto"> <?php mosLoadModules ( ’inset’, -2 ); ?> </div> <div id="leftside"><?php mosLoadModules ( ’left’, -2 ); ?> </div> <div id="extras"><?php if (mosCountModules( "left" )) {mosLoadModules ( ’left’,-2);} ?> </div> <div id="content"> <?php mosPathWay(); ?> <?php mosLoadModules ( ’user1’, -2 ); ?> <?php mosMainBody(); ?> <?php mosLoadModules ( ’bottom’, -2 ); ?> </div> <div id="footer"><?php mosLoadModules ( ’footer’, -2 ); ?> </div> </div> </body> </html>
In the body code enclosed by the <body>...</body> tags, we have inserted positions inset, left, user1, bottom, footer, and right using the <?php mosLoadModules ( ’user1’,-2); ?> command, where we replace the string ’user1’ with the appropriate name of the position we wish to create within a pair of <div>...</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’,-2);} ?>. If the function mosCountModules returns a zero, i.e. there are no modules within this position on the specific dynamic page which is being created (because they are not linked on the menu page), then no code will be outputted by Joomla! and this position will be ’hidden’. We have set the mosLoadModules output style to -2. This means that the modules will be output within a single CSS box called moduletable within a pair of <div> ... </div> tags. We need to be aware of this when defining our Joomla! specific styles. 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, i.e. styling HTML table elements, td, tr and th. As you can see, the index.php template is very simple. That’s all there is to it. In our CSS stylesheet template_css.css, we must include all the layout positioning for the CSS boxes, and the styling. The layout positioning is all standard CSS, no Joomla! specific code there. We are
139
10 Make your own template using a mixture of absolute positioning and floats, with the leftside, content and extras CSS Boxes being floated left. The visual styling uses a mixture of standard CSS and some specific Joomla! CSS IDs and classes. 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. Let’s look at extracts of the CSS file section by section. The full template_css.css file can be examined by unzipping the LJ_Zoo01.zip template file supplied with this ebook. In this first part of the file we set the general stylesheet settings using the body definition, including typeface and text and line spacing, font and background colour. We then position the CSS boxes #wrap, #content, #footer, #leftside, #extras, #frontphoto and #header. Note that this is all standard CSS, no special Joomla! IDs or classes at this stage. 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). /***** Body and main container *****/ body { margin:0 auto; padding:0; font:76% Verdana,Tahoma,Arial,sans-serif; background:#f4f4f4 url(../images/bg.gif) top center repeat-y; color:#303030; } /***** Header *****/ #header { margin:10px 0 0; padding:0; height:45px; } #header h1 { font-family:"Comic Sans MS",Arial,sans-serif; font-weight:bold; color:#e10a17; background-color:inherit; width:250px; margin:0 0 10px; font-size:2.2em; float:left; } #header h1 a{ color:#505050; background-color:inherit; text-decoration:none; } /* #frontphoto { margin:50px 0 0 10px; border:0; } */ #frontphoto{ background: url(’../images/front.jpg’) no-repeat; height:200px; margin:0 0 0 0; border:0; }
140
10 Make your own template In the next section we set up our left hand column. Note the use of the CSS sufďŹ x -left which is added to moduletable to create a unique class for styling modules in the left hand column. .moduletable-left /***** Left sidebar *****/ #leftside { clear:left; float:left; width:140px; margin:0 0 5px; padding:0; } #leftside h2,#leftside h3 { font-family:"Comic Sans MS",Arial,sans-serif; color:#6dac2a; background-color:inherit; font-size:1.4em; margin:0 0 5px; padding:0; } #leftside div.moduletable-left { clear:left; margin:10px 0 15px; padding:7px 5px; width:126px; font-size:0.9em; background-color:#f4f4f4; color:#505050; border-left:4px solid #cccccc; line-height:1.5em; } #leftside div.moduletable-left p { margin:10px 0 0; padding:0; }
141
10 Make your own template In the next section of the stylesheet, we will style the menu navigation bar. Note that we style the elements within the moduletable div which Joomla! has inserted inside our #leftside div. /***** Main menu *****/ #leftside div.moduletable ul#mainlevel width:140px; margin:0 0 18px; padding:0; list-style:none; } #leftside div.moduletable ul#mainlevel width:140px; padding:0; line-height:1.4em; display:inline; } #leftside div.moduletable ul#mainlevel background-color:#dfebdc; color:#505050; font-weight:bold; width:130px; float:left; margin-bottom:5px; padding:5px 1px 5px 5px; border-left:4px solid #6db058; text-decoration:none; } #leftside div.moduletable ul#mainlevel background-color:#fff1bb; border-left:4px solid #ffbe01; color:#505050; } #leftside div.moduletable ul#mainlevel margin:0 0 0 15px; padding:0 0 5px 0; font-size:0.9em; width:125px; } #leftside div.moduletable ul#mainlevel padding:3px 1px 3px 5px; width:115px;
{
li {
li a {
li a:hover,ul.avmenu li a.current {
ul {
ul a {
}
142
10 Make your own template Finally we style the main content area, setting the size and colour of the article heading with the .contentheading and .componentheading classes. If we do not style every specific Joomla! element, it will pick up the default body classes. /***** Main content *****/ #content { margin:0 0 5px 150px; border-left:1px solid #f0f0f0; padding:0 10px 0 10px; line-height:1.6em; } #content td.contentheading,#contentwide td.contentheading { font-family:"Comic Sans MS",Arial,sans-serif; font-weight:bold; color:#e29528; font-size:1.8em; margin:0 0 10px; } #content h3,#contentwide h3 { font-family:"Comic Sans MS",Arial,sans-serif; color:#007fc2; font-size:1.4em; margin:0 0 8px; } #content .mosimage,#contentwide .mosimage { padding:1px; display:inline; background:#cccccc; color:#303030; border:4px solid #f0f0f0; }
So, we have now coded the (X)HTML and stylesheet. Next, we need to package our template. We create an XML file to describe the contents of this ZIP file in a text editor such as Notepad, then we save this file as templateDetails.xml. See listing 10.3
Then put all the files, templateDetails.xml, index.php, template_css.css, and the image files in a folder. The CSS is placed in a sub folder called css and the images in a folder called images. Finally we zip it all up into a Zip file archive using WinZip, and save the file as LJ_zoo01.zip. We upload our new template zip file to the site template manager and set as the default template. And it’s done! We have created and installed a new template file. You can try my version out now as we have included this template with your ebook. It’s called LJ_zoo01.zip. We have also included another version of this template, called LJ_andreas01.zip, based on the Open Source template of the same name, which is basically the same template, but styled in cool Scandinavian grays and blues for use as a general 3 column template. See Fig. 10.3. Enjoy! You can examine the CSS of these templates and the other supplied LJ_metro01.zip template to help you see the specific CSS styling.
143
10 Make your own template
Figure 10.3: The LJ_andreas01 template
144
10 Make your own template OK, now it’s over to you to try out your own first template and give yourself full control over the power of Joomla! design.
10.6 Editing a template ’in situ’ You can edit a template index.php or css file ’live’ from the Template Manager screen. 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. Make the changes to your code, press the Save button, and then refresh the preview of your site or select Site > Preview > In New Window to see the effect your changes have had. TIP: Before editing your HTML or CSS live take a backup copy of the file in case you make a mistake and need to undo your changes. The editor is a simple tool and does not provide an ’Undo’ button.
10.7 A free resource for template ideas If you are not a graphic designer, 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.oswd.org. You are free to download any design you like and modify it to work in Joomla!. A couple of the templates I have used for the Learn Joomla! ebook started off in this way. 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.
145
11 Hints, Tips & Howtos Here you can find the answers to some simple problems which you may encounter when building your website, but which can be incredibly difficult and time consuming to work out when you are developing a site for the first time. These tips should saves you hours of wasted time searching the forums, Joomla! sites, the help text and the Joomla! code to implement them. 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.co.uk and we will add them to the website and to future editions of the eBook. 1. I (or a colleague) was editing an article in the Content manager, and closed it but now there is a padlock showing against the article and we can’t access it to edit it again, i.e. when I try to open it again it it’s locked? How do I unlock it? Log in as a Super Administrator. From the Administrator Control Panel go to System > Global Checkin This will unlock any items which have been checked out and locked, including modules 2. I installed the sample content by mistake. How do I delete it completely? Appendix C sets out all the steps needed to remove the sample content. 3. 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. e.g. http://demo.learnjoomla.co.uk/index.php?tp=1 4. How do I put some static text in a display box in a column or other user defined position? To do this you need to create a new module, and place it in the position where the text is required. a) Go to Modules > Site Modules, and Click the New button b) Give the module a title, e.g. ’Hints & Tips’, and set the position, e.g. right c) If you need to chose a moduletable visual style, add the appropriate -suffix in the CSS field templateDetails.xml so that Joomla! loads it when the template is installed. d) Now go to the bottom of the display, and enter your text in the Custom Output box, using the MCE editor to style as required. e) Clive the Save button. Your text will now appear in the position selected.
146
11 Hints, Tips & Howtos f) If you want to place dynamic text in a display box which is not in the main display area, use the Content Item 3rd Party module - see Chapter 8.6.6 5. 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. See Chapter 8.6.4 6. How to change the favourite icon (displayed in the browser URL field?) Ensure that you have included a bitmap of your icon called favicon.ico (you can create a bitmap in GIMP and rename it to the .ico extension) in your template file. Make sure that the file is described in the XML file. Alternatively you can FTP a replacement favicon.ico to replace the default icon at location /images/favicon.ico (from your web root) 7. How do I change the graphic displayed when the site is offline? When you take your site offline for updating, it displays a large Joomla! logo and text stating “This site is down for maintenance.<br /> Please check back again soon”. You can change the text from Global Configuration. To change this graphic to one more suitable to the design of your site, use FTP to replace the file /images/Joomla!_logo_black.jpg, with your own artwork, setting the image size to 350 x 71 pixels. 8. How to display a live date on my homepage? Use the PHP function <?php echo date(’D j M Y’); ?> in the appropriate location in your index.php file 9. 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, here’s what to do: a) Copy over your files, 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.) c) Edit the following values in your configuration.php file to reflect the new values. i. $mosConfig_user = Joomla!_Joomla!; ii. $mosConfig_password = password; iii. $mosConfig_db = Joomla!_Joomla!; iv. $mosConfig_absolute_path = /home/Joomla!/public_html; v. $mosConfig_live_site = http://www.Joomla!.org; vi. $mosConfig_cachepath = /your absolute path/cache; d) Note: You may also need to ensure you have configured your .htaccess file in the new location.
147
11 Hints, Tips & Howtos 10. What files do I need to backup to create a complete backup of my Joomla! site? You need to copy all the files and directories in the root (/) directory of your webspace, and you also need to copy the MySQL database using PHPMyAdmin or other tool provided by your hosting provider. 11. 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. I suggest you create a sub folder called PDF within the ’Stories’ sub directory, and store them there. You can then use the Media Manager feature which generates the correct URL to your PDF file when you select it and cut and paste this URL as a link in the appropriate place in your article page using the link button in MCE editor. This is simpler than installing DOCMan, document management for a few files. If you have a large number of files to maintain, then DOCman may be a better solution (see Chapter 8.3.2) 12. How do I highlight the search term in my search results in a different colour? Add the following line to your template_css.css file for the currently active template, .highlight{background-color:
#fbf803;}
Go to Site > Template Manager > Site Templates, select the radio button next to your template, and press the Edit CSS button against the default template. Add the line and press Save. 13. How do I replace the normal search button with my own button graphic e.g. ’GO’? OK, this one is a hack as there is no clean Joomla! solution to this requirement at present. This took me almost a day to work out when I was starting Joomla! Design your GO button and save it as a .gif file. Upload it to the image directory of your template file e.g. /templates/LJ_metro01/img/go.gif. Edit the file /language/english.php (or the appropriate language file). Find the line DEFINE(’_SEARCH_TITLE’,’Search’); , and remove the text Search, so the line now reads DEFINE(’_SEARCH_TITLE’,”);, and save the file. Now edit your CSS file template_css.css and add the following style (NOTE: You will need to set the margin and padding. background colour, line height, etc accordingly to meet your template design requirements). Now add the suffix -search to your Search module parameters from the Module Manager
148
11 Hints, Tips & Howtos .button-search { background: transparent url(../img/go.gif) no-repeat center center; cursor: pointer; margin: 0 0 0 5px; padding: 0 10px 0 0; border-style: none; width: 25px; height: 19px; text-indent: -1000em; /*background-color: #ae200d; color: #fff; cursor: pointer; margin: 0 0 0 5px; padding: 0 5px; border-style: none; line-height: 19px;*/ }
14. How do I create a different home splash page when I can only have one index.php page in my template? Use the function mosCountModules in a PHP IF, ELSE statement to provide two alternatives as in the sample code below. Ensure that the position user1 (or whichever position you use, has no code output on the home page which will cause the ’Splash’ page to appear. Ensure that user1 has output on all other pages. <body> ... <?php if (mosCountModules(“right”)) { .. main page design here .. } else { .. splash home page design here .. } ?> ... </body>
15. How to add password access control to your website to make it completely inaccessible except to approved users If you are using Apache, in your .htaccess file you require the following code: (where /var/www/web1/.htpasswd is set to the root directory of your web space) AuthType Basic AuthName "Members Only" AuthUserFile /var/www/web1/.htpasswd <limit GET PUT POST> require valid-user </limit>
You then add username and password (s) in the .htpasswd file. See man htpasswd on any Linux Apache server. 16. ’How do they do that?’ If you are visiting a site built in Joomla! and you want to know which extension
149
11 Hints, Tips & Howtos they have used to provide the function that you are interested in take a look at the URL. If there is a com_ extension in there you will be able to extract the name of the components, 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.
150
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. It is beyond the scope of a beginners book to explain about building plug ins, modules, components and mambots. However now that you are up to speed on using Joomla! you will ďŹ nd that there is a great deal of useful information aimed at the Intermediate and Advanced developer on the Joomla! site. Many of the Joomla! resources available freely on the net will help you. Your single best source of information is however the Joomla! forums where you can ďŹ nd thousands of other developers all eager to share their knowledge. The Joomla! Extensions database is an invaluable resource on the hundreds of 3rd Party plugins available and includes feedback from other users and the editor to guide you to the best solutions for your needs.
151
A Useful websites Joomla! Links: The main Joomla! website. Check here for latest news, documentation and downloads http://www.joomla.org The Joomla! 3rd Party extensions website for add-on components and modules http://extensions.joomla.org The Joomla! Forum - an invaluable source of help and contacts http://forum.joomla.org The Joomla! User Manual - a reference manual for Joomla! It may be downloaded from: http://help.joomla.org
Joomla! Local PC server Joomla! Stand Alone Server ’JSAS’ - A complete tool for running Joomla! on your PC for building Joomla! sites without setting up web hosting first http://jsas.joomlasolutions.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. Here’s the link from the main Joomla! website. Also check out the commercial suppliers indicated below, most of them also offer several free templates to get you to their site! http://www.joomla.org/content/blogcategory/19/51/
152
A Useful websites Suppliers of Commercial Templates (a selection of recommended suppliers): www.joomlafactory.co.uk (UK supplier of UK oriented templates - owned by Learn Joomla!’s publishers) www.joomlashack.com - High quality templates from US supplier www.joomlart.com - Well designed, high quality templates www.rockettheme.com - High quality graphically rich templates with a US flavour www.cmslounge.com - Simple, clean designs from UK supplier www.joomladesigns.co.uk - UK supplier with a large catalogue of website designs
Joomla! Web Hosting (a small sample - try Googling for a full range): www.artonezero.com (UK supplier - Learn Joomla!’s publishers) www.hosting-netexplorers.co.uk - UK hosting http://joomla-hosting-directory.com/ - A directory of US Joomla! Hosting Companies
Suppliers of Commercial Support and Assistance for Joomla!: www.learnjoomla.co.uk (Yes, we offer commercial support!) www.artonezero.com (UK Developers of Joomla! websites - owned by Learn Joomla!’s publishers) www.joomlancers.com - Find a Joomla! freelancer to work on your project
153
B Open Source Software Tools & Tutorials Joomla! contains the basic tools you need to build your website, and it even includes a small WYSYWIG embedded HTML editor, Tiny MCE. In the commercial software tools arena, Adobe is the market leader in high quality products, including Photoshop. Illustrator and Dreamweaver, which will work very well with Joomla! However there are also some excellent open source tools, which can deliver the same results if you don’t want to spend a fortune on software. You should find the following useful:
1.Graphics Editors The GIMP - An Open Source Image Editor. www.gimp.org Inkscape - An Open Source Vector Graphics Editor. www.inkscape.org
2.HTML editor VNU - An Open Source HTML Editor. www.vnu.org
3.Development Tools and Test Tools I strongly recommend Firefox as your development browser of choice, because of it’s conformance to the W3C web standards and the number of excellent plug in tools available. It also has an excellent colour coded source code viewer built in. Firefox - www.mozilla.com/en-US/firefox/central/ Web Developer Plug in - http://chrispederick.com/work/webdeveloper/ W3C - www.wc3.org Bobby, test web content for quality, accessibility and privacy - webxact.watchfire.com
154
B Open Source Software Tools & Tutorials
Web Development Tutorials CSS Garden - www.csszengarden.com CSS from the ground up - http://www.wpdfd.com/editorial/basics/
Books Beginning CSS Web Development Author: Simon Collison. Publisher: Apress. ISBN: 1-59059-689-7
155
C Instructions for deleting all content and structure from a standard Joomla! install When you initially install Joomla!, unless you un tick the box marker ’Install sample content’ you will have a number or articles, sections, categories and menu structure installed. Before you can start building your site you will need to remove this content. Here are the steps required to delete all contents via the Administrator interface 1. Log in as the Super Administrator (admin) 2. Go to Content > All Content Items 3. Click the tick box in the items header bar (between # and Title). Ticks will appear in front of all the content items 4. Click the large button marked ’Trash’ on the navigator bar. All the items will be moved to the waste bin 5. Go to Content > Static Content Manager 6. Click the tick box in the items header bar (between # and Title). Ticks will appear in front of all the content items 7. Click the large button marked ’Trash’ on the navigator bar. All the items will be moved to the waste bin 8. Go to the Home Page and click the large button Marked Trash Manager. 9. Click the tick box in the items header bar (between # and Title). Ticks will appear in front of all the content items. Click the large button marked Delete. You get a warning explaining that this is not a reversible step. Press the delete button. All the text articles have now been permanently deleted. 10. Go to Content > Category Manager 11. Click the tick box in the items header bar (between # and Category Name). Ticks will appear in front of all the content items 12. Click the large button marked ’Trash’ on the navigator bar. 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). 13. Go to Content > Section Manager
156
C Instructions for deleting all content and structure from a standard Joomla! install 14. Click the tick box in the items header bar (between # and Section Name). Ticks will appear in front of all the sections 15. Click the large button marked ’Trash’ on the navigator bar. All the items will be moved to the waste bin 16. Go to Menu > Main Menu 17. Click the tick box in the items header bar (between # and Menu). Ticks will appear in front of all the content items 18. Click the large button marked ’Trash’ on the navigator bar. All the items will be moved to the waste bin 19. Repeat the above steps for Other Menu, Top Menu and User Menu to remove all the menus links 20. Go to Home > Trash Manager. Select the Menu Items tab. 21. Click the tick box in the items header bar (between # and Title). Ticks will appear in front of all the menu items. Click the large button marked Delete. You get a warning explaining that this is not a reversible step. Press the delete button. All the menu links have now been permanently deleted. 22. Go to Home > Media Manager. 23. Click on the Banners folder. For each item, click the trashcan icon to delete the banner. When finished click the icon to go up to the root image directory 24. Click on the Stories folder. For each item, click the trashcan icon to delete the directory or image. When finished click the icon to go up to the root image directory 25. Go to Components > Poll Manager. 26. Click the tick box in the items header bar (between # and Poll Title). Ticks will appear in front of all the polls 27. Click the large button marked ’Trash’ on the navigator bar. All the items will be moved to the waste bin 28. Go to Components > WebLinks > WebLink Items. 29. Click the tick box in the items header bar (between # and Title). Ticks will appear in front of all the link items 30. Click the large button marked ’Trash’ on the navigator bar. All the items will be moved to the waste bin 31. Go to Components > WebLinks > WebLink Categories. 32. Click the tick box in the items header bar (between # and Category). Ticks will appear in front of all the categories 33. Click the large button marked ’Trash’ on the navigator bar. All the items will be moved to the waste bin
157
C Instructions for deleting all content and structure from a standard Joomla! install 34. Go to Components > News Feeds > Manage News Feeds. 35. Click the tick box in the items header bar (between # and Newsfeed). Ticks will appear in front of all the newsfeed items 36. Click the large button marked ’Trash’ on the navigator bar. All the items will be moved to the waste bin 37. Go to Components > News Feeds > Newsfeed Categories. 38. Click the tick box in the items header bar (between # and Category). Ticks will appear in front of all the categories 39. Click the large button marked ’Trash’ on the navigator bar. All the items will be moved to the waste bin 40. Finally, you will need to switch off (un-published) the modules which will not be used in the initial working example. 41. Go to Modules > Site Modules 42. Select items 3,4,5,6,13,14,15,16,17,18,19,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, and you are ready to perform the Worked Example in Chapter 5.
158
D Basic End User Instructions Here are some instructions for end users which I have provided to clients with Joomla! websites. Feel free to adapt them top your needs if suitable. To enter a new News story, with an embargoed start time/date: 1. Go to Content Items Manager 2. Click New button 3. Select section ’news’ 4. Select category ’latest news’ 5. Enter article title phrase and chose/enter a short title alias word 6. Type or cut and paste in the paragraph to appear on the news summary page in the Intro Text box 7. Select all copy entered in this box and choose format ’paragraph’ 8. Now put the full copy excluding intro paragraph in Main Text box, again select all and format as paragraph 9. Enter date/time for news release to appear in Start Publishing box 10. Click the ’Published’ tick box 11. Click Save button
How do I upload new PDFs and change the link in the careers page. ? 1. Go to Media Manager from the home page 2. Open the PDF folder by clicking on it 3. Click the browse button to select and upload the PDF file 4. 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. Copy this link to the clipboard in its entirety/paste into notepad if required to keep it temporarily 6. Go back to the Main Menu 7. Select Content Items Manager
159
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 speciďŹ ed 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 ďŹ le, 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
E Glossary Joomla! Community produce third party Joomla! Components on a continuous basis. They are freely available to download from http://developer.Joomla!.org and a number of other web sites. See also Modules. Configuration File - -The configuration.php file, found in the root directory of your Joomla! Installation, contains global variable information specific to your own Joomla! Installation, such as database user name, admin password, etc. Content Item A Content Item is an item within the Section, Category hierarchy. See also Static Content Item Content Management System (CMS) Software for dynamically managing web site content directly on the server. Core Zip-file This contains the official standard Joomla! Installation. This may be downloaded from http://developer.Joomla.org and various other web sites. The Joomla! Core software contains some built-in CMTPs, but can be extended with third-party developers add-ons. Database An organized collection of records that you can search, sort, and analyze rapidly. Joomla! Is database-driven software, which means you can add, edit or delete content that is stored in Joomla!!s database. See also Record. Document Object Model (DOM) Form of representation of structured documents as an object-oriented model; the official World Wide Web Consortium (W3C) standard for representing structured documents in a platform- and languageneutral manner. DOM is also the basis for a wide range of application programming interfaces, some of which are standardized by the W3C. See also DOMIT. DOMIT An xml parser for PHP based on the Document Object Model (DOM) Level two specification. It is lightweight, fast, and written purely in PHP. See also DOM. Dynamic HTML (DHTML) An extension of HTML, enables, among other things, the inclusion of small animations and dynamic menus in Web pages. DHTML code makes use of style sheets and JavaScript. Editor - -User level within Joomla! With access only to Site (Front-end) authoring and editing functions. See also Author, Publisher, and Registered. Extensions Components, Modules, Templates, Plugins or Languages that extend your Joomla! installation. These elements can already be bundled into the core or they can be third-party elements.
163
E Glossary Front-end (Site Front-end) Web site that is seen by your visitors (or registered users). See also Back-end (Administrator Back-end). Frontpage Built-in Component, which shows all the published content items from your site marked with the parameter Show on Frontpage. You may configure the display of the Frontpage by editing the menu item associated with it, usually the Home menu item. The ordering of your Frontpage Content Items is done using the Frontpage Manager option under the Content menu option. 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), it will remain checked out, and thus un editable for all other users. Performing a Global Check-in will make those items available again. This option is only available in the Administrator (Back-end) or as a User Menu item for logged-in users. Group Collection of user levels, classified as either Site (Front-end) or Administrator (Backend). See also Administrator (Back-end), Site (Front-end). Image tag In HTML, images are defined with the <img> tag. See also Alt attribute. Intro Text Required field that must contain content when creating a new content item or editing an existing content item. If text has been added to the Main Text field and the content item is checked to Show on Frontpage, a Read More link will be shown, pointing to the full content item. Intro Text and Main Text are used in Content Items in the Section/Category hierarchy but not in Static Content Items. See also: Main Text HTML Short for Hyper Text Markup Language, the authoring language used to create documents on the World Wide Web. See also JavaScript, PHP Installers A menu option allowing access to Component, Language, Mambots, Module or Templates screens from which zip files can be uploaded for installation on your Joomla! Web site. This option is only available to Super Administrators. Item An Item is a discrete piece of content within the Joomla! Hierarchy. An item can be an article, a content category, a menu item or a link. JavaScript A common computer programming language developed by ECMA for use in web pages. JavaScript is relatively small and fast and is used for providing interactivity on web pages. See also HTML, PHP Joomla! - Joomla! Is one of the finest Open Source Web Content Management Systems available.
164
E Glossary Joomla! Administrator The Joomla! Administrator is an application for administering your Joomla! Web site directly on the server. It is sometimes also referred to as any of the Administrator, Backend, Admin Section, Administration Section, or the Control Panel. Joomla! User Joomla! Users are arranged in two groups with different levels of access control. Users with access to the Frontend include Anonymous, Registered, Author, Editor and Publisher. There are also three levels with access to the Backend, Manager, Administrator and Super Administrator. Mambot A Mambot is a small, task-oriented function that intercepts content before it is displayed and manipulates it in some way. Joomla! provides a number of Mambots in the core distribution, e.g. WYSIWYG editors, 3rd party component and module searchers, etc. Main Body Defined in the PHP code as <php mosMainBody(); >, this displays content from Joomla! Components, e.g. Calendar of events and content items etc. Main Text When creating or editing a Content Item, the Main Text box contains the text you do not want to show on the Front Page. It shows up after clicking the ’Read On’ link in the Frontend of your site. See also: Intro Text Manager A user level within Joomla!. Manager users have access to some Backend and all Frontend functions. See also Administrator, Super Administrator Mass Mail A core Joomla! component that allows E-mails to be sent to All User Groups, a single Group or a User Group and Child Groups. Media Files Media files such as .gif, .jpg, .png or .bmp files can be used in Content Items and are organized via the Media Manager. Media files can be included in Content Items via Image tab on Edit Content Item pages, WYSIWYG editors include media managers, third party components, etc. Modules Modules extend the capabilities of Joomla! Giving the software new functionality. Modules are small content items that can be displayed anywhere that your template allows it to be displayed. Modules are very easy to install in the Admin Section. Joomla! modules may include: Main Menu, Top menu, Template Chooser, Polls, Newsflash, Hit Counter, etc. Members of the Joomla! Community produce Joomla! Modules on a continuous basis. They are freely available on http://developer.Joomla.org for download. An example of a module PHP code is <php mosLoadModules ( module position ); >. See also Module Position
165
E Glossary Module Position Names for the placement of modules within a template. There are 27 pre named positions, e.g. Left, right, top, bottom and 23 author-defined positions. Module positions are not confined by their name. Thus, the left module position, coded as <php mosLoadModules ( left ); > may be placed anywhere in the template. See also Modules Newsfeed A Newsfeed is a way of sharing content between different sites. The types of Newsfeeds currently available to display and produce (RSS versions, Atom, etc). The code is produced by the DOMIT parser. This sharing method is meant for creating a news introduction in the way the provider wants it and it normally has a link to the providers web site. Joomla! Offers you the possibility to both offer and display Newsfeeds. Open Source (OS) Open Source is a general term describing several parts of the Free Software Licence movement. All the source code for Joomla! Is open source and is readable and changeable by any user. 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. PHP can be written as scripts that reside on the server and may produce HTML output that downloads to the web browser. Alternatively, PHP can be embedded within HTML pages that are then saved with a .php file extension. See also HTML, JavaScript patTemplate patTemplate is a system within Joomla! To help create Joomla! Site Templates. Parameters Parameters can be used to alter the presentation of specific items, menus or modules. Polls A core Joomla! Component that allows a poll to be displayed on your Joomla! Web site. You can define the Poll title, the time delay in seconds (Lag) between votes, up to 12 vote options and on which page(s) it should be displayed. 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. Projects Projects can be components, modules, templates, mambots and scripts that are freely set up and managed by their authors at /http://developer.Joomla.org. Public Backend See Backend Public Frontend See Frontend Publish(ed) This defines the state of various parts of your Joomla! Installation. For example, installed elements will only display on your Web site if they are published. Content items can be managed with a start and end date of publishing.
166
E Glossary See also Unpublish(ed) Publisher A user level within Joomla! Publisher users only have access to Frontend functions. See also Author, Editor and Registered Record A database record is a description of a single item as stored in a database. In a relational database, each row of each table is a database record. See also Database Registered User A user level within Joomla! Registered users only have access to Frontend functions. See also Author, Editor and Publisher Server-side scripting Programs that are interpreted by the web server when a page is requested. Scripts have special extensions such as .php, .asp, and .jsp. When the server finishes processing a script, it usually sends a HTML page that can be viewed in any web browser. 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. See also Content Item Section A Section is a collection of Categories that are related in some way. It is part of the Section/Category/Content Item hierarchy. A section might be called Transport, categories in this section might be Boats, Cars and Airplanes. See also Category. Site The Joomla! Site is the Web site displayed to your visitors or users, containing all the content added in the Admin Section. It is sometime referred to as the Frontend. Site Templates Site Templates define the layout of your Joomla! Web sites Frontend. See also Admin Templates and Templates Super Administrator User level within Joomla! With access to all Administrator (Back-end) and Site (Front-end) functions. See also Administrator, Manager. Syndication A process, using a Newsfeed, by which a web site is able to share information, such as Articles, with other web sites. Templates Defining the layout of your Joomla! Web site, templates can be created for the Site (Front-end) of your site (called Site Templates), as well as for the Administrator (Backend) called Administrator Templates. You can assign different templates to various pages of your web site. See also Administrator Templates, patTemplate and Site Templates.
167
E Glossary Title Name given to an Article, which may be displayed above it in the Site (Frontend). Title Alias Alternative title for Articles, used by SEF scripts and dynamic title/meta scripts. Unpublish(ed) State of various parts of your Joomla! Installation, indicating whether that particular piece is visible on the site or operational (very much like an onoff switch). For example, installed elements will not be displayed on your web site if they are unpublished. Content items can be managed with a start and end date of publishing. See also Publish(ed). Web Links- Core component that manages and displays hyperlinks to other web sites, organized into categories. Workspace Section of the Joomla! Admin where the business of conďŹ guration and content publishing takes place. The workspace dynamically updates as you select tools and menu options. The workspace can include: HTML editor, article and link management and several other features. Wrapper Built-in Joomla! Component, used to pull in and display any URL within your web site. This can be used to wrap an application (like a forum or a gallery), individual pages, or even an entire web site. An alternative name is an Iframe. 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.
168
Index 777, 28
date, 147 default template, 40 Demo, 21 dial-up, 23 DocMan, 100 document management, 100
Acajoom, 103 Access level, 63 Adding New Content, 45 Adding pictures, 52 Administrator Interface, 18, 39 Adsense, 116 Apache, 22 Artbanners, 114 Artonezero, 2, 11 author, 11
e-mail newsletter, 103 Easybook, 113 Editing, 64 editing, 64 enquiry form, 114 extensions, 90
back end, 18 Backup, 148 banner, 114 Banners, 82 banners, 114 benefits, 13 Blog, 113 Blog view, 72 Blogg-X, 115
Fantastico, 29 favicon.ico, 147 file permissions, 28 forms, 114 forum, 97 free, 13 Front end, 18 Front Page, 68
Categories, 19 Category Manager, 44 CMS, 16 column, text within, 146 Community Builder, 112 Components, 19 configuration.php, 28 Content Item, 115 Conventions, 10 Copyright, 2 cPanel, 28 credit card, 95 CSS, 130 Customer editing, 65
GIMP, 154 Global Settings, 43 GPL, 13 Guest book, 113 Home, 48 Horizontal Menu, 52 Hosting, Joomla, 95 ID, 79 installation, 26 Joomla Stand Alone Server, 22 JoomlaBoard, 98 JSAS, 23
169
Index key steps, 34
Sample Data, 32 Search, 56 search button, 148 Search Engine Optimisation, 116 search term, highlight, 148 Sections, 19 SEF, 116 SEO, 116 Shell access, 28 shop, 91 shopping cart, 94 Site OfďŹ&#x201A;ine, 43 site ofďŹ&#x201A;ine, graphic, 147 Site Session Lifetime, 58 splash page, 149 still image, display, 147 strftime, 78 Sub menus, 81 Summary Views, 72 Syndication, 88
links, 55 Login Form, 61 MamBlog, 113 Mambots, 19 Media Manager, 52 Menu Manager, 48 Menu, Extended, 107 menu, sub, 81 Menus, 78 module, 41 Module Manager, 42 Modules, 19 mosforms, 114 move, site, 147 Mycontent, 116 MySQL, 22, 29, 114 News, Latest, 70 Newsfeed component, 86 Newsfeeds, 85 Newsletter, email, 103 NoChex, 96
Table view, 76 Template, 19, 51 Template Manager, 40 template, building, 135 Template, installing, 121 Trash Manager, 48 Troubleshooting, Installation, 32
OpenSEF, 116 Parent, 55 password, 149 password, Administrator, 25 payments, 95 Paypal, 96 PDF, 148 PHP, 22 PHP, template functions, 125 pictures, 52 place content, column, 115 Polls, 84 Popular, 71 positions, 119, 146
Unlock, item, 146 User Manual, 37 User Menu, 64 User, new, 59 Users, Administrative, 60 Users, Self Registered, 60 Views, 72 virtual drive, 24 VirtueMart, 91 Web Developer, 154 Web Links, 55 Weblog, 113 Wordpress, 113
RSS, 87, 88 sample content, 43 sample content, deleting, 146
Zoo, AnyTown, 37
170