Tesla (Simply Electric)

Speaker 0: Hi. Welcome back to the show. I was just reading some more fan mail. I thought maybe we'd answer a question before we dive into the actual theme today. Dear Bry, how did you get your signature locks?

Love, Matt. Your biggest fan. Well, Matt, I could tell you that, but I'd have to kill you. No, I'm just kidding. Only slightly.

No, I've I've really kidding. No, I was once at a friend's house, you might know him. His name is, Chuck Norris. And Chuck and I were in a heated battle of Jenga, and the loser had to get a perm. And unfortunately, I toppled 1 too many blocks too fast.

And here we are. Signature perm in check. It's worked in my favor, though, I think. Right. So today, we're gonna be painting a lovely theme for a lovely company and one of the richest men in the world.

Now, I have not a lot of need for money. I'm very happy with just painting beautiful themes. But, mister Musk, if you're watching this, Brian Ross could use a Tesla to get to and from the office. Maybe we can work on that. Let's dive in.

Alright. So let's cover a few tools of the trade. Right? We've got our trusty Logitech MX Keys keyboard. We've got a firm palette knife.

This is great for painting broad strokes. And then we have our trusty half inch brush. Now you wanna hold that at 10 and 2 just like a steering wheel and that way you can get a good grip on your brush. So we're just gonna dive in. We've already added our project settings and looking at the Tesla website it's very very text heavy.

So let's search for Tesla branding guidelines and see if we can find some logos that we can use. Now, I I do like the website. It's got a clean appearance. I I love lots of white space in my websites, especially in my themes. A good calm theme is great.

Alright. So now we've got the Tesla logos. Let's just import those. We'll upload those here. Upload file to device.

Just zip that over there. Just zip it. Alright. So we've got the project logo. That's gonna be white.

Okay. We're gonna use the public foreground. That's great. And for our public background one of the, little known things inside your Directus CMS or back end whatever you're using Directus for you can use videos as the public background now this doesn't break the laws of theming. This is just a 4th dimension to that.

It really makes your login page pop. So we'll just add a public note, welcome to the Tesla CMS plus the PIN. I swear we're gonna store all of our information. We've gotta make sure it's beautiful. Alright, so we'll look for our favicon.

There it is. We're just gonna take that, save it out, just just a little save action and upload to device. If we really want to get fancy with it, we could just paint it on. Alright, so now we've saved this we've got our basic branding in here, but when I look at the Tesla website you know I'm thinking what could this theme be? You know, one of the things that I always consider when I'm theming is is this a dark theme?

Is it a light theme? And in this case, I think we need to go dark. Now, I usually like to paint positive happy themes with bright colors, but sometimes there's no substitute for a great dark theme. Full of soul. Alright, so this is a great base.

The Directus default dark theme provides a good look for theming, but let's add in that Tesla red. Let's make this thing pop. So for our project color, we're gonna change this to the Tesla red. So I'm just gonna take and carefully enter that with a half inch brush. This is an advanced technique so really pay attention.

Just use that half inch brush to enter those hex codes. It's, it takes a little while to master that but I know you'll get the hang of it. Alright. So one of the other subtle effects that I see here, when they offer merch here on the Tesla web site, you got this nice grid, dot pattern background. I love texture.

Texture just adds another element to blend everything harmoniously together into just the most wonderful theme. Alright, so we're going to go in and let's see if we can't find some of these colors that we're working with. Alright, so we're gonna use this dotted grid. We're just gonna paint that into our background accent color. Great.

You can see we've got a a great looking sidebar or module navigation. But the next thing I'm gonna do is go into our navigation and I'm gonna dial in our background. We're gonna use the theme background color. Not not the correct variable. There we go.

Alright. So now this is one color of black. It's a very dark black like a midnight. Looks great. But what we want to do is we want to add that dot pattern background.

So let's just look through the document, see if we can find that. There it is. We have found it. Let's see the styles that are being applied. Right?

So we're just gonna take this and we're going to convert it into a single background property. Now the navigation background can support patterns using SVG or data URLs and, we can also add gradients in. And again, anytime you're doing a lot of theming, you're switching colors, make sure that you just get in there with the dust or Dust the demons out of it. But make sure you don't ever turn your duster upside down because that that will make it freeze. It'll potentially explode.

You don't want that. Alright, so now we're just going to add, negative 20 pixel offset and a little extra pixel inset and, that looks really great. So now we've got that subtle grid effect. This is this is a beautiful, beautiful theme. This is really what I was hoping for.

Sometimes dark themes can be some of the most enlightening themes to paint. You're doing great, by the way. Alright. So now let's add some Tesla fonts. So we can see we've got a Gotham SS m font.

If we take a look and we go through the network tab, we can see where these actual fonts are coming from. Alright. So now we're just going to, try to copy those and paint those in here. We'll search and see if we've got any font face definitions that we can already just use, but it doesn't look like it. So what we're gonna do, we're just gonna copy, and we're going to paste into our custom CSS.

Now, you can get most of your theming done inside the dark or light theme customization, but sometimes you need to reach for a little extra power. That's where this custom CSS comes in. You just spread on a nice little font face property here. We're gonna use Gotham for the name. We'll add that source URL.

We'll go in and paint our fonts for the dark theme customization. Just call this Gotham, kinda like Batman. Always loved that one line that he delivers in the movie. Justice never sleeps. Alright.

Okay. So we'll just dial that back. That's great. The last thing that we need to do here is basically to fix this font. We want to make it all uppercase.

It has to be all uppercase. So we're just gonna go in and just add a little type title. And now I'm gonna go in and just paint a little text transform in there. Just blend that text transform. Just a little up.

Just keep going up until you get it all uppercase. Great job. Amazing. Alright. So this is looking like a beautiful theme.

Let's just check it out. We've got all of our vehicles. It's beautiful. Great theme. Alright.

So we're gonna log out, check out our public login page and wow, does that video ever make this pop? Doesn't that make you just feel like you need to be in a Tesla? I know it does me. So thank you for joining this episode of The Joy of Theming. We've got some extra special tips and techniques for painting beautiful, beautiful themes.