Developing Joomla!

Templates
Barrierfree and attractive designs from the draft
to the final implementation
By Angie Radtke
Addison-Wesley, an imprint of Pearson Germany
ISBN: 978-3-8273-2846-5, 330 pp., pub date: 16th June 2011

Contents
About me ............................................................................................................... 14
Acknowledgements .............................................................................................. 15
Introduction .................................................................................................... 19
What you can expect .................................................................................................................. 20
What you should get ready for .................................................................................................... 20
How you should prepare yourself ............................................................................................... 21

The Basis: the Content and Visual Concept ....................................... 23

1.1 It starts with the structure ................................................................................................. 23

Recognising user expectations ................................................................................................... 24
1.2 Layout ............................................................................................................................... 25
Page structure structuring content visually .............................................................................. 25
Design on the raster the grids ................................................................................................. 25
Implementation ........................................................................................................................... 27
Graphic layout time for the appearance .................................................................................. 31
Fixed and fluid layouts ................................................................................................................ 41

Barrier Freedom what is it actually? ................................................. 43

2.1 The basic legal elements .................................................................................................. 44

2.2 Barrier freedom who is it actually for? ........................................................................... 45
Seeing disabilities ....................................................................................................................... 45
Technical support ....................................................................................................................... 46
What can we do? ........................................................................................................................ 54
2.3 Motoric disabilities ............................................................................................................ 56
Initial position and findings ......................................................................................................... 56
Technical support ....................................................................................................................... 56
What can we do? ........................................................................................................................ 56
2.4 The deaf ........................................................................................................................... 57
Initial position and findings ......................................................................................................... 57
Technical support ....................................................................................................................... 57
What can we do? ........................................................................................................................ 57
2.5 Learning disabilities .......................................................................................................... 58
Initial position and findings ......................................................................................................... 58
What can we do? ........................................................................................................................ 59
2.6 50+ group ......................................................................................................................... 59
Initial position and findings ......................................................................................................... 59
What can we do? ........................................................................................................................ 60

CSS and HTML getting the Basic Structure into Shape .................. 61

3.1

A little about the history .................................................................................................... 61

3.2 Which version of HTML should I use? ............................................................................. 62

3.3 HTML basic structure ....................................................................................................... 64
3.4 A short introduction to CSS .............................................................................................. 64
3.5 Integrating the CSS statements ....................................................................................... 65
External integration as a file or directly in the document head ................................................... 65
Inline styles ................................................................................................................................. 66
CSS selectors ............................................................................................................................. 66
Element selectors ....................................................................................................................... 66
Reusable: CSS classes .............................................................................................................. 67
ID selectors ................................................................................................................................. 70
Context selectors: ....................................................................................................................... 71
Child selectors ............................................................................................................................ 71
Universal selectors ..................................................................................................................... 72
Pseudo class selectors ............................................................................................................... 72
Attribute selectors ....................................................................................................................... 73
3.6 Inheritance ........................................................................................................................ 74
3.7 Positioning and box model ............................................................................................... 74
3.8 CSS hacks and browser problems ................................................................................... 77
Conditional comments ................................................................................................................ 77
The *-hack .................................................................................................................................. 78
Yet again the Internet Explorer hasLayout .............................................................................. 79
3.9 CSS tuning ........................................................................................................................ 80

PHP and Joomla! ................................................................................... 81

4.1 Integrating PHP ................................................................................................................ 81

4.2 Commentaries .................................................................................................................. 82
4.3 echo .................................................................................................................................. 83
Output variable values ................................................................................................................ 83
4.4 Conditions: if statements .................................................................................................. 84
else statements ........................................................................................................................... 85
4.5 For professionals: accessing objects and their values ..................................................... 85
GET techniques .......................................................................................................................... 87

JavaScript .............................................................................................. 89

5.1
5.2
5.3
5.4
5.5
5.6

Why MooTools? ................................................................................................................ 90

MooTools quick start dollar functions and events ......................................................... 91
The MooTools core in action ............................................................................................ 93
The class system .............................................................................................................. 95
The MooTools principle .................................................................................................... 98
Additional links .................................................................................................................. 99

Tools ..................................................................................................... 101

6.1 HTML validator and CSS validator ................................................................................. 101

