Joomla! Template Design: Create your own professional-quality templates with this fast, friendly guide


There is a newer version of this book available - Joomla! 1.5 Template Design
Joomla! Template Design: Create your own professional-quality templates with this fast, friendly guide
eBook: $26.99
Formats: PDF, PacktLib, ePub and Mobi formats
$12.15
save 55%!
Print + free eBook + free PacktLib access to the book: $71.98    Print cover: $44.99
$44.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Overview
Table of Contents
Author
Support
Sample Chapters
  • Create Joomla! Templates for your sites
  • Debug, validate, and package your templates
  • Tips for tweaking existing templates

Book Details

Language : English
Paperback : 232 pages [ 235mm x 191mm ]
Release Date : June 2007
ISBN : 1847191444
ISBN 13 : 9781847191441
Author(s) : Tessa Blakeley Silver
Topics and Technologies : All Books, CMS and eCommerce, Content Management (CMS), Joomla!, Open Source, Web Development


Table of Contents

Preface
Chapter 1: Getting Started as a Joomla! Template Designer
Chapter 2: Identifying Key Elements for Design
Chapter 3: Coding It Up
Chapter 4: Debugging and Validation
Chapter 5: Your Template in Action
Chapter 6: Templating Markup Reference
Chapter 7: Dynamic Menus and Interactive Elements
Chapter 8: AJAX / Dynamic and Interactive Forms
Chapter 9: Design Tips for Working with Joomla!
Index
  • Chapter 2: Identifying Key Elements for Design
    • Creating and Reviewing the Mock-Up
      • The Joomla! Template
      • Considerations to be Made
        • Refining the Wheel
      • Getting the Design Rolling
        • Two Minute Color Schemes
        • Defining the Graphic Style
    • Slice 'n' Dice
    • Putting It All Together
    • Summary
  • Chapter 3: Coding It Up
    • Got Joomla!?
      • Joomla! Servers
    • WYSIWYG Editors: What-You-See-Isn't-Really-What-You-Get
    • Setting Up Your Workflow
      • Firefox: Use It
      • Let's Make a Template
      • Making Changes to Your New Template
        • The Difference between CSS Classes and IDs
      • Changing Our Template Colors
      • Changing and Adding New Images to Our Template
        • Top Navigation Images
        • The Header Image
    • The Truth about XHTML
    • Tabula Rasa
      • The DOCTYPE
      • The Main Body
      • Getting the Layout Started
      • Adding Joomla! Modules and Content
      • Module Options
      • Styling the New Template
    • Summary
  • Chapter 4: Debugging and Validation
    • Introduction to Debugging
      • Troubleshooting Basics
      • Advanced Troubleshooting
      • Fixing CSS across Browsers
      • Out-of-the-Box-Model Thinking
    • The Road to Validation
      • Advanced Validation
        • Firefox's JavaScript/Error Console
        • Firebug
      • Extra Credit
    • Summary
  • Chapter 7: Dynamic Menus and Interactive Elements
    • Dynamic Menus
      • Drop Downs
      • SuckeroomlaFish
        • What If Nothing Drops?
        • Installing the Extended Menu Module
        • Applying the CSS to Joomla!
        • Applying the DOM Script to Joomla!
    • Using Flash
      • The Template
        • Pass Flash a Joomla! Variable
        • Getting Around IE's ActiveX Restrictions
      • In a Joomla! Page
    • Summary
  • Chapter 8: AJAX / Dynamic and Interactive Forms
    • Preparing for Dynamic and Interactive Forms
      • You Still Want AJAX on Your Site?
    • Joomla! Extensions
      • Installing Joomla! Extensions
    • Wrapping It Up
      • Using the Wrapper Menu Item
    • The AJAX Factor
      • JavaScript Components and Libraries
      • More Joomla! Extensions!
    • Summary
  • Chapter 9: Design Tips for Working with Joomla!
    • The Cool Factor
      • Rounded Corners
        • The Classic: All Four Corners
        • Using Two Images Instead of Four
        • The Two-Image "Cheat"
        • I Don't Want Rounded Corners on all My Modules!
      • Sizeable Text
      • Graphic Header Text
        • Using PHP to Make Graphic Headers Easy
    • Advanced Tips
      • Common WYSIWYG Editor Issue
      • What About SEO?
        • URLs
        • Keywords and Descriptions
      • Ways to Remove More Tables from Joomla!
        • More Ways to Edit Joomla's XHTML Markup
        • Final Note On Customizing the mainBody();
    • Summary

Tessa Blakeley Silver

Tessa Blakeley Silver's background is in print design and traditional illustration. She evolved over the years into web and multi-media development, where she focuses on usability and interface design. Prior to starting her consulting and development company hyper3media (pronounced hyper-cube media) http://hyper3media.com, Tessa was the VP of Interactive Technologies at eHigherEducation, an online learning and technology company developing compelling multimedia simulations, interactions, and games that met online educational requirements like 508, AICC, and SCORM. She has also worked as a consultant and freelancer for J. Walter Thompson and The Diamond Trading Company (formerly known as DeBeers) and was a Design Specialist and Senior Associate for PricewaterhouseCoopers' East Region Marketing department. Tessa authors several design and web technology blogs. Joomla! Template Design is her first book.

