J1.5:Changing article background color based on creation date

The "J1.5" namespace is an archived namespace. This page contains information for a Joomla! version which is no longer supported. It exists only as a historical reference, it will not be improved and its content may be incomplete and/or contain broken links.

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. If you haven't come across them before there is a general docs page about template overrides here - How to override the output from the Joomla! core.

The file you need to override is components/com_content/views/frontpage/tmpl/default_item.php. You would copy this file to <your template>/html/com_content/frontpage/default_item.php. 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 templates/rhuk_milkyway/html/com_content/frontpage/default_item.php.

Ok, here is the idea. At this point in the program (when we're in the default_items.php program), the article create date is available as $this->item->created. 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 templates/rhuk_milkyway/html/com_content/frontpage/myfrontpagehelper.php. Here is the code:

<?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;
	}
}
?>

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 default_items.php file. The first thing we need to do is include this new program file. We do that at the top of the default_items.php file, right after the "defined..." line, as follows:

defined('_JEXEC') or die('Restricted access');
require_once('myfrontpagehelper.php');

Notice that we use the require_once statement. We need to use this (as opposed to the include statement) because this code gets executed multiple times, once for each article. So the require_once 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:

<?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); ?>">

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:

<table class="contentpaneopen dateCurrent">
<tr>
		<td class="contentheading" width="100%">
					Joomla! Security Strike Team			</td>

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:

.contentpaneopen.dateCurrent {
	background: #F0FFFF;	
}

.contentpaneopen.dateLastWeek {
	background: #FFF8DC;	
}

.contentpaneopen.dateOld {
	background: #DCDCDC;
}

Notice we're using both the contentpaneopen and the new "date" classes in the CSS selector. With the changes, the front page looks like this:

We could change the background of the article text by adding the new class to line 53, as shown below:

<?php echo $this->item->event->beforeDisplayContent; ?>
<table class="contentpaneopen <?php echo MyFrontpageHelper::getCSSClassFromDate($this->item->created); ?>">

With this change, the front page now looks like this:

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