Choose Your Date Format

You can change the format of all dates shown throughout the theme (with the exception of individual comments) by modifying your config.json file in the Micro.blog Dashboard theme editor. Here’s an example config.json with modifications:

{
    "paginate": 20,
    "defaultContentLanguage": "it",
    "params": {
         "dateFormatLong": "2 January 2006",
         "dateFormatShort": "2 Jan 2006"
    }
}

Going line by line, you can see the number of posts before it breaks into pages is set as 20. The next line sets the language of the site to Italian (see possible options for language). The last section allows you to define the format of short and long dates throughout the theme. Inputting any commonly used format will work. You can use this as a guide.

Choose Your Language

Sumo theme supports the following languages:

  • English (en)
  • German (de)
  • Spanish (es)
  • French (fr)
  • Finnish (fi)
  • Italian (it)
  • Portuguese (pt)
  • Russian (ru)

English is set as the default language, but you can easily switch languages by defining it in your config.json. You can modify it by going to the Design page in your Micro.blog Dashboard. Click Open Theme and choose config.json. Below, you can see the default config.json in its entirety (it really is that short). Change en to your preferred language.

{
  "paginate": 10,
  "defaultContentLanguage": "en"
}

A Sumo Inspired Style for Photo Collections

Micro.blog’s new Photo Collections feature is an excellent way to built out sets of photos (all at once or over time). The built-in layout is perfectly adequate for many use cases. Due to that, I’m leaving the Micro.blog default as the Sumo default.

However, if you’d like, you can use the following CSS to give it a more sumo like feel. Before you add this, you must understand that this will override the default rounded corners, spacing, and sizing for all collections across your entire site. Additionally, it will unify the design across all device sizes (for better or worse). If you’ve made other modifications to Sumo Theme, there might be conflicts (although unlikely). Lastly, if it does break stuff on your blog, it’s as simple as deleting the code to revert to how it was.

All you have to do is add this to your custom CSS within the Micro.blog dashboard:

.microblog_collection img {
    width: calc(100% / 3) !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    border-radius: 0 !important;
    margin: 0 !important;
}

Yes, I broke a cardinal rule of web design and used way too many !important properties. But by doing it this way, I greatly minimized the amount of code needed to achieve the proper result (due to screen size media properties that are added by default).

Modifying the Color Scheme

You can customize the color scheme of Sumo Theme directly within the Micro.blog dashboard by using 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 where you want to be.

Paste the following CSS in as a starting point:

:root {
	--page-background: ;
	--main-text: #4d4d4d;
	--main-link: #333333;
	--main-link-hover: #000000;
	--main-link-border: #e1e1e1;
	--main-link-border-hover: #000000;
	--profile-border: #f0f0f0;
	--navigation-button-border: #e4e4e4;
	--navigation-button-background: ;
	--navigation-button-border-hover: #000000;
	--navigation-button-background-hover: #000000;
	--navigation-text: #8c8c8c;
	--navigation-text-hover: #f0f0f0;
	--heading-color: #000000;
	--button-border: #e4e4e4;
	--button-background: ;
	--button-border-hover: #000000;
	--button-background-hover: #000000;
	--button-text: #8c8c8c;
	--button-text-hover: #f0f0f0;
	--hr: #f0f0f0;
	--blockquote-border: #000000;
	--blockquote-background: ;
	--blockquote-text: #4d4d4d;
	--code-border: #e4e4e4;
	--code-background: #fafafa;
	--pre-border: #e4e4e4;
	--pre-background: ;
	--note: #FFF9C4;
	--alert: #FAD2D2;
	--aside: #F5F5F5;
	--callout: #DDEBF7;
	--conversation-background: ;
	--comment-border: #e4e4e4;
	--footnotes: #8c8c8c;
	--footnote-super: #000000;
	--page-fold: #F5F5F5;
	--video-placeholder: #fafafa;
	--comment-form-background-color: #fafafa;
	--comment-form-border-color: #fafafa;
	--shared-note: #FFF9C4;
	--red-text: #ff0000;
	--highlight: #FFFF00;
}

That is the default color scheme for Sumo. You can change the color of any (or all) items by simply modifying the hex value. To revert back to the default, you can either paste the code in again or delete it entirely.