American Express (Don’t Leave Home Without It)

Bry: Hi. Welcome back to The Joy of Theming. I'm your host, Bry Ross. It's a beautiful day in the neighborhood and so excited to have you right here right now to experience the joy of theming. Alright.

So today, we've got a wonderful, wonderful theme to paint. We are going to be painting American Express. What a great theme, and what a great company. American Express is everywhere you want to be. What's that?

Oh, that's that's not it. American Express. Don't live life without Alright, so we're going to log into our Directus instance and get started on this theme. So we'll start entering in our project name. Ah, yes.

Okay. Project description or descriptor. Now let's dive into our theme. So for this, I'm gonna pull out my trusty palette knife and we're just gonna spread on some logo. I love that.

For our foreground, I'm just gonna scroll down to the bottom and we want to take that larger American Express logo and just paint that in there. That's great. So for the favicon, that's that's tiny. So I'm just gonna pull out my half inch brush here and we're gonna paint that in there. This is looking really great.

So we've got a nice nice calm theme. We've got that background around that MX logo fixed. Now let's add our project color to those buttons in the foreground. So we're just gonna slide that that project color right down over those those module buttons. That looks great.

Now, one of the other colors that I see here, I really like this blue. I'm calling it midnight blue, indigo blue, It's a really deep color. It's so soulful. We're going to add that to the icons for our list. So we'll just ping in that hex code and, you know, I'm really surprised.

This came out okay, but anytime you switch colors like that, you also need to make sure that you dust those demons out of your keyboard first so those hex codes don't get stuck in there anymore. Using that number pad, make sure you really get in there as well. Now, let's go in and see if we can't use our palette knife to to find that CSS. We're really looking for those font face rules from the American Express website. And normally, I might host those fonts myself, but here at The Joy of Theming, we like to create masterpieces in no time.

So we're just gonna steal or copy that CSS. We've got our font face rules that we're just spreading there and I'm gonna copy that font family name, Benton Sands, and we're gonna go back up to our fonts in the display font. We're going to use Benton Sands and save and now we've got that nice title font Benton Sands. Maybe we want to dial back that font weight just a little bit. Nice.

Nice. Looks great. The only thing that don't like though, it is a dark shade of it's black. Let's use that midnight blue color and honestly Midnight Blue sounds like a Bob Seger song. Bob Seger is underrated, 100%.

So we'll go back in. That title font color is actually it's actually down. We're just gonna move down. You can see we've got the project foreground. We're just gonna move that down a little.

There we go. You gotta know how to work the canvas. So under the header we're gonna go into Title, just spray that little midnight blue onto the title font. This is looking really nice, Very subtle. It really matches this American Express website.

I like how calm that is. Let's back out and actually look at our login page. So while I originally loved that image on the Amex website, for the background, it's just not it's not getting the job done for me. So let's log back in and see if we can swap out to a better, better background image. We're gonna go back to the Amex website and just see if we can find a better image.

Wow. This guy looks amazing. I really love his hair. Could be waiting for the love of his life or just a check from the bank, maybe a package. I don't know.

We're gonna use that as the public background. And I'm just gonna incognito window and pop open. Now we we've got a better public background image. Maybe we want to adjust the focus, the focal point for this particular image. That's one of the nice things about the asset library in Directus.

This is the conduit for your theming. Obviously, a good theme isn't complete without nice images. And whenever those images get cropped we want to make sure that faces and important elements are still included on the screen. So you can use the Focal Point tool to do that. Alright, great, so this theme is looking great, I think we're done here.

Amex, You can't live life without it or don't live life without it. Tell you what, I have several Amex cards. Love stacking the points, always use them to take my family to the magical Disney World. And I hope you've had a magical time here at the Joy of Theming. I hope you come back for the next episode where we will dive even deeper into the beauty and majestic qualities of theming with Directus.

I'll see you next time.