O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

Book Description

This complete, easy-to-use guide for web designers wanting to create unique templates for Joomla! websites covers template design workflow, debugging and validating code, creating drop-down menus, interactive and dynamic forms, and packaging templates for distribution, with advice on using multiple templates, replacing tables with CSS, using animation and other effects, and tricks to tweak existing templates. Readers need basic knowledge of Joomla! (which can be gained from Packt's Building Websites with Joomla!), of CSS and HTML, and of using Dreamweaver for coding. Written in PHP, free, award-winning Joomla! CMS is easy to install, simple to manage, reliable, and allows easy publication of content to Web or intranet. From simple websites to complex corporate applications, it is used world-wide. A Joomla! template controls the presentation of content; it provides the design for viewing a Joomla! website and works with the content stored in databases to present a complete website.

Table of Contents

  1. Copyright
  2. Credits
  3. About the Author
  4. About the Reviewer
  5. Preface
    1. What This Book Covers
    2. Who is This Book for
    3. Conventions
    4. Reader Feedback
    5. Customer Support
      1. Downloading the Example Code for the Book
      2. Errata
      3. Questions
  6. 1. Getting Started as a Joomla! Template Designer
    1. Let’s Get Going!
    2. Designing Templates vs. Designing Web Pages
    3. Things You’ll Need to Know
      1. Joomla!
      2. XHTML
      3. CSS
      4. Not Necessary, But Helpful
    4. Summary
  7. 2. Identifying Key Elements for Design
    1. Creating and Reviewing the Mock-Up
      1. The Joomla! Template
      2. Considerations to be Made
        1. Refining the Wheel
      3. Getting the Design Rolling
        1. Two Minute Color Schemes
        2. Defining the Graphic Style
    2. Slice ‘n’ Dice
    3. Putting It All Together
    4. Summary
  8. 3. Coding It Up
    1. Got Joomla!?
      1. Joomla! Servers
    2. WYSIWYG Editors: What-You-See-Isn’t-Really-What-You-Get
    3. Setting Up Your Workflow
      1. Firefox: Use It
      2. Let’s Make a Template
      3. Making Changes to Your New Template
        1. The Difference between CSS Classes and IDs
      4. Changing Our Template Colors
      5. Changing and Adding New Images to Our Template
        1. Top Navigation Images
        2. The Header Image
    4. The Truth about XHTML
    5. Tabula Rasa
      1. The DOCTYPE
      2. The Main Body
      3. Getting the Layout Started
      4. Adding Joomla! Modules and Content
      5. Module Options
      6. Styling the New Template
    6. Summary
  9. 4. Debugging and Validation
    1. Introduction to Debugging
      1. Troubleshooting Basics
      2. Advanced Troubleshooting
      3. Fixing CSS across Browsers
      4. Out-of-the-Box-Model Thinking
    2. The Road to Validation
      1. Advanced Validation
        1. Firefox’s JavaScript/Error Console
        2. Firebug
      2. Extra Credit
    3. Summary
  10. 5. Your Template in Action
    1. A Picture’s Worth
    2. Easy XML
      1. Getting to Know Your XML
    3. Zip it Up!
    4. Uploading to Joomla!
    5. Summary
  11. 6. Templating Markup Reference
    1. Your Markup and Joomla!’s
      1. What You Can and Can’t Control
        1. mosLoadModule $style Control Options
      2. Menu Options
      3. Your CSS File
        1. IDs
        2. Classes
    2. Summary
  12. 7. Dynamic Menus and Interactive Elements
    1. Dynamic Menus
      1. Drop Downs
      2. SuckeroomlaFish
        1. What If Nothing Drops?
        2. Installing the Extended Menu Module
        3. Applying the CSS to Joomla!
        4. Applying the DOM Script to Joomla!
    2. Using Flash
      1. The Template
        1. Pass Flash a Joomla! Variable
        2. Getting Around IE’s ActiveX Restrictions
      2. In a Joomla! Page
    3. Summary
  13. 8. AJAX / Dynamic and Interactive Forms
    1. Preparing for Dynamic and Interactive Forms
      1. You Still Want AJAX on Your Site?
    2. Joomla! Extensions
      1. Installing Joomla! Extensions
    3. Wrapping It Up
      1. Using the Wrapper Menu Item
    4. The AJAX Factor
      1. JavaScript Components and Libraries
      2. More Joomla! Extensions!
    5. Summary
  14. 9. Design Tips for Working with Joomla!
    1. The Cool Factor
      1. Rounded Corners
        1. The Classic: All Four Corners
        2. Using Two Images Instead of Four
        3. The Two-Image “Cheat”
        4. I Don’t Want Rounded Corners on all My Modules!
      2. Sizeable Text
      3. Graphic Header Text
        1. Using PHP to Make Graphic Headers Easy
    2. Advanced Tips
      1. Common WYSIWYG Editor Issue
      2. What About SEO?
        1. URLs
        2. Keywords and Descriptions
      3. Ways to Remove More Tables from Joomla!
        1. More Ways to Edit Joomla’s XHTML Markup
        2. Final Note On Customizing the mainBody();
    3. Summary
  15. A.
    1. Rhuk Redesign
      1. The CSS
    2. Table-Less Design
      1. The CSS
      2. The XHTML and PHP