[{"data":1,"prerenderedAt":426},["ShallowReactive",2],{"footer-primary":3,"footer-secondary":93,"footer-description":119,"joy-of-theming-amazon-theme":121,"joy-of-theming-amazon-theme-next":162,"sales-reps":174},{"items":4},[5,29,49,69],{"id":6,"title":7,"url":8,"page":8,"children":9},"522e608a-77b0-4333-820d-d4f44be2ade1","Solutions",null,[10,15,20,25],{"id":11,"title":12,"url":8,"page":13},"fcafe85a-a798-4710-9e7a-776fe413aae5","Headless CMS",{"permalink":14},"/solutions/headless-cms",{"id":16,"title":17,"url":8,"page":18},"79972923-93cf-4777-9e32-5c9b0315fc10","Backend-as-a-Service",{"permalink":19},"/solutions/backend-as-a-service",{"id":21,"title":22,"url":8,"page":23},"0fa8d0c1-7b64-4f6f-939d-d7fdb99fc407","Product Information",{"permalink":24},"/solutions/product-information-management",{"id":26,"title":27,"url":28,"page":8},"63946d54-6052-4780-8ff4-91f5a9931dcc","100+ Things to Build","https://directus.io/blog/100-tools-apps-and-platforms-you-can-build-with-directus",{"id":30,"title":31,"url":8,"page":8,"children":32},"8ab4f9b1-f3e2-44d6-919b-011d91fe072f","Resources",[33,37,41,45],{"id":34,"title":35,"url":36,"page":8},"f951fb84-8777-4b84-9e91-996fe9d25483","Documentation","https://docs.directus.io",{"id":38,"title":39,"url":40,"page":8},"366febc7-a538-4c08-a326-e6204957f1e3","Guides","https://docs.directus.io/guides/",{"id":42,"title":43,"url":44,"page":8},"aeb9128e-1c5f-417f-863c-2449416433cd","Community","https://directus.chat",{"id":46,"title":47,"url":48,"page":8},"da1c2ed8-0a77-49b0-a903-49c56cb07de5","Release Notes","https://github.com/directus/directus/releases",{"id":50,"title":51,"url":8,"page":8,"children":52},"d61fae8c-7502-494a-822f-19ecff3d0256","Support",[53,57,61,65],{"id":54,"title":55,"url":56,"page":8},"8c43c781-7ebd-475f-a931-747e293c0a88","Issue Tracker","https://github.com/directus/directus/issues",{"id":58,"title":59,"url":60,"page":8},"d77bb78e-cf7b-4e01-932a-514414ba49d3","Feature Requests","https://github.com/directus/directus/discussions?discussions_q=is:open+sort:top",{"id":62,"title":63,"url":64,"page":8},"4346be2b-2c53-476e-b53b-becacec626a6","Community Chat","https://discord.com/channels/725371605378924594/741317677397704757",{"id":66,"title":67,"url":68,"page":8},"26c115d2-49f7-4edc-935e-d37d427fb89d","Cloud Dashboard","https://directus.cloud",{"id":70,"title":71,"url":8,"page":8,"children":72},"49141403-4f20-44ac-8453-25ace1265812","Organization",[73,78,84,88],{"id":74,"title":75,"url":76,"page":77},"1f36ea92-8a5e-47c8-914c-9822a8b9538a","About","/about",{"permalink":76},{"id":79,"title":80,"url":81,"page":82},"b84bf525-5471-4b14-a93c-225f6c386005","Careers","#",{"permalink":83},"/careers",{"id":85,"title":86,"url":87,"page":8},"86aabc3a-433d-434b-9efa-ad1d34be0a34","Brand Assets","https://drive.google.com/drive/folders/1lBOTba4RaA5ikqOn8Ewo4RYzD0XcymG9?usp=sharing",{"id":89,"title":90,"url":8,"page":91},"8d2fa1e3-198e-4405-81e1-2ceb858bc237","Contact",{"permalink":92},"/contact",{"items":94},[95,101,107,113],{"id":96,"title":97,"url":8,"page":98,"children":100},"8a1b7bfa-429d-4ffc-a650-2a5fdcf356da","Cloud Policies",{"permalink":99},"/cloud-policies",[],{"id":102,"title":103,"url":81,"page":104,"children":106},"bea848ef-828f-4306-8017-6b00ec5d4a0c","License",{"permalink":105},"/bsl",[],{"id":108,"title":109,"url":81,"page":110,"children":112},"4e914f47-4bee-42b7-b445-3119ee4196ef","Terms",{"permalink":111},"/terms",[],{"id":114,"title":115,"url":81,"page":116,"children":118},"ea69eda6-d317-4981-8421-fcabb1826bfd","Privacy",{"permalink":117},"/privacy",[],{"description":120},"\u003Cp>A composable backend to build your Headless CMS, BaaS, and more. \u003C/p>",{"id":122,"slug":123,"vimeo_id":124,"description":125,"tile":126,"length":127,"resources":8,"people":8,"episode_number":128,"published":129,"title":130,"video_transcript_html":131,"video_transcript_text":132,"content":8,"status":133,"episode_people":134,"recommendations":142,"season":143,"seo":8},"07649ac4-e135-42c0-bcc9-bafb980dd9ec","amazon-theme","931467487","Join your favorite theme master, Bry Ross, as he takes on a dynamic Amazon theme. Grab your brushes (and your duster) and let's paint a bold theme that perfectly captures the spirit of a thriving marketplace.","633d9813-59b8-4d29-8ff9-3a49b56be786",9,8,"2024-05-13","Amazon (From A to Zest)","\u003Cp>Speaker 0: Hi, friends. Welcome back to the show. I'm your host, Bry Ross. Before we start our theme today, I thought it was important to cover just how to clean your brush. So, this is how I like to clean my brush.\u003C/p>\u003Cp>It's super important to have a clean brush anytime you are doing a theme. You've got to make sure that you've got the right colors that you're putting on the theme. So what I like to do, I take my duster, give it a couple shakes, and then just aim the the little red tip of this nozzle at the brush. Just just give it a little flip there. And then you can hit it on your desk and now you've got a brush that's ready to go.\u003C/p>\u003Cp>So the theme that we are building today is Amazon from a to z. So if you're following along, I hope you've got your canvas prepped with a great looking data model, and let's get started by adding our project settings. Amazon. Everything, all the time. Whenever you want it.\u003C/p>\u003Cp>Alright. So we're gonna copy the project URL and just paste that in there. I would probably remove that ref tag as well. So we'll just paste that in there. And now we're ready to theme.\u003C/p>\u003Cp>So I always start everything by dialing in the branding. The branding is so important. We're going to inspect this Amazon logo from the website. It looks like it's gonna be a real pain to get access to this. They're using a sprite sheet which is is probably smart for performance, but makes our job as themers just a little bit more difficult.\u003C/p>\u003Cp>So we'll just use the Amazon logos that they have, And what I'm going to do, I'm going to use a combo move here. I'm just going to put both of these together. Copy. And import from URL. Great.\u003C/p>\u003Cp>Okay. So now we've got our project logo, public foreground. What are we gonna use? We're gonna choose the same file from the library. That's okay.\u003C/p>\u003Cp>We don't necessarily need 2 different images for our logo and our public foreground. It's all good. So we're just gonna paint that on. Great. Good, good luck.\u003C/p>\u003Cp>Okay. Alright. So as far as a public background image, we've got to find something that works. What are we going to do? Well, I'll show you.\u003C/p>\u003Cp>Way back when, I used to paint t shirts before I painted themes. And, yeah, one of the t shirts that I loved by my friends at the mountain, are these Wolf t shirts. These are such masterpieces. If you've ever seen them, they're some of the most highly rated shirts on Amazon. So let's just use one of those as the public background.\u003C/p>\u003Cp>We'll just paint that beautiful, beautiful theme there. Alright, so now we're looking for a favicon. I don't see that here. I'm not seeing it. Again, theming is a journey.\u003C/p>\u003Cp>There's many twists and turns that we have to navigate to bring out that theme. So let's just search for Amazon Fab icon. This looks like a good one. Copy that image address, and I'm just gonna brush that in there. Just pick up that half inch brush.\u003C/p>\u003Cp>The fab icon is such a small detail. Absolutely critical though. Alright, so for our project color, what we want to do, we want to find this Amazon yellow, this Amazon orange. Is it orange? Is it yellow?\u003C/p>\u003Cp>Is it in between? I don't know. But it's it's lovely. It's reassuring, but also stands out against that darker background. Alright.\u003C/p>\u003Cp>So we're just gonna paste that in. Now we've we've got that. We've got our project color. So this is gonna bring all of our buttons up to that color, but again, we want to match that Amazon website. So we've got to go in and we need to adjust this module bar logo.\u003C/p>\u003Cp>So to do that, what we're gonna do, we're gonna go into our modules. I'm not seeing that that CSS there. We're actually gonna have to use our custom CSS here. So we'll do a class selector module dash bar dot logo and just paint some background transparency on there. It's almost like we're removing it but essentially we're just blending it in.\u003C/p>\u003Cp>Just, you know, we'll add that important modifier just to make sure that it's set. Great. Okay. Alright. So next we're gonna dive in to this second nav, this secondary navigation.\u003C/p>\u003Cp>It's more of a navy blue like a midnight navy. Like a very soulful color. Alright. So now inside our list, we need to go in and set our foreground colors. Now this is a an advanced technique.\u003C/p>\u003Cp>Your mileage may vary, but I like to take my half inch brush, Just stroke the keys ever so softly and that way we can get this nice color effect that we're looking for. So for our divider here, that white is too much. Maybe we use a little color mix to bring it down. Mute that just a little bit, but as you can see we've got a weird hover effect going on. How can I fix that, right?\u003C/p>\u003Cp>That is going to be in our background hover and our background active color. So I can take this color mix and from our background hover maybe I just dial it back a bit, just a little bit, just dial it back just a little bit. It's very nice. You're doing great, by the way. Amazing.\u003C/p>\u003Cp>It is so fun and so enlightening just to see how some of these themes take shape. Alright, so this is nice, but at the very top we have our project bar that is getting in the way. It's just too much contrast. So let's remove that, set our foreground to be the same, and now we've completed the navigation. So now what we want to do is take a look at our fonts.\u003C/p>\u003Cp>Fonts always make or break a theme. And Amazon is using this Amazon ember font. Alright so if we look at our actual font network requests we could see that font. If I check our font face inside the document, I don't see it. So we're just gonna search for Amazon Amber font.\u003C/p>\u003Cp>There we go. We've got a breakdown of this particular font. I don't want to necessarily load 25 megabytes. Who has that space? It's a lot of space.\u003C/p>\u003Cp>So what we're gonna do is just copy this from this Amazon typography site, add some font face values for it. We're gonna do a little font family, ember. And then for our source declaration here, I'm gonna use URL and just input that URL that we get from the Amazon website. Now, we save that. Directus will load that custom CSS for us on all the pages.\u003C/p>\u003Cp>But the last piece of the puzzle, we've got to take our half inch brush and we've got to go into our fonts and just apply that particular setting. Right, okay. Yeah, I'm not seeing that being applied. Why is it not? Oh.\u003C/p>\u003Cp>Silly me. I put it in the dark theme. So now as we apply it to the light theme customization, our display font is ember. This is a great looking theme. It really pops to me.\u003C/p>\u003Cp>Let's take a look at the public login page. And have you ever seen a more beautiful public login page? 2 wolves, moon, Amazon. Harmonious. Harmonious.\u003C/p>\u003Cp>That's it for this episode of The Joy of Theming. Thank you for joining me. I hope to see you on the next one. Bye.\u003C/p>","Hi, friends. Welcome back to the show. I'm your host, Bry Ross. Before we start our theme today, I thought it was important to cover just how to clean your brush. So, this is how I like to clean my brush. It's super important to have a clean brush anytime you are doing a theme. You've got to make sure that you've got the right colors that you're putting on the theme. So what I like to do, I take my duster, give it a couple shakes, and then just aim the the little red tip of this nozzle at the brush. Just just give it a little flip there. And then you can hit it on your desk and now you've got a brush that's ready to go. So the theme that we are building today is Amazon from a to z. So if you're following along, I hope you've got your canvas prepped with a great looking data model, and let's get started by adding our project settings. Amazon. Everything, all the time. Whenever you want it. Alright. So we're gonna copy the project URL and just paste that in there. I would probably remove that ref tag as well. So we'll just paste that in there. And now we're ready to theme. So I always start everything by dialing in the branding. The branding is so important. We're going to inspect this Amazon logo from the website. It looks like it's gonna be a real pain to get access to this. They're using a sprite sheet which is is probably smart for performance, but makes our job as themers just a little bit more difficult. So we'll just use the Amazon logos that they have, And what I'm going to do, I'm going to use a combo move here. I'm just going to put both of these together. Copy. And import from URL. Great. Okay. So now we've got our project logo, public foreground. What are we gonna use? We're gonna choose the same file from the library. That's okay. We don't necessarily need 2 different images for our logo and our public foreground. It's all good. So we're just gonna paint that on. Great. Good, good luck. Okay. Alright. So as far as a public background image, we've got to find something that works. What are we going to do? Well, I'll show you. Way back when, I used to paint t shirts before I painted themes. And, yeah, one of the t shirts that I loved by my friends at the mountain, are these Wolf t shirts. These are such masterpieces. If you've ever seen them, they're some of the most highly rated shirts on Amazon. So let's just use one of those as the public background. We'll just paint that beautiful, beautiful theme there. Alright, so now we're looking for a favicon. I don't see that here. I'm not seeing it. Again, theming is a journey. There's many twists and turns that we have to navigate to bring out that theme. So let's just search for Amazon Fab icon. This looks like a good one. Copy that image address, and I'm just gonna brush that in there. Just pick up that half inch brush. The fab icon is such a small detail. Absolutely critical though. Alright, so for our project color, what we want to do, we want to find this Amazon yellow, this Amazon orange. Is it orange? Is it yellow? Is it in between? I don't know. But it's it's lovely. It's reassuring, but also stands out against that darker background. Alright. So we're just gonna paste that in. Now we've we've got that. We've got our project color. So this is gonna bring all of our buttons up to that color, but again, we want to match that Amazon website. So we've got to go in and we need to adjust this module bar logo. So to do that, what we're gonna do, we're gonna go into our modules. I'm not seeing that that CSS there. We're actually gonna have to use our custom CSS here. So we'll do a class selector module dash bar dot logo and just paint some background transparency on there. It's almost like we're removing it but essentially we're just blending it in. Just, you know, we'll add that important modifier just to make sure that it's set. Great. Okay. Alright. So next we're gonna dive in to this second nav, this secondary navigation. It's more of a navy blue like a midnight navy. Like a very soulful color. Alright. So now inside our list, we need to go in and set our foreground colors. Now this is a an advanced technique. Your mileage may vary, but I like to take my half inch brush, Just stroke the keys ever so softly and that way we can get this nice color effect that we're looking for. So for our divider here, that white is too much. Maybe we use a little color mix to bring it down. Mute that just a little bit, but as you can see we've got a weird hover effect going on. How can I fix that, right? That is going to be in our background hover and our background active color. So I can take this color mix and from our background hover maybe I just dial it back a bit, just a little bit, just dial it back just a little bit. It's very nice. You're doing great, by the way. Amazing. It is so fun and so enlightening just to see how some of these themes take shape. Alright, so this is nice, but at the very top we have our project bar that is getting in the way. It's just too much contrast. So let's remove that, set our foreground to be the same, and now we've completed the navigation. So now what we want to do is take a look at our fonts. Fonts always make or break a theme. And Amazon is using this Amazon ember font. Alright so if we look at our actual font network requests we could see that font. If I check our font face inside the document, I don't see it. So we're just gonna search for Amazon Amber font. There we go. We've got a breakdown of this particular font. I don't want to necessarily load 25 megabytes. Who has that space? It's a lot of space. So what we're gonna do is just copy this from this Amazon typography site, add some font face values for it. We're gonna do a little font family, ember. And then for our source declaration here, I'm gonna use URL and just input that URL that we get from the Amazon website. Now, we save that. Directus will load that custom CSS for us on all the pages. But the last piece of the puzzle, we've got to take our half inch brush and we've got to go into our fonts and just apply that particular setting. Right, okay. Yeah, I'm not seeing that being applied. Why is it not? Oh. Silly me. I put it in the dark theme. So now as we apply it to the light theme customization, our display font is ember. This is a great looking theme. It really pops to me. Let's take a look at the public login page. And have you ever seen a more beautiful public login page? 2 wolves, moon, Amazon. Harmonious. Harmonious. That's it for this episode of The Joy of Theming. Thank you for joining me. I hope to see you on the next one. Bye.","published",[135],{"people_id":136},{"id":137,"first_name":138,"last_name":139,"avatar":140,"bio":141,"links":8},"a318327f-99e2-4938-b332-5fa049c29047","Bry","Ross","2c4d6cd9-5765-4268-b1a0-42ac7ce5adb9","Master Themer and Chuck Norris' BFF",[],{"id":144,"number":145,"year":146,"episodes":147,"show":159},"61d16eae-2910-4009-a3e0-65e1a96be877",1,"2024",[148,149,150,151,152,153,154,122,155,156,157,158],"ef8afd5a-ba9f-49c5-ae0e-091de1d7d85e","e7dd4c60-0a87-4ce5-a054-fbef2c80bd74","a4c00ba5-0cb9-4b40-90a4-8c03b4410e4b","22e15c9f-e0d1-4a6b-8dd1-c5b51c9f1568","2b1886f5-7508-44dc-b0a9-c4f73e18d889","c9c86f91-d3e9-4287-9bfc-4c0fd50c6dfd","c338c610-19d5-45b1-af66-3cf34c67a2ec","ed8c1a76-e3b6-4c75-b4b9-9a7a37ebcf61","118828b8-a8d9-4329-8537-aa3716455328","03a91de3-cffa-41be-a56e-6448ae0cbfd8","4ba7fb8e-72ae-4e8f-908a-8d9032a1603f",{"title":160,"tile":161},"The Joy of Theming","1a50a74b-b774-4fca-9264-88a55d956b5b",{"id":155,"slug":163,"season":144,"vimeo_id":164,"description":165,"tile":166,"length":128,"resources":8,"people":8,"episode_number":127,"published":167,"title":168,"video_transcript_html":169,"video_transcript_text":170,"content":8,"seo":8,"status":133,"episode_people":171,"recommendations":173},"walmart-theme","931473260","Join Bry as he brings the essence of better living to life with a happy little Walmart theme. Grab your theming brushes and following to turn savings into art.","b0bf0366-015c-43a4-a6f9-267366bd3bbe","2024-05-20","Walmart (Blueprint for Savings)","\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>","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.",[172],"de94847e-19bc-4892-a14e-f465a0917f4e",[],{"reps":175},[176,232],{"name":177,"sdr":8,"link":178,"countries":179,"states":181},"John Daniels","https://meet.directus.io/meetings/john2144/john-contact-form-meeting",[180],"United States",[182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231],"Michigan","Indiana","Ohio","West Virginia","Kentucky","Virginia","Tennessee","North Carolina","South Carolina","Georgia","Florida","Alabama","Mississippi","New York","MI","IN","OH","WV","KY","VA","TN","NC","SC","GA","FL","AL","MS","NY","Connecticut","CT","Delaware","DE","Maine","ME","Maryland","MD","Massachusetts","MA","New Hampshire","NH","New Jersey","NJ","Pennsylvania","PA","Rhode Island","RI","Vermont","VT","Washington DC","DC",{"name":233,"link":234,"countries":235},"Michelle Riber","https://meetings.hubspot.com/mriber",[236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348,349,350,351,352,353,354,355,356,357,358,359,360,361,362,363,364,365,366,367,368,369,370,371,372,373,374,375,376,377,378,379,380,381,382,383,384,385,386,387,388,389,390,391,392,393,394,395,396,397,398,399,400,401,402,403,404,405,406,407,408,409,410,411,412,413,414,415,416,417,418,419,420,421,422,423,213,424,425],"Albania","ALB","Algeria","DZA","Andorra","AND","Angola","AGO","Austria","AUT","Belgium","BEL","Benin","BEN","Bosnia and Herzegovina","BIH","Botswana","BWA","Bulgaria","BGR","Burkina Faso","BFA","Burundi","BDI","Cameroon","CMR","Cape Verde","CPV","Central African Republic","CAF","Chad","TCD","Comoros","COM","Côte d'Ivoire","CIV","Croatia","HRV","Czech Republic","CZE","Democratic Republic of Congo","COD","Denmark","DNK","Djibouti","DJI","Egypt","EGY","Equatorial Guinea","GNQ","Eritrea","ERI","Estonia","EST","Eswatini","SWZ","Ethiopia","ETH","Finland","FIN","France","FRA","Gabon","GAB","Gambia","GMB","Ghana","GHA","Greece","GRC","Guinea","GIN","Guinea-Bissau","GNB","Hungary","HUN","Iceland","ISL","Ireland","IRL","Italy","ITA","Kenya","KEN","Latvia","LVA","Lesotho","LSO","Liberia","LBR","Libya","LBY","Liechtenstein","LIE","Lithuania","LTU","Luxembourg","LUX","Madagascar","MDG","Malawi","MWI","Mali","MLI","Malta","MLT","Mauritania","MRT","Mauritius","MUS","Moldova","MDA","Monaco","MCO","Montenegro","MNE","Morocco","MAR","Mozambique","MOZ","Namibia","NAM","Niger","NER","Nigeria","NGA","North Macedonia","MKD","Norway","NOR","Poland","POL","Portugal","PRT","Republic of Congo","COG","Romania","ROU","Rwanda","RWA","San Marino","SMR","São Tomé and Príncipe","STP","Senegal","SEN","Serbia","SRB","Seychelles","SYC","Sierra Leone","SLE","Slovakia","SVK","Slovenia","SVN","Somalia","SOM","South Africa","ZAF","South Sudan","SSD","Spain","ESP","Sudan","SDN","Sweden","SWE","Tanzania","TZA","Togo","TGO","Tunisia","TUN","Uganda","UGA","United Kingdom","GBR","Vatican City","VAT","Zambia","ZMB","Zimbabwe","ZWE","UK","Germany","Netherlands","Switzerland","CH","NL",1773850449406]