Anki: How to Customize Background, Gears, Text & More!

in this video with the young king I'm gonna show you how to customize the background the cues the text everything just it's lots of fun and I'm gonna show you how to do all of it okay this add-on is a ton of fun and hopefully you don't waste as much time on it as I am but you can see I got the background I've got these gear icons here and then a little bit I'm going to show you how to change the colors of this the numbers here and a couple of other things that are kind of fun so but first for starters this is the add-on that is here I had a lot of help in making this but you can see there's lots of cool backgrounds pre-installed there's also lots of instructions down here I would strongly recommend you read those but that's the the gist of it you do need to be on on key to point 1 point to 2 or later but there were significant changes in point 20 and so I made this video and I'll link this in the description if you're not already armed this version or later but with that I'm going to show you kind of the gist of this you go to tools and you go under this thing here there's two options now I'm gonna click on this one first just to show you this is the folder that contains all of the images so if you want to add your own images you can under this user files here and they it's for what it is here so you can see the background images are here the gear icons are here and then I'm going to show you this in a second how you can add CSS and that's the part that actually changes the colors here so multiple different things that's an important thing of where to have the folders now if you want to change that background image you go to tools and you go to this setup here you can actually access it from the add-ons dialog as well I'm just going to pull up the config I've added lots of instructions here to make things easier for you including where I got the images and I'll pull bows up here just to show you this is the legal license but this website pixels has a lot of free very high quality images which are great and then this Wikimedia Commons if I click on this one has a bunch of emojis that you can go through they're really nice so you basically just save this and then you drag it and drop it to that folder that I showed you previously I'm going to go back there just to point out one thing that is kind of important and you cannot with CSS let's see you can't change the opacity or anything with these images so you can see these are slightly transparent and I did that on purpose because I think it looks a little bit better and I used Photoshop so you'll just have to use an external editor I'll link something in the description of this video that's an online version of something similar to photoshop that might work and you can see I've also made the file sizes smaller this was originally like ten or twenty megabytes and that's not ideal because every time you click on something it has to reload the image or if I click here you can see it has to reload the image so just as an FYI that's it's not ideal now I'm gonna go back into the customization here and show you a couple things so if you want to change the images you want to change it here under the image name and you want it to be exactly what the image name is in that folder that I showed you and it needs to have the extension you can use other extensions other than the PNG s but that's what I have it for now and I've pre-loaded all these images and wrote their names here so I'm gonna change to Milkyway we'll just try that for now just because it's kind of a fun one and then I also put things here if you want if you don't want there to be an image what you want to customize the gears you can just put this so there's just two quotes and that will make it so there is no background or if you want to default on the gear that you just put in tears SVG that's what Aki uses it's the default and then the toolbar image thing this is the main screen here but this is the toolbar and then this is the bottom toolbar and you can see if I move this over that this picture is doesn't actually go into those now these are rendered as three separate things so if you do that you're going to get three separate images so it really only works if the image is homogeneous and I'm gonna show you that in a second so it makes a little more sense but I'm gonna turn that to true for now the other thing I want to point out is I have the background size set to contain that means that it's going to show the whole thing it's gonna contain it within this so you can see it doesn't actually overlap you can see the whole image but with the Milkyway thing you probably as I've described here you want to do cover especially if you're using this toolbar image set to true you're gonna want this part here set to cover I'm gonna leave it to contain right now just to show you what's going on but I also want to point out these things right here background attached position repeat these are all CSS and to get a better idea of what's going on here I do have this video on how to format card style within Anki and this uses HTML and CSS so this is a really good intro if you've never started that or you can use this website w3schools com they're great and you can see I've got all these things here so if I clicked on the background size they have examples of how you would use it and then down here they have the property values what this can be so like I said there's cover and contain but you can also do a percentage or you can actually set the width and height than pixels if you wanted to same thing here's another page this one does the background position instead so you like where you want I currently have it set to center but just as an FYI this is a great website is where I learned CSS basics and where I go when I need to learn things so that's just kind of how that works I'm gonna go ahead and restart this just to give you an idea of what's going on and we'll click this I'm gonna come back to this thing right here in a little bit show you the CSS but I want to show you how the images work oh we didn't change anything let's try that again go to the config I forgot to click okay Milky Way and set this to true okay sorry about that now let's restart make sure you hit OK when you do that and it will show it'll be kind of funky and I did that on purpose because I want to show you this is a problem a lot of people are having there you go you can see the image doesn't cover it and it's kind of funky here so you can see what I meant that this is this toolbar this and this are rendering as three separate images and so that's why I would recommend you to use a homogeneous thing I'm gonna go back into the config here as you can see I can also access this from the add-ons dialog and I'm going to set this to cover and it will look much much better but because this image is fairly the same throughout that's why it works otherwise it's gonna look kind of funny just as an FYI but most of the pictures I pre-loaded work pretty well and I did that because I knew how these work there we go now you can see that it works really well but if you pay really close attention you can see that light spot right there is very similar to that light spot and that light spot so it's centering the images and that's just how that works and it's also made to go in if we go into this page it's also here and if we go into the reviewer this is where it gets kind of weird this part is going to stay and that's when I would recommend this other add-on called no distractions no distractions full screen it basically makes it so you can get rid of this bar so we got a you can toggle windowed mode now you can see it gets rid of that bars and it actually gives you more space so it is kind of nice I'll turn it off for now and I'm going to show you the settings that I have for that just in case because I know there's a lot of people that are going to ask for that so here's the config and here's the things that I've changed specifically for this atom I use night mode so I set the button border color basically to night mode so that it blends right in you can do all sorts of stuff with this atom and I would recommend you just go read up on this it has a lot it makes a lot of sense and it's fairly easy to use but that's how I have things set up so that's just the gist of it and and now I'm going to show you how you can change the colors of all of this stuff here and it involves changing the CSS so we're gonna go back to this tools and go to here and I'm gonna go to the image folder and the first thing you're gonna want to open is the CSS here and you're going to want to open the one for the whatever you're wanting to edit so this screen right here is the deck browser screen if I click on this then I'm gonna go to the overview screen and then this is the toolbar here and this is the toolbar here so it's just real quick this is deck browser and then this is overview and then if I go in here this is the reviewer and I may include something in the future that allows you to style this but it is not currently a functionality so just as an FYI and I'm gonna go back in oh just a little fun thing you can see this is that what I've got set here every time you click decks it's gonna shuffle it because I have it set to random which is kind of fun it won't do the random with the background image you have to actually restart unki for it to give you a new random one but just kind of mfy oh that's kind of fun okay back to here got a little sidetracked there so under the user files you can see there's these so I'm gonna style the deck browser because I want to change these and I've already opened this file the the one you're gonna want is the sources.file this is what Aki actually has this is what they're currently set to and I want the deck browser as well so I have those two files opened if we're gonna go here click on key so you can see that okay so here's the deck browser this is what he's currently using this is a custom deck browser this is what we're going to use to customize it now the reason for that is everything in this user files folder will stay even when you update things whereas if you updated the files directly in this sources file every time you update this add-on it will it will overwrite that and change it so it's better to change the things in this custom stuff instead so you can see that there's the review account that new count the learn count most of this is pretty easy and you can kind of tell what's going on it is all CSS so like I said if you need a little refresher and that go watch the video and then note that pretty much everything has a night mode partner so here's the review account here's the review count in night mode pull this I this thing I have right here is called virtual let's see visual studio code it's great you can just use a text editor if you want the reason I like this is because you can see that's green oh that's what I'm referring to that's blue which is the new count actually right here or this blue for this one and then there's the decks which are black normally but if you scroll all the way to the bottom you can see that the decks are white here so you can change all sorts of things so what I'm gonna do to change them is I'm gonna copy some of these night mode ones because I'm in night mode I'm gonna copy them over to deck browser and let's change this review count to red and let's change the new count to purple and let's change one more thing just so you really get a feel for what's going on most of these make a lot of sense I'm not gonna go through all of them but you can kind of tell you know the collapse things the gears whatever let's do and I'll paste that in here and we'll change the decks to what's a good one pink all right so we got red purple and pink we got a Valentine's theme going on here I'm going to save this so go file save and then I'm going to restart on key and it should change all of those colors yeah there we go almost perfect you can see we've got pink red purple so all sorts of fun things you can change and I've got other add-ons on here that you can actually change from through the config so that's the gist of editing this add-on I'll show you a couple other fun things here just because I know people like to mess with it if you download my card type go into the browser this is the ankh master card type I have this image right here and it's really small I did that on purpose so that I can rename the deck here if I rename it and you have to rename it just like this image SRC equals underscore a k dot PNG just like that and it will rename it with the with the image there so you can do that with any image really I into the name of the image just to make it really simple because when you come into the browser you can see it now is like that there's no way around that but I just think it's kind of fun so that's one fun twist and then another fun twist because I know everybody likes to tweet just about everything you can see I've got the logo here I'm going to show you how to do that so if we go to tools and I'm gonna go to this folder where I've got it under the gear oops under the gear icon here is the Anki image if i open that up this is pretty similar on windows as a design Mac I'll put a link in the description when I find one that describes how to do this but here's this I'm going to do command or ctrl a to select all this and then I'm going to copy and then I need to go into my applications and here's you can see I've got multiple versions of Anki here but that's the default one what I would do on a Mac here is I'm gonna do right-click and then get info I'm gonna click on that logo and then I'm going to command V to paste and now you can see it is like that so just a kind of fun way to customize just about everything on your Anki hopefully that's enjoyable hopefully you enjoy all the back here I've had a ton of fun with this and don't waste too much time thanks for learning with the on keying be sure to subscribe to our youtube channel here as well as follow us on Facebook Instagram or patreon that is at UNK eMED also feel free to reach out via email or check out our website on game medCom for more tips and tricks

Channel: The AnKing

Views: 74,830

Keywords: anki, anking, how to, customize, custom, background, gears, text, settings, more, image, medical, school, med, student, ranking, banking, step 1, usmle, mcat, premed, step 2, nbme

Id: 5XAq0KpU3Jc

Length: 13min 47sec (827 seconds)

Published: Mon Mar 23 2020