Super simple Anki style for language flashcards
Added 2020-08-28 06:50:39 +0000 UTCCreating Anki styles for your decks is intimidating but I want to share a simple one that I'm using, which looks better than the default Anki look.
This tutorial is designed for people who have followed my previous post: https://www.patreon.com/posts/38355502
On AnkiDroid, your cards will look like this:
By now, you have notes with the following fields: English, Romanization, Chinese, Sounds
Start Anki, and go to menu Tools -> Manage Note Types
Select the Chinese-Audio note type which you created previously, then click the Cards... button.
You can now start editing the style.
In the Styling text area, paste the following CSS code:
.card {
font-size: 50px;
text-align: center;
color: black;
background: #E0E0E0;
}
.frontbg {
background-color: #4dabf5;
border-radius: 10px;
color: #fff;
position: relative;
left: 0;
padding-top: 10px;
padding-bottom: 10px;
}
.backbg {
position: relative;
top: -6px;
background-color: #fff;
padding: 15px;
padding-bottom: 15px;
padding-left: 30px;
padding-right: 30px;
border-radius: 0px 0px 10px 10px;
color: #4dabf5;
}
.language {
font-size: 30px;
color: #e91e63;
}
.situation {
font-size: 30px;
color: #8561c5;
}
.sound {
font-size: 10px;
}
In the Front Template text area, paste the following code:
<div class=frontbg>
{{English}}
</div>
In the Back Template text area, paste the following code:
<div class=frontbg>
{{English}}
</div>
<div class=backbg>
{{Romanization}}
<div class="language">{{Chinese}}</div>
<div class="sound">{{Sound}}</div>
</div>
The final result should look like this. On the right side , you'll see a preview for the front and back cards. You are all set, you can close this window and review your decks!
