The Joomla! Community Magazine™

How to put more love into your Joomla! dates...

Written by | Sunday, 01 May 2011 00:00 | Published in 2011 May
One of the things that tends to grab my attention browsing sites is the creative use of dates. It's not always appropriate, or even necessary, to get creative with date styling and in most cases, it is only relevant for blogs and perhaps even then, blogs written by creative people. But nonetheless, I love it when a designer puts an elegant or flamboyant touch into the design of their date elements.

In Joomla!, there are essentially two main ways to target the date markup and both involve adding extra markup for each part of the date element eg day, month and year; so that you can target them individually with specific css. By default, the markup that surrounds the date output in the normal Joomla! content is pretty simple and includes a single class that wraps the entire date element.

The default markup

In Joomla 1.6 the markup for the created date on the content item view looks like this:

{codecitation}

<?php if ($params->get('show_create_date')) : ?>

<dd class="create">

<?php echo JText::sprintf('COM_CONTENT_CREATED_DATE_ON', JHtml::_('date',$this->item->created, JText::_('DATE_FORMAT_LC2'))); ?>

</dd>

<?php endif; ?>

{/codecitation}

 

While in Joomla 1.5 the markup looks like this:

{codecitation}

<?php if ($this->params->get('show_create_date')) : ?>

<tr>

<td valign="top" class="createdate">

<?php echo JHTML::_('date', $this->article->created, JText::_('DATE_FORMAT_LC2')) ?>

</td>

</tr>

<?php endif; ?>

{/codecitation}

These code snippets can be found in the default.php file in the following location on your Joomla installation:

components/com_content/views/article/tmpl/default.php

As you can see, there is not much that can be done here, other than targeting the whole date element, eg: day, month and year with a single class called .createdate or dd.create. This is not going to get us anywhere if we want to get creative with one of those elements as any change we make to font-size, color, position etc will affect all of the date elements being displayed.

Adding markup to language files.

In Joomla 1.5 one of the simplest ways to create more markup surrounding the date display is to edit the language file on your site.

If you notice in the snippets above that the code that is used to display the date is actually a simple string: DATE_FORMAT_LC2. This string can be found in the main language file for both Joomla 1.5. You can find that file by going to language/[your-language]/[your-language].ini.

For example the English language file would be located here: languages/en-GB/en-GB.ini.

In Joomla 1.5 the date string can be found near the top of the same file and it looks like this:

{codecitation}

DATE_FORMAT_LC2=%A, %d %B %Y %H:%M

{/codecitation}

Adding markup for each date element is fairly straightforward. We can add any type of html element here and then style it via css. An example of an altered date string may look something like this:

{codecitation}

DATE_FORMAT_LC2=<div class="dateWrap"><span class="day">%d</span><span class="month">%B</span><span class=year">%Y</span></div>

{/codecitation}

You will notice that we have wrapped each individual element in a span tag and then wrapped the entire date element inside a div to allow us more control over position and characteristics that should apply across all of the elements. Once this change has been made, the new markup will be output in any place that the DATE_FORMAT_LC2 string is set to print. 

* Notice that we are looking at DATE_FORMAT_LC2 as that is the same string that is referenced in the code above for that particular view. It is also worth noting that these changes will affect any other instance where the string is output on the page.

Changes in the Joomla 1.6 language files means that it's not quite possible to add markup directly to the language file like we could in Joomla 1.5 (although I would be very happy to be proven wrong about this). It is possible to add simple bold, italic, underline etc styling so this may be all you need depending on the type of design you want to implement.

Adding markup to template overrides.

The second way to edit the date format in both Joomla!! 1.5 and Joomla 1.6 is by editing the override file for that particular view. For the sake of this article I am going to assume that your template already has template overrides for the content view in place. If it doesn't, then this is a very helpful article for figuring out how to create a template override in Joomla!:

http://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core

To edit the date display in the article view you need to edit the template override file found at templates/[your_template}/html/com_content/article/default.php file. Open the file and do a quick search for "$this->article->created" this should take you directly to the position of the code for the created date in the override. 

