8/12/2019 Angie Book

1/6

Developing Joomla! TemplatesBarrierfree and attractive designs from the draftto the final implementationBy Angie RadtkeAddison-Wesley, an impr int o f Pearson Germany

ISBN: 978-3-8273-2846-5, 330 pp., pub date: 16 thJune 2011

Contents

About me ............................................................................................................... 14Acknowledgements .............................................................................................. 15

Introduct ion .................................................................................................... 19What you can expect ..................................................................................................................20What you should get ready for .................................................................................................... 20How you should prepare yourself ............................................................................................... 21

1 The Basis: the Content and Visual Concept ....................................... 231.1 It starts with the structure ................................................................................................. 23Recognising user expectations ................................................................................................... 241.2 Layout ...............................................................................................................................25Page structure structuring content visually .............................................................................. 25Design on the raster the grids ................................................................................................. 25Implementation ...........................................................................................................................27Graphic layout time for the appearance .................................................................................. 31Fixed and fluid layouts ................................................................................................................41

2 Barr ier Freedom what is it actually? ................................................. 43

2.1 The basic legal elements .................................................................................................. 442.2 Barrier freedom who is it actually for? ...........................................................................45Seeing disabilities .......................................................................................................................45Technical support ....................................................................................................................... 46What can we do? ........................................................................................................................ 542.3 Motoric disabilities ............................................................................................................ 56Initial position and findings ......................................................................................................... 56Technical support ....................................................................................................................... 56What can we do? ........................................................................................................................ 562.4 The deaf ...........................................................................................................................57Initial position and findings ......................................................................................................... 57Technical support ....................................................................................................................... 57What can we do? ........................................................................................................................ 57

2.5 Learning disabilities .......................................................................................................... 58Initial position and findings ......................................................................................................... 58What can we do? ........................................................................................................................ 592.6 50+ group .........................................................................................................................59Initial position and findings ......................................................................................................... 59What can we do? ........................................................................................................................ 60

3 CSS and HTML gett ing the Basic Structure into Shape ..................613.1 A little about the history .................................................................................................... 61

8/12/2019 Angie Book

2/6

8/12/2019 Angie Book

3/6

7 Lets get down to Details: a First Look at the Templates .................1117.1 Atomic .............................................................................................................................1117.2 Beez 2.0/Beez ................................................................................................................1127.3 Managing templates in the backend ..............................................................................1127.4 The template manager: styles ........................................................................................1127.5 The template manager: templates .................................................................................. 115The template preview ...............................................................................................................115Template details .......................................................................................................................118Installing templates ...................................................................................................................118

8 The Structure Makes it Poss ible ........................................................ 1218.1 The heart of the matter, the index.php ........................................................................... 1228.2 CSS ................................................................................................................................1228.3 templates_details.xml ..................................................................................................... 1228.4 The images folder ........................................................................................................... 1238.5 The HTML folder .............................................................................................................123

8.6 JavaScript folder .............................................................................................................1238.7 Language ........................................................................................................................1238.8 cmponent.php .................................................................................................................1238.9 error.php .........................................................................................................................1248.10 template_thumbnail.png / template_preview.png ...........................................................1248.11 Favicon.ico .....................................................................................................................1248.12 Fonts ...............................................................................................................................1258.13 The index.html ................................................................................................................125

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

10 The XML File and the Template Parameters ..................................... 13710.1 templatedetails.xml: general ...........................................................................................137Customising template names ................................................................................................... 139Integrating files and folders ...................................................................................................... 142

Defining module positions ........................................................................................................143The language files ....................................................................................................................14310.2 Template parameters: config ..........................................................................................144Adding your own form fields and accessing them ....................................................................147Adding form elements ...............................................................................................................149

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

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

8/12/2019 Angie Book

4/6

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

12 Modules Dynamics in the Presentation ..........................................15912.1 Jdoc:include ...................................................................................................................159The name attribute ....................................................................................................................160The style attribute and the standard styles ............................................................................... 163

