Custom CSS

You can pick from several default themes for your Micro.blog-hosted site. You can also add CSS to further customize the design of your site.

To edit your site’s CSS, go to Account → “Edit Domains & Design” → Edit (next to your hostname) → “Edit CSS”. When you type or paste in a snippet of new CSS and click “Update CSS”, your microblog will be republished with the custom CSS.

If you wanted to customize all the photos on your microblog to include a border, you might add CSS like this:

img {
  border: 1px solid gray;
}

It’s even possible to replace some text using CSS. For example, in the Primrose theme the copyright footer can be overridden with CSS like this:

.footer {
  padding-top: 10px;
}

.footer:after {
  content: "Creative Commons License";
}

.copyright {
  display: none;
}

One of our newest themes is called Marfa. If you use this theme and would like to change the default colors, Micro.blog user @roelwillems has written a guide on his microblog for what CSS to use.

2 Likes

A darker roast for Arabica. Custom CSS suitable for pasting into µ.blog.

I’m not quite happy with block-quote and followed-link, but I think the body replacement works. Below is all the color lines from Arabica’s screen.css, with some colors replaced.

I’m sure this could be made much briefer by keeping only the changed values, or making better use of shared declarations.

/* 
Darker Roast for Arabica, on µ.blog
Charles Twardy, 2021

Bob Horn complained that my blog was too light for 87yo eyes to read. 
Fair enough, but I like the Arabica theme.  I found the Arabica colors here:
  * https://github.com/microdotblog/theme-arabica/blob/master/static/assets/css/screen.css

Using ColorHexa, I could find darker shades of key colors:
  * https://www.colorhexa.com
  * #9eabb3 --> #4f5d65;                       This was the most common font color.
  * Darkened block quotes, maybe too much.
  * Darkened followed links, leaving them somewhat reddish.

*/
  
/*	==========================================================================
	General styles
	========================================================================== */
	body {
		font-family: "Lato", sans-serif;
		font-weight: 300;
		color: #3A4145;
	}
	
	blockquote {
		color: #4f5d65; /*#9EABB3;*/
	}
	
	
	hr {
		border-top:#4f5d65;  1px solid;    /*9EABB3;*/
	}
	
	/* Links */
	.post a {
		color: #FC7E0F;
		text-decoration: none;
	}
	
	.post a:visited {
		color: #bb8250;   /*9EABB3;*/
	}
	
	a.read-more, a.read-more:hover, a.read-more:visited {
		color: #FC7E0F;	/* #DA1F15, #F17F33 */
	}
	
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
		color: #3A4145;
		text-decoration: none;
	}
	
	.post-title a {
		color: #3A4145 !important;
		text-decoration: none !important;
	}
	
	/* Tables and dictionaries (straight up ripped out of the Casper stylesheet with minor modifications) */
	
	th, td {
		border-top: #EFEFEF 1px solid;
	}
	
	table tbody + tbody { border-top: #EFEFEF 2px solid; }
	
	table table table { background-color: #FFF; }
	
	th {
		color: #000;
		background-color: #F6F6F6;
	}
	
	/*	==========================================================================
		Blog header
		========================================================================== */
	.blog-title {
		font-weight: 300;
	}
	
	.blog-title a {
		font-color: inherit;
	}
	
	.blog-description {
		color: #4f5d65;   /*9EABB3;*/
		font-weight: 300;
	}
	
	/*	==========================================================================
		Navigation
		========================================================================== */
	
	.nav a {
		color: #bb8250;   /*9EABB3;*/
	}
	
	.nav a:hover {
		color: #FC7E0F;
	}
	
	a.nav-current {
		color: #FC7E0F;
	}
	
	a.nav-home, a.nav-blog {
		color: #3f4d55;  
	}
	
	/*	==========================================================================
		Site footer
		========================================================================== */
	
	.site-footer a {
		color: #FC7E0F;
	}
	
	.site-footer a:hover {
		color: #4f5d65;   
	}
	
	
	/*	==========================================================================
		Posts
		========================================================================== */
	
	.post-footer .tags a {
		color: #4f5d65;   
	}
	
	.post-footer .tags a:hover {
		color: #FC7E0F;
	}
	
	.post-footer .share a {
		color: #BBC7CC;
	}
	
	.post-footer .share a:hover {
		color: #50585D;
	}
	
	/*	==========================================================================
		Tags
		========================================================================== */
	
	.tag-description {
		color: #4f5d65;   
	}
	
	/* ==========================================================================
	   Pagination
	   ========================================================================== */
	
	/* The main wrapper for pagination links */
	.pagination {
		color: #4f5d65;   
	}
	
	.pagination a {
		color: #4f5d65; 
	}
	
	.older-posts:hover,
	.newer-posts:hover {
		color: #FC7E0F;
	}
	
	

Nice, thanks for sharing! I wonder if we should bundle this up into a plug-in for others to install?

1 Like

Sure I guess we could bundle it now and improve after. How do I start?