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).

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.