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.
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 filetemplates/rhuk_milkyway/html/com_content/frontpage/myfrontpagehelper.php. Here is the code:
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 thedefault_items.php file, right after the "defined..." line, as follows:
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:
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:
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:
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:
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.