[{"data":1,"prerenderedAt":58},["ShallowReactive",2],{"joy-of-theming-the-home-depot-theme":3,"joy-of-theming-the-home-depot-theme-next":45},{"id":4,"slug":5,"vimeo_id":6,"description":7,"tile":8,"length":9,"resources":10,"people":10,"episode_number":11,"published":12,"title":13,"video_transcript_html":14,"video_transcript_text":15,"content":10,"status":16,"episode_people":17,"recommendations":25,"season":26,"seo":10},"a4c00ba5-0cb9-4b40-90a4-8c03b4410e4b","the-home-depot-theme","931206231","We should all take more time to share in each other’s successes as we accomplish our goals. However, it isn’t just about what you can do, but the journey of getting there. Join Bry as he supports you while painting a new theme inspired by Home Depot.","9446dd56-865f-4d05-abc0-99dc4f31c008",7,null,3,"2024-04-08","The Home Depot (How Doers Get More Done)","\u003Cp>Bry: It's a beautiful day in the neighborhood. Oh. Hi. Welcome back to the show. Sorry.\u003C\u002Fp>\u003Cp>I was just singing the theme to our sister show, Mister Miner's Neighborhood, which you can also find on DBS, the Directus Broadcasting System. Alright. Well, welcome back to the show. I'm your host, Bry Ross. And today, we've got another extra special episode of The Joy of Theming.\u003C\u002Fp>\u003Cp>Super excited that you're here. I hope you've got your direct us canvas laid out with a beautiful data model just ready to customize and beautify. Today, we are going to be painting the king of DIY themes, The Home Depot. The first thing I always do when crafting a theme, aside from the data model, is the project settings. So we're just gonna name this The Home Depot, and the slogan recently changed for Home Depot or at least a few years ago.\u003C\u002Fp>\u003Cp>It's how doers get more done. Couldn't be a more perfect tagline. The joy of theming is how you get theming done, so I really like that. We're gonna dive in and let's just copy the project logo. I'm gonna drag and drop this.\u003C\u002Fp>\u003Cp>Now, next I'm looking for the perfect background image and I'm not really sure what we want to do here. There's so many different options on the Home Depot website And sometimes when you're theming, and you only have a short period of time, it's so hard to select a good image. Now a the Home Depot, maybe we can go into some of their careers section, corporate information, and and just look. Let's oh, wow. Look at now.\u003C\u002Fp>\u003Cp>This looks like the founders of Home Depot potentially. So let's import that and use it as our public background. That's great. I I really like this built from scratch. It's got that distressed texture.\u003C\u002Fp>\u003Cp>It should look really beautiful in the public foreground right above that public background. Alright. So now that we've got kind of the basics of our theme laid out, you can see on the the module bar over just just right there, the module bar is is all black. Now, do I really want it to be all black? I I don't think I do.\u003C\u002Fp>\u003Cp>I want it to match the website. So let's pick up that orange color. We're gonna use that for our project color. And I I don't even know what to to call this orange. It's, like, burnt red, sienna, orange.\u003C\u002Fp>\u003Cp>Just just a beautiful shade of orange. It's comforting and eye catching at the same time. So we'll just smear that on the project color and it looks like we've got all of our icons in the list changed. We've got the the top of the module bar there, but we we don't have the module bar. I want that to be orange.\u003C\u002Fp>\u003Cp>I want that to match the website. But, you know, going back to the website, if we study this, we can see that the icons in the navigation, they all are orange on hover. They're black when not hovered. So we can just go in and we're gonna just, in our primary color for the thing, we're just gonna slide that project color just right across that canvas. And now we can see on hover those icons turn orange, but there's a slight background color problem.\u003C\u002Fp>\u003Cp>And again, there are no problems. These are just opportunities to to paint a better theme. We're gonna go into the modules and into the background hover. Just gonna set this to f f f which is just white. It's just a short hex code for white.\u003C\u002Fp>\u003Cp>Nothing fancy. Nothing crazy. You can do this. You've got this. The next thing I want to do is just dive into the border color.\u003C\u002Fp>\u003Cp>I've I've got this RGB color and I see a a Tailwind border opacity, which makes me think that Home Depot is using Tailwind. I love Tailwind. It's a great shortcut for theming. So but we'll go in, we'll just paste that into our background color, and that gives a little more pop to the background or the borders. It's a subtle difference, but borders really make a theme and not enough people focus in on it.\u003C\u002Fp>\u003Cp>But when you put all of these pieces together, you can build really beautiful themes. So, now, we'll just fix our icons. Within that navigation, I want those to be the project color just to add a little more pop of orange, a little more eye catching, but also very pleasing. So the next thing that we wanna do, you'll notice that the headlines on the Home Depot website, they have a condensed font. Looks like Helvetica nude to me.\u003C\u002Fp>\u003Cp>I did take a font class in technical school after I got out of the, merchant marines. And we're just gonna look for that font face. So we'll take their, CSS here and just paint that into the custom CSS inside Directus. Alright. So inside our instance, we're gonna go back up to our font section and just use Helvetica Condensed.\u003C\u002Fp>\u003Cp>And now you can see in our header, that looks great. We've got that condensed Helvetica font, but we need to uppercase it just to make it pop. It needs to be really nice. So we're gonna spread on just a little bit more custom CSS. I'm gonna take the palette knife and just spread that uppercase onto this beautiful theme.\u003C\u002Fp>\u003Cp>Type title, upper case. We've got this lovely upper case font. Looks great. It really matches. If we go to the data model, this looks great.\u003C\u002Fp>\u003Cp>It's got the same feel for the cards. We've got our product listings that look great. Are we done? This is really nice theme. I I love it.\u003C\u002Fp>\u003Cp>I hope you've enjoyed following along. Let's just pop out and take a look at the Home Depot login page. We've got the 2 founders there. It's built from scratch, as all the best themes are. Beautiful.\u003C\u002Fp>\u003Cp>Welcome to The Home Depot. That's it for this episode of The Joy of Theming. I've really enjoyed having you. Come back next time. We're gonna dive into some more techniques and just fun with theming inside your Directus project.\u003C\u002Fp>\u003Cp>I'm Bry Ross. We'll see you next time.\u003C\u002Fp>","It's a beautiful day in the neighborhood. Oh. Hi. Welcome back to the show. Sorry. I was just singing the theme to our sister show, Mister Miner's Neighborhood, which you can also find on DBS, the Directus Broadcasting System. Alright. Well, welcome back to the show. I'm your host, Bry Ross. And today, we've got another extra special episode of The Joy of Theming. Super excited that you're here. I hope you've got your direct us canvas laid out with a beautiful data model just ready to customize and beautify. Today, we are going to be painting the king of DIY themes, The Home Depot. The first thing I always do when crafting a theme, aside from the data model, is the project settings. So we're just gonna name this The Home Depot, and the slogan recently changed for Home Depot or at least a few years ago. It's how doers get more done. Couldn't be a more perfect tagline. The joy of theming is how you get theming done, so I really like that. We're gonna dive in and let's just copy the project logo. I'm gonna drag and drop this. Now, next I'm looking for the perfect background image and I'm not really sure what we want to do here. There's so many different options on the Home Depot website And sometimes when you're theming, and you only have a short period of time, it's so hard to select a good image. Now a the Home Depot, maybe we can go into some of their careers section, corporate information, and and just look. Let's oh, wow. Look at now. This looks like the founders of Home Depot potentially. So let's import that and use it as our public background. That's great. I I really like this built from scratch. It's got that distressed texture. It should look really beautiful in the public foreground right above that public background. Alright. So now that we've got kind of the basics of our theme laid out, you can see on the the module bar over just just right there, the module bar is is all black. Now, do I really want it to be all black? I I don't think I do. I want it to match the website. So let's pick up that orange color. We're gonna use that for our project color. And I I don't even know what to to call this orange. It's, like, burnt red, sienna, orange. Just just a beautiful shade of orange. It's comforting and eye catching at the same time. So we'll just smear that on the project color and it looks like we've got all of our icons in the list changed. We've got the the top of the module bar there, but we we don't have the module bar. I want that to be orange. I want that to match the website. But, you know, going back to the website, if we study this, we can see that the icons in the navigation, they all are orange on hover. They're black when not hovered. So we can just go in and we're gonna just, in our primary color for the thing, we're just gonna slide that project color just right across that canvas. And now we can see on hover those icons turn orange, but there's a slight background color problem. And again, there are no problems. These are just opportunities to to paint a better theme. We're gonna go into the modules and into the background hover. Just gonna set this to f f f which is just white. It's just a short hex code for white. Nothing fancy. Nothing crazy. You can do this. You've got this. The next thing I want to do is just dive into the border color. I've I've got this RGB color and I see a a Tailwind border opacity, which makes me think that Home Depot is using Tailwind. I love Tailwind. It's a great shortcut for theming. So but we'll go in, we'll just paste that into our background color, and that gives a little more pop to the background or the borders. It's a subtle difference, but borders really make a theme and not enough people focus in on it. But when you put all of these pieces together, you can build really beautiful themes. So, now, we'll just fix our icons. Within that navigation, I want those to be the project color just to add a little more pop of orange, a little more eye catching, but also very pleasing. So the next thing that we wanna do, you'll notice that the headlines on the Home Depot website, they have a condensed font. Looks like Helvetica nude to me. I did take a font class in technical school after I got out of the, merchant marines. And we're just gonna look for that font face. So we'll take their, CSS here and just paint that into the custom CSS inside Directus. Alright. So inside our instance, we're gonna go back up to our font section and just use Helvetica Condensed. And now you can see in our header, that looks great. We've got that condensed Helvetica font, but we need to uppercase it just to make it pop. It needs to be really nice. So we're gonna spread on just a little bit more custom CSS. I'm gonna take the palette knife and just spread that uppercase onto this beautiful theme. Type title, upper case. We've got this lovely upper case font. Looks great. It really matches. If we go to the data model, this looks great. It's got the same feel for the cards. We've got our product listings that look great. Are we done? This is really nice theme. I I love it. I hope you've enjoyed following along. Let's just pop out and take a look at the Home Depot login page. We've got the 2 founders there. It's built from scratch, as all the best themes are. Beautiful. Welcome to The Home Depot. That's it for this episode of The Joy of Theming. I've really enjoyed having you. Come back next time. We're gonna dive into some more techniques and just fun with theming inside your Directus project. I'm Bry Ross. We'll see you next time.","published",[18],{"people_id":19},{"id":20,"first_name":21,"last_name":22,"avatar":23,"bio":24,"links":10},"a318327f-99e2-4938-b332-5fa049c29047","Bry","Ross","2c4d6cd9-5765-4268-b1a0-42ac7ce5adb9","Master Themer and Chuck Norris' BFF",[],{"id":27,"number":28,"year":29,"episodes":30,"show":42},"61d16eae-2910-4009-a3e0-65e1a96be877",1,"2024",[31,32,4,33,34,35,36,37,38,39,40,41],"ef8afd5a-ba9f-49c5-ae0e-091de1d7d85e","e7dd4c60-0a87-4ce5-a054-fbef2c80bd74","22e15c9f-e0d1-4a6b-8dd1-c5b51c9f1568","2b1886f5-7508-44dc-b0a9-c4f73e18d889","c9c86f91-d3e9-4287-9bfc-4c0fd50c6dfd","c338c610-19d5-45b1-af66-3cf34c67a2ec","07649ac4-e135-42c0-bcc9-bafb980dd9ec","ed8c1a76-e3b6-4c75-b4b9-9a7a37ebcf61","118828b8-a8d9-4329-8537-aa3716455328","03a91de3-cffa-41be-a56e-6448ae0cbfd8","4ba7fb8e-72ae-4e8f-908a-8d9032a1603f",{"title":43,"tile":44},"The Joy of Theming","1a50a74b-b774-4fca-9264-88a55d956b5b",{"id":33,"slug":46,"season":27,"vimeo_id":47,"description":48,"tile":49,"length":9,"resources":10,"people":10,"episode_number":50,"published":51,"title":52,"video_transcript_html":53,"video_transcript_text":54,"content":10,"seo":10,"status":16,"episode_people":55,"recommendations":57},"pampers-theme","931208527","Join Bry and his furry companion as he paints a beautiful Pampers theme inspired by all the little ones that represent our future.","e268f4e0-7070-414d-9a99-3fe905be111b",4,"2024-04-15","Pampers (Discover Your Baby's World)","\u003Cp>Speaker 0: How are you? Yes. Hi. Oh, hi friends. Welcome back to the show.\u003C\u002Fp>\u003Cp>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.\u003C\u002Fp>\u003Cp>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.\u003C\u002Fp>\u003Cp>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.\u003C\u002Fp>\u003Cp>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.\u003C\u002Fp>\u003Cp>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.\u003C\u002Fp>\u003Cp>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.\u003C\u002Fp>\u003Cp>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.\u003C\u002Fp>\u003Cp>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.\u003C\u002Fp>\u003Cp>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.\u003C\u002Fp>\u003Cp>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.\u003C\u002Fp>\u003Cp>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.\u003C\u002Fp>\u003Cp>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.\u003C\u002Fp>\u003Cp>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.\u003C\u002Fp>\u003Cp>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.\u003C\u002Fp>\u003Cp>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.\u003C\u002Fp>\u003Cp>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.\u003C\u002Fp>\u003Cp>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.\u003C\u002Fp>\u003Cp>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.\u003C\u002Fp>\u003Cp>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.\u003C\u002Fp>","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.",[56],"3b726dc7-42c7-45e6-86a9-b3704b2eb0b2",[],1782310056502]