Amazon (From A to Zest)

Speaker 0: Hi, friends. Welcome back to the show. I'm your host, Bry Ross. Before we start our theme today, I thought it was important to cover just how to clean your brush. So, this is how I like to clean my brush.

It's super important to have a clean brush anytime you are doing a theme. You've got to make sure that you've got the right colors that you're putting on the theme. So what I like to do, I take my duster, give it a couple shakes, and then just aim the the little red tip of this nozzle at the brush. Just just give it a little flip there. And then you can hit it on your desk and now you've got a brush that's ready to go.

So the theme that we are building today is Amazon from a to z. So if you're following along, I hope you've got your canvas prepped with a great looking data model, and let's get started by adding our project settings. Amazon. Everything, all the time. Whenever you want it.

Alright. So we're gonna copy the project URL and just paste that in there. I would probably remove that ref tag as well. So we'll just paste that in there. And now we're ready to theme.

So I always start everything by dialing in the branding. The branding is so important. We're going to inspect this Amazon logo from the website. It looks like it's gonna be a real pain to get access to this. They're using a sprite sheet which is is probably smart for performance, but makes our job as themers just a little bit more difficult.

So we'll just use the Amazon logos that they have, And what I'm going to do, I'm going to use a combo move here. I'm just going to put both of these together. Copy. And import from URL. Great.

Okay. So now we've got our project logo, public foreground. What are we gonna use? We're gonna choose the same file from the library. That's okay.

We don't necessarily need 2 different images for our logo and our public foreground. It's all good. So we're just gonna paint that on. Great. Good, good luck.

Okay. Alright. So as far as a public background image, we've got to find something that works. What are we going to do? Well, I'll show you.

Way back when, I used to paint t shirts before I painted themes. And, yeah, one of the t shirts that I loved by my friends at the mountain, are these Wolf t shirts. These are such masterpieces. If you've ever seen them, they're some of the most highly rated shirts on Amazon. So let's just use one of those as the public background.

We'll just paint that beautiful, beautiful theme there. Alright, so now we're looking for a favicon. I don't see that here. I'm not seeing it. Again, theming is a journey.

There's many twists and turns that we have to navigate to bring out that theme. So let's just search for Amazon Fab icon. This looks like a good one. Copy that image address, and I'm just gonna brush that in there. Just pick up that half inch brush.

The fab icon is such a small detail. Absolutely critical though. Alright, so for our project color, what we want to do, we want to find this Amazon yellow, this Amazon orange. Is it orange? Is it yellow?

Is it in between? I don't know. But it's it's lovely. It's reassuring, but also stands out against that darker background. Alright.

So we're just gonna paste that in. Now we've we've got that. We've got our project color. So this is gonna bring all of our buttons up to that color, but again, we want to match that Amazon website. So we've got to go in and we need to adjust this module bar logo.

So to do that, what we're gonna do, we're gonna go into our modules. I'm not seeing that that CSS there. We're actually gonna have to use our custom CSS here. So we'll do a class selector module dash bar dot logo and just paint some background transparency on there. It's almost like we're removing it but essentially we're just blending it in.

Just, you know, we'll add that important modifier just to make sure that it's set. Great. Okay. Alright. So next we're gonna dive in to this second nav, this secondary navigation.

It's more of a navy blue like a midnight navy. Like a very soulful color. Alright. So now inside our list, we need to go in and set our foreground colors. Now this is a an advanced technique.

Your mileage may vary, but I like to take my half inch brush, Just stroke the keys ever so softly and that way we can get this nice color effect that we're looking for. So for our divider here, that white is too much. Maybe we use a little color mix to bring it down. Mute that just a little bit, but as you can see we've got a weird hover effect going on. How can I fix that, right?

That is going to be in our background hover and our background active color. So I can take this color mix and from our background hover maybe I just dial it back a bit, just a little bit, just dial it back just a little bit. It's very nice. You're doing great, by the way. Amazing.

It is so fun and so enlightening just to see how some of these themes take shape. Alright, so this is nice, but at the very top we have our project bar that is getting in the way. It's just too much contrast. So let's remove that, set our foreground to be the same, and now we've completed the navigation. So now what we want to do is take a look at our fonts.

Fonts always make or break a theme. And Amazon is using this Amazon ember font. Alright so if we look at our actual font network requests we could see that font. If I check our font face inside the document, I don't see it. So we're just gonna search for Amazon Amber font.

There we go. We've got a breakdown of this particular font. I don't want to necessarily load 25 megabytes. Who has that space? It's a lot of space.

So what we're gonna do is just copy this from this Amazon typography site, add some font face values for it. We're gonna do a little font family, ember. And then for our source declaration here, I'm gonna use URL and just input that URL that we get from the Amazon website. Now, we save that. Directus will load that custom CSS for us on all the pages.

But the last piece of the puzzle, we've got to take our half inch brush and we've got to go into our fonts and just apply that particular setting. Right, okay. Yeah, I'm not seeing that being applied. Why is it not? Oh.

Silly me. I put it in the dark theme. So now as we apply it to the light theme customization, our display font is ember. This is a great looking theme. It really pops to me.

Let's take a look at the public login page. And have you ever seen a more beautiful public login page? 2 wolves, moon, Amazon. Harmonious. Harmonious.

That's it for this episode of The Joy of Theming. Thank you for joining me. I hope to see you on the next one. Bye.