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…
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.)
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…
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.
