L'Oreal (Because You’re Worth It)

Hi. Welcome back to another episode of The Joy of Theming. I'm your host, Bry Ross.

And for the next few moments, you and I together will paint a beautiful Directus theme. I'm so excited to have you.

Now if you've joined us before, you've probably already seen the tools of the trade, and I hope you've got your Directus Instance set up. If this is your first time, just sit back, relax, and follow along. You can set up that direct to sentence for the next one.

Today, we are going to be painting a beautiful L'Oreal theme. Now I know this theme may look complicated at first glance and you may be thinking maybe this ability to theme, maybe you're just born with it, or maybe it's Maybelline.

But deep down I know in my heart of hearts that each one of us can paint a beautiful, magical theme. You can do this and let's dive in. Now, what you can see, I've already got my Canvas covered in a great looking data model. It's a must for theming. You've got to paint that entire Canvas with some sample data before you can dive in.

And the first thing we're going to do is L'Oreal is a beautiful name for a company, but they also have that accent aigu, the little accent character. So we're gonna scroll down to the bottom of this page and then we're going to set up our project settings inside our Directus instance. Alright. So I'm just gonna pick up my trusty keyboard here and quickly bang in that project name. Let's go ahead and get the project URL and a nice product project description.

Really important for theming. We're gonna set the tone for this. We can see that being reflected up there at the very top, and then we're gonna dive into our actual theme. So now I'm gonna pick up this palette knife. And we're just gonna copy that L'Oreal logo.

Just just spray it right there. Put that right in there. Then we'll go in and add a public foreground. Now the the public foreground, of course, shows on the login page, right above the public background. That's how those things work.

Forward is front, back is back. Simple. Now, let's take this beautiful image of these 3 beautiful ladies. We'll put that as the public background and we'll add a quick little public note.

This will be the L'Oreal CMS and, a PIM.

PIM is just short it's the French version of product information management. Great. This is looking like a really beautiful theme. Now I wanna grab that favicon, favicon. I I never know how to pronounce this, but we'll just search for that within the console.

Just copy that, pick up that keyboard and just paste that in there really quickly. So now we'll save and we can see, we've got our favicon. Things are looking really good. But our project color, it seems just a little bit off. If you look and you'll notice that L'Oreal has this really deep, rich midnight black.

And basically the hex code for that is just 0. Now that's a wonderful color. We're gonna paint that in there just a little bit. But as we see, that that module bar or navigation is not reflecting that color. So we're gonna dive into our theme customization.

We're gonna go to our globals. And then basically, where we have our little project primary color, We're gonna scroll down and, all right. So we'll go into our modules. We'll set our background to 0 and now we've got that rich black that we want in that that module bar. Alright, so now we also see that L'Oreal has this nude, this tan accent.

A great color, great contrast to that midnight black. So what we're going to do is just add that as a secondary color and then we can also reference that using CSS variables inside the rest of our theme. What a beautiful, beautiful little theme. I'm gonna go into the list, into the icon foreground. And that is the the list for the navigation and add just a little darker beige, a little brown, beautiful brown is what we'll call it.

And next I'm gonna pick up that that brand color. Let me go into the button background for the module bar and just add that. So now we've got these nice accents. We've got that deep black. This theme is, it's really coming together.

So glad you could be here. Now we're also going to add a different active color so we can easily see where we're at within the direct to CMS. And, you know, next let's take a look at the border radius, the border radii. You'll notice that L'Oreal has a 0 pixel border radius. There's no rounded corners on this.

It gives us a nice elegant vibe. If we look at the network request, we can see our font here is Campton. So I'm just going to copy the URL for that. We're gonna do a custom font face declaration. We'll just use at font face, wrap it in some brackets, and we're gonna call this the Campton font.

Now we can add custom CSS inside any direct assistance and it's really easy. You just spread it on slowly. Not too thick. A very thin coat. And once you've added that custom CSS, I can go into my font variables, my definition for our fonts, and we're gonna reference that Campton font inside the top header bar.

That looks nice. I really like that. Right? Beautiful. Now one of the other things that we we see on the website though is in the headers they use a, all caps.

So we'll just go in, add another little touch of custom CSS. Just and text transform, uppercase. That looks good. Beautiful. Beautiful.

I'm so glad you're here for this. Remember, anytime you're theming there are no mistakes, only happy accidents. So this is looking like an amazing theme. I I think we're pretty close to done here. So let's just log out.

We'll take a look at the public login page. This is beautiful. That's it for this episode of the joy of theming. I hope to see you again.

And remember, keep theming. Each one of us has that beautiful theme just waiting to come out.