Tiny Theme for Micro.blog

Tutorials

Adding an Adaptive Photo Layout to a Post or Page

Adding Adaptive Photo Layouts used to require the use of a plugin. As of Tiny Theme 2.7.8, that is no longer the case. Now, all you need to do is add the proper html and publish.

Build Your Grid

Add your image URLs, links for previews (optional), and descriptions to your post/page using the following format:

There is no upper or lower limit to the number of images. Images can be any size and aspect ratio, although you may find that keeping them similar provides the best look.

Shortcuts

If you have a lot of photos to add, uploading and copying/pasting the links can become tedious. Fortunately, Jarrod Blundy of HeyDingus.net has come to the rescue with two shortcuts for macOS and iOS:

• Gallery Creator
• Gallery Builder (add to existing album)

The shortcut allows you to choose/upload photos and add alt descriptions. Then it’ll provide you with fully formatted code to paste into your post.

If you use his shortcuts, be sure to support his work.

Example

Once you’ve done that, you should have a nice grid of photos that looks something like this:

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

A Different Way to Format Your Main Blog Page

Microhook-post-list.html is the most advanced and capable Microhook available within Tiny Theme. It allows you to completely re-think how the main blog page of your site functions. In this tutorial, I’ll walk you through how Pratik re-worked his home page to display dates in reverse chronological order (as expected with a blog), but to display posts that happen on the same day in chronological order.



The ideal user of this modification is someone who publishes a very high volume of content.

First, you’ll need to enable microhook-post-list.html in your custom theme. If you’re unsure how to do this, you can find the instructions in the overall Microhook documentation.

Next, paste in the code below and save everything.

Once your site is built, these changes should be reflected on your blog. You’ll now see posts sorted in a new way. You can leave everything as is or style yours as you see fit using css.

To style it like the screen shot above, you can add this short snippet to your custom css.

As stated in the documentation, the use of this microhook disables the use of certain other microhooks.

Adding a Read More Button to Longform Posts

By default, Tiny Theme shows the full content of each post on your main blog page. If you write longform content, this might not be exactly what you want. Fortunately, there is an easy way to manipulate what shows on your home page on a per post basis.

In your post, simply add a more tag wherever you’d like. Ideally, this is between paragraphs, but you do have some flexibility. When you add that tag, your home page (or whatever page has your blog feed) will only show the content ABOVE that tag. Instead of the remainder of the content, it will show a “Read More” button that will take readers to the full post content. This feature works without any additional plugins or modifications.

Some of you may want to change that text from “Read More” to “Finish Reading” or something in a different language. That’s easily possible with Microhooks, specifically microhook-read-more-text.

Add a Divider Between Posts

You can easily add a simple dividing line between posts on the main blog page using CSS. Go to your Design page in the micro.blog dashboard and click the “Edit CSS” button. From there you can paste in the following code and modify it as you see fit.

This will add a subtle border between each post. If you’d like to get even more advanced/creative, you can utilize the microhook-below-post-in-list.html microhook to add a horizontal rule, advertisements, or anything else between posts.

Hide Categories on Individual Posts

Many people prefer to have categories hidden on individual posts. Here’s how you can easily do that using only custom CSS in the micro.blog dashboard.

Center the Header

By default, the header is aligned left for Tiny Theme. If you’d like to have it centered, it’s as simple as adding this line to your custom CSS in the Micro.blog dashboard.

An Example Child Theme

Tiny Theme comes fully designed out-of-the-box, but many people like to tweak things here and there. Perhaps you want to add a background or increase the width. As a quick example, I’ve designed a child theme using only 3 lines of CSS.



I’ve added a background color, modified the page width, tweaked the margins, rounded some corners, and centered the header. You can copy and paste the code below into your Custom CSS (access it via the Design page on Micro.blog). Use it as is or modify it to your needs.

As you can see, making wholesale design changes to Tiny Theme is pretty easy.

Changing Fonts

