The following piece of CSS code adds a dropshadow to an image which looks similar to the shadow that gets added by the application MiniShadow (€ 1.99), using the shadow style ‘Mini’. While I was on the road I became aware that I didn’t have a tool handy on my iPad to easily add these type of shadows to screenshots.

.dropshadow {
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.4);
}

The moon on September 28 @ 2:42 am (f/5.6, exposure time 1/4 seconds)

Normal moon

I had been in contact with David on the possibility on getting some additional variables available for manipulating dates. This was induced by my tinkering with the look-n-feel for my blog and specifically to design and coding of the calendar badges.

Instead of just adding some variables David implemented formatting options by applying Moments, a library/toolkit specifically developed to ‘Parse, validate, manipulate, and display dates in JavaScript’.

In my previous post I fixed the calendar badge to make it work for image-only posts as well. The same issue could also be found in the Archives page. This was also relying on the custom metadata fields month and day.

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 post you cannot specify the custom metadata required. This needed to be fixed.

By changing the structure of the HTML templates and rewriting the jQuery code the calendar badge will now work by just using the standard date field. It does need to be using the display format September 24, 2015 (The setting is named ‘How should the date appear on your blog?’ in your Blot.im dashboard) for the code to work correctly. Something to keep in mind if you wish to implement this in your blog and your are using a different display format.

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 badge

To make the reading of longer tables a little easier a background color can be applied which alternates between odd and even rows.

CSS has built-in support form this, via a pseudo-selector, called nth-child.

table tr:nth-child(odd) td {
  background-color: rgba(225, 234, 240, 1);
}

table tr:nth-child(even) td {
  background-color: rgba(234, 240, 247, 1);
}