Share your favourite custom CSS hacks

ailin

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?

hendrik

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.

Valdus92

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

Granite

hendrik This is the Custom CSS:

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

This does not work anymore on 3.6.0. I use

body .main-editor-wrapper .cm-content

jtb

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.

IgnacioHeredia

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

Valdus92

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.

maxanthem

Hello!
Here is my CSS to make "---" render full width, and make quotes with grey background:

/* Full-width, thicker and grey horizontal lines
    Two "---" can also be concatenated  (with line return in-between
    for even thicker lines.*/
body .main-editor-wrapper .cm-hr {
  display: block;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  border: none;
  border-top: 2px solid #AAAAAA;
  height: 0;
  background: none;
  box-sizing: border-box;
}

/* Quotes with light grey background */
.cm-quote {
  background-color: #f2f2f2; /* Light grey background */
  padding: 4px 0px;           /* More vertical padding for highlight */
}
/* To make the selection visible (we override the background
   color, so we make selections visible by changing font color.*/
.cm-quote::selection {
  color: var(--selection-color, #00aa00); /* Darker green */
}

SteepJar

I want to increase the gap between paragraphs. I thought I could use
margin-bottom: 50px;
in custom css, but it doesn't seem to have any effect.
What am I doing wrong?

Granite

I have this:

/* BLOCKQUOTES */
.cm-content .cm-line:has(.cm-quote) {
  background: #fff4e5;
  border-left: 5px solid #ffa64d;
  padding: 0.25em 0.6em 0.25em 0.6em !important; /* smaller left padding */
  margin: 0.25em 0;
  position: relative;
  font-family: 'Boogaloo', 'LXGW WenKai', cursive;
  text-indent: 0 !important;
  box-sizing: border-box;
}

.cm-quote::selection {
  color: var(--selection-color, #999999); /* Darker green */
}

/* HEADINGS */
/* Hide the H1–H6 badges next to headings in the editor */
body #editor .CodeMirror .heading-tag,
body #editor .cm-editor .heading-tag,
body #editor .cm-editor .cm-widget .heading-tag,
body .heading-tag {
  display: none !important;
}

/* TEXT */

/* Body text color */
body .main-editor-wrapper .cm-editor {
  color: #00009e;
}

span.cm-content-span {
  color: #00009e;
}

/* Bold text: change color globally in the editor and preview */
.cm-strong,
.markdown-render span.cm-strong,
.markdown-render strong {
    color: #1cb27e !important; /* Zettlr green */
    font-weight: bold; /* Ensures bold remains bold */
}

/* Font */
body .main-editor-wrapper .cm-content {
    font-family: 'LXGW WenKai';
}

/* Justify */
body .main-editor-wrapper .cm-editor { 
  text-align: justify; text-justify: inter-word;
}

/* Readable line width */
.main-editor-wrapper .cm-content {
  max-width: 650px; /* Adjust this value to your preferred width */
  margin-right: auto;
}
.main-editor-wrapper .cm-gutters {
  margin-left: auto;
}

rayachristian

Hello, I'm trying to get something consistent with the Markdown Viewer plugin.
Images with a single line break are on the same line. You will get all badges on a single line.
I have this (tested with Zettlr 4 beta 2):

.ͼv .cm-quote {
    font-style: normal;
}
.ͼw .cm-quote {
    font-style: normal;
}



body:not(.dark) {
    --system-accent-color: #222222;
    --system-accent-color-contrast: #ffffffff;
    /* Header Font Sizes */
    span.cm-header-1.cm-content-span {
        color: black;
    }
    span.cm-header-2.cm-content-span {
        color: black;
    }
    span.cm-header-3.cm-content-span {
        color: black;
    }
    span.cm-header-4.cm-content-span {
        color: black;
    }
    span.cm-header-5.cm-content-span {
        color: black;
    }
    span.cm-header-6.cm-content-span {
        color: black;
    }
    .cm-url,
    .cm-link,
    .cm-code-mark,
    .cm-zkn-tag,
    .cm-zkn-link {
        color: #0F68DC !important;
    }

}
:root {
    --system-accent-color: #ff0000 !important;
}

body.dark {
    --system-accent-color: #222222;
    --system-accent-color-contrast: #ffffffff;


    .cm-editor {
       background-color: #0D1116 !important;
     }
     #file-tree,
     #file-tree .tree-view,
     #sidebar,
     #sidebar .sidebar {
         background-color: #0D1116 !important;
     }

    /* Header Font Sizes */
    span.cm-header-1.cm-content-span {
        color: white;
    }
    span.cm-header-2.cm-content-span {
        color: white;
    }
    span.cm-header-3.cm-content-span {
        color: white;
    }
    span.cm-header-4.cm-content-span {
        color: white;
    }
    span.cm-header-5.cm-content-span {
        color: white;
    }
    span.cm-header-6.cm-content-span {
        color: white;
    }

    .cm-url,
    .cm-link,
    .cm-code-mark,
    .cm-zkn-tag,
    .cm-zkn-link {
        color: #4891FF !important;
    }

    
}

body div.tree-item-container .tree-item.selected .display-text {
    background-color: #0F68DC;
    color: #ffffffff;
}

.cm-line {
  position: relative;
}

/* Supprime toute bordure sur les fragments */
.cm-quote,
.cm-formatting-quote,
.cm-formatting--quote {
  border-left: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

body:not(.dark) {
    .cm-quote {
      font-size: 16px;
      color: #646B73;
    }
    .cm-editor .cm-line:has(.cm-quote),
    .cm-editor .cm-line:has(.cm-formatting-quote),
    .cm-editor .cm-line:has(.cm-formatting--quote) {
        box-shadow: inset 4px 0 0 0 #d0d7de;
        background-color: transparent;
    }
}

body.dark {
    .cm-quote {
      font-size: 16px;
      color: #848d97;
    }
    .cm-editor .cm-line:has(.cm-quote),
    .cm-editor .cm-line:has(.cm-formatting-quote),
    .cm-editor .cm-line:has(.cm-formatting--quote) {
        box-shadow: inset 4px 0 0 0 #35383F;
        background-color: transparent;
    }
}

/* Editor Font */
div.cm-line {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI";
  font-size: 16px;
}

/* Code Inline Font */
span.cm-list.cm-content-span.cm-monospace {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI";
  font-size: 16px;
}

body .main-editor-wrapper .cm-hr {
  display: block;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  border: none;
  border-top: 2px solid #AAAAAA;
  height: 0;
  background: none;
  box-sizing: border-box;
}

/* Text Font Sizes */
span.cm-link {
  font-size: 18px;
}
span.cm-lintRange {
  font-size: 18px;
}
span.cm-content-span {
  font-size: 18px;
}

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

/* ========================================
   GESTION DES BADGES/IMAGES INLINE
   ======================================== */

/* Supprime les buffers parasites de CodeMirror */
.cm-line img.cm-widgetBuffer {
  display: none !important;
}

/* TOUTES les lignes avec badge deviennent inline */
.cm-line:has(figure.image-preview) {
  display: inline !important;
}

/* Supprime tout espacement entre lignes consécutives de badges */
.cm-line:has(figure.image-preview) ~ .cm-line:has(figure.image-preview) {
  margin-left: 0 !important;
  margin-top: 0 !important;
  padding-left: 0 !important;
}

/* Chaque figure en inline-block avec espacement minimal */
.cm-line figure.image-preview {
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 2px 0 0 !important; /* Seulement 2px à droite */
  padding: 0 !important;
  max-width: none !important;
}

/* Images dans les figures */
.cm-line figure.image-preview img {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
}