Initially, Closet used JavaScript to insert styling (CSS). This is not ideal, since it’s best practice to separate styling from functionality (scripts) as much as possible.
With v0.5.0, Closet no longer inserts CSS via JavaScript, but old Closet setups (like yours) need to be updated manually now.
Background info
Closet is essentially a TypeScript (more strict form of JavaScript) document in your Anki media folder, that is accessed via your note templates. Within the note template, Closet has a section called closetUserLogic, that contains custom user setups. These are settings to let Closet “know” how to behave for each individual user. And that part is what we are talking about in this discussion.
Here’s the release comment on v0.5.0:
- Closet now is separated into both a JavaScript library, and a default CSS file. If you insert Closet with Asset Manager, the CSS import will be automatically added to the note type. You can also add it manually via putting
@import url("__closet-0.5.0.css");into your note type styling. This allows you to easily overwrite the default Closet styling with only CSS, which was a much asked feature.
Updating your setup for Closet v0.5.0+
With Asset Manager
If you’re using Asset Manager, you can find the Closet setup by going to “Manage Note Types” → select your note type → hit “Asset Manager”. It looks like this:
On double click, an editor window will open and you can update your setup to no longer contain functions that append CSS (like the one by Towel_Sniffer I showed above). Just move that styling to the “Styling” section of your Cards editor.
With the Cards editor (not recommended)
Within your card templates, you can find a script called Closet Setup.
There should be a function called closetUserLogic:
function closetUserLogic(closet, preset, chooseMemory) {
const elements = closet.template.anki.getQaChildNodes();
const memory = chooseMemory("closet__1");
const filterManager = closet.FilterManager.make(preset, memory.map);
const output = [[elements, memory, filterManager]];
/* here goes the setup - change it to fit your own needs */
...
##YOUR SETUP##
...
return output;
}
Within that function, you can cut out all functions that insert styling and move that styling to the “Styling” section of your Cards editor. Don’t forget to add this line: @import url("__closet-0.5.0.css"); to the top of your Styling section as well (this is done automatically with Asset Manager).
An example
Allow me to show the changes that would be needed for this setup from the website. Because the examples on the website haven’t been updated yet, I can demonstrate the migration with them (quite a tall image, click to expand):
Alternative
If you’re having trouble with the “coding” aspect of this and you didn’t customize your Closet setup to begin with, then it would be easiest to just hit “Reset” in the Closet Setup script within Asset Manager
(be sure you first know how to restore backups):
