Joomla! Templates

by Angie Radtke

Overview

Master All Facets of Joomla! Site Customization with Templates

 

Now, for the first time, there’s a complete, authorized guide to template design, development, and customization with Joomla!. Packed with examples, this clear, concise, practical text covers everything from beginning-level skills to power techniques–even creating new HTML5-native mobile views, today’s most exciting new Joomla! capability.

 

Internationally renowned Joomla! expert Angie Radtke brings together essential knowledge about usability, CSS, information architecture, PHP, JavaScript, accessibility, HTML5, and more. Using concrete examples, Radtke guides you through applying these technologies and best practices to construct and deploy world-class site templates. You’ll walk through every key technical option, fully understanding the internal interactions that control Joomla! template behavior. Radtke concludes by walking you step-by-step through a complete workshop project: transforming a template created in Photoshop into a working Joomla! template.

 

Joomla!^® Templates will be invaluable for every professional web designer and developer who uses Joomla!, for advanced nonprofessional users, and for less experienced users who want to customize their own sites instead of paying others to do it. This title’s concise, easy-to-use coverage includes

• Using Joomla! templates to customize any website to your exact requirements
• Learning how Joomla! templates are structured and how they behave
• Quickly changing a Joomla! site’s look and feel
• Making sure your templates fully support accessibility and standards
• Getting your basic template structure into shape with CSS and HTML
• Designing responsive Joomla! templates and sites
• Supercharging your templates with JavaScript
• Analyzing HTML, CSS, and accessibility
• Integrating template components, including index.php, the XML file, template parameters, and language files
• Adapting and modifying output via the system template
• Mastering advanced template customization

 

Product Details

ISBN-13:	9780133011579
Publisher:	Pearson Education
Publication date:	07/23/2012
Series:	Joomla! Press
Sold by:	Barnes & Noble
Format:	eBook
Pages:	368
File size:	44 MB
Note:	This product may take a few minutes to download.

About the Author

Angie Radtke is a member of Joomla!’s design and accessibility team. An accomplished web designer, she developed the Beez 2.0 and Beez 5 templates for barrier-free design that are now included in the Joomla! package. Her consultancy, Der Auftritt, specializes in creating targeted communication solutions for web and print. Through her work, she has repeatedly proven that appealing designs, accessibility, and content management systems can work together seamlessly. Radtke’s web design for the German Foundation Against Global Hunger and Poverty has been nominated for the DMMV’s Multimedia Award for Barrier-Free Web Design.

Table of Contents

Introduction          xvii

Acknowledgments        xxi

About the Author        xxiii

 

Chapter 1: The Basis: Designing the Content and Visual Concept         1

It All Starts with the Structure   1

Recognizing User Expectations   2

Page Layout–Visually Structuring Content   3

The Graphical Layout–Visual Appearance Matters   7

Fixed and Fluid Layouts   16

 

Chapter 2: Accessibility–What Is It?         19

The Legal Basis   20

Visual Impairment   21

Motor Disabilities   29

Deafness   31

Learning Disabilities   31

Seniors 33

 

Chapter 3: CSS and HTML–Getting the Basic Structure into Shape         35

A Few Words about the History   35

Which Version of HTML Should I Use?   36

The Basic HTML Structure   38

A Brief Introduction to CSS   38

Using Multiple Classes Together   44

Positioning and Box Model   47

CSS Hacks and Browser Problems   52

CSS Tuning   54

CSS3–A Brief Overview   55

Vendor Prefixes   55

Overview of the Three Most Useful CSS Statements   56

 

Chapter 4: Responsive Web Design         59

But How Does It Work?   59

CSS3 Media Queries   60

Adapting Graphics and Videos   61

Using HTML5 Apps   62

 

Chapter 5: PHP and Joomla!         63

Integrating PHP   63

Comments   65

echo   65

Conditions: if Statements   66

For Pros: Accessing Objects and Their Values   68

 

Chapter 6: MooTools         71

Why MooTools?   72

MooTools Quick Start–Dollar Functions and Events   73

The MooTools Core in Action   74

The Class System   76

The MooTools Principle   79

Related Links   81

 

Chapter 7: Tools         83

HTML Validator and CSS Validator   83

Web Developer Toolbar   84

Firebug   85

Helpful Tools for Accessibility   86

Accessibility Extensions for Internet Explorer and Mozilla Firefox   87

 

Chapter 8: Now for the Details: A First Look at Templates         91

Atomic   91

beez_20 and beez5   91

The Template Manager: Styles   92

The Template Manager: Templates   94

Installing Templates   99

 

Chapter 9: The Underlying Structure         101

The Heart of the Matter, the index.php   102

The css Folder   102

templateDetails.xml   103

The images Folder   103

The html Folder   103

The javascript Folder   103

The language Folder   103

component.php   103

error.php   104

template_thumbnail.png and template_preview.png   104

favicon.ico   104

The fonts Folder   105

The index.html   105

 

Chapter 10: The index.php: The Heart of the Matter         107

The Document Head   107

And Off We Go: The Body   114

 

Chapter 11: The XML File and the Template Parameters         117

templateDetails.xml: General Information   117

Template Parameters: config   124

 

Chapter 12: The Language Files         135

How Joomla! Translates Constants to Multiple Languages   135

Adding Your Own Languages   136

Joomla! Conventions for Using Language Strings   137

Language Files in index.php Using the Examples of Skip Links   137

 

Chapter 13: Modules–Dynamics within the Presentation         139

jdoc:include   139

Integrating the Module Flexibly into the Layout   149

The Module Class Suffix   151

The Menu Module   155

 

Chapter 14: Designing Default Output Individually          161

Inspecting the Default Output   161

The Page Class Suffix   162

Template Overrides   165

Model-View-Controller   166

 

Chapter 15: The System Template: Adapting and Modifying Output          173

System Notices   173

Replacing System Graphics   179

component.php and How to Do Magic with It   179

offline.php   183

 

Chapter 16: Advanced Template Customization Tricks          185

When the Reading Direction Changes: Right-to-Left Languages   185

PHP Browser Switch   187

PHP Tricks   189

 

Chapter 17: The Default Templates and Their Features         193

beez_20 and beez5 Templates   193

Atomic Template   207

 

Chapter 18: Practical Implementation         211

Concept of the Beez Templates   212

 

Chapter 19: Step by Step to a New Layout          217

Step 1: Positioning the Navigation   218

Step 2: Filling the Center Column with Content   218

Step 3: Adjusting the Number of Articles   223

Step 4: Visually Designing the Header   223

Step 5: Integrating the Module Position for the Header Picture   235

Step 6: Adapting the Footer   239

Step 7: Adapting the Minimum Height of Content   240

Step 8: The First Tests   241

Step 9: Customizing Typography   245

Step 10: Formatting Module Headings   246

Step 11: Assigning the Background Image to the Homepage Article   249

Step 12: Final Tests   253

 

Chapter 20: Integrating Custom Features         259

The Header Image–A Background Image?   259

Using HTML5 Effectively   265

 

Chapter 21: Final Tasks: Fine-Tuning and Creating an Installable Zip Archive         273

Fine-Tuning   273

Adapting the XML File   277

Creating a Zip Archive   278

 

Appendix          279

Useful Links   279

Helpful Functions   282

CSS Classes Used and Their Elements   283

 

Index        315