Beez styles ...............................................................................................................................16512.2 Integrating the module flexibly into the layout ................................................................ 168Adapting ID and CSS ................................................................................................................ 17012.3 The module class suffix ..................................................................................................17112.4 The menu module ..........................................................................................................175Horizontal navigation with subnavigation ................................................................................. 176Folded out menu ....................................................................................................................... 178Styling individual menu points with the help of innate classes .................................................178Link image ................................................................................................................................179Allocating individual link titles ................................................................................................... 180Conclusion ................................................................................................................................180

13 Designing Standard Output Individual ly ........................................... 18113.1 Inspecting standard output .............................................................................................18113.2 The page class suffix ...................................................................................................... 18213.3 Template overrides ......................................................................................................... 18513.4 Model view controller ...................................................................................................... 186Storing output in the template ...................................................................................................188Adapting output .........................................................................................................................189New a view with different output ............................................................................................ 190

14 The System Template: Adapting and Modifying Output .................. 19514.1 System messages .......................................................................................................... 195Integrating reports into the index.php ....................................................................................... 198Linguistic adaptations ............................................................................................................... 198

Error reports ..............................................................................................................................19814.2 Exchanging system graphics .......................................................................................... 20014.3 component.php and how to do magic with it ..................................................................201Component view with search engine friendly URLs .................................................................203The component.php as the basis for your own views ..............................................................20414.4 offline.php .......................................................................................................................205

15 What else is Important ........................................................................ 20715.1 When the reading direction changes: RTL .....................................................................207Integrating RTL-CSS ................................................................................................................208Testing RTL ..............................................................................................................................20915.2 PHP browser switches ...................................................................................................209

15.3 PHP tricks .......................................................................................................................211Structuring the start page differently - access to the views ......................................................211Publishing the correct date with PHP .......................................................................................212

8/12/2019 Angie Book

5/6

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

16.1 Beez 2.0 and Beez 5.0 ................................................................................................... 215Barrier freedom in general ........................................................................................................215Beez 2.0: selectable design ...................................................................................................... 219

Position of the navigation column ............................................................................................. 219JavaScript and WAI ARIA ........................................................................................................ 221Beez 5.0: using HTML5 ............................................................................................................22816.2 Atomic .............................................................................................................................230

17 Pract ical Implementation .................................................................... 23317.1 The concept of Beez templates ......................................................................................234

18 Step by Step to a New Layout ............................................................23918.1 Step 1: positioning the navigation ..................................................................................24018.2 Step 2: filling the centre column with content ................................................................. 24018.3 Step 3: adjusting the number of articles .........................................................................24518.4 Designing the header visually ........................................................................................ 24518.5 Step 5: integrating the module position for the start picture ........................................... 25618.6 Step 6: customising footers ............................................................................................ 26018.7 Step 7: adjusting content minimum height ..................................................................... 26118.8 The first tests .................................................................................................................. 26218.9 Step 9: customising typography .....................................................................................26518.10 Step 10: Formatting module titles ................................................................................... 26718.11 Step 11: providing start page article with a background picture .................................... 26918.12 Subsequent tests ............................................................................................................273

19 Integrating Your Own Features .......................................................... 27719.1 The start picture a background image? .......................................................................279Editing module content .............................................................................................................280

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

20 Final Tasks: fine tuning and creating an installable zip archive ......29120.1 Fine tuning ......................................................................................................................291Creating a stylesheet for printing .............................................................................................. 291Adapting error.php and offline.php ........................................................................................... 292RTL view ...................................................................................................................................292Removing unnecessary data .................................................................................................... 292Creating preview images ..........................................................................................................292Changing Favicons ...................................................................................................................293Optimising index.php ................................................................................................................29320.2 Adapting the XML file .....................................................................................................29520.3 Creating a zip archive ..................................................................................................... 296

8/12/2019 Angie Book

6/6

Appendix ...................................................................................................... 297Useful links ...............................................................................................................................297Joomla! .....................................................................................................................................297Support technologies ................................................................................................................297CSS .........................................................................................................................................297

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

21 Index ...................................................................................................... 320