Change default HTML/CSS template in editing mode

Hi everyone,

I started to seriously understand Anki’s system, and I’m at the point where I’m asking if it’s possible to change the default CSS template of all fields in editing mode.

I know how to change the styling section in note type for reviewing mode but here I want to modify text when I’m editing cards, since for the moment I mostly use Anki like a database rather than learning cards so I don’t use reviewing mode and prefer to see the fields in the browser.

Actually, when I’m editing a field, I have to open the HTML window to add some CSS styles (for example to adjust unordered list). It works but I have to copy/paste the code for every field, so it’s little annoying…

Any idea ?

If you only want to change the appearance of certain words/sentences (e.g. highlighting), you could use the Custom Styles add-on.

If you want to change the styling of the editor itself, there’s the add-on Customize Editor Stylesheet, but it won’t allow you to edit everything because the field’s default styles are protected within a shadow-DOM. You can see this in action when you inspect fields with AnkiWebView Inspector.

About AnkiWebView Inspector

This add-on is really helpful for any kind of front-end tweaks or complex card templates.
I highly recommend you analyze the structure of the editor page with that inspector, then you’ll know which classes to style and which CSS-variables to use.

To fully control the look of elements inside Anki’s editor fields, you need to inject your CSS into the shadow-root with your own add-on:
(The Custom Styles add-on does the same thing, but you can only change the injected stylesheet through the add-on interface, which is a little bit limited.)

Hi kleinerpirat,

First of all, thanks you for your answer. It looks like you wanted to do the same thing as me. I think you understood my question, but for my part I have a little trouble following you.

I use the “Mini Format Pack” add-on, but I’m not happy with how the lists look, so for every field, I use the HTML window to add :

ul { list-style: none; line-height: 130%; margin-top: 0em; margin-bottom: 0em; padding-left: 0; } ul ul { padding-left: 1.8em; } ul li:before { content: '\2012'; margin: 0.3em; } ul ul li:before { content: '\2022'; margin: 0.3em; } ul ul ul li:before { content: '\2B9A'; margin: 0.3em; }

If I understood correctly, I’ve to use the load function as explained in the other post, but I don’t know how to do it. I would be very kind of you if you help me a little… :sweat:

Sure thing, I wrote an add-on for you: https://ankiweb.net/shared/info/181103283

Simply navigate to the add-on folder as described on the add-on page and edit the file “field.css” to your heart’s content. Should I ever update the add-on, make sure to back up your CSS files before accepting the update.

I would be happy to know if it works for you!

2 Likes

At first glance, it looks like it works ! I don’t know how to thank you, I was looking for a solution for hours, and there you are !

1 Like

23 posts were split to a new topic: CSS Injector [Official Support]