Chick-fil-A (Eat Mor Chikin)

Speaker 0: Hi. Welcome to the show. I'm your host, Bry Ross. And for the next few moments of this beautiful day, you and I together will experience the joy of theming. Now, before we get started on today's painting, the beautiful Chick Fil A theme, I just wanted to cover a few of the tools of the trade so that you feel right at home.

You can paint beautiful themes with just about anything, but here's what I like to use. First, I have my trusty Logitech MX Keys keyboard. It's a rather heavy keyboard but it does have a number pad. So hex code entry, lightning fast. Next up, we have our trusty pallet knife.

Now, this is not just any pallet knife. It is a firm pallet knife and it is great for painting the broad strokes of whatever theme that we're working with today. Last but not least, we have our half inch brush. Now this is perfect for painting all the details. Our border radius, border radii, depending on your preferred spelling, or, font sizes.

It's perfect for that. Really easy to paint all the detailed strokes that you need. So those are our tools of the trade. Let's dive in to creating a wonderful, happy little theme together. Alright, so let's dive right in.

Alright, first up, we're just going to navigate to our settings and we're gonna enter in a beautiful project name. Let's just call it Chick Fil A. Now we'll set a project descriptor, not description, but descriptor for the Latin variety, and that will be our internal CMS and app. And then we're just grab the URL from the browser and we'll paste that into project URL. Next, we're ready to paint our theme.

So we're gonna go to the appearance section in our Directus instance and let's pick up the primary color from the website. So I'll just inspect and grab that. Great. Now we're gonna get the logo. So I can do this by inspecting that element, looking for the CSS and boom, there we go.

We've found the SVG for Chick Fil A logo. It's a glorious logo. Just a fine beautiful example of a logo. Now next we'll add a public background. So the public background is what displays on the login page And anytime you want to entice people to log in, they need a great looking login page.

We'll add a quick little public note. And wow, this is starting to look really nice. Now I'm just gonna steal the favicon here, favicon. I never know the spelling. I argued with somebody about that at the mall the other day.

But now let's save our appearance. And it looks like our logo is not showing in the top left corner like we want it to. So, luckily, I can go in and change the CSS inside Directus as well. Not just the the default theming, but I can go in and change the CSS to be whatever I want. So, in this case, I'm gonna copy the class, which is a CSS selector, and paste that into custom CSS.

And then we'll just set a nice, lovely background color of cream white. Now, since we're gonna be changing colors soon, anytime you change colors on your your pallet, you wanna make sure you take your duster and just dust the demons out of it. Just dust it real good like that and then you're ready. Alright. So now we've picked our light theme and now we're just gonna step into painting the broad strokes of this theme.

So we are now working with the minimal theme inside Directus. This is one of the default themes that comes out of the gate and it it just, it looks great. So we're going to set the primary color so that our save buttons look glorious, that that wonderful deep chick fil a red and we'll use that blue, it's like a navy, just so deep you get lost in it when you stare at it. We're gonna use that navy blue as the foreground which will show up on the titles and the headers. Great.

Looking magnificent, you know, and when you're painting themes like this there are no mistakes. You know, if you mistake a border radius by 4 or 5 pixels, it's a happy accident because the results can be wondrous. So now this theme is looking really great and we want to go back in and paint some of the finer details like our fonts. So the Chick Fil A website uses a very specific font that very likely you would have to pay for because it's a very, very fine exquisite font. So I'm just gonna go in here and just paint that font CSS in there and we'll just pick that up from the Chick Fil A website.

Let's just paint it in there. At font face, we're gonna use the font family apercou apercu, again, latin spelling. And the font weight here is gonna be 400, that's just the regular standard font weight we like to use when we're doing the details and we can inspect the network requests from the Chick fil A site to actually get the URL for that font. In this case it looks like a CDN CloudFront. No big deal.

So when we refresh, now you can see all those beautiful Chick Fil A fonts that line up with the website perfectly, look great inside our app, inside our CMS that we're building. Alright. So now that we're into the fine detail as well, let's let's fix those border radius, those border radii. I never know what to call it. Just get so lost in theming sometimes.

So I noticed on the navigation there's a very, so a full border radius, but on some of the other buttons, it is 12 pixels. So we'll just paint those 12 little pixels in there. I I don't like using decimal points in my pixels. Just messes with the whole flow, the whole zen. Alright.

So now let's go in and log out so we can check out that login page. This is the public login page. Oh, wow. Is it beautiful? So that is a lovely theme.

But, oh, wait. There is one little accident that we need to fix here. So, again, the logo is not displaying on the public login page because it it is hidden by this red background. So we're just gonna pull out that detail brush and just paint in that new CSS and boom, there it is. You can clearly see it now.

This is perfect. I really love the feel of this Chick Fil A theme, and I hope you've learned a ton here. Each one of us has a perfect theme inside of us. I'm hoping that through this show, we can help you express that perfect theme. I'll see you next time.