6.2 Web developer toolbar ................................................................................................... 102
Further features of the web developer toolbar ......................................................................... 103
6.3 Firebug ........................................................................................................................... 103
6.4 Tools to help barrier freedom ......................................................................................... 104
Colour contrast analyser ........................................................................................................... 104
Accessibility extensions for Internet Explorer and Mozilla/Firefox ...................................... 105
Wave ......................................................................................................................................... 107
WCAG 2 checker from the University of Toronto ..................................................................... 107

Lets get down to Details: a First Look at the Templates ................. 111

7.1 Atomic ............................................................................................................................. 111

7.2 Beez 2.0/Beez ................................................................................................................ 112
7.3 Managing templates in the backend .............................................................................. 112
7.4 The template manager: styles ........................................................................................ 112
7.5 The template manager: templates .................................................................................. 115
The template preview ............................................................................................................... 115
Template details ....................................................................................................................... 118
Installing templates ................................................................................................................... 118

The Structure Makes it Possible ........................................................ 121

8.1
8.2
8.3
8.4
8.5
8.6
8.7
8.8
8.9
8.10
8.11
8.12
8.13

The heart of the matter, the index.php ........................................................................... 122

CSS ................................................................................................................................ 122
templates_details.xml ..................................................................................................... 122
The images folder ........................................................................................................... 123
The HTML folder ............................................................................................................. 123
JavaScript folder ............................................................................................................. 123
Language ........................................................................................................................ 123
cmponent.php ................................................................................................................. 123
error.php ......................................................................................................................... 124
template_thumbnail.png / template_preview.png ........................................................... 124
Favicon.ico ..................................................................................................................... 124
Fonts ............................................................................................................................... 125
The index.html ................................................................................................................ 125

The index.php: the Heart of the Matter .............................................. 127

9.1 The document head ....................................................................................................... 127

Safety first: security .................................................................................................................. 127
Which document type? ............................................................................................................. 127
HTML language indicator ......................................................................................................... 128
Jdoc: include type:head ............................................................................................................ 128
Integrating CSS and JavaScript ............................................................................................... 132
Integrating MooTools ................................................................................................................ 133
Reading direction from right to left ............................................................................................ 133
And off we go: the body ............................................................................................................ 133
Error reports and messages ..................................................................................................... 134

10

The XML File and the Template Parameters ..................................... 137

10.1 templatedetails.xml: general ........................................................................................... 137

Customising template names ................................................................................................... 139
Integrating files and folders ...................................................................................................... 142
Defining module positions ........................................................................................................ 143
The language files .................................................................................................................... 143
10.2 Template parameters: config .......................................................................................... 144
Adding your own form fields and accessing them .................................................................... 147
Adding form elements ............................................................................................................... 149

11 The Language Files ................................................................................ 155

11.1 Adding your own languages ........................................................................................... 156
11.2 Joomla! conventions for the use of language strings ..................................................... 180

11.3 Language files in the index.php using the example of jump labels ................................ 180

12

Modules Dynamics in the Presentation .......................................... 159

12.1 Jdoc:include ................................................................................................................... 159

The name attribute .................................................................................................................... 160
The style attribute and the standard styles ............................................................................... 163
Beez styles ............................................................................................................................... 165
12.2 Integrating the module flexibly into the layout ................................................................ 168
Adapting ID and CSS ................................................................................................................ 170
12.3 The module class suffix .................................................................................................. 171
12.4 The menu module .......................................................................................................... 175
Horizontal navigation with subnavigation ................................................................................. 176
Folded out menu ....................................................................................................................... 178
Styling individual menu points with the help of innate classes ................................................. 178
Link image ................................................................................................................................ 179
Allocating individual link titles ................................................................................................... 180
Conclusion ................................................................................................................................ 180

13

Designing Standard Output Individually ........................................... 181

13.1 Inspecting standard output ............................................................................................. 181

13.2 The page class suffix ...................................................................................................... 182
13.3 Template overrides ......................................................................................................... 185
13.4 Model view controller ...................................................................................................... 186
Storing output in the template ................................................................................................... 188
Adapting output ......................................................................................................................... 189
New a view with different output ............................................................................................ 190

14

The System Template: Adapting and Modifying Output .................. 195

