You can use custom CSS to stylize your Listed blog.
- Create a new note in Standard Notes and call it
listed-theme.css(the name can be anything).
- Copy the following metadata structure and CSS, then paste it into your note.
- Change any of the variables with your desired color values.
- Publish the note to your blog. The note will be published as a private note, so it won't appear on your blog, but the custom styles will apply immediately.
Listed has a dark theme when your operating system has dark mode enabled. To customize the colors of the dark theme, copy the following CSS, paste it into the same note that you created above, change any of the variables with your desired color values, then update the published post.
You can use additional CSS to further customize the appearance of your Listed blog. Below are some examples.
The default font for headers is Merriweather and the default font for paragraphs is Roboto. You can import and declare custom fonts (e.g., Open Sans) like this:
There are two built-in cover styles: Default and Condensed.
If you use the Default cover style, then the author image is on the left and the author text is on the right. If you want to get a full width image on top and have the author text appear underneath the image, then you can use something like this:
There are two built-in layout styles: Default (list view) or Cards.
If you want to make the font size of your cards smaller, use something like this:
By default, there are four cards per row on large screens. If you want three cards per row, use something like this:
You can restrict the width of your post content like this:
If you want to center your content, set the left and right margins to