You are previewing Joomla! 1.5 Template Design.
O'Reilly logo
Joomla! 1.5 Template Design

Book Description

Create your own professional-quality templates with this fast, friendly guide

  • Create Joomla! 1.5 Templates for your sites

  • Debug, validate, and package your templates

  • Tips for tweaking existing templates with Flash, extensions and JavaScript libraries

In Detail

Using Joomla! Templates with HTML and CSS allows you to give a unique look and feel to your site, present a ""fresh face"" to your pre-existing content, ensure that your site design is consistent with your brand, and build a site layout that suits your unique needs. A quality web site is easily within your grasp using these cutting-edge templates. However, even experienced web developers need help to take their designs and turn them into flexible and easily maintainable Joomla! 1.5 templates.

The release of Joomla! 1.5 meant a radically enhanced template system that is very different from that of Joomla! 1.0. Joomla! 1.5 comes complete with the ability to create template overrides and customize ""module chrome"". The Joomla! development team has also revamped the template process by introducing clean, understandable jdoc tags in place of the PHP function-based Mambo-derived markup that Joomla! 1.0 templates used. This book focuses squarely on the new enhancements to the Joomla! 1.5 templating process and walks web designers through the process of turning a working XHTML and CSS ""mockup"" into a fully functional Joomla! 1.5 template.

This well-crafted and easy-to-use book provides you with everything you need to create your own unique Joomla! 1.5 template. It guides you through setting up a basic work flow for Joomla! template design, debugging and validating the template code, creating drop-down menus and dynamic forms for your site, and packaging up your finished template in a ZIP file for users. At the end of this book you will be able to create a template that is effective, flexible, and presents a new look for the pre-existing content.

This book focuses on the new jdoc template system for Joomla! 1.5. It is geared toward web designers who need to know how to turn their designs into Joomla! 1.5 templates. It covers how to enhance and speed up your design and revision process, then focuses squarely on the Joomla! 1.5 essentials of creating a template. It covers implementing template overrides, the best approaches for implementing Flash and AJAX techniques, as well as advanced enhancements such as creating design parameters so users can have some control over the template via the administration panel. The original 1.0 book covered how to amend an existing 1.0 template before creating one from scratch, the new templating features of Joomla! 1.5 are so logical to implement we move right into creating a full table-less, semantic XHTML/CSS template from scratch.