When I started developing Tiny Theme, I set out with goals of (1) accomplishing everything without scripts, (2) make it as light as possible, and (3) use as few media queries as possible. To date, Tiny still has zero added scripts, is very light, and uses only 1 media query (to enable dark mode). However, shortly after releasing the theme, it became apparent that people wanted font choices. How could I enable that without adding any scripts or additional weight to the theme?

Going this route limited me to using system fonts. My first inclination was to leave the theme as is and allow users to decide if and how they wanted to customize font stacks (something you can still do). But with more requests, I realized a lot of people would prefer to have built-in options.

While attempting to build out my own capable font stacks, I came across Modern Font Stacks. It is a collection of pre-defined font stacks (with fallbacks) that have almost perfect cross compatibility with different browsers and systems. It was an easy choice to build off their work.

The next hurdle was deciding how to allow Tiny Theme users to select fonts. I could build in a sort of font selector dropdown, but that would require a settings page (which has certain Micro.blog hurdles) that could stand in the way of future updates. I also considered a separate plugin to enable the feature, but decided that was unnecessary.

Ultimately, I decided to integrate the font family choices directly into Tiny Theme. You can use Micro.blog’s built-in Custom CSS options to choose your preferred font stack from Modern Font Stacks. Visit their site for quick visual aids.

How to Use

1. Go to Edit CSS in your Micro.blog Design Settings
2. Add the following code:

body {
    font-family: var(--font_system_ui);
}

The code snippet above is the default setting. To change your font stack, you can choose from the following options:

• --font_system_ui
• --font_transitional
• --font_old_style
• --font_humanist
• --font_geometric_humanist
• --font_classical_humanist
• --font_neo_grotesque
• --font_monospace_slap_serif
• --font_monospace_code
• --font_industrial
• --font_rounded_sans
• --font_slab_serif
• --font_antique
• --font_didone
• --font_handwritten

For example, you could use:

body {
    font-family: var(--font_old_style);
}

If you’re familiar with web inspectors, you can easily cycle through the options to see a live preview on your site.

Target Specifics

The above example will change the fonts used on the entire site, but you may also prefer to target certain elements. This can easily be done in a very similar way. Let’s say you’d like to only change the font for Headers, here’s how:

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font_industrial);
}

Dealing with Font Weights

Some fonts have heavier and lighter weights by default. If you like a certain font choice, but think the implementation is too light or too heavy/bold, you can experiment with different weights. Modern Font Stacks gives you your options, but here’s an example specific to Tiny Theme.

body {
    font-family: var(--font_antique);
    font-weight: 100;
}

Backwards Compatibility

If you’ve previously changed your font in another way, this won’t break it. It’s only a simpler way to switch fonts to pre-defined stacks for those who want it.

Modify the Color Scheme

Tiny theme uses CSS variables to assign these colors throughout the design. The main benefit of using variables is the ability to change colors throughout a theme with the least amount of work/code.

These are the default colors set by the theme:

As you can see, there are 2 values for each element. 1 for Light Mode, 1 for Dark Mode. Copy the above code and paste it into your custom CSS.

You can add custom CSS by going to Design → Edit CSS in the Micro.blog dashboard.

Once it’s in there, you can change the hex values to the colors of your choice. For example, if you’d like the background of your site to be beige instead of white in light mode, simply change the light mode background value to #F5F5DC. Save it and refresh your site in another tab.

The colors you choose in your Custom CSS will override the theme defaults.

Changing Colors for a Specific Element

There may be times where you’d like to change the color for a specific element. For example, you want all of your navigation buttons to be blue, except for the subscribe button which should be red. In this case, you’ll need to lookup the CSS elements and classes to target that specific button.

Tiny theme is full of descriptive classes that work well with micro.blog. Navigation elements include a class name that’s the same as the text and individual posts include class names equal to their assigned post categories.

I suggest using a web inspector to dive into it and test your changes. If you’re having trouble with a specific customization, feel free to let me know.