My personal CSS customizations!

[djsime1]

👋 Hey folks, I recently switched from Obsidian to Zettlr and while it's fine out of the box, I felt it could have used a few UI improvements. Thus, I authored some CSS customizations. Nothing extreme in my opinion.

• More info on enabling custom CSS: Zettlr docs
• The source code: GitHub Gist
• List of changes can be found in the Gist.

💻 In theory, this should work regardless of your operating system or settings.
🎉 Suggestions are welcome in the comments here or on the Gist!
✏ I'll update the Gist with any new changes (and hopefully remember to comment here too)
🖼 Preview screenshot below. 👇

👉 Download here! 👈

[dajare]

It would be great to see a collection of these develop. :) Or is there already a listing somewhere? (Also left a comment on the gist.)

[dajare]

There's not a list of these, but … idk, we might just start a repo and add an ability to pull them in for users …? Definitely not a priority, but we can certainly discuss that! :)

Even just having this thread in the Discussions is a help. 👍 (So certainly "not a priority", agreed!)

[newhinton]

I disagree with the git-repo for themes for multiple reasons:

1. Git is complicated. What i mean is that a normal user that just wants a nice app probably does not now how to get a theme out of a repo.
2. Single point of failure. If for whatever reason that repo goes, it will be hard to find themes again. Making it distributed solves that issue. Also a user is not reliant on someone else for their own themes.
3. Maintenance: A repo needs to be maintained. If the theme-format changes, the maintainer would need to update ALL themes, or have a completely messy theme-repository, which is not desirable.
4. Distribution: Assuming a lot of people add themes, this can get "big" fast. We dont need 99% of those files on every users system, so pulling a theme should be manual anyway and then we are back at point 1. (I mean its just a bit of text, but still)

To clarify: i am not against a central place for themes, there could be a marketplace of some sort, but it should not rely on a singular repository to store theme-data.

As outlined in #2861 i think a container-format would be appropriate, which then can be linked to some sort of central repository. The theme itself should be standalone somewhere else, like a github-release or a link to somewhere arbitrary. This way, even if the central repository is broken, all themes are still where they should be. It is also easier to distribute a theme without having to submit it to the central repository.

I highly appreciate any critique and comments on my idea!

[nathanlesage]

I did not intend to imply that users would have to actually work with the repo. I had something in mind as outlined below:

1. Integrate some form of theme "marketplace" in the app. This would then just download a metadata file (can be generated automatically) to present to the users.
2. Users could then just click a button which would initiate a download onto the computer (just that file, not the repo) and keep it updated.
3. Users could also dump theme files into the same folder, separately (think: Wordpress themes)
4. If the repo goes down, the themes are still there, just not updated, and by keeping manual ways of doing that, this should pose no problem

However, I agree in that it's some effort to maintain the repo itself (similar to plugins). However, I don't yet see an efficient way of having all of this distributed decentral in a way that's still easy for end users. I will have a look at the issue now and see if there's more in there, but feel free to comment here!

[newhinton]

Oh! Then i misunderstood you, i thought you wanted to put actual themes (css,metadata) in a repository. What you suggest is what i would like to see aswell, and more or less how many other projects do it aswell

[nathanlesage]

i thought you wanted to put actual themes (css,metadata) in a repository

This is what I wanted to do, but I didn't want to download that full repo, because that would be weird :D

[Redsandro]

Very interesting. I like (and borrowed) that gradient css svg trick.

[IgnacioHeredia]

In the spirit of using this thread as a temporary repository for customizations, I leave a link to my CSS file.

My customizations focus mainly on the editor:

[IgnacioHeredia]

You can improve the CSS for frontmatter users by adding .zkn-tag like so:

I don't use frontmatters, but thanks for sharing! :) Refining the refinement, you can make the CSS more concise with the is idiom:

body.dark #editor .CodeMirror :is(.cm-zkn-tag, .zkn-tag) {
   background-color: rgba(275,171,171, 1);
   color: rgba(138,0,0, 1);
   padding: 2px;
   border-radius:5px;
}

They cannot be color coded because the named classes are missing. Might be worth an issue.

A few hours ago, I opened an issue about the missing first letter in the classes names. Maybe this can be mentionned there!

[nathanlesage]

Alongside the missing-letter bug I now also fixed this. Now you will have two class names for those tags: First cm-tkn-tag-thetag for any tags within the document, and then the same class, but without cm- for the same tags in the frontmatter. CodeMirror automatically prepends this cm but I figured this way if you want both tags to show the same, you just have to define two classes, and those who actually want to style both differently, can do so with ease.

[WolfgangDpunkt]

Has anyone here managed to adjust the spacing in bullet point lists?
It bothers me that between the individual list entries the spacing appears nearly as large as the normal line spacing. See screenshot:

However, I can't select the list items via CSS, since they are not real <li></li> elements. They don't seem to differ from normal text lines in the source code.

The only thing that seems to be selectable via CSS are the bullet point smybols: .cm-formatting-list-ul

Any advice would be appreciated, as I really like the clarity of bullet point lists in text editors.

[do-not-perceive-me]

you can increase the spacing with this code, but I can't figure out how to decrease the spacing, because that's set by the text line

.cm-variable-2{
    line-height: 110%
}

[sensologica]

@WolfgangDpunkt
I've been trying to achieve this, too, but bumped up against the same limitation. It looks like there is no selector for list items.

@do-not-perceive-me
Unfortunately, if the line wraps then the height between the first and the wrapped part of the line is also increased.

Ideally there would be a way to add vertical padding or margin to list items themselves, but that doesn't seem to work. My guess is that this is not allowed by CodeMirror?