Nike (Just Do It)

Speaker 0: Hi. Welcome back. You know, when I do public theming shows, I get a lot of questions from folks. Ask me they say, Bry, how did you learn to paint like this? How did you learn to paint those amazing themes?

I'll never be able to do that. And I look at them in the face, and I say, look, if I can do this, you can. Just a small town boy from the hills of West Virginia. With enough practice and just a little bit of creativity, you too can paint beautiful themes. Let's dive into today's theme.

We're gonna be painting a beautiful theme for Nike. We're just gonna do it. Alright. So sizing up their web site. It's got a very, very black and white color palette.

Just a couple of neutral tones. So this is gonna be a challenging theme. And anytime you're theming, one of the things you have to ask yourself is this a dark theme or is this a light theme and depending on how you're feeling you have to let that theme guide you along the journey. Let's start. So we've got our project settings out of the way.

Let's look at getting our logo from the Nike website. Using my trusty Logitech keyboard here. Just a solid bit of kit. Really good with the hex codes. Great key action as well.

Alright So we're gonna take that project logo. Alright. We're just gonna upload this logo. Great. SVG.

It should be showing my logo there. Not sure what's wrong. Let's let's just keep going with that. Actually, let's go in. We're gonna look for the Nike brand assets and we're gonna download these logos.

Let's let's grab all these. We need an icon. We'll use the icon for the public favicon, which is, close relative to ShakaCon. And now we'll go in and just copy this link address. We're gonna look for the Nike public foreground background image here.

Trying to find this background image. Background images are important because that's what people see when they first log in to your Directus project. We want to set a good example, evoke all the proper emotions, and this image of of these soccer players just really drives it home for me. Alright, so still looking to find this particular image. There we go.

Alright. Sometimes themes are just slow to reveal themselves. Looks like we've got this image. That's what we're gonna use for our public background. That's great.

Now the last thing that I'm gonna do is just go in and paint some beautiful project logos in here. Of course, we have to unzip the file that we downloaded first to be able to use those. So great. Okay. Alright.

So we're gonna say welcome to Nike PEM. This is where we're gonna store all of our products so we can distribute that information wherever it needs to be. Alright, let's fix our logo there because there were some issues and now this is looking great. Looking really, really good. Okay.

Alright. So we'll just extract this. For some reason that's not working. Let's just paint in a new logo there. Just take your time paint in a new logo.

And I'm using the dark logo because I want to mirror the Nike website. We're gonna use the Directus Minimal theme as our base. Lots of white space, lots of white calm atmosphere. That's what we're looking for out of this theme. We're going to adjust the, logo bar at the top.

Module bar logo. Don't forget your hyphens. Very important in CSS to have your hyphens. And then we will add background. We'll make that white and we'll make that important.

Or we could do transparent as well. Either one is gonna work in this case. But if you're adding that important modifier, make sure you hit the keys twice as hard so that it sticks. Alright. This is looking great.

So we've got a really light, airy theme. It's the tone that we're trying to set. We don't want to get it in your way. We're just gonna let you do it. And that's what we're doing now.

We're doing this theme together. You're doing great. Keep up the keep up the pace. Alright. So for our background, we're gonna use this subtle gray that they use.

We're gonna just use that in our list. So this is where our secondary navigation shows up. And one of the things that I want to just remove here is are these borders. They're just, you know, normally, I like a good border to provide separation and contrast, but in this case, it's just it's not calming me down. It's it's adding stress.

So let's just smooth those rough edges and remove those borders. You know, I don't see very many borders on the Nike website and we shall make it so within our Directus project. It's great. Alright. So now we'll just remove that border from the header.

Just completely erase that like we had just a magic eraser. Those are great products as well, by the way. Very handy if you had little ones. Alright. So now we've got a great looking base.

Let's go in and adjust our list view. So we're going to add a different background on hover and active states, just so we get a little bit of separation. Now this is where I really like to use my half inch brush because it's just great for painting all those fine details. You just go up and down and side to side, semicircle left semicircle right and then we're just gonna paint in a little bit of color mix action there to, you know, on hover. That's a pretty good effect.

Maybe we lighten that just a little bit though. I like that effect. I like it. Just happy thoughts. Thoughts, just happy themes, lots of color mixing.

Let the colors mix and match themselves into whatever form, shape, or fashion they need to be in. Wow. Okay. This is this has a really calming effect. Looks great.

Alright. So we're gonna dive back into our customization. We're gonna go into our buttons under the module navigation and we're just going to set our project color and we really want to drive home to the user what page they're currently on, what module are they using. And there's nothing better than stark contrast to do that. So it's very clear now which module you're in and it it doesn't take away from the rest of the theme.

It adds to it. Blends together harmoniously. Alright. So we're just gonna go in and, make a few time final tweaks to this with our half inch brush. We're just gonna adjust our background, our borders just a little bit.

That's great. Looks great. Okay. Alright. Now, typography is everything to a theme.

Good typography can elevate a theme. Just pass Mount Olympus. So what we're gonna do is copy this Nike Futura. Futura? Futura?

I I don't know. Whatever it is I like it. It's a good font. So we're going to use a little font face rules here and then we're gonna use that palette knife. We're gonna be a little thicker here.

We're just gonna paint that in. Paint that broad stroke in there, paint that broad theme in there. Great. So now we've got that strong bold headline up at the top that that boldly announces where we're at on the on the director's project. But there's one final touch, one final piece de resistance that we have to add to this.

We're just gonna add type title, so we're gonna use that class. Just do a little text transform action and voila. Now we have the perfect Nike theme. That completes this wonderful theme, and thank you for joining me. This has been such a wonderful journey in theme building.

We don't always have to use bright colors to have a bright impact. I hope to see you on the next episode. Bye bye.