 Hey everybody, welcome back to the channel today I'm going to be talking a little bit about how you can use user chrome CSS to make your Firefox looks like mine So I've had a couple questions over the last few days in the comments sections about how I You can make your Firefox look like my setup and I've just decided I'm just gonna make a video about it It's fairly easy. It's not anything that's overly complicated. And unless you actually get through and go through and Actually create your own CSS stuff and then it could get very complicated and you'd have to know CSS in this case All you have to do is take some code snippets that are readily available on the internet and put them in a certain file and you're done Well, I mean, it's almost as simple you have to enable it first But and now I'm gonna show you how to do all that so let's go ahead and jump over into the And show you what we're gonna be doing here now This is what Firefox looks like out of the box, you know, it's just a normal Firefox install and In order to actually go through and do what we're going to do you have to enable the capabilities So in order to do that you have to go to about that config about colon config not that config, excuse me and They'll bring up here now You'll you may get a warning saying hey, oh my goodness you're editing settings that you probably shouldn't be setting Just go ahead and bypass that and say yes or whatever the option is to continue on You can there's also an option there that just say don't show this to me ever again I've I've slugged at that because if I'm in here editing something chances are I'm here in here to edit something I don't need to be told Don't edit this if you know what I mean so The first what you need to do here is type in this here tool kit Dot legacy and there's only one option here once you've typed in this even probably I'm to finish the words Yours will say false like this So you just want to click this button so it says true and then you can close this tab That's how you enable Firefox to basically what you're saying is Firefox I'm going to be using my own CSS for your UI look for it Otherwise, it's automatically just gonna be going to continue to look for the default CSS stuff that and that makes it look like this The next thing we won't want to do is go and open up a terminal. So I have a terminal open here and You're gonna want to find your profile Folder on your computer Now I'm pretty sure I'm like 90% sure that this is in the same spot for everybody, but it is named something different So it will depend on it'll have some weird letters and numbers in it But I think it's they're all in the same location if I'm wrong on that I will leave a link in the video description on How to find your profile folder it's very easy, but I'm pretty sure like it's I'm pretty sure that they're all in the same spot So what you want to do is cd into dot Mozilla? And slash Firefox Now I actually should say this This is for Linux. I'm not sure how this would look on Mac OS or Windows. So if You're on Mac OS or Windows click on the link in the video description to find out where your profile folder is because I'm not sure If they're in the same spot on other operating systems for sure. This is where I'm pretty sure I should say I'm pretty sure this is where they all are on Linux so you just want to go cd into this and do an LS and The one you're gonna want is the one that says default slash release and I'll have some weird letters and numbers here in In front of it. That's where yours will be different. So mine's y70 hj AXA yours will look something different. You'll also have one called default fault ignore that one You'll want the default release one. So what you want to do is cd into that cd y7? Okay, and then do an LS here now yours will look a little bit different because you're you will not have a Chrome.old folder here That's just my actual main config file for Firefox But just know that yours you won't have that so What you'll need is to make a directory here called Chrome and It's just MK DIR Chrome and then you want to cd into that folder and if you do an LS It's completely empty. So the next thing you want to do is to touch use the command touch user capital C Chrome that CSS Okay, and then we're gonna want to use a some kind of text editor in order to get into that file So I'm going to use Vim. So just use user Chrome that CSS and then you'll come in here and you'll see a Blank Vim document now the question is what do you put in there now? This is where our paths can diverge if you're a CSS guy and you know your own CSS and stuff You can go through and use the Firefox wiki or whatever that I'm going to link below for it's on reddit and they can there's a little Tutorial over whatever on there on where to find whatever classes and IDs and stuff you need in order to make changes I'm not going to get into that. What I'm going to do is actually steal some code from somebody else I'm excuse me. I'm going to appropriate some code from someone else that they've kindly shared to the internet and There's just tons of the stuff out there. So it's easy very easy to go through and just you know do and Really, I'm just going to show you that so This is the code that I'm talking about. It's on reddit by a guy named. Mr. Other guy. Thank you, Mr. Other guy There are just tons and tons of little effects. It's your Tweaks that you can make to Firefox Using this code now you can add as many of these things as you want Obviously putting some things of the some of these things together won't make sense You there's no reason to use a multi-line and a one-liner code because those two things conflict And chances are your Firefox won't even load if you use both of them So use code here that makes sense to put in you know together I'm going to just choose the one-liner one that I had before. It's just a little bit of code and What we want to do is choose Nav bar tabs one liner menu buttons. This is the one that I want right here and What I want to do is copy from the bottom to the top Okay, and they just control c on that And then we want to go back to our terminal and control shift v in order to Put some code in here the code that we just copied and then we just going to want to save that I'm just going to save it and then we'll go back here to our firefox and we're going to get equipped Okay, and then we're going to restart firefox And as you can see Yeah, that's not the way that's supposed to look. I don't know why there's an extra bar over here That's not the apparently that's not the one that I used As you can see some things sometimes things go wrong So it when when something goes wrong just oops Go here and go to the top into visual mode and go to the bottom And then delete this We go back to three quit this restart firefox. We're back to where we began Apparently that was the wrong one So we're just going to try one of the other ones This is the best way to do it is just to go through and trial and trial and error Nav bar is where we were at before Nav bar one liner. That's the one we did before Tabs on left. No, we don't want tabs on left Maybe this is just the one that I wanted. I can't remember. It's been a while since I've done mine. So I'm just copy and paste this Go to four control shift v write this And then go back to three and quit this and restart firefox. Yeah, there we go. That's the right one And that's basically I've done now in mine. I've gone through and hot and um hidden the hamburger menu You may have to google how to do that. I don't know where I don't remember where I got that code But that's the only other solution I've done now some of these here these um tweaks or whatever Will require you to use the compact version of firefox. So if you'd right click and click customize And down here where it says destiny dense density Hit come hit compact That would allow you to make it look right if you use normal sometimes the tabs overhang a little bit You can't really see that I mean if you zoomed in a little bit, you probably could see that those overhang a little bit So you just use the compact version And that's it. So that is oops. I went to the wrong one Um That is basically all there is to it. Um Like I said in the video description, I will link to all those code snippets Play with them a little bit make sure when you find something that works you back it up and then just you know Mix and match as much as you can as much as you want sometimes some things will not work So you just delete You know, whatever didn't work and go back to the one that did work, um Or start over again just delete the user chrome file Create a new one and start over. Um That list of css hacks is pretty cool. It's very extensive. There's a lots of stuff you can do sometimes some of them don't work Some of them do work Some of them are for older versions of firefox and so on and so forth. You just try what works That's the one liner one is the one that I use so Thanks for watching If you like this video give it a thumbs up if you didn't give it a thumbs down Make sure you subscribe to the channel and hit the notification icons We're looking for a thousand subscribers by the end of the year. We're getting close to 250 which is just absolutely insane. Uh, so thank you for watching. I'll see you next time. Thanks for watching again