CSS Injector [Official Support]

Anki Add-ons
1

@ijgnd I have updated the add-on for 2.1.50. Let me know if you run into any further issues.

@dae I feel a bit bad about using @Maeshara’s thread as a support site for my add-on. I would be grateful if you split it with this post Change default HTML/CSS template in editing mode - #6 to a new one called “CSS Injector [Official Support]”, if you find the time :slight_smile:

5 Likes
2

I think CSS Injector will change the default field style for all fields in any deck, right? Will it change the display of the text in the fields for all decks, and what effect will these changes have on the styling of cards? I’m looking for a way to avoid manually (using the editor style options) changing the style of fields, from the default. I have notes with over 20 fields and I want to set them all at once but just for certain notes, I don’t want to unilaterally change the default styles for all fields in Anki. Is that possible with this add on?

3

That’s sadly not possible.
CSS Injector applies its styling to all fields on all notes, regardless of deck or template (but only for the editor - not the cards themselves).

It is a very simple add-on to tweak default styles of HTML elements like lists and links for a better editing experience. It’s not meant to differentiate between individual fields/note templates.

1 Like
4

Hi,
I rooted around with the inspector and found that the no part of the html of the editor tells us which note template the editor is currently displaying, so i’m guessing that the generation of the html part is fully handled within editor.py or something?

Would it be troublesome to change the addon to grab the name of the note template currently in view, and add it as a classname to an element somewhere in the DOM of the editor, so that we could apply css specific to certain notetypes?

I noticed there’s some code like that in your Exon catalyst addon which (i think) only injects certain css if the notetype’s mid matches with a certain mid, but I lack the (or any) python knowledge to adapt it to what I want it to.

5

That’s correct. It’s possible to restrict webview changes to certain note types via Python.

The note type id (mid) isn’t easy to access through Anki’s UI as far as I know, so I think I’d have to develop a little interface for note type specific settings.

I wanted to update this add-on anyway, because have found an easy way to enable night-mode specific CSS for fields (+ a few code simplifications), so I’ll keep this in mind when I get to it.

I apologize in advance if this takes some time, as I got a few other things with higher priority in my way atm :pray:

6

Take your time, it’s not at all a priority as I’m using just the one notetype at present. I just thought this feature would be convenient in the future.

Would it just not be more efficient to do this:

I’m assuming anyone familiar enough with css to use this addon would understand how to create note-type specific css once that’s done.

(And please don’t apologise, you’re doing a favour. :slightly_smiling_face: )

1 Like
7

That’s a fantastic idea! One should always strive for ways to use CSS in situations where scripting is the first thing that comes to mind.

This would make it so easy, you can expect an update tonight or tomorrow :clap:

2 Likes
8

@kleinerpirat : Thanks for keeping this functionality alive for newer anki versions.

at the moment user changes to web/fields.css and web/editor.css should be deleted (as far as i remember) when you install an update of this add-on. To preserve user files they should be in a subfolder user_files, see the add-on writing guide and the source code.

2 Likes
9

@kleinerpirat : I another idea for the location of the user files. Maybe put them in the media folder the same way glutanimate’s original does i? This way user settings should be synced between different devices and better survive and accidental deletion of add-ons (e.g. when trying to resolve an add-on problem). Though on second thought you probably have put some thought into the current file layout so you should probably just ignore this idea …

2 Likes
10

That’s probably the best location. I originally tried to do it with user_files, but for some reason the import didn’t work from that folder.

I haven’t, actually ^^ Your idea is great!

This addon is very simplistic - and I think I’ll keep it that way. That’s why I love @shallash’s idea as well: it saves me from having to deal with Qt and users will benefit from a pure CSS solution too :smiling_face:

1 Like
11

Be careful when updating: Your CSS files will be overwritten (one last time, future updates won’t have this problem)

Update: CSS Injector - Change default editor styles - AnkiWeb

  • You can now scope your styles to individual note types:
    • Use your note type’s id (mid) as an attribute selector, e.g.
[mid="1616909476324"] {
  color: red;
}
  • @basiskarten Night mode specific styling is also supported:
    • Use class .nightMode or .night_mode .

@ijgnd I had to resort to the folder user_files in the end, because I couldn’t find a way to access collection.media via Anki’s local server. See:

3 Likes
12

Thanks for the update and the heads up, Matthias! Very cool!

13

The new update is great and solves my problem.

I think it should just be the file name - e.g. “field.css” (though I’d add a leading underscore so that it’s not deleted when the unused media is cleaned).

My thinking goes like this: The editor is basically a webpage and the images you add and see in the editor that are stored in the media folder have as the src in their html source code just their filename (and no additional path etc) - so this should be the base path for all relative locations.

You could also check the source code of the editor webview - i think the code inspector add-on doesn’t work for this view so I’d view it from chrome after setting QTWEBENGINE_REMOTE_DEBUGGING and then starting Anki, Porting 2.0 Add-ons - Writing Anki Add-ons

14

I am from a different background and a newbie in coding. However, I have decorated my cards to my need, using card templates, and they look like this.

Screenshot 2021-10-28 at 1.15.10 PM
Screenshot 2021-10-28 at 1.15.10 PM758×506 22.6 KB

I was exploring, whether is it possible to make the edit field view and review card view the same.
With this addon, I was able to change the background colour of all fields, in the editor window, using this code. Screenshot 2021-10-28 at 1.16.07 PM

My question is, is it possible to decorate the field text in the editor, same as the card text, as shown here. I just want to change the Bold, Underlined, Italic and hyperlinked text only.

From this Screenshot 2021-10-28 at 1.15.19 PM
to this (Or similar)

Screenshot 2021-10-28 at 1.15.10 PM
Screenshot 2021-10-28 at 1.15.10 PM758×506 22.6 KB

Apologies!

15

In the same folder as editor.css, there’s a file called field.css. This file will be injected into the shadow-root* of each field and therefore affect its contents.
If you copy your template CSS into that file, you can style the content of your editor fields the same way as it’s shown in the reviewer.

*a mini-DOM which isn’t affected by outside styles

Also, keep an eye out for this PR:

Once that makes it into Anki, your template styles will affect the editor styles automatically and my add-on will be redundant ^^

2 Likes
16

Thank you very much. It worked :grinning: !!

17

Hi

I still use this add-on and I love it. However I need help, with the last Anki’s version I want to reduce the line-height but I don’t know the tag for paragraphs in fields (it’s not “p” ?). Could you tell me please ?

Thanks

18

Usually, fields will just contain plain text. To set the line-height for all the content within a field, use the selector anki-editable in field.css like this:

anki-editable {
    line-height: 1.5rem;
}
1 Like
19

@kleinerpirat: I’m writing about the addon CSS Injector. Thanks for sharing it. Unfortunately it’s been broken in the latest 2.1.50 version for me - I think the commit 739e286 from 2022-01-08 broke your add-on.

I hope that henrik at some introduces his Include user styles in note editor by hgiesel · Pull Request #1049 · ankitects/anki · GitHub which would make anki more predictable (imo).

1 Like
20

Thanks for the reminder. Since this change broke my other add-on Tippy Tooltips (which I’m using personally too), I already had the fix ready - I just pushed an update.

If it’s still broken after that update, please let me know :+1:

1 Like