Sep 21 2015 0

Adding a calendar badge

I wasn’t totally satisfied how dates for each post were displayed using the default Blot templates, so I decided to change it. That’s the beauty of having a template based blogging system available.

After a bit of sketching and trying out several color combinations I have chosen the following design for the calendar badge

Calendar badgeCalendar badge

Now to make it all happen the code had to be written. The following sections detail the changes that had to be implemented to get it to work. Feel free to implement it in your own blog. I would appreciate a tweet on @drexore when you have implemented it for your blog.


Since this method requires custom metadata it does not work with image only posts. Since there is no metadata the calendar badge will be empty. This same is true for the modified Archives page.

Update to the templates

In both entries.html and entry.html replace the following HTML code

<a class="small date left margin" href="{{url}}">{{date}}</a>

with this piece of code (the space within the span tags for the classes month and year is intentional). 1

<div class="left margin">
    <div class="calendar">
      <span class="month" data="{{metadata.month}}"> </span>
      <span class="day">{{}}</span>
      <span class="year" data="{{metadata.month}}"> </span>

jQuery code

To be able to create a new style for the Archives page I had added two custom metadata fields to each post, Month and Day. Where Month contains both the full month and the year and Day just the day number.

For the calendar badge ideally there would be three fields (Month, Day and Year), but with one change that for Month it would only contain the first three characters of the month name. I didn’t want to require these additional fields since this would mean I had to go through all my previous posts to add the new metadata.

For now (until provides these fields out-of-the-box) I have opted to add a little bit of jQuery code that creates the required information using the Month field, this field contains all the information needed it just needs to be massaged a little. As you can see from the HTML code above the data from the Month field is provided in the attribute named data of the span-elements for month and year. For the month we only need the first 3 characters of it and for the year everything following the space. The following piece of jQuery code does just that and needs to be added to scripts.js


// Calendar badge related code
        $(this).text( $(this).attr("data").substring(0,3));
        $(this).text( $(this).data("data").substring($(this).attr("data").indexOf(' ')));

CSS code for the badge

The following CSS has been added to styles.css 1

/* Styling for calendar badge */
div.calendar {
  background-color: rgba(236, 236, 236, 1);
  width: 60px;
  height: 60px;
  line-height: 20px;
  border: 0px;
  font-size: 14px;
  font-weight: bold;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  text-align: center;
  padding: 0px;
  margin: 0px;
  margin-bottom; 24px;
  color: white;
  display: block;
  float: right;
  -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  text-shadow: none;

span.month {
  background-color: rgba(185, 113, 249, 1);
  display: block;
  -webkit-border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-topright: 6px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;

span.year {
  background-color: rgba(128, 74, 172, 1);
  display: block;
  -webkit-border-bottom-right-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-radius-bottomright: 6px;
  -moz-border-radius-bottomleft: 6px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
} {
  display: block;
  color: black;

Previous post
Next post
Fixing the calendar badge As noted in my previous post the way the calendar badge is implemented it would not work correctly for image-only posts, since for these types of
This blog is powered by Blot