Editor: apply font color, background color, custom class, custom style [Official thread]

I’ve noticed that styles from css classes defined in a file are no longer displayed in the editor, but they work when reviewing or in preview window.

Do you have some more information on that?

I hope there is no intention to remove support for css (classes) loaded from a file. It’s a powerful feature e.g. allowing me to change the highlight colour on all my existing notes with one simple edit, if I ever want to do so.

When Anki started using ShadowRoots for the editor fields, it got a bit more complicated to apply CSS to field contents - which is actually intentional. There’s value in protecting field content from editor stylesheets. The new way to do it is to link the stylesheet separately inside each ShadowRoot (=field).

Probably not. Henrik just needs to find the time to update the add-on and everything will work like before :slight_smile:

I think “contributor” is the right term here, I’d even accept “a main contributor”, but co-author goes a bit far :sweat_smile:

The change was important to be able to separate editor CSS from field CSS. Field CSS can now be dynamically loaded via JS, you can see an example in this PR:

1 Like

When I chose that wording, I thought about the way people working on academic papers are credited. In my head it sounded right, as you contributed a significant chunk to Anki’s codebase (same goes for Rumo) :smile:

Didn’t mean to take anything away from Damien’s massive effort, which dwarfs everyone else’s contributions ofc ^^

Is this possible somewhere in Anki or does it require an add-on?

This is currently only possible with an add-on (e.g. CSS Injector - Change default editor styles - AnkiWeb or the one this thread is about).

However, applying user stylesheets defined in the template CSS section to the editor fields is (or has been) somewhere on the roadmap: Include user styles in note editor by hgiesel · Pull Request #1049 · ankitects/anki · GitHub.

1 Like

Hi Hengiesel,

Thanks for creating this add on, it seems really useful. However when I installed it and followed your instructions closely, like making sure the One liner is above my styling, it doesn’t seem to work with the latest version of Anki. Not quite sure what I am doing wrongly.

Hope you can help out, because I think many others will have this issue too. Thanks!

The add-on indeed does not work with current versions. The work to fix has already been done, but it still needs to be merged into Anki, and then a new version needs to be released:

Thanks for letting me know! Just want to let you know I appreciate all the work you have put into this, add ons like this are truly a huge time saver for many like myself. Have a great day !

1 Like

So presumably the next Anki release will support this addon? Will it apply CSS classes in the editor fields? (I haven’t used this addon before.) Or will that only work once PR #1049 is merged?

Yes, the next version will support this add-on.
CSS classes are already applied, by the same way it worked before: CSS is injected into the templates, and Custom styles additionally applies this template CSS in the editor fields.

Hi there, it fails when I finished installing and reopen the Anki app on my Mac. It shows:

  1. click the tools-the addon name:

错误
发生了一个错误。请在启动Anki时按住「Shift」键临时禁用插件加载。 如仅在插件启用时出错,请使用「工具」>「插件」功能禁用部分插件后重启Anki, 请重复上述步骤直至找到引起错误的插件。 找到引起错误的插件后,请反馈给插件作者。 调试信息:
Anki 2.1.54 (b6a7760c) Python 3.9.7 Qt 6.3.1 PyQt 6.3.1
Platform: Mac 12.5.1
Flags: frz=True ao=True sv=2
Add-ons, last update check: 2022-09-22 13:09:03
相关插件:⁨Custom Styles font color background colour classes⁩
Caught exception:
Traceback (most recent call last):
File “/Users/Oliv/Library/Application Support/Anki2/addons21/1899278645/main_window.py”, line 35, in on_settings
dialog = MainConfDialog(getconfig())
File “/Users/Oliv/Library/Application Support/Anki2/addons21/1899278645/confdialog/init.py”, line 52, in init
self.init_tables()
File “/Users/Oliv/Library/Application Support/Anki2/addons21/1899278645/confdialog/init.py”, line 216, in init_tables
self.set_table(self.bo.tw_active, self.active)
File “/Users/Oliv/Library/Application Support/Anki2/addons21/1899278645/confdialog/init.py”, line 222, in set_table
widget.setSelectionBehavior(QTableView.SelectRows)
AttributeError: type object ‘QTableView’ has no attribute ‘SelectRows’

And when I open Anki again it says:

You have the add-on “Custom Styles font color background colour classes” installed. This add-on will NOT work with these note types:
Before you continue read the section about “Updating Templates” on ankiweb at …
Auto update these note types?

And what does it mean to update node type or templates? I’ve added the @import url("_editor_button_styles.css"); in the card style settings.

Same. Mine is Anki 2.1.54

Hello,

I just download this tool and it seems to have some problems. I’m on Anki Mac, and here is the message I’ve got :

Error
An error occurred. Please start Anki while holding down the shift key, which will temporarily disable the add-ons you have installed.
If the issue only occurs when add-ons are enabled, please use the Tools > Add-ons menu item to disable some add-ons and restart Anki, repeating until you discover the add-on that is causing the problem.
When you’ve discovered the add-on that is causing the problem, please report the issue to the add-on author.
Debug info:
Anki 2.1.54 (b6a7760c) Python 3.9.7 Qt 6.3.1 PyQt 6.3.1
Platform: Mac 12.4
Flags: frz=True ao=True sv=3
Add-ons, last update check: 2022-09-30 17:51:08
Add-ons possibly involved: ⁨Custom Styles font color background colour classes⁩

Caught exception:
Traceback (most recent call last):
File “/Users/user/Library/Application Support/Anki2/addons21/1899278645/main_window.py”, line 35, in on_settings
dialog = MainConfDialog(getconfig())
File “/Users/user/Library/Application Support/Anki2/addons21/1899278645/confdialog/init.py”, line 52, in init
self.init_tables()
File “/Users/user/Library/Application Support/Anki2/addons21/1899278645/confdialog/init.py”, line 216, in init_tables
self.set_table(self.bo.tw_active, self.active)
File “/Users/user/Library/Application Support/Anki2/addons21/1899278645/confdialog/init.py”, line 222, in set_table
widget.setSelectionBehavior(QTableView.SelectRows)
AttributeError: type object ‘QTableView’ has no attribute ‘SelectRows’

Thanks for reporting this. The add-on does not work with the current version 2.1.54. This will be fixed in the next version of this add-on for the upcoming Anki 2.1.55.

Hi I found that this add-on can not work in [ Anki for Windows 10/11 (2.1.54 Qt5)] but work in previous verison. Can you fix it? Thanks

Hello, I stumbled upon this addon and was amazed with how much I could do. It made editing my cards more dynamic. For example, I managed to make such beautiful code lines and blocks with this. Using dynamic font colors based on the theme (Day and Night Mode) I will applaud how this addon became to be.

One question I want to ask if there will be some form of clashing if I put these cards on Ankidroid. I wanted it to be portable whenever I can, and I wonder if using these cards on Ankidroid will not work as intended.

When is it going to function again? It seems years passed and still nothing had changed in support for newer anki versions

1 Like

I also really miss this add-on.

Hello @hengiesel,

what’s the status of this add-on? Are there still things on Anki’s side that are holding back changes here?

I don’t mean to put pressure on you at all. I’d just like to know if there are plans to update it.