-
Book Overview & Buying
-
Table Of Contents
Joomla! 1.5 Templates Cookbook
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.
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.
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. 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. Now visit an article page on your Joomla! website and refresh the page. You should see the changes that you just made take effect:

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:

Remember that Twitter can handle only 140 characters per message, so try and keep it short!
Customizing Joomla!'s home page with module output override
Creating a new module style (chrome) in Joomla!
Change the font size
Change margin width
Change background colour