• Workflows

  • Share your favourite custom CSS hacks

I know that some of the users develop CSS snippets to improve their user experience. Now that there is a forum, maybe you could share your favourite snippets?

I'll start sharing — I'm currently experimenting with a nicer font in the editor, HK Grotesk.

This is the Custom CSS:

.main-editor-wrapper .cm-editor .cm-scroller {
  font-family: 'HK Grotesk';
}

And this is the result (using the KMS theme):

Preview HK Grotesk font w/ KMS Theme

I quite like the font over the default one Zettlr ships with.

    6 days later

    • Jjtb

      • Post #3

      The default font sizes don't look good on my screen and I wanted to use a different font family. I chose Consolas because it was the default font for VS Code on Windows 10 and I have grown accustomed to it. I'll probably experiment with other fonts later.

      I have very limited experience with CSS, so there might be a better way to do this. I just spent some time using Inspect Element to figure out the selectors.

      The following code sets the font family and font size for the editor, including for code (block and inline), KaTeX math formulas, tables, and heading levels 1 through 6. It was written for Zettlr Version 3.1.1 with Berlin Theme and still works as of Version 3.4.1.

      /* Editor Font */
div.cm-line {
  font-family: 'Consolas', monospace;
  font-size: 20px;
}

/* Code Block Font */
div.code.code-block-line.cm-line {
  font-family: 'Consolas', monospace;
  font-size: 20px;
}

/* Code Inline Font */
span.cm-list.cm-content-span.cm-monospace {
  font-family: 'Consolas', monospace;
  font-size: 20px;
}

/* KaTeX (Math) Font */
span.katex {
  font-family: 'Consolas', monospace;
  font-size: 20px;
}

/* Table Font */
span.cm-code-mark.cm-meta {
  font-family: 'Consolas', monospace;
  font-size: 20px;
}

/* Header Font Sizes */
span.cm-header-1.cm-content-span {
  font-size: 32px;
}
span.cm-header-2.cm-content-span  {
  font-size: 30px;
}
span.cm-header-3.cm-content-span {
  font-size: 28px;
}
span.cm-header-4.cm-content-span  {
  font-size: 26px;
}
span.cm-header-5.cm-content-span  {
  font-size: 24px;
}
span.cm-header-6.cm-content-span  {
  font-size: 22px;
}

      I really wish font properties could be set in the preferences menu. The custom CSS example in the official Zettlr Docs does not work. I used Google search to find some more examples written by other users, but none of them worked either. While I have a working solution for now, it could break with any update, and then I'll have to spend more time fixing it.

      Some time ago I shared my CSS hacks. Most of it still works (though custom colors for different tags is no longer supported). Here it goes again:

      zettlr.css
      /*
Use paired with Bielefeld theme in dark mode 
See also: https://github.com/Zettlr/Zettlr/discussions/2863
*/
/* ----------------- */

      Error previewing file. It may have been deleted, or the provided file ID is invalid.

      Image description

      • gbm likes this.
      3 months later

      hendrik Thanks to this I FINALLY changed the font on my zettlr. I have been looking for it forever.

        Here is an idea:

        Is there a template for the zettlr css? Something that gives you the sections and the reasons for it?

        Posted here it might go a long way to getting more themes.