We switched to a manual approval system for registration on this forum, as this makes it easier to keep bots out of the forum. We'll approve everybody who doesn't look like a bot!

Paperstyle CSS

Hello everybody,

as I'm playing a lot with the Custom CSS feature, sometimes to test out new designs, and sometimes because I also tend to use a somewhat different appearance than the default one, I decided to create this forum so that you can share your own designs, in case somebody else wants to simply use something by somebody else without digging into CSS. And I'm sure there are a lot of pros out there who would like to receive some credit for their beautiful work!

It's easy. Simply copy your code in here (click on the pilcrow sign left to the textarea when writing a new post and select "code") and also add a screenshot!

I'll start with something that renders Zettlr "paperlike":

/* Paperstyle custom CSS */
/* Add Monospace font */
body.darwin { font-family: 'Menlo Regular', monospace; }
#editor.fullscreen, .CodeMirror-fullscreen { top: 0px; }
/* Set the surrounding background color */
body #editor { background-color: #333; } /* Light mode */
body.dark #editor { background-color: black; } /* Dark mode */
/* Set the background colour of the writing area (light mode) */
body #editor .CodeMirror-sizer, body #editor .CodeMirror-gutter {
    background-color: white;
    height: 100%; /* Necessary for shorter texts */
/* Here for dark mode */
body.dark #editor .CodeMirror-sizer, body.dark #editor .CodeMirror-gutter {
    background-color: #333;

The Base Theme for this is "Berlin" (the theme feature comes in Zettlr version 1.3!)

Light Mode:

Dark Mode:

Sign In or Register to comment.