# Customizing Card Background Colors Based on Difficulty Levels **URL:** \ **Category:** Card Design\ **Created:** [June 4, 2024, 11:59pm UTC](https://forums.ankiweb.net/t/customizing-card-background-colors-based-on-difficulty-levels/45615 "2024-06-04T23:59:36Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![CrayonLearn](https://avatars.discourse-cdn.com/v4/letter/c/cab0a1/32.png) [@CrayonLearn](https://forums.ankiweb.net/u/CrayonLearn)\ **Post date:** [June 4, 2024, 11:59pm UTC](https://forums.ankiweb.net/t/customizing-card-background-colors-based-on-difficulty-levels/45615/1 "2024-06-04T23:59:36Z")
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? ---
**Author:** ![Danika\_Dakika](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/danika_dakika/32/17815_2.png) [@Danika\_Dakika](https://forums.ankiweb.net/u/Danika_Dakika)\ **Post date:** [June 5, 2024, 12:14am UTC](https://forums.ankiweb.net/t/customizing-card-background-colors-based-on-difficulty-levels/45615/2 "2024-06-05T00:14:35Z")
> [@CrayonLearn](#): > > Is there a way to dynamically change the color of the background based on the tags for each card? 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. > [@CrayonLearn](#): > > Or would it be better to add a new field with just one word for this? 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](https://docs.ankiweb.net/templates/generation.html#conditional-replacement) . ---
**Author:** ![CrayonLearn](https://avatars.discourse-cdn.com/v4/letter/c/cab0a1/32.png) [@CrayonLearn](https://forums.ankiweb.net/u/CrayonLearn)\ **Post date:** [June 6, 2024, 12:46pm UTC](https://forums.ankiweb.net/t/customizing-card-background-colors-based-on-difficulty-levels/45615/3 "2024-06-06T12:46:09Z")
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._ ---
**Author:** ![dae](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/dae/32/65_2.png) [@dae](https://forums.ankiweb.net/u/dae)\ **Post date:** [June 10, 2024, 4:47am UTC](https://forums.ankiweb.net/t/customizing-card-background-colors-based-on-difficulty-levels/45615/4 "2024-06-10T04:47:09Z")
Another option: [A useful trick for styling in CSS based on a specifig tag : Anki](https://old.reddit.com/r/Anki/comments/9z8gje/a_useful_trick_for_styling_in_css_based_on_a/) ---
**Author:** ![CrayonLearn](https://avatars.discourse-cdn.com/v4/letter/c/cab0a1/32.png) [@CrayonLearn](https://forums.ankiweb.net/u/CrayonLearn)\ **Post date:** [June 11, 2024, 10:37pm UTC](https://forums.ankiweb.net/t/customizing-card-background-colors-based-on-difficulty-levels/45615/5 "2024-06-11T22:37:19Z")
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. ---
**Author:** ![hkr](https://avatars.discourse-cdn.com/v4/letter/h/c6cbf5/32.png) [@hkr](https://forums.ankiweb.net/u/hkr)\ **Post date:** [June 12, 2024, 6:16pm UTC](https://forums.ankiweb.net/t/customizing-card-background-colors-based-on-difficulty-levels/45615/6 "2024-06-12T18:16:10Z")
> [@CrayonLearn](#): > > how to give the whole card a certain color? You can try the following: ### Template ```auto
``` #### Note: It does not matter where this `
` element is placed within the template. ### Styling ```css .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](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/3X/d/e/dec3c0dcfccd706dc038a809f88e650d5cc06ed0.png) * * * #### Relevant thread: > [@Changing Background Color Per Deck for Whole Card with Scroll](https://forums.ankiweb.net/t/changing-background-color-per-deck-for-whole-card-with-scroll/8803): > > I would like to have a different background color for every deck I create. I am new to CSS and have tried a bunch of tactics. My main issue is the only way I can get the background color to cover the entire card is to use a fixed layout. If I use fixed layout, I can’t scroll when I have larger images or a code block. I used this post below for help. I can change the image base on tags. I can change the color and font based on name of subdeck. I just can’t get the background to be the entire ca… ---
**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\ **Post date:** [July 12, 2024, 6:16pm UTC](https://forums.ankiweb.net/t/customizing-card-background-colors-based-on-difficulty-levels/45615/7 "2024-07-12T18:16:22Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.