How do I change the colors, fonts, and general layout of my Listed blog?

You can use CSS to stylize your blog as you see fit.

To stylize your blog with custom CSS:

  1. Create a new note in Standard Notes, and call it theme.css (name can be anything).
  2. Use the following metadata structure, overriding any of the variables with your desired color values.
---
metatype: css
---
:root {
--dimmed-text-color: rgb(170, 170, 170);
--dimmed-border-color: rgb(233, 233, 233);
--background-color: white;
--body-text-color: black;
--post-title-color: var(--body-text-color);
--post-date-color: var(--body-text-color);
--post-text-color: var(--body-text-color);
--page-menu-link-color: var(--body-text-color);
--header-author-name: var(--body-text-color);
--header-listed-name: var(--dimmed-text-color);
--more-from-border-color: var(--dimmed-border-color);
--bio-color: var(--body-text-color);
--wordcount-color: var(--dimmed-text-color);
--website-color: var(--dimmed-text-color);
--twitter-color: var(--dimmed-text-color);
--link-color: #086dd6;
--header-border-color: var(--dimmed-border-color);
}

A list of pre-defined CSS colors can be found here.
You can create the perfect colors using Adobe's Color Wheel


Note that you can also specify custom CSS here as well:

---
metatype: css
---
html,
body {
font-family: 'Avenir Next', sans-serif;
}
.post-content {
border: 1px solid red;
}

Examples

You can restrict the width of your entire Listed blog like this:

html,
body {
max-width: 875px;
}

or you can restrict the width of only your content (and not the header), like this:

#content-container {
max-width: 700px;
}

If you want to center your content, you'll want to add auto-widths for your left and right margins like this:

#content-container {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
Last updated on