Styling It Out With Anki

A wheel of colours. Image by Karen Barefoot, freeimages.com

Flashcard wonder Anki is not only a rock solid learning tool, but also one of the best maintained pieces of software in the linguaphile sphere. Updates come regularly, and with each one the app gets more and more robust.

One impact of the most recent updates, for instance, has been to organise the interface for styling Anki cards a lot more tidily. What was formerly a slightly clunky, overwhelming form window now supports a more logical workflow.

Change can pull the rug from under our feet, though – so how do we style our cards now?

Stylin’ It With Anki

Accessing the styling panel is thankfully much the same as before. To access the updated card styling panel, first click Browse in the desktop app. Then, select one of your card types in the left-hand list, and click on the Cards… button that appears in the main right-hand panel (it doesn’t matter which entry is selected – the styling is shared by all of them).

Now, you get a nice, neat interface with tabs for the front and back sides of the card, as well as a shared styling tab for both. Previously, the window presented all of this information in a single window. The new format is a lot less overwhelming, especially if you are new to the feature.

Styling Anki cards in the latest version of the program

Styling Anki cards in the latest version

So where, exactly, do we do all the fancy stuff in this new layout?

Nice and Easy Styling

To give it a whirl, you can start with one of the simplest but most effective tricks: adding some colour to a card template with CSS. Colour-coding is fantastic for keeping multiple language projects apart if you use Anki for multiple languages or subjects.

Here’s a code snippet you can drop straight into that ‘Styling’ tab to give you a basic outlay for changing colours:

html, body {
background-color: green;
}
.card {
font-family: arial;
font-size: 28px;
text-align: center;
color: black;
background-color: white;
border: 9px solid red;
}
hr {
border: 2px solid blue;
}

Here is a version of that in action, modelled by my lovely new Swahili cards:

Brightening up some Swahili vocab cards using CSS in Anki

Brightening up some Swahili vocab cards using CSS in Anki

I was a bit sneaky and threw in something extra here: that smart little Tanzanian flag. It’s no bother to do this, either, but it got a little more difficult in the latest update.

No Thanky, Anki

Adding images to your cards via the application media folder, be they template images for all cards, or individual learning items, ensures that they sync across your devices. But oops – the link to the folder has now disappeared from the Preferences > Backup window.

Not to worry. You can still locate this it in your file system, which is a bit longer-winded but works the same way. On MacOS, you should find this in:

[your user directory]/Library/Application Support/Anki2/[your username]/collection.media/

In Windows, try:

AppData/RoamingData/Anki2/[your username]/collection.media

Once located, you can drop images and sounds into this folder to use in your cards. Every time you sync from the desktop, the app saves these files in your online account.

In the styling tabs, you can then reference them by filename – no path required – to add them to cards. For instance, to drop a Greek flag PNG, present in that folder as flag_fr.png, onto a card in the new edit window, paste in this code (adjust the width and height as necessary):

<img src="flag_gr.png" width="50" height="38" />
Embedding an image into an Anki card

Embedding an image into an Anki card template

It goes without saying that you should always be very careful when accessing and changing the contents of the collection.media folder.

The updates to Anki are great tweaks that improve usability (although we would love the Backups Folder link back, please!). Here’s to the app going from strength to strength in future revisions!

Richard West-Soley

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.