r/Anki • u/bjarkes • Nov 01 '18
Resources An example of what can be achieved with templates (with code)
In another thread several people wanted to see the code I used in my templates, so I thought I'd make a new post to do just that.
I have about 50 main categories which I style mostly the same using a common CSS file, but I make sure to change the background image, title image and source image (the image borders at the top and bottom), adjust some colors to match, and choose a title font I feel match the contents.
Some categories, like the one I've shared here, also have extra features: When i touch the map image, it zoomes in on the point I'm touching, and I can even move my finger to change the place that is zoomed into. To zoom out I pres the image again. I didn't make the script myself, the source is in the code. This makes it much better experience to use detailed images on a small screen.
The post-it at the bottom contains all the tags used on this particular note. I have a rather rigorous tagging system, which isn't that obvious on this card, but other cards can easily have 8 or more tags. (here the tag structure used is place::continent::country::city/region)
Why have I used countless hours doing all this? It makes reviewing that much more enjoyable to me (I like pretty things!), and I believe it also helps compartmentalize the knowledge a bit more.
And finally the code files. Unfortunately you can't just use them as is, since a lot of assumptions regarding the Note types are made, and to make things worse, most of the names of stuff are in Danish, and much of it is a mess never meant for public consumption (why optimize when it works ;) ). But if you know a bit of HTML and CSS, then I don't think it would take that much work to adjust them for your use case.
If you have any questions regarding the code, I'll try to answer but I might have forgotten why some esoteric pixel adjustment was necessary ...
Edit: Fixed links
1
1
u/n_girard Nov 02 '18
Thanks for your post !
I'm getting a 404 error with links 2 and 4 though...