Twittery Tweaking

Since I started letting Twitter Tools make a daily post showing my Twitter activity, I haven’t been entirely happy with the way things looked. Because they’re automatically generated posts, they don’t have tags, or moods or any of the other odd little things that I add to some posts, so they tended to look a bit lost beneath the big date box.

So today, I took some time to see if I could change that. A quick look reminded me that the theme I’m using (my own Frankentheme based mainly on Sandbox) very nicely adds some class names to, well, pretty much everything. One of the things it helpfully does is to give every post a class name based on the category to which the post belongs. And Twitter Tools can be set to add its posts to a specific category. Tie those together, and it might just work…

The first thing I had to do was to create a category for the Twitter posts. All my other posts are in a general category called “Posts”, as I use tags to, err, categorise things, and having to label things twice would only confuse me. So, I created a new category called “Tweets” and set Twitter Tools to post to that category in future. And just so I’d have something to work on, I edited the existing Twitter posts so that they are now in the “Tweets” category.

Now came the fun bit. Thanks to the wonders of CSS, I can have different styling for posts based on their category. What I did was make the block with the date and time disappear, and the same for the “Tags:” and “Comments:” lines. This didn’t take a lot of work, in fact I just had to add this to my stylesheet:

.category-tweets .post_cal, .category-tweets small {display: none;}

I’ll explain that a bit – the calendar box lives in a <div> with the class “post_cal” (for Post Calendar). Setting “display” to “none” removes it as if it wasn’t there at all. Similarly, the Tags and Comments lines are surrounded by <small></small> tags, so setting the properties of “small” to display:none makes them disappear too.

That wasn’t bad, but the list of Tweets had those pointless blob thingies next to it, and it was inset to the right quite a long way. Fortunately, Twitter Tools uses a class name for the list, so I could fiddle with it without breaking anything else. This took another little bit of CSS:

.aktt_tweet_digest {
		list-style-type: none;
		margin:0;
		padding: 0;}

So now the list is a simple left-aligned one.

The cool thing about this technique is that if I wanted to use different styling for different kinds of post, I can do it purely in CSS without having to write any code full of complicated “ifs”, which is just as well, as I always get into trouble, and put the closing thingies[1] in the wrong places. Full credit has to go to the lovely Sandbox theme for making this not only possible, but also very easy.

[1] Technical expression