Custom CSS

Since Zettlr version 1.1 it is possible to use custom CSS (Cascading Style Sheets) to modify the complete appearance of the app. It's been a long requested feature, and it will open up many possibilities to customising the app (and maybe even the first truly user-generated content of the app?)

You can find the Custom CSS editor under Zettlr->Custom CSS… (macOS) or under File->Custom CSS… (Windows and Linux)

If you are unfamiliar with CSS, but don't want to simply copy & paste the guides on this page, you may choose to follow a short tutorial on CSS! There are many on the internet, so a quick Google search can also provide you with video tutorials, if you prefer those!

Below you can first find a general introduction in writing CSS, before I will list some examples that you can easily copy & paste to adapt your app to look differently. At the end of the page you may find a complete class reference.

Writing CSS for Zettlr

If you don't want to write CSS for yourself and are only looking to change the font, head over to the next section!

Zettlr comes with a lot of predefined classes and IDs. It follows the generally-acknowledged wisdom not to make use of style-tags to directly define properties. Therefore, you can use classes for literally anything.

The styles of Zettlr are divided into both geometry and the actual theme, so you may want to stick with only changing the design of elements without changing any geometry. Playing around with the geometry may be fun, but it may yield completely random behaviour, as some parts of the app depend upon the correct sizes of elements. In case you made a mistake, don't worry: Simply remove the custom.css-file from the data directory of Zettlr. You can find the data directory of your own system by looking at the paths provided in the install documentation.

Classes and IDs in Zettlr are always namespaced to the respective components (unless they're global), so to really override a rule you will have to use the complete namespace (or, if you don't want to add many rules and are lazy, use the !important override rule).

Everything is always namespaced to the body, which has a class .dark if the app is currently in dark mode. So to make sure a certain rule only applies while the app is in dark mode, make sure to prefix it with body.dark!

At the bottom of this page you may find a full class and ID reference so that you don't have to poke around in the app forever! (I already apologise, for it is only a simple dump generated from Zettlr's precompiled CSS files.)

CSS Code Snippets

Using a Custom Font with Zettlr

In case you do not like the default font delivered with Zettlr, or need to change it, simply paste the following code snippet into the custom CSS editor. Replace your-font-name with the full name of the font you want to use for Zettlr. Please replace placeholder according to the font:

  • In case you want to use a serif font, such as Times New Roman, or Georgia, please use serif
  • In case your font is sans serif, such as Arial or Helvetica, please use sans-serif
  • In case you want to switch to the classic monospace, please use the placeholder monospace
    The placeholder will make sure that even if your font cannot be found, an equivalent font will be used. It serves as a fallback.

Zettlr already ships a serif font, a sans-serif font and a monospace font! To use the bundled fonts, you can use Crimson for a modern serif font or Liberation Mono for a nice looking monospace font. (Lato is the default, so you probably don't want to put it there.)

  1. #editor {
  2.     font-family: '<your-font-name here>', <placeholder>;
  3. }

Random Unsplash Background Images

With the following code, you can make your editor have a different background image everytime you start it. The images are taken from Unsplash.com, a nice site with free photos. It uses the Source API, which will simply spit out a different image every time the URL is visited. You can test it out by simply visiting the page and refreshing a few times! Please refer to the Unsplash Source API reference for more options (such as using an image of the day).

  1. /* Enter your custom CSS here */
  3. #editor {
  4.     background-color: transparent;
  5.     background-image: url('https://source.unsplash.com/random');
  6.     background-size: cover;
  7.     background-position: center center;
  8. }
  10. body #editor .CodeMirror-sizer, body #editor .CodeMirror-gutter {
  11.     background-color: rgba(255, 255, 255, .8);
  12.     height: 100%;
  13. }
  15. body.dark #editor .CodeMirror-sizer, body.dark #editor .CodeMirror-gutter {
  16.     background-color: rgba(0, 0, 0, .8);
  17. }
  19. #editor .CodeMirror {
  20.     background-color: transparent;
  21. }

A preview of a Zettlr installation using above snippet

Visualising Line Endings

In case you want to see where your linefeeds are, you can display the pilcrow symbol () at the end of your lines by using the following Custom CSS:

  1. .CodeMirror-line:not(:last-child)::after {
  2.   content: "";
  3.   color: #666;
  4. }

A preview of Zettlr using above snippet

Hide the Toolbar in Distraction Free

