Book Image

Joomla! 1.5 Templates Cookbook

By : Richard Carter, Chris Davenport
Book Image

Joomla! 1.5 Templates Cookbook

By: Richard Carter, Chris Davenport

Overview of this book

Templates in Joomla! provide a powerful way to make your site look exactly the way you want either using a single template for the entire site or a separate template for each site section. Although it sounds like an easy task to build and maintain templates, it can be challenging to get beyond the basics and customize templates to meet your needs perfectly.Joomla! 1.5 Templates Cookbook consists of a series of self-contained step-by-step recipes that cover everything from common tasks such as changing your site's logo or favicon and altering color schemes, to custom error pages and template overrides. It starts off with the basics of template design and then digs deep into more complex concepts. It will help you make your site more attractive and user-friendly. You will integrate your site with various social media such as Twitter and YouTube; make your site mobile-friendly with the help of recipes for creating and customizing mobile spreadsheets; and use miscellaneous tricks and tips to get the most out of your website. You get all of this in a simple recipe format that guides you quickly through the steps and explains how it all happened.
Table of Contents (16 chapters)
Joomla! 1.5 Templates Cookbook
Credits
About the Author
About the Reviewers
Preface

Customizing Joomla! articles with component template overrides


You are not limited to customizing Joomla! templates at module level; you can define component template overrides to change what is seen for Joomla! pages of a particular type. Here, we'll look at customizing article pages in Joomla!, which, by default in the rhuk_milkyway template, looks similar to this:

We'll be customizing the template to add an automatic "mention this website on Twitter" graphic alongside the icons for viewing a PDF of the page, printing the page, and sending it to a friend via e-mail.

Getting ready

As articles in Joomla! are classified as part of the content component, the default template for articles is located in the following directory: \components\com_content\views\article\tmpl\. As usual, the file that you need here is called default.php. Copy this into your template's \html\com_content\article\ directory.

You'll also need to save a Twitter icon with dimensions of 16 by 16 pixels in the \images\M_images\ directory of your Joomla! installation as twitter_button.png.

How to do it...

  1. 1. In your template's default.php, which you copied above, find the lines that read:

    <?php if ($this->params->get('show_pdf_icon')) : ?>
    <td align="right" width="100%" class="buttonheading">
    <?php echo JHTML::_('icon.pdf', $this->article, $this->params, $this->access); ?>
    </td>
    <?php endif; ?>
    
  2. 2. Below this, you can add the following code to create your Twitter button:

    <td align="right" width="100%" class="buttonheading">
    <a href="http://twitter.com?status=is reading <?php echo $this->baseurl ?>" title="Tweet this website">
    <img src="<?php echo $this->baseurl ?>/images/M_images/twitter_button.png" alt="Post this to Twitter">
    </a>
    </td>
    
  3. 3. Now visit an article page on your Joomla! website and refresh the page. You should see the changes that you just made take effect:

How it works...

Component template overrides work in a manner similar to that of module template overrides—Joomla! first looks in the currently enabled template's \html directory for a customized template for the component it is loading before resorting to the default template provided in the \components directory of your Joomla! website.

By adding ?status= followed by text to the end of the Twitter URL, that text is added to a Twitter user's status box, assuming that they're logged into their Twitter account. However, the text is not sent as a tweet to their followers until the Twitter user clicks on the Tweet button:

Note

Remember that Twitter can handle only 140 characters per message, so try and keep it short!

See also

  • Customizing Joomla!'s home page with module output override

  • Creating a new module style (chrome) in Joomla!