How do you like my saucy new mini-calendars, showing the post-dates on my blog entries? Pretty nifty, eh? – and the cool thing is that it’s all done with good ol’ CSS. No image files were hurt in the making of this website.

If you fancy having a go, here’s what you need to do:

1: First, add the following code into your theme’s custom HTML. If you don’t know how to edit your theme’s custom HTML, you probably shouldnae be doing this anyway but, if you like living on the edge, refer to my previous post for instructions on how to access the HTML editing screen.

The mini-calendar code needs to go inside the title block. Here to be precise:

Replace the highlighted line above with the following code:

[You can use {Month} instead of {ShortMonth} in the above code, if you’d prefer your calendar to display the full month name].

2: If you save the changes and reload your Tumblr blog, you should see that you now have post-dates embedded in the titles of your posts, although the formatting will leave a lot to be desired:

Dinnae panic! The fact that the date is there shows that that part of the code is working, but there are no styling rules applied yet, so the date is just displaying in the same font and colour as the rest of the title. Time for a bit of CSS magic!

3: Edit your theme’s CSS declarations. If you followed my previous post about extracting your CSS to an external file, you need to edit that. If you’re just using the standard Tumblr themed editing features, then the CSS will be inline at the top of the HTML for your theme. Whatever the case, here’s the CSS which I’ve used to style my mini-calendars. It disnae really matter where you put it within your theme’s CSS; I stick it next to the declarations for the post-title, so it’s easy to find:

I’ll leave it as an exercise for the reader to customise the mini-calendar CSS to get the look you want, to fit your particular theme.

4: One other tweak I made was to add a bit more padding at the top of the post DIV itself, just so the mini-calendar wasnae wedged right up against the top of the post border:

Before

After

Well, that’s all folks. Have fun!

Even though i’m supposed to be on holiday for the next week, I cannae resist tinkering on the intarwebs. So today i’ve given my tumblr blog a bit of a make-over:

before:

after:

• Widened the layout. there was s-o-o-o much wasted space in the old one. i think it was about 700px wide altogether. my new one is 1000px wide.
  
  
• Changed styling of post title, footer bars and sidebar headings to make them look a bit more ‘labelly’, which is kinda the look i’m going for.
  
  
• Changed link colours to match header bars and added text-decoration:underline on rollover.
  
  
• Stripped all ‘px’ text sizes out of template and replaced with the more uniformly compatible 100% + ems method.
  
  
• Changed formatting for quoted text.
  
  
• Centred images and videos within posts. The “align center” [sic] option when posting has never worked for me and, inspecting the generated code, it seems that it does absolutely fuck all. So i used some sneaky jQuery to add an “imageholder” class to any paragraph containing an img or iframe [as used by youtube] tag. Then set all such paragraphs to “text-align:center” [sic].
  
  
• Finally got round to doodling a logo
  
  
• Gave sidebar a negative top margin to lift it up a bit, now i’ve got quite a fat logo at the top of the page.
  
  

i think that’s it. Looks much better now —even if i say so myself!