Some people prefer the distraction free mode to be really distraction-free. Zettlr does not hide the toolbar by default, because most people want to have access to all the tools and buttons even when writing distraction free. Still, if you belong to the group of people who prefer distraction free to be only the editor itself, rejoice! Hiding the toolbar in distraction free mode is as easy as one single line of CSS!

Simply paste the following line of CSS into the Custom CSS dialog, and from then on the toolbar will always be hidden:

  1. #editor.fullscreen, .CodeMirror-fullscreen { top: 0px; }

Your Ideas

Do you have nice ideas for how to style Zettlr even more? If you have a good CSS snippet that works out of the box, feel free to share it with us so that we can feature it here!

Complete CSS Class and ID Reference

Below you can find the full and non-abbreviated list of all CSS classes and IDs. We've counted, it's over 300 at the moment.

Please note that we used an external package to extract the class names. We have already removed most of non-classes (such as colours and "dot-noted" values such as .5%) but we do not give any guarantee that we found all.

Warning: The following list of reference may change in the future! So a class that has worked in one version of Zettlr may stop to work in another, because of changes to either the DOM or the class/ID name.

  1. .eot
  2. #iefix
  3. .ttf
  4. .woff2
  5. .otf
  6. .woff
  7. .dragger
  8. .clearfix
  9. .modal
  10. .dialog
  11. .uuid
  12. .image-preview
  13. .button
  14. .request-file
  15. .file-select-group
  16. .changelog
  17. .code
  18. .clear
  19. .box-left
  20. .box-right
  21. .paper
  22. .a4paper
  23. .popup
  24. .set-target
  25. .bmargin
  26. .lmargin
  27. .rmargin
  28. .tmargin
  29. .image-size
  30. .image
  31. .png
  32. #directories
  33. #imageWidth
  34. #imageHeight
  35. #preview-image-sizes
  36. .pdf-preview
  37. .error
  38. .projects
  39. #prefs-taglist
  40. .flex
  41. #next-sheet
  42. #prev-sheet
  43. .ui-tabs-nav
  44. .ui-tabs-tab
  45. .dicts-list
  46. .dicts-list-item
  47. .dicts-list-search
  48. .selected-dict
  49. .hidden
  50. #directories-dirs-header
  51. #directories-files-header
  52. #preview
  53. .file
  54. .collapse-indicator
  55. .collapsed
  56. .project
  57. .virtual-directory
  58. .emptyPaths
  59. .info
  60. .clusterize-scroll
  61. .clusterize-extra-row
  62. #editor
  63. .ui-resizable-autohide
  64. .ui-resizable-handle
  65. .ui-resizable-disabled
  66. .clusterize-keep-parity
  67. .clusterize-content
  68. .clusterize-no-data
  69. .snippets
  70. .filename
  71. .snippet
  72. .date
  73. .directories
  74. .files
  75. .id
  76. .tags
  77. .tex-indicator
  78. .virtual-directories
  79. .target-progress-indicator
  80. .taglist
  81. .tag
  82. .tagspacer
  83. .directory
  84. .sorter
  85. .sortName
  86. .sortTime
  87. #combiner
  88. .expanded
  89. #arrow-button
  90. .fullscreen
  91. .ui-resizable-w
  92. .CodeMirror
  93. .CodeMirror-code
  94. .mute
  95. .CodeMirror-scroll
  96. .CodeMirror-fullscreen
  97. .CodeMirror-vscrollbar
  98. .CodeMirror-sizer
  99. .cma
  100. .search-result
  101. .cm-table
  102. .size-header-1
  103. .pomodoro
  104. .CodeMirror-gutter-elt
  105. .size-header-2
  106. .size-header-3
  107. .size-header-4
  108. .size-header-5
  109. .size-header-6
  110. .cm-comment
  111. .cm-fenced-code
  112. .cm-formatting-task
  113. .CodeMirror-cursor
  114. .cm-escape-char
  115. .cm-formatting-code
  116. .cm-formatting-code-block
  117. .cm-formatting-em
  118. .cm-formatting-quote
  119. .cm-formatting-strong
  120. .cm-formatting-list-ol
  121. .cm-formatting-list-ul
  122. .cm-link
  123. .cm-url
  124. .shift
  125. .cm-zkn-tag
  126. .cm-zkn-link
  127. .CodeMirror-gutters
  128. .CodeMirror-foldgutter
  129. .CodeMirror-foldgutter-folded
  130. .CodeMirror-foldgutter-open
  131. .heading-tag
  132. .CodeMirror-foldmarker
  133. .CodeMirror-hints
  134. .CodeMirror-hint
  135. .cm-hint-colour
  136. .print-window
  137. .quicklook
  138. .quicklook-standalone
  139. #init-print
  140. .minimize
  141. .title
  142. .find
  143. .body
  144. .ui-resizable-n
  145. .ui-resizable-s
  146. .ui-resizable-e
  147. .ui-resizable-se
  148. .ui-resizable-sw
  149. .ui-resizable-nw
  150. .ui-resizable-ne
  151. .close
  152. .make-standalone
  153. #toolbar
  154. .content
  155. .darwin
  156. .win32
  157. .linux
  158. .file-info
  159. .searchbar
  160. #search-progress-indicator
  161. .menu-popup
  162. .dir-open
  163. .directory-new
  164. .file-new
  165. .stats
  166. .tag-cloud
  167. .preferences
  168. .recent-docs
  169. .file-save
  170. .file-delete
  171. .file-rename
  172. .formatting
  173. .share
  174. .show-toc
  175. .toggle-attachments
  176. .spacer
  177. .separator
  178. .end-search
  179. .notify
  180. .popup-arrow
  181. .down
  182. .up
  183. .left
  184. .right
  185. .toc-link
  186. .footnote-edit
  187. .search
  188. .small
  189. #header-formatting
  190. .row
  191. .btn-share
  192. .htm
  193. .docx
  194. .odt
  195. .plain
  196. .tex
  197. .pdf
  198. #attachments
  199. #open-dir-external
  200. .revealjs
  201. .revealjs-beige
  202. .revealjs-black
  203. .revealjs-league
  204. .revealjs-moon
  205. .revealjs-serif
  206. .revealjs-sky
  207. .revealjs-solarized
  208. .revealjs-white
  209. .rst
  210. .rtf
  211. .org
  212. .textile
  213. .mediawiki
  214. #reveal-themes
  215. .markdownHeading1
  216. .markdownHeading2
  217. .markdownHeading3
  218. .markdownHeading4
  219. .markdownHeading5
  220. .markdownHeading6
  221. .markdownBlockquote
  222. .markdownLink
  223. .markdownImage
  224. .markdownCode
  225. .markdownMakeOrderedList
  226. .markdownMakeUnorderedList
  227. .markdownDivider
  228. .insertFootnote
  229. .markdownBold
  230. .markdownItalic
  231. .removeFootnote
  232. #searchNext
  233. #replaceNext
  234. #replaceAll
  235. .csl-bib-body
  236. .csl-entry
  237. .cb-toggle
  238. .radio-toggle
  239. .toggle
  240. .cb-group
  241. .linux-window-controls
  242. .windows-window-controls
  243. .minimise
  244. .resize
  245. .maximise
  246. .cm-meta
  247. .cm-def
  248. .sb-annotation
  249. .cm-stex-mode
  250. .cm-css-mode
  251. .cm-attribute
  252. .cm-builtin
  253. .cm-string
  254. .cm-string-2
  255. .cm-variable
  256. .cm-variable-2
  257. .cm-keyword
  258. .cm-property
  259. .cm-type
  260. .cm-atom
  261. .cm-number
  262. .CodeMirror-selected
  263. .cm-tag
  264. .cm-bracket
  265. .cm-formatting-header-1
  266. .cm-formatting-header-2
  267. .cm-formatting-header-3
  268. .cm-formatting-header-4
  269. .cm-formatting-header-5
  270. .cm-formatting-header-6
  271. .cm-quote
  272. .cm-strong
  273. .cm-em
  274. .cm-spell-error
  275. .cm-zkn-id
  276. .citeproc-citation
  277. .cm-hr
  278. .CodeMirror-guttermarker-subtle
  279. .CodeMirror-hint-active
  280. .selected
  281. .highlight
  282. .vd-file
  283. .excerpt
  284. .active
  285. .pomodoro-task
  286. .pomodoro-short
  287. .pomodoro-long
  288. .pomodoro-meter
  289. .pomodoro-value
  290. .task
  291. .short
  292. .long
  293. .indicator-meter
  294. .indicator-value
  295. .error-info
  296. .has-error
  297. .form-inline-buttons
  298. .prefs-submit-group
  299. .ui-tabs-active
  300. .dark
  301. .CodeMirror-dialog
  302. .cm-formatting-escape
  303. .maximise-svg