You are here

Styling your blog post date to look like a calendar

You can all seen the numerous examples of beautifully styled dates on blog posts which look like little calendars or attractive, interesting blocks.  In this tutorial, I'll walk you through pulling the parts of your post Drupal post dates to be displayed separately, with their own class, so you can style your date in as detailed as a way as you want!  Here is what the final output of our date will be:

Edit how the 'submitted' variable is output

Drupal, by default, outputs the published date of nodes all in one piece, while we want to display the month, day and year in separate little classed divs, so we can style each independently.  To accomplish this, let's add some additional code to our YOURTHEME_preprocess_node() function, if you already have it, or create a brand new such function in our theme's template.php file:

function YOURTHEME_preprocess_node(&$vars, $hook) {
  $vars['submitted'] =  '<div id="date-submitted"><div class="month">' . date("M", $vars['created']) . '</div>' .
                        '<div class="day">' . date("d", $vars['created']) . '</div>' .
                        '<div class="year">' . date("Y", $vars['created']) . '</div></div>';

This will cause our post date to be output like this:

<div id="date-submitted">
   <div class="month">Oct</div>
   <div class="day">24</div>
   <div class="year">2013</div>
</div>

 

Declare stylesheet variables (if using SASS/LESS)

If you're using CSS pre-processing like SASS or LESS, go ahead and declare variables for the styles you're going to use as well as defining a rounded corner mixin.  If you're just using straight CSS, skip this section and use the color and rounded corner code directly in your style rules.

// Variables
@purple:         #cc7296;
@mint-green-dark:    #87a39c;

// Mixins
.border-radius (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

 

Style the new date divs

Here's the actual CSS to style that prepped date of ours!

#date-submitted {
  display: block;
  line-height: 1.3em;  
  text-align: center;
  float: left;
  padding: 5px;
  margin-right: 8px;
  margin-bottom: 8px;
  border: 1px solid @mint-green-dark;
  .border-radius(6px);
}
#date-submitted .day {
  font-size: 22px;
  padding-bottom: 3px;
  padding-top: 3px;
  text-shadow: 0px #666666;
  top: 30px;
  left: 0px;
  right: 0px;
  letter-spacing: 0px;
}
#date-submitted .month {
  font-size: 16px;
  padding-top: 2.5px;  
  letter-spacing: 3px;
  color: @purple;
  height: 20px;  
  width: 32px;  
}
#date-submitted .year {
  font-size: 16px;
  color: @mint-green-dark;
  padding-bottom: 2.5px;
}

 

Additional enhancements

  • You could use a background image to make this look like an actual calendar
  • The example above does not include any background images, so it looks a little simplistic, but hopefully it gets you started, and you can easily adapt this to use a mini calendar image background to make the date display truly look like a mini calendar.  Something like:
#date-submitted {
  background: url(date.png) no-repeat;
  ... 

 

Result (again)

Share

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.