September 2008
Add Styling Parameters for Joomla! 1.5 Articles Titles
So, what do the pro's do to get cool effects?
Written by Casey Lee
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:
- Copy the changed XML files to your workstation and record the original location of each file.
- Perform a normal upgrade (i.e., backup, FTP watching logs closely, overwrite your site with FTP'ed files, etc.)
- 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.
- 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 :)
2008-12-08 08:11:51
This would be a good idea until you lose the ability to update Joomla without losing the param override?
Cheers
Phill
2008-12-22 17:08:04
In fact, the Tcefhi for several sites in the net and found a forum ( منتديات )follows the same method in question, may be the clearest, including
Special thanks to Mr. filer with all my heart
2008-12-29 06:38:30
I was just wondering the same thing the other day and I don't believe it is currently possible. There doesn't even seem to be a way to get this functionality with the use of a plugin.
2009-01-01 04:56:25
We are soon releasing a new extension ( 1st Jan 6 PM India Time at techjoomla.com ) that allows you to tag titles of articles with tags like New! Hot! etc.
It only uses template overides no hacks. I suppose the overide could be modified a bit to make it look like a title icon rather than a tag.. If anyone in interested in this kind of functionality using a extension, let me know.. We can think of incorporating it in the next version..
2009-01-08 06:00:03
Thanks
Shweta
jobberclub.com
2009-01-18 00:44:12
Thanks
2009-01-18 21:51:40
2009-01-21 17:23:17
2009-01-29 10:11:38
2009-02-06 13:07:16
2009-02-12 20:56:24
2009-02-27 12:22:26
2009-02-27 15:46:16
I am currently working on a new template and want to give the user the possibility to define global parameters in the template-parameters menu.
But I cannot figure out, how to access there params inside a template-override (ie: [templatename]/html/com_content/article/default.php
I've already tried:
$templ = &JFactory::getTemplate();
But no Template-Parameters are in this object
2009-03-04 02:50:22
I tried this on a test site but cannot get the image to appear. The padding works and even if I change it to float on the right, but cannot get the image to show. Any help would be appreciated?
2009-03-09 19:15:02
Everything went exactly as prescribed, except in the last part of my default.php file I had this:
article->title; ?>
... instead of the OPs:
escape($this->article->title); ?>
I tried it both ways with the same result.
Also, my statements were wrapped in a
"
I'm using the JA Purity template with Joomla 1.5x.
Any ideas?
2009-03-24 07:58:04
2009-03-25 03:56:32
I have been wondering if there is a way to override header java scripts inserted by a plugin from specific pages like for example the home page. I have clashing java scripts on my home page and would love to use this system to do so.
Is it possible?
2009-03-28 08:05:41
to
Basically I remove the leading '\'.
Salut!
2009-04-01 23:20:25
2009-04-08 08:05:13
Thank you.
ipod
2009-04-25 05:56:16
How to use Template Overrides to change the layout of the Joomla contact form ? Which files to changes ?
Thank you.
2009-04-25 06:43:06
thanks for sharing. really helped a lot here.
regards,
--------------------------------------------------
Ugg Boots | Uggs
2009-04-25 23:33:12
well done so far.
2009-04-27 02:41:16
thanks for sharing. really helped a lot here.
regards,
-------------------------------------------
UGGS
2009-05-15 21:10:58
2009-05-31 21:10:22
Anyway I learned something new, thanks
2009-06-21 02:48:20
2009-06-22 15:48:00
2009-07-06 08:22:12
2009-07-06 20:52:14
2009-07-15 20:35:32
2009-07-16 04:08:17
2009-07-17 07:13:49
2009-07-25 03:51:48
2009-08-02 08:16:49
Many Thanks
2009-08-10 13:04:55
2009-08-24 08:03:07
Simply start the CSS page suffix with a BLANK char (i.e. " poesie") then modify your template adding icons for componentheading (larger) and contentheading (smaller)
2009-08-26 16:03:18
2009-08-31 00:45:29
2009-09-06 03:19:12
2009-09-07 09:18:00
2009-11-07 17:03:08