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
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.
Enjoy!
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).
<div class="left margin">
<div class="calendar">
<span class="month" data="{{metadata.month}}"> </span>
<span class="day">{{metadata.day}}</span>
<span class="year" data="{{metadata.month}}"> </span>
</div>
</div>
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 Blot.im 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
$('span.month').each(
function(){
$(this).text( $(this).attr("data").substring(0,3));
}
);
$('span.year').each(
function(){
$(this).text( $(this).data("data").substring($(this).attr("data").indexOf(' ')));
}
);
CSS code for the badge
The following CSS has been added to styles.css
/* 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;
vertical-align:middle;
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;
}
span.day {
display: block;
color: black;
}