Apa yang dimaksud dengan custom css?
It is possible to use custom CSS (Cascading Style Sheets) to modify the complete appearance of the app. You can find the Custom CSS editor in the assets manager. 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. Writing CSS for Zettlr¶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 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 (you can also use the Everything is always namespaced to the Tips for finding selectors¶Zettlr's styles are subject to constant changes. While they should remain fairly stable, changes can be introduced in any version, and therefore, instead of providing you with ready-made examples, this page covers how you can find the correct selectors easily. First of all, make sure to enable the debug mode in the advanced preferences in order to enable the Develop menu. Next, open the developer tools from within this menu and make sure to select the "Elements" tab. Then click the arrow in the top-left corner of the developer tools. Now you can click any element in the application to focus it in the developer tools. In the bottom area of the developer tools, you will then see the CSS directives used to style all elements of this particular shape. The top rules always override the bottom rules, so what you are interested in is the following directive:
This is the selector you want to copy over to your custom CSS dialog and style to your liking. As you can see, it gives blockquotes, links, bold and italic text the primary color of the theme. 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
The
placeholder will make sure that even if your font cannot be found, an equivalent font will be used. It serves as a fallback. Also, if your font name contains spaces, make sure to surround it with quotation marks, e.g.,
Custom 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
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:
Set a maximum width for the text¶If you have a large screen, you may find that lines of your text are very long. If you wish to have shorter lines in the editor, with margins on both sides, you can use the following CSS snippet:
For the distraction free mode, the CSS snippet needs to be modified as follows:
By adjusting the calc functions for the two different modes, the same line width can be achieved with and without the file manager/sidebar. Change the Active Line Styling in Typewriter Mode¶You can change the styling of the active line in Typewriter mode. Replace Light mode
Dark mode |