View source

Suppose you want to show articles on your frontpage layout in different colors, depending on how old the article is. You can do this with a little bit of work using a template override. Here is a general link about template overrides: [http://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core http://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core].

The file you need to override is <tt>components/com_content/views/frontpage/tmpl/default_item.php</tt>. You would copy this file to <tt><your template>/html/com_content/frontpage/default_item.php</tt>. Depending on your template, this file might already be there as an existing override file. In that case, just modify that file. For this example, we'll use the rhuk_milkyway template, so I copied it to <tt>templates/rhuk_milkyway/html/com_content/frontpage/default_item.php</tt>.

Ok, here is the idea. At this point in the program (when we're in the <tt>default_items.php</tt> program), the article create date is available as <code>$this->item->created</code>. So we can use that date, compared to the current date, to see how old the article is. Then we can add a different CSS class for articles of different ages.

To make the code easier to work with, we'll create a separate file for the method to calculate the dates and set the CSS class. I called this file <tt>templates/rhuk_milkyway/html/com_content/frontpage/myfrontpagehelper.php</tt>. Here is the code:
<source lang="php">
<?php
/**
 * Gets class based on today's date and article date
 * @param $date
 * @return string containing CSS class name
 */
class MyFrontpageHelper {
	
	function MyFrontPageHelper() {
		parent::_constructor();
	}

	function getCSSClassFromDate($date) {
		$dateClass = ''; // default to blank
		// subtract create date from current date. both dates in seconds
		$elapsedDays = (time() - strtotime($date)) / 86400; // 86400=number of seconds per day
		if ($elapsedDays <= 7) $dateClass = 'dateCurrent';
		if (($elapsedDays > 7) && ($elapsedDays <= 14)) $dateClass = 'dateLastWeek';
		if ($elapsedDays > 14) $dateClass = "dateOld";

		return $dateClass;
	}
}
?>
</source>
This new class just has a constructor and one method. In the method, we're setting the class to "dateCurrent" if it's less than 7 days old, "dateLastWeek" if it's 7 to 14 days old, and "dateOld" if it's more than 14 days old.

Now, we can use this method to style our front page inside the override <tt>default_items.php</tt> file. The first thing we need to do is include this new program file. We do that at the top of the <tt>default_items.php</tt> file, right after the "defined..." line, as follows: 
<source lang="php">
defined('_JEXEC') or die('Restricted access');
require_once('myfrontpagehelper.php');
</source> Notice that we use the <code>require_once</code> statement. We need to use this (as opposed to the <code>include</code> statement) because this code gets executed multiple times, once for each article. So the <code>require_once</code> statement makes sure we only include this file the first time.

Now we can get the date-based class name by calling this method with the current article's date. Where do we put the class? It depends on what we want to style. For example, say we want to style the article title block. In that case we would change line 11 (for the rhuk_milkyway template) as follows:
<source lang="php">
<?php if ($canEdit || $this->item->params->get('show_title') || $this->item->params->get('show_pdf_icon') || $this->item->params->get('show_print_icon') || $this->item->params->get('show_email_icon')) : ?>
<table class="contentpaneopen <?php echo MyFrontpageHelper::getCSSClassFromDate($this->item->created); ?>">
</source>
In line 11, instead of adding the Page Class Suffix, we're adding the special date CSS style by calling our new method. Notice that there is a space between the "contentpaneopen" style and the new date style. That is important, since that adds the date style as a second CSS style instead of changing the name of the contentpaneopen style.

Before we can test this, we need to make sure we have some articles in the proper date range. So I went into the Article Manager and changed the create dates so that some articles were current, some were 7-14 days old, and some were older. After doing that, I checked the HTML page source for the front page to make sure the class was being added correctly. Here is an example of what you should see:
<source lang="html4strict">
<table class="contentpaneopen dateCurrent">
<tr>
		<td class="contentheading" width="100%">
					Joomla! Security Strike Team			</td>
</source>So our new "dateCurrent" class is being added as a separate class.

Now, we just have to add styling in our CSS file. I added this to the end of the file templates/rhuk_milkyway/css/template.css: 
<source lang="css">
.contentpaneopen.dateCurrent {
	background: #F0FFFF;	
}

.contentpaneopen.dateLastWeek {
	background: #FFF8DC;	
}

.contentpaneopen.dateOld {
	background: #DCDCDC;
}
</source>Notice we're using both the <tt>contentpaneopen</tt> and the new "date" classes in the CSS selector. With the changes, the front page looks like this:[[Image:Tips_frontpage_date_tip_20090215.png|frame|center]]

We could change the background of the article text by adding the new class to line 53, as shown below:
<source lang="php">
<?php echo $this->item->event->beforeDisplayContent; ?>
<table class="contentpaneopen <?php echo MyFrontpageHelper::getCSSClassFromDate($this->item->created); ?>">
</source>
With this change, the front page now looks like this:[[Image:Tips_frontpage_date_tip2_20090215.png|frame|center]]

The exact location of where you use the new classes will depend on your template and what type of styling you want to do.

[[Category:Tips and tricks]]
[[Category:Tips and tricks 1.5]]