September 2008

2008-09 Joomla! Community Magazine

Joomla! Community Magazine - Learning

Add Styling Parameters for Joomla! 1.5 Articles Titles

So, what do the pro's do to get cool effects?

In this article, I'm going to show you a simple way to add a new parameter to a Menu Type that will allow you to add a custom icon to your Joomla! Article Titles. This is much like how the "Page Class Suffix" and "Module Class Suffix" are used for individual item styling. The reason I chose this method instead of just using the Page Class Suffix parameter is because it tends to modify too much of the output. In this simple tutorial, I just want to add one parameter to one element on the page - the Article Title.

Create sample data for illustration purposes

Let's create sample data to use as we work through this tutorial. Create a Section called "Articles."

Then, create these three Categories. For these Categories, we will improve usability by adding a relevant icon to each Category Article.

• FAQ: A category listing of some basic frequently asked questions;
• Media: A category listing of some basic downloadable media, such as movies;
• Books: A category listing of some various book titles and reviews.

Go ahead and create about four dummy text Articles in each Category. I recommend using the Mass Content extension for this.

Add a Parameter to the Menu Type XML

Now, go to your root Joomla! directory and navigate to components/com_content/views/category/tmpl folder.

Open blog.xml and add the parameter below just after the <advanced> tag. Do the same for the default.xml file.

 <param name="icon_suffix" type="text" default="" label="Article Icon Class" 
description="Adds a class suffix for individual category article title styling"/>

Important note: For illustration purposes, only, "description" begins on a new line in the example above. When you copy the parameter, remove the line break and make certain the entire parameter is on one line.

Create Template Overrides

With Joomla! 1.5, Template Overrides allows us to format output the way we want it, rather than having to use the default layout provided by Core. Template Overrides are very easy to use. Basically, we copy the layout files from the core components into an "html" folder within our template folder. Then, we make changes. When Joomla! finds the layout files in our template/html folder, it uses those files as "overrides" to the Core Layout files.

To do so, go into your /templates/yourtemplatename directory. Create a new directory named "html". Beneath html, create another new directory named "com_content". If there already is an html or com_content directory, that's okay.

Inside the com_content directory, create two folders; one named "article" and another named "category".

Ex: /templates/rhuk_milkyway/html/com_content/category and /templates/rhuk_milkyway/html/com_content/article

Now, copy (not move) the Core components/com_content/views/category/tmpl/blog_item.php file to /templates/yourtemplatename/html/com_content/category Note: if this file already exists, it is best not to overwrite it. You can still continue this tutorial using the file available.

Again, copy (not move) the components/com_content/views/article/tmpl/default.php to /templates/yourtemplatename/html/com_content/article As before, simply use the existing file if one is already there. You can still continue this tutorial.

Add styling for the Title Icons to the Layout file

Open the /templates/yourtemplatename/html/com_content/category/blog_item.php file for editing.

You will see the code below with the exception of the highlighted code which is what we will now add and then save this file.

<td class="contentheading<?php echo $this->item->params->get( 'pageclass_sfx' ); ?>" width="100%">
 <?php if ($this->item->params->get('link_titles') && $this->item->readmore_link != '') : ?>
 <a href="/<?php echo $this->item->readmore_link; ?>" 
	class="contentpagetitle<?php echo $this->item->params->get( 'pageclass_sfx' ); ?>">
	<span class="<?php echo $this->params->get( 'icon_suffix' ); ?>"></span>
	<?php echo $this->escape($this->item->title); ?>
 </a>
 <?php else : ?>
	<span class="<?php echo $this->params->get( 'icon_suffix' ); ?>"></span>
	<?php echo $this->escape($this->item->title); ?>
 <?php endif; ?>
 </td>

Now open the newly copied /templates/yourtemplatename/html/com_content/article/default.php file.

You will see the code below with the exception of the highlighted code which is what we will now add and then save this file.

<td class="contentheading<?php echo $this->params->get( 'pageclass_sfx' ); ?>" width="100%">
		<?php if ($this->params->get('link_titles') && $this->article->readmore_link != '') : ?>
		<a href="/<?php echo $this->article->readmore_link; ?>" 
		class="contentpagetitle<?php echo $this->params->get( 'pageclass_sfx' ); ?>">
	<span class="<?php echo $this->params->get( 'icon_suffix' ); ?>"></span>
	<?php echo $this->escape($this->article->title); ?></a>
		<?php else : ?>
	<span class="<?php echo $this->params->get( 'icon_suffix' ); ?>"></span>
	<?php echo $this->escape($this->article->title); ?>
		<?php endif; ?>
</td>

Add in the CSS and Images

Ok, Joomla is pretty much ready for us, so we'll move into the designer's portion of this little tutorial now.

The first thing we'll need to do is to get our icons for the aforementioned categories (FAQ, Media, Books). I like to use the silk icon set because they're already a good size (16px), 32-bit transparent PNG, and of course free.

I've chosen the three below. Feel free to just grab these for now and drop them into your /templates/yourtemplatename/images directory.

Then, let's open your template's primary stylesheet (usually template.css) /templates/yourtemplatename/css/template.css and add the following CSS at the bottom:

span.faq {
 background: url(../images/info.png) no-repeat 0px 5px;
 width: 18px;
 height: 20px;
 display: block;
 float: left;
 }
 span.media {
 background: url(../images/photo.png) no-repeat 0px 5px;
 width: 18px;
 height: 20px;
 display: block;
 float: left;
 }
 span.book {
 background: url(../images/book_open.png) no-repeat 0px 5px;
 width: 18px;
 height: 20px;
 display: block;
 float: left;
 }

Defining the Style in your Menu Item

Looking at the code above, we can see each class name (i.e., faq, media, book). These are the parameters you will now be able use to input into your Menu Manager

To use these values, login to your Joomla! Administration and create a new Menu Item using the Category Blog Layout Menu Item. (Navigate to Menus -> Main Menu -> and create an Article->Category layout menu item).

In the parameters to the right, you will see an "Advanced" tab where you'll notice a new parameter named "Article Icon Class". You can enter one of these three values: faq, media, or book. After saving your new Menu Item, view the Category Blog from the Frontend of your Joomla! Web site and select the new Menu Item. Once you have "drilled down" to the Article, you will see the new Title Icon.

If you want to change these up or add more, all you need to do is add the CSS class in the last step above. Hope you find a way to use this approach. Have fun with Joomla!

Editor Comment

When I invited Casey to share some templating secrets in the magazine, he asked if it would be okay to write a tutorial on how you can add parameters to the XML for Menu Types for use in Template Overrides. I highly encouraged him to do so since many professionals use this approach to get creative solutions. Here's a few tips for upgrades if you decide to do so, yourself.

Before you upgrade:

1. Copy the changed XML files to your workstation and record the original location of each file.
2. Perform a normal upgrade (i.e., backup, FTP watching logs closely, overwrite your site with FTP'ed files, etc.)
3. Look at the original location of each XML file to see if your files are still in place. If a new XML file is there, re-apply your parameters to the changed file.
4. As always, verify your Web site continues to work, as expected, following an upgrade.

If you decide you want to return to the core file, that's easy enough. Pull it back off of the release distribution. Also, sometimes, people change language files for preferences in word choice. The same approach to upgrading applies there, too.

Thanks Casey, great piece!
Amy :)