Customizing Card Background Colors Based on Difficulty Levels

Anki Card Design
1

Hey!
I have a pretty extensive word list that I’ve broken down into three levels of difficulty: beginner, intermediate, and advanced. Each level has its own set of tags to help me keep track of them. I’d like to make my cards look more visually appealing by giving them different colored backgrounds based on their difficulty level. I’m thinking green for the beginner words, yellow for the intermediate, and red for the advanced.

I’m looking for advice on whether it’s possible to do this without creating three different card types. Is there a way to dynamically change the color of the background based on the tags for each card? Or would it be better to add a new field with just one word for this?

2

Possibly, but it will take JavaScript skills. I know there have been posts in the forums in the past 6 months discussing ways to do that.

That would work too – still with JavaScript.

But if you’re willing to add fields, the hacky-alternative (for us non-JS folks) would be to make 3 different fields for your 3 levels, put anything you want to mark which one this note is (you can export as text and use a spreadsheet to quickly populate those fields) – then use conditional formatting to control what color is applied to your cards – Card Generation - Anki Manual .

3

Thank you for your hint. I’m going to give it a try the non-JS option.

Even though creating 3 different note types could be the easiest, I don’t like it as if I change something, keeping them in sync is challenging.

1 Like
4

Another option: A useful trick for styling in CSS based on a specifig tag : Anki

5

I am trying this method, but do you know how to give the whole card a certain color?
It’s not so pretty to just have a color up to the border of the content.

6

You can try the following:

Template

<div class="background-layer {{Tags}}"></div>

Note: It does not matter where this <div> element is placed within the template.

Styling

.background-layer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.beginner {
    background-color: lightblue;
}

.intermediate {
    background-color: lightcoral;
}

.advanced {
    background-color: lightgreen;
}

bgcolor_based_on_tag
bgcolor_based_on_tag1212×622 26.3 KB

Relevant thread:

4 Likes
7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.