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:
- Create a new note in Standard Notes and call it
theme.css
(name can be anything). - Use the metadata structure below, overriding any of the variables with your desired color values.
- Publish the note to your blog (the note won't actually appear in your blog, but the style changes will apply immediately).
---
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.
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;
}
More from Listed
- Creating a Blog From Your Notes with Listed and Standard Notes
- How do I register for a Listed blog?
- How do I publish articles to Listed?
- How do I manage my blog settings, like username and custom domain?
- How do I email my subscribers about new articles and updates?
- What is my Listed guestbook?
- How do I specify a custom date for a post, or set the canonical URL?
- How do I hide a story from my main feed?
- How do I add separate pages to my blog?