Sorry, we don't have any reviews for this title yet.

Code Downloads

Download the code and support files for this book.


Submit Errata

Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


Errata

- 3 submitted: last submission 12 Jun 2012

Errata type: Technical | Page number: 60 | Errata date: 08 Aug 08

Third paragraph, 2nd sentence: "The use of presentational HTML tags such as bold or strong, italics or em, etc. is eliminated...

Should be "The use of presentational HTML tags, such as b (for bold) or i (for italics), is eliminated...

 

Errata type: Typo | Page number: 115 | Errata date: 03 Apr 09

In the 1st sentence of the last paragraph "What You Can and Can't control" the word "can't" has 2 apostrophes.

 

Errata type: Typo | Page number: 11 | Errata date: 02 May 12

In the warnings or important notes box. the filter mentioned at http://registry.gimp.org/list?name=perlotine does not appear to be there any more. A search of the website did not turn up any results for it, maybe they have renamed it.

 

Sample chapters

You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

Frequently bought together

Joomla! Template Design: Create your own professional-quality templates with this fast, friendly guide +    Programming Microsoft® Dynamics™ NAV =
50% Off
the second eBook
Price for both: £13.79

Buy both these recommended eBooks together and get 50% off the cheapest eBook.

What you will learn from this book

  • Set up a basic workflow for Joomla! template design
  • Work on layouts for your template
  • Debug and validate your template code
  • Use the W3C’s XHTML and CSS validation tools
  • Package up your finished template into a working ZIP file
  • Know the standard XHTML markup and CSS classes for Joomla!
  • Create Suckerfish drop-down menus
  • Get Flash content quickly into your Joomla! site
  • Create interactive and dynamic forms in your Joomla! site
  • Download and install Joomla! Extensions for your Joomla! site
  • Use the wrapper (Wrapper Menu Item) for fully working Ajax applications

Chapter 1 will help you brush up your web skills especially XHTML and CSS and help you to get ready to embark on designing a great template for the most popular, robust, Open Source, content management system available for the Web today!

Chapter 2 covers the key elements of a Joomla! template, and what considerations to make while working with your mock up. You will learn some basic techniques for image extraction and optimization, and some tips and tricks to speed up the design process.

In Chapter 3, you will learn how to set up your development environment and an HTML editor for a smooth work flow. You will also see some of the alternatives to a full Joomla! install. You will learn about the two versions of your design; one with tables and one with semantic XHTML and CSS.

Chapter 4 will help you understand the basic wash—rinse—repeat process of debugging and validating your template's code. You will learn how to use the W3C's XHTML and CSS validation tools and further explore the value of using FireFox as a development tool using its JavaScript Console and Firebug extension.

In Chapter 5, you will learn about the templateDetails.xml file and what each part of that file does in detail. Also, you will learn how to package up your finished template into a working ZIP file that anyone should be able to upload into their own Joomla! installation.

In Chapter 6, you will learn about the standard XHTML Markup and CSS classes for Joomla!. You will also review the standard ways to control what markup is produced via PHP and the Joomla! Administration panel.

In Chapter 7, you will learn to add drop-down menus to your Joomla! template and we discuss various ways to display Flash content.

In Chapter 8, you will take look at the most popular methods to get you going with Ajax in Joomla! and help you create interactive and dynamic forms in your Joomla! site. Also, you will see some cool Javascripts and JavaScript toolkits you can use to make your site appear “Ajaxy”. This chapter will also help you learn how to download and install Joomla! Extensions for your Joomla! site.

In Chapter 9, you will pick up some key tips for easily implementing today’s coolest CSS tricks into your template as well as a few final “fix them” tips for problems that you'll probably run into, once you turn the site over to the content editors.

In Detail

Joomla! is a free, award-winning content management system written in PHP that allows users to easily publish their content on the World Wide Web and intranets. It is used all over the world for everything from simple websites to complex corporate applications. Joomla! is easy to install, simple to manage, and reliable.

The Joomla! template is a series of files within the Joomla! CMS that control the presentation of the content. The template is the basic foundation design for viewing your Joomla! website. To produce the effect of a "complete" website, the template works hand in hand with the content stored in the Joomla! databases.

This book will help you build templates for your Joomla! site. It will help you understand the options in dealing with them. It will help you learn about how to use multiple templates in the same site. It will advise you on creating beautiful Joomla! designs, and using CSS rather than tables in your templates. The book guides you on using animations and other effects in Joomla! templates and provides you with tricks for tweaking existing templates.

This well-crafted and easy-to-use book is a complete guide to creating Joomla! templates for your website. It guides you through setting up a basic workflow for Joomla! template design, debugging and validating the template code, creating drop-down menus, interactive forms, and dynamic forms for your site, and packaging up your finished template in a ZIP file for users.

Approach

This book covers the "how-tos" of creating templates for Joomla. There is also advice about what works and what to consider when working with your Joomla! template.

Who this book is for

This book is aimed at web designers who want to create their own unique templates for Joomla!. Readers should have basic knowledge of Joomla! (which can be obtained by working through Building Websites with Joomla!) and also some knowledge of CSS and HTML, and using Dreamweaver for coding purposes.

Buy Joomla! Template Design: Create your own professional-quality templates with this fast, friendly guide

 

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software