Walmart (Blueprint for Savings)

Speaker 0: Oh, hi. How are you? Welcome back to the show. I'm your host, Bry Ross. I was just taking a look at some of our fan mail.

Got a couple questions from some viewers here and maybe we'll just start the show by reading those. Dear Bry, I wanted to know if your pet squirrel, Peapod, could paint themes as good as you can. Love, Mary. Well, Mary, I I think that even animals can be very creative. But, unfortunately, Peapod doesn't have opposable thumbs so it makes it really hard for her to grasp a palette knife or a half inch brush.

Now, she could potentially use her teeth but I've not had the time to train her for that yet. But thank you for writing in and maybe we'll get there one day when squirrels can paint beautiful themes just like the rest of us. Alright, so let's dive into our theme today. We are going to be painting a Walmart theme. So if you're new to the show I can't overemphasize the importance of having a prepared canvas.

So as you can see as I set up my project settings I've got a complete data model already ready to theme. This is absolutely vital as a starting point. So we're just gonna go in and add our project name. We're going to add the project descriptor to save money, live better. Of course Walmart does it.

And then we'll go in and start adding our branding. So we're gonna lift that Walmart logo, import that using the, import from file URL, and then for the public foreground we'll just use that as well. We'll go in and also just start painting the rest of our broad strokes, looking for a public background that's gonna do us justice here. Just keep keep working the canvas until we find what we're looking for. Just a little up and down there, a little wax on, wax off if you're a fan of mister Miyagi.

He was a student of mine in the past, came to me for theming help and was able to give that to him. Alright, so this looks like a beautiful representation of everything that is Walmart. Who doesn't love getting bags of groceries delivered to their door? Amazing. So we'll just paint that as the public background.

Alright. So now that we've got our basic appearance, let's start adding some color to this canvas. Alright. So I'm just gonna come in and pick up a couple of hex codes here. Trying to find this on the Walmart website is what we really want to do, so we'll just look for that background for that header, that's gonna be our project color.

We'll call that the Royal Walmart Blue because they are clearly American royalty. Alright, so we've got that. Now I want to make that whole module bar that same color. So I'm going to go into our light theme, into the navigation and into the background. We're just going to spray on a little bit of CSS variable using project dash color.

Alright, so that's great. Now we've got that whole bar fixed, but we need to fix the foreground because we want that to be white and make it match the website exactly. We want to hit that same tone. We want to evoke those same emotions. And remember, as you're theming, there are no mistakes.

There's only opportunities. Opportunities to add a little more character, a little more beauty. It's all right in your hands. Alright. So now this is looking nice.

We got a nice subtle hover effect when you look over the modules. And last but not least, I'm just going to paint in a little foreground active. We're gonna use that same project color just to finish off that last little touch there. Alright. So now anytime you are theming, whenever you change colors, you wanna make sure you clean your keyboard so those hex codes don't get stuck in there.

Otherwise, you might be messing with colors that you don't really want on your palette, on your theme. Alright, so now let's move on to the list view for Walmart. Right? We want to control that secondary navigation there. Let's make this whole thing blue to match the Walmart website.

This is the job for our trusty pallet knife. We're just going to pick this up and just flip it at a 90 degree angle. Just break that down. Just break it on down the sidebar or navigation. Alright, so we set our foreground.

We're gonna set that to be white as well. This is looking really nice. Just a little more. Just light strokes. You want to use a light touch when you're theming.

You don't need to force anything. Just light little strokes. Great job. Great job. Now, we're also gonna go in and paint a couple little happy hover effects in here.

Looking great, so we'll just add a little background hover, make that just a hair darker and on the background active, just lighten that up a little bit, make it a little darker as well. There we go. Okay, now this is looking really nice. Just take this. Okay.

Great. Alright. So one of the next things that I want to do here is just dial in those fonts. So we're gonna inspect for the font. I'm just gonna search.

So we'll bring up that keyboard, search for the font within the CSS and the font name is Bogle. Alright, so custom CSS, we're gonna use the at fontface rules. Just use a little font family action there And we're going to call this Bogle. And we're going to take this URL that we've got from Walmart and just paste that in there. Just copy, oh, just do a little copy action there.

Sometimes those, those URLs are tricky, They don't wanna be copied. So you just gotta approach them slowly and just paste them. Alright. So now we've got that. We can see, if the font is being loaded.

I don't necessarily see it, but, oh, there it is. Sometimes we just gotta go in and paint that into our fonts before it appears. So we go into our light theme customization for the display font. We'll set that and voila. Wow.

This theme is really coming together. Let's go in and just sign out and paint the final touches there. Looking really nice. Got all of our products. We're gonna sign out and beautiful.

We've got a great looking login page with a smiling happy customer. What could be better? That's it for this episode of The Joy of Theming. Thanks for joining me. And remember, you too can paint a perfect theme.