Table of Contents

  1. Joomla! 1.5 Template Design
    1. Joomla! 1.5 Template Design
    2. Credits
    3. About the Author
    4. About the Reviewers
    5. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code for the book
        2. Errata
        3. Piracy
        4. Questions
    6. 1. Getting Started as a Joomla! Template Designer
      1. Joomla! 1.5 perks
      2. Pick a template or design your own?
        1. Drawbacks to using a pre-made template
        2. This book's approach
      3. Things you'll need to know
        1. Joomla! 1.5
        2. CSS
        3. XHTML
        4. PHP
        5. Not necessary, but helpful
      4. Tools of the trade
        1. HTML editor
        2. Graphic editor
        3. Firefox
          1. We'll be developing for Firefox first, then IE and other browsers
      5. Summary
    7. 2. Template Design and Approach
      1. Things to consider
        1. Types of sites
        2. Modules, components, and plugins
      2. Getting ready to design
        1. We have a problem
        2. It gets worse
      3. The solution: Rapid design comping
      4. Let's get started!
        1. Think about it: Positions
        2. Sketch it
          1. Consider usability
        3. Start with the structure
          1. The DOCTYPE
          2. The main body
          3. Attach the basic stylesheet
            1. Basic semantic XHTML structure
        4. Adding text: Typography
          1. Start with the text
          2. A quick note about starting to style with CSS
          3. Font choices
            1. Get daring: Font stacks
            2. sIFR
          4. Cascading fonts
          5. Font sizing
          6. Paragraphs, blockquotes, and other text markup
          7. Default links
          8. Form elements
        5. The layout
          1. How wide to make your site?
            1. CSS tables versus floating divs
          2. Navigation
            1. More navigation: Joomla! 1.5 specific styles
            2. Color schemes
            3. Two-minute color schemes
            4. Color schemes with Gimp or Photoshop
            5. Adding color to your CSS
            6. Create the graphical elements
              1. Graphic styles
              2. Handling edits and changes
          3. Relax and have fun designing!
          4. Slice and export
          5. Don't forget your favicon!
            1. Make your favicon high resolution
          6. Summary
    8. 3. Coding It Up
      1. Got Joomla?
      2. Understanding the Joomla! 1.5 template
        1. Basic, core template files
        2. Advanced template files
      3. Your Joomla! 1.5 work flow
      4. Let's build our template!
        1. Tabula rasa
        2. Including Joomla! 1.5 content
          1. Congratulations!
          2. General Joomla! stylesheets
          3. The content component
          4. Module positions
          5. Jdoc tag overview
          6. Updating the templateDetails.xml file
          7. Placing module positions in the index.php file
            1. Assign modules to your positions
          8. Hello? Content is wrapped in tables. Gross!
            1. Everything is better with Beez
          9. Using template overrides
          10. Final CSS tweaks and fixes
        3. Summary
    9. 4. Debugging and Validation
      1. Don't forget about those other browsers and platforms!
      2. Introduction to debugging
        1. Troubleshooting basics
          1. Why validate?
          2. Joomla jdoc tags and PHP
          3. CSS quick fixes
        2. Advanced troubleshooting
        3. Fixing CSS across browsers
        4. Box model issues
        5. Everything is relative
        6. To hack or not to hack
        7. Out-of-the-box-model thinking
          1. Style for IE separately with conditional comments
      3. The road to validation
        1. XHTML validation
        2. CSS validation
        3. Advanced validation
          1. FireFox's JavaScript/Error Console
          2. The Web Developer Toolbar
          3. FireBug
        4. Checking your work in Internet Explorer
          1. Run multiple versions of IE
          2. IE Developer Toolbar
          3. Don't forget about the QorSMode bookmarklet
        5. Extra credit: Optimizing for text and mobile browsers
          1. What about the new Mobile Safari browser?
      4. Summary
    10. 5. Your Template in Action
      1. A picture's worth a thousand words
      2. Template packaging basics
      3. The templateDetails.xml file
        1. Quick XML syntax overview
        2. From the top
        3. Descriptive tags
          1. Copyright and licensing?
        4. File, position, and param tags
          1. What about the html directory?
          2. Param tags
      4. ZIP it up!
        1. No way to ZIP?
      5. One last test
        1. Troubleshooting installations
      6. Summary
    11. 6. Joomla! 1.5 Template Reference
      1. Jdoc include tags
        1. Site header information tag
          1. Joomla! 1.0 to 1.5 conversion
        2. The component include tag
          1. Joomla! 1.0 to 1.5 conversion
        3. Module position tags
          1. Module position styles
          2. Joomla! 1.0 to 1.5
      2. Menu output options
      3. Using overrides
        1. Module overrides and chrome
          1. How module chrome works
        2. Component overrides
        3. Pagination
      4. Additional template information
      5. Common Joomla! CSS
        1. Joomla! 1.5 CSS ids
        2. Joomla! 1.5 CSS classes
          1. Joomla! 1.0 to 1.5 conversion
      6. Template parameters
        1. Define a parameter in the templateDetails.xml file
        2. Retrieve a parameter in the template file
        3. Useful standard parameter types
      7. Summary
    12. 7. Dynamic Layouts, Menus, and Interactive Elements
      1. DIY or extensions?
      2. Dynamic layouts
        1. PHP syntax
        2. PHP if/else conditional statements
          1. Update your CSS
        3. Dynamic menus
          1. Drop-down menus
          2. DIY Suckerfish menus in Joomla! 1.5
            1. Applying the CSS to Joomla!
            2. Applying the DOM Script to Joomla!
        4. Flash-ize It
          1. Flash in your template
            1. Pass Flash a Joomla! variable
            2. The ObjectSwap method for Flash
          2. Flash in Joomla! content or modules
      3. Summary
    13. 8. AJAX/Dynamic Content and Interactive Forms
      1. Preparing for dynamic content and interactive forms
      2. Joomla! extensions
        1. Deciding where AJAX is best used
        2. Installing the Joomla! comment component
        3. Installing the core design Ajax Pagebreak plugin
        4. Installing the AJAX RSS Reader Version 3 with Draggable Divs module
        5. AJAX: It's not just for your site's users
      3. The AJAX factor
        1. JavaScript component/plugin scripts
          1. The problem
          2. Enter jQuery lightBox
      4. Summary
    14. 9. Advanced Enhancements and Design Tips for Joomla! 1.5
      1. Giving users control
        1. Editing a template override
        2. Adding suffixes to modules and pages
          1. Page suffixes
          2. Module suffixes
          3. The trick
        3. Design tips and tricks
        4. The cool factor essentials
          1. Backgrounds
          2. Lists
            1. See it in action
          3. Rounded corners
            1. The classic: All four corners
            2. The two image cheat
          4. Text to image replacement
            1. Extra credit: Use PHP to make graphic headers easy
            2. More extra credit: Make unique fonts even easier with the sIFR technique
          5. Learn all about your image editor and keep tabs on current design trends
        5. Good design isn't always visual: Looking at SEO
          1. Search-engine-friendly URLs
          2. Keywords and descriptions
      2. Summary