Pampers (Discover Your Baby's World)

Speaker 0: How are you? Yes. Hi. Oh, hi friends. Welcome back to the show.

I'm your host Bry Ross and as you can tell I've got a furry little companion with me today. This is little Peapod and she is a gray squirrel. Now she was a rescue from the crazy cat lady down the street. This little lady fell out of a tree and was surrounded by 6 cats before my children and I swooped in to save her. And since then, we have just become the best of friends.

She's a loyal little companion. And, yes, I know she looks a little big for a squirrel, but that's okay. We don't criticize people's weight. Alright. So I'm gonna put our furry little companion down here today.

And today, in keeping of that theme of cuteness, we are going to paint a beautiful Pampers theme. So Pampers really doesn't need any introduction. Children are our future and Pampers wraps the bottom of our children in protective diapers that we can then throw away without having to make a giant mess whenever they use the bathroom. So the first thing we're gonna do, we'll just pick this up and if you notice the Pampers website they've got this beautiful teal theme. But before we dive into our color palette, what I always like to do is just set up those quick project settings.

So we'll just bang those in and then we'll move into our appearance. So we'll just copy that logo from the URL. That's a nice SVG. I love vector format, means we can resize it to any scale, any any size really, and it will still retain the same same quality. It's beautiful.

Alright. As for a public background, not only can you use static images, but you can also do video on your login page. And this looks like a great Pampers video that just highlights a lot of baby butt. And I'll be darned if baby butt is not cute. So now, let's find the favicon.

Favicon. I never quite know how to pronounce it. And then we'll add a nice little public note in there. Just hang that in there. Welcome to the Pampers headless CMS and pin.

Okay, so with that out of the way, let's dive into the theming. I'm gonna pick up my trusty palette knife and let's just take a look at this theme. Right? We see our module bar over here on the left. I want that to match our color.

So we're going to go into navigation. We'll go to modules and for our background we're going to use a CSS variable that is built into our theming. So, we'll just use var project color, but, oops. Again, there are no mistakes, only happy accidents. We can see that now our module buttons need to be fixed.

And just by adding the foreground to that button there, it's beautiful. Alright. Now, what is next? On hover, I can see maybe we want to change that to white as well. Add a little opacity.

And if we're using a 6 digit heads code, I can add a opacity modifier there at the end and get that nice subtle effect. So anytime you're theming, it's great to begin with the end in mind. And, you know, when I'm looking at this now, I just I see a beautiful thing. We're almost there. We've got a little more to do.

Up here at the project info, that gray is just it's not appealing. So we can use a little blending technique. It's called color mix in CSS. So I just do color mix, wrap that in a parenthesis, we'll put a little sRGB here and then we will blend 2 colors together. It's really easy to do, just follow right along.

So we're going to take that var project color. We'll do a white and with a 20% blend, we're putting 20% of that in there. Let's switch that around just to be a little heavier on the white. And, oh, that's that's exactly what I was looking for. I love it when a good theme starts coming together.

But something is is kinda not quite right to me. I I see this red up there. Do you see it? And I thought it would be a good idea for the coral, but let's let's just remove it. It just doesn't match.

It clashes. And that's, again, one of the beauties of theming is you're never making a mistake. It's only accidents that we learn from and move forward. It's really easy to fix these things. Nothing is ever set in stone.

It's It's always changing. So now we've got a great looking theme. I see just this little bit of gray behind the search collection bar. I want to remove that so I'm going to pull out the trusty palette knife again. We're going to go into the settings and I'm just going to spread a thin thin layer of white over that background normal.

So now that I if I go into the collection bar looks great. I don't see that gray anywhere at all. This is looking like a beautiful theme. Now let's just go in and paint a few final little details here. I see their headline is an indigo color.

It's, like a darker teal. Let's call it, Loch Ness Monster teal. Well, not Loch Ness Monster. I that's not a good teal. Let's call it Taylor Swift teal.

My daughters like that. So we'll go in and do a little title foreground in there and now we can see that that black is not harsh anymore. It's just this beautiful indigo and, man, this thing has really come together. So we'll just paint the final touches here and as you can see on our public login page there is a beautiful video of baby butts and that's it. That is this theme.

I hope you've enjoyed following along. This is such a wonderful theme to paint. That's it for this episode of The Joy of Theming. I hope to see you next time where we will teach you just some of the best tips and tricks to paint the most beautiful themes. We'll see you.