I want a small image to appear on the back, depending on the category.įor that, I have tagged my cards with the food tag, when they are about food, and for drinks vice versa. In this example, I have a lot of cards containing either food or drinks. You can achieve this either by pasting the image directly, or we can for instance show a small image depending on a tag. Sometimes, you might want to display an image, depending on a category on your card. We will utilize the (in the HTML on the front) comes after the topbar-class, so it has higher priority and can override the more generic styles. So, now we want to make this bar take a certain color depending on the deck the card is in. Otherwise, our element might not be created, since it is empty. This is to force the display of a space character. If you look at the code, we’ve also added a special there. The latter causes the element to stretch all the way to the right. We then tell Anki to put our element all the way to the top, to the left and to the right. It makes debugging your cards a little easier.Ī red bar is now visible at the top of our cardsįirst, by changing position to absolute, we allow us to specify the exact position of the element. Download the file, and place it in your add-on folder, which you can find in Anki under Tools → Addons → Open Addons folder. I highly recommend the add-on View HTML source with JavaScript and CSS styles, which sadly isn’t available from AnkiWeb anymore.
This is a more or less undocumented feature, and I wrote about it here.
#ANKI MANUAL CODE#
If you have a lot of shared CSS code, you can also put this code in a central file, and edit it from there. I have some links at the end, if you want to get deeper into CSS. A short introduction into HTML can be found here.
The introduction also covers HTML and CSS, so I’m assuming you’re familiar with that as well.
#ANKI MANUAL MANUAL#
If these things are new to you, you can read up on them in the official Anki manual (Sections “Adding a note type” and “Cards and templates”). For this highlight of CSS uses in Anki, I assume that you are familiar with editing cards and note types. These templates can be edited using the internal editor, located under the Cards button (when you edit cards). Under the hood, every Anki card is actually displayed as a website.
0 kommentar(er)