The existing code should look something like this in Joomla! 1.5:

{codecitation}

<?php echo JHTML::_('date', $this->article->created, JText::_('DATE_FORMAT_LC2')) ?>

{/codecitation}

and like this in Joomla! 1.6:

{codecitation}

<?php echo JText::sprintf('COM_CONTENT_CREATED_DATE_ON', JHTML::_('date',$this->item->created, JText::_('DATE_FORMAT_LC2'))); ?>

{/codecitation}

To implement the same markup that we used in the example above the new markup will look something like this in Joomla! 1.5:

{codecitation}

<?php echo JHTML::_('date', $this->article->created, JText::_('<div class="dateWrap"><span class="day">%d</span><span class="month">%b</span> <span class="year">%Y</span></div>')); ?>

{/codecitation}

and like this in Joomla 1.6

{codecitation}

<?php echo JText::sprintf('COM_CONTENT_CREATED_DATE_ON', JHTML::_('date',$this->item->created, JText::_('<div class="dateWrap"><span class="day">%d</span><span class="month">%b</span> <span class="year">%Y</span></div>'))); ?>

{/codecitation}

Once you have added the markup to this file, you then need to add the markup to all of the other views you want to target. Eg: the section, category, frontpage views.

It is possible to add any combination of date syntax to these overrides. For a full run down of the various date formats and syntaxes available in php checkout the comprehensive guide over at the PHP manual.

Checking that the new markup is there.

Before we can start to style the dates by sprinkling in some css we first need to make sure that the new markup is actually getting output on the page. If the changes have worked then the source code for the page should contain something like this:

{codecitation}

<div class="dateWrap"><span class="day">07</span><span class="month">July</span><span class=year">2007</span></div>

{/codecitation}

Creating your own style.

Once the changes to the markup have been confirmed we can get down to business and start styling the dates.

In your template's main css file — or even a file specifically used for customisation — add the following selectors:

  • .dateWrap {}
  • .day {}
  • .month {}
  • .year {}

Now it's a matter of adding your own design into these four elements. The bottom three styles control the individual date elements - day, month, year and the first rule helps you to target the div that wraps all of these elements.

As an example, if you wanted to get really large and funky with the date display, you could use css something along the lines of:

{codecitation}

.dateWrap {background: #282F36;height: 250px;width: 200px;float: left;color: #fff;margin: 0 20px 20px 0}

 

.day {font-size: 12em;display: block;text-align: center;padding-top:45px;margin-bottom: 22px;background: #fafafa;color: #282F36;padding-bottom: 30px;font-family: georgia;}

 

.month {display: block;text-align: center;font-size: 3em;margin-bottom: 30px;font-family: helvetica, arial, san-serif;}

 

.year {display: block;text-align: center;font-size: 3em;font-family: helvetica, arial, san-serif;}

{/codecitation}

That css combined with the markup from the tutorial will give you a date that looks like this:

dateexample

Real world examples of creative and elegant dates.

Some of the examples below don't necessarily place a lot of design emphasis on the date itself, but sometimes a lot of impact can be made by the positioning of the date relative to the other elements on the page.

BBQ War

bbqwar.com

 

The Squarespace blog

blog.squarespace

 

We are instrument

blog.weareinstrument.com

 

Epic Agency

http-blog.epicagency.net

 

Veerle Pieters 

http-veerle.duoh.comdesign

 

Protheme

http-prothemedesign.comblog

 

Abstraktion

http-www.abstraktion.co.ukpostsnew-year-new-projects

 

Our Swiss Life

http-www.ourswisslife.com

 

Poke London

http-www.pokelondon.com

 

Postnote by Gavick

postnoteGavick

 

The Staff Tumblr Blog

staff.tumblr.com

 

Strangenative

strangenative

 

Themify

themify

 

Zennaware

zennaware.comblog

 

Noble Template by Yootheme

noble

Read 73407 times
Tagged under Designers