The Home Depot (How Doers Get More Done)

Bry: It's a beautiful day in the neighborhood. Oh. Hi. Welcome back to the show. Sorry.

I was just singing the theme to our sister show, Mister Miner's Neighborhood, which you can also find on DBS, the Directus Broadcasting System. Alright. Well, welcome back to the show. I'm your host, Bry Ross. And today, we've got another extra special episode of The Joy of Theming.

Super excited that you're here. I hope you've got your direct us canvas laid out with a beautiful data model just ready to customize and beautify. Today, we are going to be painting the king of DIY themes, The Home Depot. The first thing I always do when crafting a theme, aside from the data model, is the project settings. So we're just gonna name this The Home Depot, and the slogan recently changed for Home Depot or at least a few years ago.

It's how doers get more done. Couldn't be a more perfect tagline. The joy of theming is how you get theming done, so I really like that. We're gonna dive in and let's just copy the project logo. I'm gonna drag and drop this.

Now, next I'm looking for the perfect background image and I'm not really sure what we want to do here. There's so many different options on the Home Depot website And sometimes when you're theming, and you only have a short period of time, it's so hard to select a good image. Now a the Home Depot, maybe we can go into some of their careers section, corporate information, and and just look. Let's oh, wow. Look at now.

This looks like the founders of Home Depot potentially. So let's import that and use it as our public background. That's great. I I really like this built from scratch. It's got that distressed texture.

It should look really beautiful in the public foreground right above that public background. Alright. So now that we've got kind of the basics of our theme laid out, you can see on the the module bar over just just right there, the module bar is is all black. Now, do I really want it to be all black? I I don't think I do.

I want it to match the website. So let's pick up that orange color. We're gonna use that for our project color. And I I don't even know what to to call this orange. It's, like, burnt red, sienna, orange.

Just just a beautiful shade of orange. It's comforting and eye catching at the same time. So we'll just smear that on the project color and it looks like we've got all of our icons in the list changed. We've got the the top of the module bar there, but we we don't have the module bar. I want that to be orange.

I want that to match the website. But, you know, going back to the website, if we study this, we can see that the icons in the navigation, they all are orange on hover. They're black when not hovered. So we can just go in and we're gonna just, in our primary color for the thing, we're just gonna slide that project color just right across that canvas. And now we can see on hover those icons turn orange, but there's a slight background color problem.

And again, there are no problems. These are just opportunities to to paint a better theme. We're gonna go into the modules and into the background hover. Just gonna set this to f f f which is just white. It's just a short hex code for white.

Nothing fancy. Nothing crazy. You can do this. You've got this. The next thing I want to do is just dive into the border color.

I've I've got this RGB color and I see a a Tailwind border opacity, which makes me think that Home Depot is using Tailwind. I love Tailwind. It's a great shortcut for theming. So but we'll go in, we'll just paste that into our background color, and that gives a little more pop to the background or the borders. It's a subtle difference, but borders really make a theme and not enough people focus in on it.

But when you put all of these pieces together, you can build really beautiful themes. So, now, we'll just fix our icons. Within that navigation, I want those to be the project color just to add a little more pop of orange, a little more eye catching, but also very pleasing. So the next thing that we wanna do, you'll notice that the headlines on the Home Depot website, they have a condensed font. Looks like Helvetica nude to me.

I did take a font class in technical school after I got out of the, merchant marines. And we're just gonna look for that font face. So we'll take their, CSS here and just paint that into the custom CSS inside Directus. Alright. So inside our instance, we're gonna go back up to our font section and just use Helvetica Condensed.

And now you can see in our header, that looks great. We've got that condensed Helvetica font, but we need to uppercase it just to make it pop. It needs to be really nice. So we're gonna spread on just a little bit more custom CSS. I'm gonna take the palette knife and just spread that uppercase onto this beautiful theme.

Type title, upper case. We've got this lovely upper case font. Looks great. It really matches. If we go to the data model, this looks great.

It's got the same feel for the cards. We've got our product listings that look great. Are we done? This is really nice theme. I I love it.

I hope you've enjoyed following along. Let's just pop out and take a look at the Home Depot login page. We've got the 2 founders there. It's built from scratch, as all the best themes are. Beautiful.

Welcome to The Home Depot. That's it for this episode of The Joy of Theming. I've really enjoyed having you. Come back next time. We're gonna dive into some more techniques and just fun with theming inside your Directus project.

I'm Bry Ross. We'll see you next time.