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!

Changing just font size

HI, I'm trying to change the look of headings but I'm lost. I just want to change the font size! Is there a local file for Zettlr that contains the current .css? Is the LESS file you linked to here the .css? Can I copy/paste that into custom.css?

You wrote something that might explain it but I don't know what it means: "To override this with custom CSS, you simply have to namespace the rules, e.g. with body #editor .CodeMirror". I don't know how to "namespace the rules".

Re: documentation, if changing the style requires tinkering with .css, it would be much easier for newbies to do this if they could easily look at the .css currently being used by Zettlr, maybe by having the .css (or .less?) file separate and inspectable in the installation directory.

Tagged:

Comments

  • Namespacing is a concept in CSS, which is short for cascading style sheets. The cascading is the important part:

    Rules in body apply to all elements within the body, whereas elements that are prefixed with #editor .CodeMirror only work in elements with the class CodeMirror that needs to be within an element with the ID editor.

    The following should work:

    .CodeMirror .size-header-1 {
      font-size: 2em;
    }
    

    Simply add a rule, replacing 1 with the level of the header, and adapt the font-size!

  • Is there a file in my local filesystem that includes the CSS Zettlr draws on and that I can edit in a text editor? Or is the CSS somehow hidden in other files and the only way to change is in through the Zettlr CSS window?

    Apologies, but I still didn't understand the explanation. You are basically saying that any custom CSS needs to have the prefix .CodeMirror? I don't understand the #editor part and it's not in the rule you suggested. Is that automatically included when I change the CSS from within Zettlr?

  • Is there a file in my local filesystem that includes the CSS Zettlr draws on and that I can edit in a text editor?

    No, the CSS files are packaged within the app.asar-file in the installation directory.

    the only way to change is in through the Zettlr CSS window

    Yes

    You are basically saying that any custom CSS needs to have the prefix .CodeMirror

    No, I'm simply saying that everything is namespaced as much as possible, and that things within the editor are all namespaced with .CodeMirror. Please refer to a guide on Cascading Stylesheets, and, to find out all the namespaces, please look at the LESS files in the repository (resources -> less).

Sign In or Register to comment.