micro.blog has a neat feature where Webmention replies to your blog posts and microposts from across the Web can be displayed as comments below your post. However, I found the default look of conversations on many available themes to be cluttered and offputting.

So I edited its CSS to make it look clean and decent on any theme.

Here’s how you can have that too:

On your micro.blog Dashboard, go to Design > Edit CSS.

Paste the following code there:

/* Making micro.blog conversations decent looking */

.microblog_conversation {
  margin-top: 10px;
  border-top: 1px solid #ddd;
  background: #e5e5e5;
  padding: 15px;
  border-radius: 15px;
}

.microblog_fullname {
  font-weight: bold;
  margin-bottom: 5px;
}

.microblog_post {
  color: #333;
  font-size: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.microblog_avatar {
  border-radius: 5px;
  vertical-align: top;
  margin-bottom: 0px;
}

.microblog_time {
  font-size: 12px;
  padding-top: 0px;
  color: #999;
  text-transform: uppercase;
}

.microblog_time a {
  color: #999;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 400;
}

Save your changes by clicking Update CSS.

I know this look may not be for everyone but I think you’ll agree it looks better than the default. You can then tweak it further to your liking.

I think defaults matter a lot, and so I’d like to see micro.blog provide a cleaner looking conversations style on all of its officially available themes.