Custom CSS in Micro.Blog

I recently switched to the Marfa theme on my hosted site and wanted to give it my own personal touch. Luckily, allows custom CSS and there is even a [help page] to guide you along.

But, what if you don’t know what CSS tags and classes are available to manipulate? My first instinct was to explore the source code and take a look at the CSS files. This is where I bumped into something wonderful. If you mouse over any of the hex codes in the CSS source code, you’ll notice there’s a prompt to open up the color chooser. Select a color and it’ll change the hex code to the corresponding color you choose. You can also edit this manually if you already know the hex code you need. In doing so, Safari will give a live preview of the changes.

Note, none of this is actually saved within the CSS file. But, if you like what you see, you can copy and paste the edited CSS code and paste it into the custom CSS box in the settings (Account > Edit Domains & Design > Edit > Edit CSS) .

One more thing of note, once you have custom CSS on a theme, that creates a custom CSS file which overrides the original CSS file. That would prevent any changes from being seen in Safari if you’re editing the original CSS file, so it’s best to keep the custom box clear until you are finished editing.

I hope this helps. If you have any questions about CSS, you can also check in the #design channel in the [Indie Microblogging Slack].