You are previewing Joomla! 3 Template Essentials.
O'Reilly logo
Joomla! 3 Template Essentials

Book Description

Create beautiful, professional templates using the Joomla! 3.x template framework

  • Improve the usability of Joomla! Template Manager by installing and enabling a downloaded template, changing the logo, and adding a slogan

  • Set up a workflow and development environment for Joomla! template design

  • Create custom templates for that unique website look

In Detail

Joomla! is a free and open source content management framework for publishing web content. A Joomla! template is a multifaceted Joomla! extension which is responsible for the layout, design, and structure of a Joomla! powered website. Modern Joomla! 3 frameworks use the responsive layout based on Twitter's Bootstrap framework and its collection of utility classes to provide a great degree of flexibility for responsive web design.

This practical, hands-on guide will walk you through clear, step-by-step instructions to help you build your very own custom Joomla! template. Find out what steps you need to take to sell your template and learn some extra tips and tricks to make your templates stand out and improve the overall look of your website.

This example-oriented tutorial will show you how to quickly and painlessly create websites on your own and give them a professional look. You will begin by developing an understanding of how Joomla! templates work, how to install new ones, and how to configure them. You will also master the Joomla! template framework, which can be used as a foundation for creating your own templates. Having gained this insight, you will then begin building your own template from scratch. Advanced styling tricks and tips that will give your websites a unique look are also covered. Finally, you will learn how to modify an existing template to meet your own needs and prepare your Joomla! template for sale.

Table of Contents

  1. Joomla! 3 Template Essentials
    1. Table of Contents
    2. Joomla! 3 Template Essentials
    3. Credits
    4. About the Author
    5. About the Reviewer
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. 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
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Joomla! Template System
      1. What is a Joomla! template?
        1. Templates – download for free, buy, or build your own
          1. Free templates
          2. Premium templates
          3. How to earn money per sale
          4. Conclusion
        2. Identifying templates
        3. Investigating design solutions
      2. Introducing the Joomla! Template Manager
        1. Exploring the default templates
        2. Installing a new template
          1. Unloading a package file
          2. Typical errors during template installation
            1. Make it look like the demo
        3. Changing your default template
          1. Customizing the current template
          2. Changing the template used for specific menu items
        4. Removing unnecessary templates
      3. Summary
    9. 2. Joomla! Template Frameworks
      1. Understanding the Joomla! template framework
        1. Exploring the reasons to use a framework
          1. Useful framework features
      2. Learning different frameworks
        1. Exploring popular Joomla! Version 3 template frameworks
          1. The Expose framework 4
          2. The Gantry framework
          3. The Gavern framework
          4. The HD framework
          5. The S5 Vertex framework
          6. The Shaper Helix II framework
          7. The Sparky framework
          8. The Strapped framework
          9. The T3 framework
          10. The Warp 6 framework
          11. The Wright framework
          12. The YJSG framework
      3. The past and future of frameworks
      4. Summary
    10. 3. Building a Template from a Framework
      1. Web design trends
        1. Back to the basics – minimalistic designs
        2. HTML5 and CSS3
        3. Replacing Flash with HTML5 and JavaScript
        4. Responsive web design (RWD)
        5. The one page and parallax effects
        6. The fixed and scrolling header bars
        7. Slideshows – responsive and touch friendly
        8. Swiss design style
        9. Large photos as backgrounds
        10. App-style web interfaces
        11. Flat design and colors
        12. Web and big fonts
        13. UX direction
        14. Social media integration
        15. What the future will bring
      2. Setting client expectations
        1. If you can imagine it, you can wireframe it
      3. Home page
        1. Required tools
        2. The basic elements of a Joomla! template
      4. Building a template based on the framework
        1. Choosing a template framework
        2. From zero to warp
          1. Joomla! 3.x templates and LESS
          2. Even comics have text content
          3. Show me your badge – start with a logo
          4. Picture in the background
          5. Navigation
          6. Layout and backgrounds
          7. Social buttons
          8. Slideshow
          9. Modules on the left-hand side
            1. Random images
            2. Facebook/Twitter wall
          10. Modules on the right-hand side
            1. Calendar grid
            2. Latest videos
            3. Simple information box
          11. Modules at the bottom
            1. Responsive Google or Bing map
            2. Events map
            3. Our friends
            4. About us and contact
            5. Popular tags
            6. Newsletter module
            7. Footer menu
            8. Copyright
      5. Summary
    11. 4. Advanced Template and Styling Tricks
      1. Constructing a template
        1. Overriding the default layout
        2. Adding a custom stylesheet
        3. Using custom CSS
        4. Module variations
        5. Icons in menu items
        6. The fixed navigation bar
        7. Adding and changing the favicon
      2. Modules and plugins
        1. Frontend news display
        2. Tabs and accordions
        3. Slideshow
          1. The parallax content slider
        4. Responsive maps
        5. Shortcodes
      3. Advance hover effects
      4. Typography tips
        1. Adding a custom font
        2. Dingbat fonts
        3. Font awesome
        4. Colorful notice styles
        5. CSS-generated content
        6. Listing bullets with images
        7. Kerning
        8. Appending ellipsis automatically
      5. Reducing the number of images
      6. Summary
    12. 5. Selling Your Template
      1. Are you ready to sell?
      2. Validate, optimize, and test your templates before, not after
      3. You are selling much more than a template
        1. Images and graphics in a template
        2. Support – questions require answers
      4. Pricing your templates
        1. How to hide the real price and earn more
          1. Sale by piece or temporary access
          2. The magic of prices that end with 99
      5. Tips for selling online templates
        1. Give one thing for free, and they will buy the rest
        2. Designing to suit their needs
        3. The web design that works
        4. Template color variations
        5. Localization and fonts
        6. Potential buyers
        7. Showing off technology
        8. Support for extensions
        9. Do not be greedy and do not lie
        10. Sell twice
      6. Where and how to sell
      7. Summary
    13. Index