mnml. A Micro.blog theme

The mnml Settings Explained

Sat, 25 Jan 2025 12:53:00 -0700

This post helps to explain the different options mnml has to customize your blog.

The Settings

Site Language

Setting a value in this field will localize output pages in the preferred language. For example, setting “fr” in this field will localize to French strings. Localization strings available are:

en: English
de: German
es: Spanish
fi: Finnish
fr: French
it: Italian
pl: Polish
pt: Portuguese
ru: Russian
sv: Swedish
uk: Ukrainian
zh-TW: Simplified Chinese

Fediverse creator

Mastodon 4.3 adds support for a newly proposed OpenGraph tag to identify the creator of a link shared on Mastodon.

For more information about what it means and how to set this up for your own Mastodon username, check out this post on the Mastodon blog.

Use a Short Date

This will output a shorter date on site pages.

This will render the site header the same width as the main page.

Hide header avatar

This will prevent the site header avatar from being rendered.

Custom avatar

You can select a custom header icon to display if you’d rather not use your Micro.blog user profile image.

Simply select any image that can be browsed on the internet and insert the link in the field. I recommend using square images no bigger than 512 pixels on each side.

Does not work if “Hide header avatar” is enabled.

Home page categories

If you’d like to show posts from a specific category on your home page instead of all posts, enter the category name here. Leaving it blank will show all posts.

Show full posts on homepage

By default, mnml will display summary posts on the home page. Enabling this option will output full length posts on the home page.

Show read time on titled posts

This setting adds a localized string for how many minutes it will take to read the post. Only works on posts with a title.

Show full posts on category pages

Just like the “Show full posts on homepage” setting, this will show full posts on category related pages.

Show categories on archive pages

Enabling this option will include button links to each category at the top of your Archive page, allowing users to easily view posts from a specific category. Disabling the setting hides the buttons.

Show post count for archive page categories

This will show the number of posts within the archive page categories. “Show categories on archive pages” must be enabled.

Photos category

If you’d like to show your photos from just a specific category on the photos page, enter the name of that category here, as in the example above.

If you’d like for all images to be displayed regardless of category, simply leave the setting blank.

Display all image formats

Enabling this setting will display png, webp, and other image formats in addition to jpg on the photos page.

Use photos masonry layout

mnml comes with two different photo layout options: grid and masonry. Grid will display images in square sizing regardless of size, and masonry will fit images together, maintaining their full size in the layout.

Experiment with this setting. Personally, I like the masonry layout myself.

Use a wider photos page

Some people may not like the more narrow layout of the blog default for their photos page, so an option was added to show the page just a little wider.

Experiment with this setting too. I like the wider page myself.

Show first post image only

This setting will limit the photos page to only display the first image in a post that would show up on the photos page.

Number of search results

Sets the number of search results returned once you’ve added a search page. The default is five.

Finally, if showing footer credits for other people’s work on your blog is not your thing, you can hide them by enabling this setting.

This choice is entirely up to you.

Questions and Comments

If you have questions or comments, please do [email protected]">get in touch with me.

Modifying the Color Scheme

Thu, 23 Jan 2025 18:01:00 -0700

You can customize the color scheme of mnml directly within the Micro.blog dashboard using custom CSS.

On the design page, open your custom theme (you may need to add one if you haven’t already). Once your custom theme is open, you should see an option at the top to edit Custom CSS. That’s what you want to edit.

Paste the following CSS in as your starting point:

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --background: #ffffff;
    --text: #42444a;
    --link: #0d88d8;
    --link-hover: #101115;
    --accent-1: #f6f6f6;
    --accent-2: #d4d4d6;
    --accent-3: #84868b;
    --highlight: #e3e3e6;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: #20232a;
    --text: #f7f7f7;
    --link: #45c8f7;
    --link-hover: #ffffff;
    --accent-1: #3d4149;
    --accent-2: #53565d;
    --accent-3: #d4d4d6;
    --highlight: #53565d;
  }
}

This is the default color scheme for mnml. You can change the color for any (or all) variables by simply modifying the hex value. To revert back to the default, either paste the code into your custom CSS again, or delete it entirely.

Fri, 03 Jan 2025 10:13:57 -0700

Finally, this is a long Short Posts category post without a title that’s more than 300 characters using the “<!–more–>” tag to insert a break. There will be a “Continue reading →” link after this sentence.

Lorem ipsum dolor sit met, consectetur adipiscing elit. Aliquam eu cursus lorem, ut vulputate libero. Sed nec purus a urna ornare condimentum vel quis augue. Sed eget accumsan nibh, quis ultricies dolor. Done eget odio eleifend, comido massa vitae, lacinia nunc. Vestibule vel nisi rhoncus ligula lobortis imperdiet. Prooien postere tellus et cursus porta. Curabitur porttitor sapin ut lestés dictum lobortis. Vivamus mattis iaculis ullamcorper.

Suspendisse imperdiet, augue at gravida consectetuer, ipsum elit cursus lacs, non accusant purus lectuur sit met est. Sed euismod augue vel tortuur semper bandiet. Curabitur elit leo, sodas a feugiat eget, kommod vitae lorem. Aliquam ut enim in elit elementum molestie id vel urna. Vestibulum molestie lorem nec massa adipiscing, quis elementum locus ultraces. Etiam porta elit turpis, faucibus ornare massa consequat ac. Nullam id felis at neque varius euismod eu eu sappen. Etiam id fermentum ligula, ac fermentum veilt.

A Long Post Title Using a "More" Break

Fri, 03 Jan 2025 10:02:10 -0700

This is a long Long Posts category post with a title that’s more than 300 characters using the “<!–more–>” tag to insert a break. There will be a “Continue reading →” link after this sentence.

A Long Post with Title

Fri, 03 Jan 2025 09:54:55 -0700

This is a long Long Posts category post with a title and more than 300 characters. There will be truncation of content for this post after a few sentences.

Fri, 03 Jan 2025 09:47:32 -0700

This is a long Short Posts category post with more than 300 characters. There will be no truncation of content for this post.

Fri, 03 Jan 2025 09:44:54 -0700

This is a short Short Posts category post with less than 300 characters. There will be no truncation of content for this post.

Photo Collection

Thu, 02 Jan 2025 10:39:00 -0700

This is what a Micro.blog photo collection looks like.

Wed, 01 Jan 2025 09:35:02 -0700

Wed, 01 Jan 2025 09:34:41 -0700

Wed, 01 Jan 2025 09:34:25 -0700

Wed, 01 Jan 2025 09:34:04 -0700

Wed, 01 Jan 2025 09:33:30 -0700

Wed, 01 Jan 2025 09:33:03 -0700

Wed, 01 Jan 2025 09:32:38 -0700

Wed, 01 Jan 2025 09:32:19 -0700

Wed, 01 Jan 2025 09:32:02 -0700

Wed, 01 Jan 2025 09:30:53 -0700

Wed, 01 Jan 2025 09:30:33 -0700

Wed, 01 Jan 2025 09:30:09 -0700

Wed, 01 Jan 2025 09:29:49 -0700

Wed, 01 Jan 2025 09:29:27 -0700

Wed, 01 Jan 2025 09:28:53 -0700