Micro.blog’s default design for hosted sites is based on an original theme that shipped with Jekyll. It is very plain, but works well on desktop computers and mobile devices. It’s also pretty easy to customize.
I recently set up the new Micro.blog news blog and wanted to apply a few minor improvements to the design: adding a logo to the header and fixing how cramped the quoted text looked. To add a logo to the header, you can use CSS to shift the text to the right, making room for the logo, and then add the logo as a non-repeating background image.
Here’s what my custom CSS looks like:
blockquote {
letter-spacing: -0.5px;
line-height: 1.6;
}
.site-title {
background-image: url(https://help.micro.blog/assets/images/icons/ios/icon-60.png);
background-size: 30px 30px;
background-repeat: no-repeat;
background-position-y: 12px;
padding-left: 40px;
}
You can edit the custom CSS for your blog by clicking Posts → Edit Domain & Design → Edit CSS. I also posted during out 12 days of microblogging series about other custom designs from Micro.blog users.