14.1 System messages .......................................................................................................... 195

Integrating reports into the index.php ....................................................................................... 198
Linguistic adaptations ............................................................................................................... 198
Error reports .............................................................................................................................. 198
14.2 Exchanging system graphics .......................................................................................... 200
14.3 component.php and how to do magic with it .................................................................. 201
Component view with search engine friendly URLs ................................................................. 203
The component.php as the basis for your own views .............................................................. 204
14.4 offline.php ....................................................................................................................... 205

15

What else is Important ........................................................................ 207

15.1 When the reading direction changes: RTL ..................................................................... 207

Integrating RTL-CSS ................................................................................................................ 208
Testing RTL .............................................................................................................................. 209
15.2 PHP browser switches ................................................................................................... 209
15.3 PHP tricks ....................................................................................................................... 211
Structuring the start page differently - access to the views ...................................................... 211
Publishing the correct date with PHP ....................................................................................... 212

16 The Standard Templates and their Features ........................................ 215

16.1 Beez 2.0 and Beez 5.0 ................................................................................................... 215
Barrier freedom in general ........................................................................................................ 215
Beez 2.0: selectable design ...................................................................................................... 219
Position of the navigation column ............................................................................................. 219
JavaScript and WAI ARIA ........................................................................................................ 221
Beez 5.0: using HTML5 ............................................................................................................ 228
16.2 Atomic ............................................................................................................................. 230

17

Practical Implementation .................................................................... 233

17.1 The concept of Beez templates ...................................................................................... 234

18

Step by Step to a New Layout ............................................................ 239

18.1
18.2
18.3
18.4
18.5
18.6
18.7
18.8
18.9
18.10
18.11
18.12

Step 1: positioning the navigation .................................................................................. 240

Step 2: filling the centre column with content ................................................................. 240
Step 3: adjusting the number of articles ......................................................................... 245
Designing the header visually ........................................................................................ 245
Step 5: integrating the module position for the start picture ........................................... 256
Step 6: customising footers ............................................................................................ 260
Step 7: adjusting content minimum height ..................................................................... 261
The first tests .................................................................................................................. 262
Step 9: customising typography ..................................................................................... 265
Step 10: Formatting module titles ................................................................................... 267
Step 11: providing start page article with a background picture .................................... 269
Subsequent tests ............................................................................................................ 273

19

Integrating Your Own Features .......................................................... 277

19.1 The start picture a background image? ....................................................................... 279

Editing module content ............................................................................................................. 280
Adapting CSS ........................................................................................................................... 280
Background image in own HTML module ................................................................................. 282
Browser check .......................................................................................................................... 282
19.2 Using HTML5 effectively ................................................................................................ 283
Integrating HTML5 overrides .................................................................................................... 285
Adapting index.php ................................................................................................................... 286
Adapting CSS ........................................................................................................................... 289

20

Final Tasks: fine tuning and creating an installable zip archive ...... 291

20.1 Fine tuning ...................................................................................................................... 291

Creating a stylesheet for printing .............................................................................................. 291
Adapting error.php and offline.php ........................................................................................... 292
RTL view ................................................................................................................................... 292
Removing unnecessary data .................................................................................................... 292
Creating preview images .......................................................................................................... 292
Changing Favicons ................................................................................................................... 293
Optimising index.php ................................................................................................................ 293
20.2 Adapting the XML file ..................................................................................................... 295
20.3 Creating a zip archive ..................................................................................................... 296

Appendix ...................................................................................................... 297

Useful links ............................................................................................................................... 297
Joomla! ..................................................................................................................................... 297
Support technologies ................................................................................................................ 297
CSS ......................................................................................................................................... 297
HTML5 ...................................................................................................................................... 298
Design ....................................................................................................................................... 299
Typography ............................................................................................................................... 299
Colours ..................................................................................................................................... 299
Icons ......................................................................................................................................... 299
JavaScript ................................................................................................................................. 300
WAI ARIA .................................................................................................................................. 300
Checker tools ............................................................................................................................ 301
Helpful functions ....................................................................................................................... 302
CSS classes used and their elements ...................................................................................... 302
Templates ................................................................................................................................. 305
Components ............................................................................................................................. 330

21

Index...................................................................................................... 320