Contents
1 The Basis: Designing the Content and Visual Concept
It All Starts with the Structure
Page Layout—Visually Structuring Content
The Graphical Layout—Visual Appearance Matters
Designing the Navigation—The Core of the Design
Content Design—To Make It Fun to Read
Font Design—We Do Not Have Many Options
Initial Situation and Findings
Initial Situation and Findings
Initial Situation and Findings
Initial Situation and Findings
Initial Situation and Findings
3 CSS and HTML—Getting the Basic Structure into Shape
Which Version of HTML Should I Use?
Using Multiple Classes Together
CSS Hacks and Browser Problems
Internet Explorer Again: hasLayout
Overview of the Three Most Useful CSS Statements
Option 1—Integration into the Main Stylesheet
Option 2—Integrating Separate Stylesheets
For Pros: Accessing Objects and Their Values
MooTools Quick Start—Dollar Functions and Events
HTML Validator and CSS Validator
Helpful Tools for Accessibility
Accessibility Extensions for Internet Explorer and Mozilla Firefox
WCAG 2 Checker of the University of Toronto
8 Now for the Details: A First Look at Templates
The Template Manager: Templates
The Heart of the Matter, the index.php
template_thumbnail.png and template_preview.png
10 The index.php: The Heart of the Matter
Integrating CSS and JavaScript
Reading Direction from Right to Left
11 The XML File and the Template Parameters
templateDetails.xml: General Information
Adding Your Own Form Fields and Accessing Them
How Joomla! Translates Constants to Multiple Languages
Joomla! Conventions for Using Language Strings
Language Files in index.php Using the Examples of Skip Links
13 Modules—Dynamics within the Presentation
The style Attribute and the Default Styles
Integrating the Module Flexibly into the Layout
Horizontal Navigation with Subnavigation
Styling Individual Menu Items via Individual Classes
Allocating Individual Link Titles
14 Designing Default Output Individually
Shifting Output to the Template
New—A View with Different Output
15 The System Template: Adapting and Modifying Output
Integrating the Messages into the index.php File
component.php and How to Do Magic with It
Component View with Search Engine–Friendly URLs
The component.php File as the Basis for Custom Views
16 Advanced Template Customization Tricks
When the Reading Direction Changes: Right-to-Left Languages
Structuring the Homepage Differently—Access to the Views
Outputting the Current Date with PHP
17 The Default Templates and Their Features
Position of the Navigation Column
19 Step by Step to a New Layout
Step 1: Positioning the Navigation
Step 2: Filling the Center Column with Content
Optimizing Step 2: More Meaningful Names for Module Positions
Step 3: Adjusting the Number of Articles
Step 4: Visually Designing the Header
Step 5: Integrating the Module Position for the Header Picture
Step 7: Adapting the Minimum Height of Content
Step 9: Customizing Typography
Step 10: Formatting Module Headings
Step 11: Assigning the Background Image to the Homepage Article
20 Integrating Custom Features
The Header Image—A Background Image?
Background Images in the Module’s Own HTML
Adding the JavaScript File to Deal with Internet Explorer
21 Final Tasks: Fine-Tuning and Creating an Installable Zip Archive
Adjusting error.php and offline.php