[{"data":1,"prerenderedAt":589},["ShallowReactive",2],{"footer-primary":3,"footer-secondary":93,"footer-description":119,"tv-joy-of-theming":121,"tv-joy-of-theming-seasons":131,"tv-joy-of-theming-episodes":149,"sales-reps":337},{"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,"title":123,"logo":124,"cover":125,"tile":126,"announcement_text":8,"description":127,"slug":128,"one_liner":129,"card_text":8,"status":130,"sort":8},"aa913777-6d1e-4cb5-9cd4-1a3111576fa5","The Joy of Theming","bd312523-3646-4aae-9883-cd955e5f72f4","f6c5d938-9c68-404f-852d-7aa7e715ca1a","1a50a74b-b774-4fca-9264-88a55d956b5b","In this chill and laid back show, Bry (totally not Bryant in a wig) will use the powerful Directus theming engine to create new masterpieces. There’s only happy little accidents in this show, and it’s a fun look into what you can do to make Directus feel more like… you. ","joy-of-theming","Explore the Directus theming engine with the help of Bry Ross in these laid back classes.","published",[132],{"id":133,"number":134,"show":122,"year":135,"episodes":136},"61d16eae-2910-4009-a3e0-65e1a96be877",1,"2024",[137,138,139,140,141,142,143,144,145,146,147,148],"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","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",[150,169,187,202,217,233,248,262,276,290,305,321],{"id":137,"slug":151,"vimeo_id":152,"description":153,"tile":154,"length":155,"resources":8,"people":156,"episode_number":134,"published":160,"title":161,"video_transcript_html":162,"video_transcript_text":163,"content":8,"seo":8,"status":130,"episode_people":164,"recommendations":166,"season":167},"loreal-group-theme","926586698","Let's grab our keyboards and mice, and let the beauty adventure begin because YOU are worth it. Join Bry as he picks up his brushes to create a L’Oréal Paris theme in Directus.","f81c58ae-8850-4387-adac-e5791f7969a8",7,[157],{"name":158,"url":159},"Bry Ross","https://directus.io/team/bryant-gillespie","2024-03-25","L'Oreal (Because You’re Worth It) ","\u003Cp>Hi. Welcome back to another episode of The Joy of Theming. I'm your host, Bry Ross.\u003C/p>\n\u003Cp>And for the next few moments, you and I together will paint a beautiful Directus theme. I'm so excited to have you.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>This will be the L'Oreal CMS and, a PIM.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>So we'll just go in, add another little touch of custom CSS. Just and text transform, uppercase. That looks good. Beautiful. Beautiful.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>And remember, keep theming. Each one of us has that beautiful theme just waiting to come out.\u003C/p>","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 Boreal 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. We'll see you.",[165],"b00e5c66-1e7c-49b9-ab37-9f6883783ce4",[],{"id":133,"number":134,"show":122,"year":135,"episodes":168},[137,138,139,140,141,142,143,144,145,146,147,148],{"id":138,"slug":170,"vimeo_id":171,"description":172,"tile":173,"length":174,"resources":8,"people":175,"episode_number":177,"published":178,"title":179,"video_transcript_html":180,"video_transcript_text":181,"content":8,"seo":8,"status":130,"episode_people":182,"recommendations":184,"season":185},"american-express-theme","928845573","Home is where your heart is and – just like your wallet – you should never leave home without it. Join Bry as he builds a happy little theme inspired by American Express.","22ca1cf9-4a05-446a-a8ef-eee78afa4f22",6,[176],{"name":158,"url":159},2,"2024-04-01","American Express (Don’t Leave Home Without It)","\u003Cp>Bry: Hi. Welcome back to The Joy of Theming. I'm your host, Bry Ross. It's a beautiful day in the neighborhood and so excited to have you right here right now to experience the joy of theming. Alright.\u003C/p>\u003Cp>So today, we've got a wonderful, wonderful theme to paint. We are going to be painting American Express. What a great theme, and what a great company. American Express is everywhere you want to be. What's that?\u003C/p>\u003Cp>Oh, that's that's not it. American Express. Don't live life without Alright, so we're going to log into our Directus instance and get started on this theme. So we'll start entering in our project name. Ah, yes.\u003C/p>\u003Cp>Okay. Project description or descriptor. Now let's dive into our theme. So for this, I'm gonna pull out my trusty palette knife and we're just gonna spread on some logo. I love that.\u003C/p>\u003Cp>For our foreground, I'm just gonna scroll down to the bottom and we want to take that larger American Express logo and just paint that in there. That's great. So for the favicon, that's that's tiny. So I'm just gonna pull out my half inch brush here and we're gonna paint that in there. This is looking really great.\u003C/p>\u003Cp>So we've got a nice nice calm theme. We've got that background around that MX logo fixed. Now let's add our project color to those buttons in the foreground. So we're just gonna slide that that project color right down over those those module buttons. That looks great.\u003C/p>\u003Cp>Now, one of the other colors that I see here, I really like this blue. I'm calling it midnight blue, indigo blue, It's a really deep color. It's so soulful. We're going to add that to the icons for our list. So we'll just ping in that hex code and, you know, I'm really surprised.\u003C/p>\u003Cp>This came out okay, but anytime you switch colors like that, you also need to make sure that you dust those demons out of your keyboard first so those hex codes don't get stuck in there anymore. Using that number pad, make sure you really get in there as well. Now, let's go in and see if we can't use our palette knife to to find that CSS. We're really looking for those font face rules from the American Express website. And normally, I might host those fonts myself, but here at The Joy of Theming, we like to create masterpieces in no time.\u003C/p>\u003Cp>So we're just gonna steal or copy that CSS. We've got our font face rules that we're just spreading there and I'm gonna copy that font family name, Benton Sands, and we're gonna go back up to our fonts in the display font. We're going to use Benton Sands and save and now we've got that nice title font Benton Sands. Maybe we want to dial back that font weight just a little bit. Nice.\u003C/p>\u003Cp>Nice. Looks great. The only thing that don't like though, it is a dark shade of it's black. Let's use that midnight blue color and honestly Midnight Blue sounds like a Bob Seger song. Bob Seger is underrated, 100%.\u003C/p>\u003Cp>So we'll go back in. That title font color is actually it's actually down. We're just gonna move down. You can see we've got the project foreground. We're just gonna move that down a little.\u003C/p>\u003Cp>There we go. You gotta know how to work the canvas. So under the header we're gonna go into Title, just spray that little midnight blue onto the title font. This is looking really nice, Very subtle. It really matches this American Express website.\u003C/p>\u003Cp>I like how calm that is. Let's back out and actually look at our login page. So while I originally loved that image on the Amex website, for the background, it's just not it's not getting the job done for me. So let's log back in and see if we can swap out to a better, better background image. We're gonna go back to the Amex website and just see if we can find a better image.\u003C/p>\u003Cp>Wow. This guy looks amazing. I really love his hair. Could be waiting for the love of his life or just a check from the bank, maybe a package. I don't know.\u003C/p>\u003Cp>We're gonna use that as the public background. And I'm just gonna incognito window and pop open. Now we we've got a better public background image. Maybe we want to adjust the focus, the focal point for this particular image. That's one of the nice things about the asset library in Directus.\u003C/p>\u003Cp>This is the conduit for your theming. Obviously, a good theme isn't complete without nice images. And whenever those images get cropped we want to make sure that faces and important elements are still included on the screen. So you can use the Focal Point tool to do that. Alright, great, so this theme is looking great, I think we're done here.\u003C/p>\u003Cp>Amex, You can't live life without it or don't live life without it. Tell you what, I have several Amex cards. Love stacking the points, always use them to take my family to the magical Disney World. And I hope you've had a magical time here at the Joy of Theming. I hope you come back for the next episode where we will dive even deeper into the beauty and majestic qualities of theming with Directus.\u003C/p>\u003Cp>I'll see you next time.\u003C/p>","Hi. Welcome back to The Joy of Theming. I'm your host, Bry Ross. It's a beautiful day in the neighborhood and so excited to have you right here right now to experience the joy of theming. Alright. So today, we've got a wonderful, wonderful theme to paint. We are going to be painting American Express. What a great theme, and what a great company. American Express is everywhere you want to be. What's that? Oh, that's that's not it. American Express. Don't live life without Alright, so we're going to log into our Directus instance and get started on this theme. So we'll start entering in our project name. Ah, yes. Okay. Project description or descriptor. Now let's dive into our theme. So for this, I'm gonna pull out my trusty palette knife and we're just gonna spread on some logo. I love that. For our foreground, I'm just gonna scroll down to the bottom and we want to take that larger American Express logo and just paint that in there. That's great. So for the favicon, that's that's tiny. So I'm just gonna pull out my half inch brush here and we're gonna paint that in there. This is looking really great. So we've got a nice nice calm theme. We've got that background around that MX logo fixed. Now let's add our project color to those buttons in the foreground. So we're just gonna slide that that project color right down over those those module buttons. That looks great. Now, one of the other colors that I see here, I really like this blue. I'm calling it midnight blue, indigo blue, It's a really deep color. It's so soulful. We're going to add that to the icons for our list. So we'll just ping in that hex code and, you know, I'm really surprised. This came out okay, but anytime you switch colors like that, you also need to make sure that you dust those demons out of your keyboard first so those hex codes don't get stuck in there anymore. Using that number pad, make sure you really get in there as well. Now, let's go in and see if we can't use our palette knife to to find that CSS. We're really looking for those font face rules from the American Express website. And normally, I might host those fonts myself, but here at The Joy of Theming, we like to create masterpieces in no time. So we're just gonna steal or copy that CSS. We've got our font face rules that we're just spreading there and I'm gonna copy that font family name, Benton Sands, and we're gonna go back up to our fonts in the display font. We're going to use Benton Sands and save and now we've got that nice title font Benton Sands. Maybe we want to dial back that font weight just a little bit. Nice. Nice. Looks great. The only thing that don't like though, it is a dark shade of it's black. Let's use that midnight blue color and honestly Midnight Blue sounds like a Bob Seger song. Bob Seger is underrated, 100%. So we'll go back in. That title font color is actually it's actually down. We're just gonna move down. You can see we've got the project foreground. We're just gonna move that down a little. There we go. You gotta know how to work the canvas. So under the header we're gonna go into Title, just spray that little midnight blue onto the title font. This is looking really nice, Very subtle. It really matches this American Express website. I like how calm that is. Let's back out and actually look at our login page. So while I originally loved that image on the Amex website, for the background, it's just not it's not getting the job done for me. So let's log back in and see if we can swap out to a better, better background image. We're gonna go back to the Amex website and just see if we can find a better image. Wow. This guy looks amazing. I really love his hair. Could be waiting for the love of his life or just a check from the bank, maybe a package. I don't know. We're gonna use that as the public background. And I'm just gonna incognito window and pop open. Now we we've got a better public background image. Maybe we want to adjust the focus, the focal point for this particular image. That's one of the nice things about the asset library in Directus. This is the conduit for your theming. Obviously, a good theme isn't complete without nice images. And whenever those images get cropped we want to make sure that faces and important elements are still included on the screen. So you can use the Focal Point tool to do that. Alright, great, so this theme is looking great, I think we're done here. Amex, You can't live life without it or don't live life without it. Tell you what, I have several Amex cards. Love stacking the points, always use them to take my family to the magical Disney World. And I hope you've had a magical time here at the Joy of Theming. I hope you come back for the next episode where we will dive even deeper into the beauty and majestic qualities of theming with Directus. I'll see you next time.",[183],"88abad2a-a58f-47e4-aeb8-8f5814116d13",[],{"id":133,"number":134,"show":122,"year":135,"episodes":186},[137,138,139,140,141,142,143,144,145,146,147,148],{"id":139,"slug":188,"vimeo_id":189,"description":190,"tile":191,"length":155,"resources":8,"people":8,"episode_number":192,"published":193,"title":194,"video_transcript_html":195,"video_transcript_text":196,"content":8,"seo":8,"status":130,"episode_people":197,"recommendations":199,"season":200},"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",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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\u003Cp>I'm Bry Ross. We'll see you next time.\u003C/p>","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.",[198],"8cdab202-6586-47d3-a831-1f79a5cf321e",[],{"id":133,"number":134,"show":122,"year":135,"episodes":201},[137,138,139,140,141,142,143,144,145,146,147,148],{"id":140,"slug":203,"vimeo_id":204,"description":205,"tile":206,"length":155,"resources":8,"people":8,"episode_number":207,"published":208,"title":209,"video_transcript_html":210,"video_transcript_text":211,"content":8,"seo":8,"status":130,"episode_people":212,"recommendations":214,"season":215},"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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>\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/p>","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.",[213],"3b726dc7-42c7-45e6-86a9-b3704b2eb0b2",[],{"id":133,"number":134,"show":122,"year":135,"episodes":216},[137,138,139,140,141,142,143,144,145,146,147,148],{"id":141,"slug":218,"vimeo_id":219,"description":220,"tile":221,"length":222,"resources":8,"people":8,"episode_number":223,"published":224,"title":225,"video_transcript_html":226,"video_transcript_text":227,"content":8,"seo":8,"status":130,"episode_people":228,"recommendations":230,"season":231},"the-simpsons-theme","931210680","There are no mistakes in this episode. Join Bry as he dusts the demons out of the keyboard and paints a wonderfully delightful theme worthy of the longest running TV on American television – The Simpsons.","a8d63115-8078-44e0-aefb-db5ea5cf7dc8",9,5,"2024-04-22","The Simpsons (Doh!)","\u003Cp>Speaker 0: Hi. Welcome back to the show. I'm your host, Brad Ross. And for the next few moments together, you and I will experience the joy of theming. So we've got an extra special show for you today.\u003C/p>\u003Cp>We're gonna be painting a beautiful Simpsons theme. The Simpsons is one of the longest running animated shows in history and couples very well with Directus because Directus has been 20 years in the making. The Simpsons may be even older than some of you watching this. You know what? That's okay, We can all paint beautiful themes.\u003C/p>\u003Cp>So let's dive in. Alright, so whenever I'm painting a theme the first thing I always like to do is pull out my keyboard and bang in the project settings. So we'll just name this The Simpsons, it's the greatest show, and then we'll add our URL. So now that that's done we're going to pull out our brush a little bit and just dab a little bit of that Simpsons yellow all over our theme, all over our canvas here. Now we're gonna pick up the logo, add some public foreground, just use that same logo there.\u003C/p>\u003Cp>And then let's find a a great background for The Simpsons. What could be more perfect than painting just a little of that that couch scene that is in every episode. Now as far as the public note this is what displays on the bottom of the login page. So we'll just add that welcome to Simpsons Wiki. Wiki Wiki.\u003C/p>\u003Cp>Alright. And now for the public favicon maybe we'll just use this lovely image of Homer. Just paint that in there. Just great. Okay.\u003C/p>\u003Cp>So now we've got our basic shades. We've got a nice looking logo. Let's dive in and actually start theming this. One of the things that I wanna do, I'm gonna pull out my trusty palette knife and for our module background we're just gonna spread that yellow on our module background and then adjust our foreground colors. Now this is looking very nice, it's looking very Simpson y, if that's a good word.\u003C/p>\u003Cp>Now we'll just add a little bit of a hover effect to this, make it very subtle. And, any time you change colors remember that you have to just get in there and dust those demons out so those colors don't create unwanted combinations. Now as far as this theme, it's looking really nice. Let's go in and adjust some of our global settings. So our background for the the whole page here, I wanna use a Simpson color.\u003C/p>\u003Cp>So we're just gonna use a little CSS color mix there. That's a little bright, little bright. We're gonna dial that back to, like, 80%. Okay. So that's a nice mix.\u003C/p>\u003Cp>Color mix is one of my favorite methods in CSS to blend colors together. So now let's, how fun would it be if we took our palette knife and we just spread a little of that Homer Simpson donut all over this theme. So let's try and recreate that effect. We'll just look for a sprinkle SVG background and let's make a donut out of this. So we'll use a light pink color here and then bring out that fine detail brush that half inch brush just dial back the sprinkle opacity a little bit and wow this is looking really great.\u003C/p>\u003Cp>So I'm gonna copy this CSS, we're gonna open up my code editor and, I just want the URL piece of this. Now inside our navigation background paste that in there and just just paint those lovely sprinkles up and down this theme. That's looking really nice. This is looking like something Homer himself would love to eat. Alright, so we're gonna dive in as well.\u003C/p>\u003Cp>Now we're gonna change the background of the project settings up at the top, give it just a little bit of opacity to make it easier to see, but we don't want to obstruct our beautiful Let's also set up our little active, for those links. So we want the background to be white on active and then on hover we're just gonna paint in a nice little opacity, just 80% opacity. That's a really good value for opacity. You're doing great, hope you're following along at home and really enjoying this theme. Alright, so now we're gonna pick back up that palette knife just paint some border colors on there.\u003C/p>\u003Cp>There we go, we get a nice little border accent. Looking great, looking great. Alright, now we want to add a little bit of border to separate these different sections, give them a little more breathing room. So again, I'm gonna pull up, just this sprinkle, and a little darker 4 pixel border for the navigation on the far right side. And then I'm also gonna do the same on the module setting so that we can, separate that donut, make it look like, an actual donut here.\u003C/p>\u003Cp>So we'll just bang in some settings there for our border color and voila, it's looking really nice. Again, don't don't forget to use that duster liberally just because you don't want those colors to mix unwantedly. Oh, I just missed a little spot there. Alright, so now we've got this great, great looking thing. Things are starting to come together.\u003C/p>\u003Cp>But, I wanna adjust my fonts. So we see this font, it's a good looking font, but we need to add our title heading, but we also need that blue background. So let's do that. We're gonna use a little subtle blue across the top just to really set this theme off. So we'll just use our 5 inch, half inch brush there.\u003C/p>\u003Cp>Just really nice. Just paint that little detail in. Just keeps blending those colors a little bit till we get exactly what we're looking for out of it. Great. Great.\u003C/p>\u003Cp>Yeah. Nice. Very good. We've got a little darker border. This is chef's kiss.\u003C/p>\u003Cp>This is looking very nice. This is totally a theme that Homer would want to eat. Alright, so this is not a great font, but this, this rock salt font on Google Fonts looks very close to what the Simpsons title font is. So we'll just add that in there. Take a look at it.\u003C/p>\u003Cp>Maybe we dial that back a little bit to 400. And what I also wanna do here is just change the color to white. So I may just spread that color all over there. One of the other things that you'll notice is the Simpsons title font has a little subtle offset. It's got a black offset to it as well.\u003C/p>\u003Cp>So we can do that here inside custom CSS inside Directus. So it doesn't have to be all just themes, we can just go in and paint some custom CSS in there. That looks really nice. So now we've got our appearance set up. Everything's looking good.\u003C/p>\u003Cp>Let's dial this in even further because we we see we've got a search collection box that is just messing with our Mojo, and I don't like it. There are no mistakes, only happy accidents, opportunities to improve our theme, but this is one that I have to fix. So we'll just go in there and use our CSS selector for that. Just clean that up a little bit there. Blend that in.\u003C/p>\u003Cp>Looking very nice. Okay. All right. So we're done with our theme. Let's log out, take a look at our public login page, and wow, this really makes me feel like I'm right there in Springfield.\u003C/p>\u003Cp>That's it for this episode of the joy of theming. Tune in for the next episode where we have an extra special surprise for you.\u003C/p>","Hi. Welcome back to the show. I'm your host, Brad Ross. And for the next few moments together, you and I will experience the joy of theming. So we've got an extra special show for you today. We're gonna be painting a beautiful Simpsons theme. The Simpsons is one of the longest running animated shows in history and couples very well with Directus because Directus has been 20 years in the making. The Simpsons may be even older than some of you watching this. You know what? That's okay, We can all paint beautiful themes. So let's dive in. Alright, so whenever I'm painting a theme the first thing I always like to do is pull out my keyboard and bang in the project settings. So we'll just name this The Simpsons, it's the greatest show, and then we'll add our URL. So now that that's done we're going to pull out our brush a little bit and just dab a little bit of that Simpsons yellow all over our theme, all over our canvas here. Now we're gonna pick up the logo, add some public foreground, just use that same logo there. And then let's find a a great background for The Simpsons. What could be more perfect than painting just a little of that that couch scene that is in every episode. Now as far as the public note this is what displays on the bottom of the login page. So we'll just add that welcome to Simpsons Wiki. Wiki Wiki. Alright. And now for the public favicon maybe we'll just use this lovely image of Homer. Just paint that in there. Just great. Okay. So now we've got our basic shades. We've got a nice looking logo. Let's dive in and actually start theming this. One of the things that I wanna do, I'm gonna pull out my trusty palette knife and for our module background we're just gonna spread that yellow on our module background and then adjust our foreground colors. Now this is looking very nice, it's looking very Simpson y, if that's a good word. Now we'll just add a little bit of a hover effect to this, make it very subtle. And, any time you change colors remember that you have to just get in there and dust those demons out so those colors don't create unwanted combinations. Now as far as this theme, it's looking really nice. Let's go in and adjust some of our global settings. So our background for the the whole page here, I wanna use a Simpson color. So we're just gonna use a little CSS color mix there. That's a little bright, little bright. We're gonna dial that back to, like, 80%. Okay. So that's a nice mix. Color mix is one of my favorite methods in CSS to blend colors together. So now let's, how fun would it be if we took our palette knife and we just spread a little of that Homer Simpson donut all over this theme. So let's try and recreate that effect. We'll just look for a sprinkle SVG background and let's make a donut out of this. So we'll use a light pink color here and then bring out that fine detail brush that half inch brush just dial back the sprinkle opacity a little bit and wow this is looking really great. So I'm gonna copy this CSS, we're gonna open up my code editor and, I just want the URL piece of this. Now inside our navigation background paste that in there and just just paint those lovely sprinkles up and down this theme. That's looking really nice. This is looking like something Homer himself would love to eat. Alright, so we're gonna dive in as well. Now we're gonna change the background of the project settings up at the top, give it just a little bit of opacity to make it easier to see, but we don't want to obstruct our beautiful Let's also set up our little active, for those links. So we want the background to be white on active and then on hover we're just gonna paint in a nice little opacity, just 80% opacity. That's a really good value for opacity. You're doing great, hope you're following along at home and really enjoying this theme. Alright, so now we're gonna pick back up that palette knife just paint some border colors on there. There we go, we get a nice little border accent. Looking great, looking great. Alright, now we want to add a little bit of border to separate these different sections, give them a little more breathing room. So again, I'm gonna pull up, just this sprinkle, and a little darker 4 pixel border for the navigation on the far right side. And then I'm also gonna do the same on the module setting so that we can, separate that donut, make it look like, an actual donut here. So we'll just bang in some settings there for our border color and voila, it's looking really nice. Again, don't don't forget to use that duster liberally just because you don't want those colors to mix unwantedly. Oh, I just missed a little spot there. Alright, so now we've got this great, great looking thing. Things are starting to come together. But, I wanna adjust my fonts. So we see this font, it's a good looking font, but we need to add our title heading, but we also need that blue background. So let's do that. We're gonna use a little subtle blue across the top just to really set this theme off. So we'll just use our 5 inch, half inch brush there. Just really nice. Just paint that little detail in. Just keeps blending those colors a little bit till we get exactly what we're looking for out of it. Great. Great. Yeah. Nice. Very good. We've got a little darker border. This is chef's kiss. This is looking very nice. This is totally a theme that Homer would want to eat. Alright, so this is not a great font, but this, this rock salt font on Google Fonts looks very close to what the Simpsons title font is. So we'll just add that in there. Take a look at it. Maybe we dial that back a little bit to 400. And what I also wanna do here is just change the color to white. So I may just spread that color all over there. One of the other things that you'll notice is the Simpsons title font has a little subtle offset. It's got a black offset to it as well. So we can do that here inside custom CSS inside Directus. So it doesn't have to be all just themes, we can just go in and paint some custom CSS in there. That looks really nice. So now we've got our appearance set up. Everything's looking good. Let's dial this in even further because we we see we've got a search collection box that is just messing with our Mojo, and I don't like it. There are no mistakes, only happy accidents, opportunities to improve our theme, but this is one that I have to fix. So we'll just go in there and use our CSS selector for that. Just clean that up a little bit there. Blend that in. Looking very nice. Okay. All right. So we're done with our theme. Let's log out, take a look at our public login page, and wow, this really makes me feel like I'm right there in Springfield. That's it for this episode of the joy of theming. Tune in for the next episode where we have an extra special surprise for you.",[229],"96d82e6e-504f-4595-8d58-58dc7f4ca48e",[],{"id":133,"number":134,"show":122,"year":135,"episodes":232},[137,138,139,140,141,142,143,144,145,146,147,148],{"id":142,"slug":234,"vimeo_id":235,"description":236,"tile":237,"length":238,"resources":8,"people":8,"episode_number":174,"published":239,"title":240,"video_transcript_html":241,"video_transcript_text":242,"content":8,"seo":8,"status":130,"episode_people":243,"recommendations":245,"season":246},"chickfila-theme","931472203","Theming can seem hard on the surface. If you get stuck waffling back and forth on color palettes and font choices, then you need to be chikin out this episode. It's our pleasure to present the \"Chick-fil-A theme\". Join host Bry Ross as he paints a happy little theme for the king of the chicken sandwich.","151c0c30-3116-48d8-945a-bcb47291fbce",8,"2024-04-29","Chick-fil-A (Eat Mor Chikin)","\u003Cp>Speaker 0: Hi. Welcome to the show. I'm your host, Bry Ross. And for the next few moments of this beautiful day, you and I together will experience the joy of theming. Now, before we get started on today's painting, the beautiful Chick Fil A theme, I just wanted to cover a few of the tools of the trade so that you feel right at home.\u003C/p>\u003Cp>You can paint beautiful themes with just about anything, but here's what I like to use. First, I have my trusty Logitech MX Keys keyboard. It's a rather heavy keyboard but it does have a number pad. So hex code entry, lightning fast. Next up, we have our trusty pallet knife.\u003C/p>\u003Cp>Now, this is not just any pallet knife. It is a firm pallet knife and it is great for painting the broad strokes of whatever theme that we're working with today. Last but not least, we have our half inch brush. Now this is perfect for painting all the details. Our border radius, border radii, depending on your preferred spelling, or, font sizes.\u003C/p>\u003Cp>It's perfect for that. Really easy to paint all the detailed strokes that you need. So those are our tools of the trade. Let's dive in to creating a wonderful, happy little theme together. Alright, so let's dive right in.\u003C/p>\u003Cp>Alright, first up, we're just going to navigate to our settings and we're gonna enter in a beautiful project name. Let's just call it Chick Fil A. Now we'll set a project descriptor, not description, but descriptor for the Latin variety, and that will be our internal CMS and app. And then we're just grab the URL from the browser and we'll paste that into project URL. Next, we're ready to paint our theme.\u003C/p>\u003Cp>So we're gonna go to the appearance section in our Directus instance and let's pick up the primary color from the website. So I'll just inspect and grab that. Great. Now we're gonna get the logo. So I can do this by inspecting that element, looking for the CSS and boom, there we go.\u003C/p>\u003Cp>We've found the SVG for Chick Fil A logo. It's a glorious logo. Just a fine beautiful example of a logo. Now next we'll add a public background. So the public background is what displays on the login page And anytime you want to entice people to log in, they need a great looking login page.\u003C/p>\u003Cp>We'll add a quick little public note. And wow, this is starting to look really nice. Now I'm just gonna steal the favicon here, favicon. I never know the spelling. I argued with somebody about that at the mall the other day.\u003C/p>\u003Cp>But now let's save our appearance. And it looks like our logo is not showing in the top left corner like we want it to. So, luckily, I can go in and change the CSS inside Directus as well. Not just the the default theming, but I can go in and change the CSS to be whatever I want. So, in this case, I'm gonna copy the class, which is a CSS selector, and paste that into custom CSS.\u003C/p>\u003Cp>And then we'll just set a nice, lovely background color of cream white. Now, since we're gonna be changing colors soon, anytime you change colors on your your pallet, you wanna make sure you take your duster and just dust the demons out of it. Just dust it real good like that and then you're ready. Alright. So now we've picked our light theme and now we're just gonna step into painting the broad strokes of this theme.\u003C/p>\u003Cp>So we are now working with the minimal theme inside Directus. This is one of the default themes that comes out of the gate and it it just, it looks great. So we're going to set the primary color so that our save buttons look glorious, that that wonderful deep chick fil a red and we'll use that blue, it's like a navy, just so deep you get lost in it when you stare at it. We're gonna use that navy blue as the foreground which will show up on the titles and the headers. Great.\u003C/p>\u003Cp>Looking magnificent, you know, and when you're painting themes like this there are no mistakes. You know, if you mistake a border radius by 4 or 5 pixels, it's a happy accident because the results can be wondrous. So now this theme is looking really great and we want to go back in and paint some of the finer details like our fonts. So the Chick Fil A website uses a very specific font that very likely you would have to pay for because it's a very, very fine exquisite font. So I'm just gonna go in here and just paint that font CSS in there and we'll just pick that up from the Chick Fil A website.\u003C/p>\u003Cp>Let's just paint it in there. At font face, we're gonna use the font family apercou apercu, again, latin spelling. And the font weight here is gonna be 400, that's just the regular standard font weight we like to use when we're doing the details and we can inspect the network requests from the Chick fil A site to actually get the URL for that font. In this case it looks like a CDN CloudFront. No big deal.\u003C/p>\u003Cp>So when we refresh, now you can see all those beautiful Chick Fil A fonts that line up with the website perfectly, look great inside our app, inside our CMS that we're building. Alright. So now that we're into the fine detail as well, let's let's fix those border radius, those border radii. I never know what to call it. Just get so lost in theming sometimes.\u003C/p>\u003Cp>So I noticed on the navigation there's a very, so a full border radius, but on some of the other buttons, it is 12 pixels. So we'll just paint those 12 little pixels in there. I I don't like using decimal points in my pixels. Just messes with the whole flow, the whole zen. Alright.\u003C/p>\u003Cp>So now let's go in and log out so we can check out that login page. This is the public login page. Oh, wow. Is it beautiful? So that is a lovely theme.\u003C/p>\u003Cp>But, oh, wait. There is one little accident that we need to fix here. So, again, the logo is not displaying on the public login page because it it is hidden by this red background. So we're just gonna pull out that detail brush and just paint in that new CSS and boom, there it is. You can clearly see it now.\u003C/p>\u003Cp>This is perfect. I really love the feel of this Chick Fil A theme, and I hope you've learned a ton here. Each one of us has a perfect theme inside of us. I'm hoping that through this show, we can help you express that perfect theme. I'll see you next time.\u003C/p>","Hi. Welcome to the show. I'm your host, Bry Ross. And for the next few moments of this beautiful day, you and I together will experience the joy of theming. Now, before we get started on today's painting, the beautiful Chick Fil A theme, I just wanted to cover a few of the tools of the trade so that you feel right at home. You can paint beautiful themes with just about anything, but here's what I like to use. First, I have my trusty Logitech MX Keys keyboard. It's a rather heavy keyboard but it does have a number pad. So hex code entry, lightning fast. Next up, we have our trusty pallet knife. Now, this is not just any pallet knife. It is a firm pallet knife and it is great for painting the broad strokes of whatever theme that we're working with today. Last but not least, we have our half inch brush. Now this is perfect for painting all the details. Our border radius, border radii, depending on your preferred spelling, or, font sizes. It's perfect for that. Really easy to paint all the detailed strokes that you need. So those are our tools of the trade. Let's dive in to creating a wonderful, happy little theme together. Alright, so let's dive right in. Alright, first up, we're just going to navigate to our settings and we're gonna enter in a beautiful project name. Let's just call it Chick Fil A. Now we'll set a project descriptor, not description, but descriptor for the Latin variety, and that will be our internal CMS and app. And then we're just grab the URL from the browser and we'll paste that into project URL. Next, we're ready to paint our theme. So we're gonna go to the appearance section in our Directus instance and let's pick up the primary color from the website. So I'll just inspect and grab that. Great. Now we're gonna get the logo. So I can do this by inspecting that element, looking for the CSS and boom, there we go. We've found the SVG for Chick Fil A logo. It's a glorious logo. Just a fine beautiful example of a logo. Now next we'll add a public background. So the public background is what displays on the login page And anytime you want to entice people to log in, they need a great looking login page. We'll add a quick little public note. And wow, this is starting to look really nice. Now I'm just gonna steal the favicon here, favicon. I never know the spelling. I argued with somebody about that at the mall the other day. But now let's save our appearance. And it looks like our logo is not showing in the top left corner like we want it to. So, luckily, I can go in and change the CSS inside Directus as well. Not just the the default theming, but I can go in and change the CSS to be whatever I want. So, in this case, I'm gonna copy the class, which is a CSS selector, and paste that into custom CSS. And then we'll just set a nice, lovely background color of cream white. Now, since we're gonna be changing colors soon, anytime you change colors on your your pallet, you wanna make sure you take your duster and just dust the demons out of it. Just dust it real good like that and then you're ready. Alright. So now we've picked our light theme and now we're just gonna step into painting the broad strokes of this theme. So we are now working with the minimal theme inside Directus. This is one of the default themes that comes out of the gate and it it just, it looks great. So we're going to set the primary color so that our save buttons look glorious, that that wonderful deep chick fil a red and we'll use that blue, it's like a navy, just so deep you get lost in it when you stare at it. We're gonna use that navy blue as the foreground which will show up on the titles and the headers. Great. Looking magnificent, you know, and when you're painting themes like this there are no mistakes. You know, if you mistake a border radius by 4 or 5 pixels, it's a happy accident because the results can be wondrous. So now this theme is looking really great and we want to go back in and paint some of the finer details like our fonts. So the Chick Fil A website uses a very specific font that very likely you would have to pay for because it's a very, very fine exquisite font. So I'm just gonna go in here and just paint that font CSS in there and we'll just pick that up from the Chick Fil A website. Let's just paint it in there. At font face, we're gonna use the font family apercou apercu, again, latin spelling. And the font weight here is gonna be 400, that's just the regular standard font weight we like to use when we're doing the details and we can inspect the network requests from the Chick fil A site to actually get the URL for that font. In this case it looks like a CDN CloudFront. No big deal. So when we refresh, now you can see all those beautiful Chick Fil A fonts that line up with the website perfectly, look great inside our app, inside our CMS that we're building. Alright. So now that we're into the fine detail as well, let's let's fix those border radius, those border radii. I never know what to call it. Just get so lost in theming sometimes. So I noticed on the navigation there's a very, so a full border radius, but on some of the other buttons, it is 12 pixels. So we'll just paint those 12 little pixels in there. I I don't like using decimal points in my pixels. Just messes with the whole flow, the whole zen. Alright. So now let's go in and log out so we can check out that login page. This is the public login page. Oh, wow. Is it beautiful? So that is a lovely theme. But, oh, wait. There is one little accident that we need to fix here. So, again, the logo is not displaying on the public login page because it it is hidden by this red background. So we're just gonna pull out that detail brush and just paint in that new CSS and boom, there it is. You can clearly see it now. This is perfect. I really love the feel of this Chick Fil A theme, and I hope you've learned a ton here. Each one of us has a perfect theme inside of us. I'm hoping that through this show, we can help you express that perfect theme. I'll see you next time.",[244],"5719725d-1143-41e9-b94d-80d4e5df80ee",[],{"id":133,"number":134,"show":122,"year":135,"episodes":247},[137,138,139,140,141,142,143,144,145,146,147,148],{"id":143,"slug":249,"vimeo_id":250,"description":251,"tile":252,"length":222,"resources":8,"people":8,"episode_number":155,"published":253,"title":254,"video_transcript_html":255,"video_transcript_text":256,"content":8,"seo":8,"status":130,"episode_people":257,"recommendations":259,"season":260},"friends-theme","931466342","Step into Bry's studio for a splash of '90s nostalgia as he brews a Central Perk theme, rich with the essence of our favorite TV coffee shop.","07645337-6064-4baf-99de-a3dbece7c73a","2024-05-06","Central Perk (Coffee is Better with Friends)","\u003Cp>Speaker 0: Hi, friends. Welcome back to the show. I'm your host, Bry Ross. And today, we're gonna take an extra special trip back to the nineties with you, our friends and friends. Alright.\u003C/p>\u003Cp>So we're gonna be painting a beautiful Central Perk Coffee Company theme. Alright. So let's dive into our theme. 1st, gonna pull up our project settings and we're going to adjust those. Just a quick little project name and description.\u003C/p>\u003Cp>Your friend's coffee shop. What could be more beautiful for a project descriptor? Alright. So we're gonna paste the URL in there, and we can see that project settings, our name, and descriptor up there at the top. I like to pronounce it descriptor.\u003C/p>\u003Cp>Makes it sound like Thor. Very powerful. But the effect that themes can have are are very powerful, especially on your users. Alright. So let's pull up our color, and we're just gonna for our project color, we're gonna grab that green from the Central Perk logo.\u003C/p>\u003Cp>Now that's a good project color. Next, let's add a public foreground and public background. So we'll just look for Central Perk and see if we can just grab a good looking image from from all of our friends here. We're just gonna spread that across the entire background And for the public foreground, we'll just use the same logo. I think that should still look really nice on the login page, don't you?\u003C/p>\u003Cp>Yeah. Great. Now all these techniques that you see me using, you can use these yourself. There's nothing holding you back. You've got the tools.\u003C/p>\u003Cp>Just take the first step. Alright. So we're gonna paint in that first note, that public note. We've got our favicon and now we're ready to start theming. Alright.\u003C/p>\u003Cp>So I really like this walnut light, walnut brown, this almond beige color. Let's use that for our modules background. So we'll just paint that in there at the top. One thing I do see though, I want I want this to match all the way up and down, so I'm just going to paint a couple strokes there. We're just going to look for our background color.\u003C/p>\u003Cp>I see that's the project color. We need to fix that, so we're going to go into our custom CSS and just add a little dot module dash bar dash logo class. Make that background transparent. Now you see it. Now you don't.\u003C/p>\u003Cp>Boom. Looks great. Alright. So now for our icons in that module bar, what I wanna do, I wanna be heavy handed. I'm still gonna use light strokes for this, but I am going to try and pick up a, like, a darker brown.\u003C/p>\u003Cp>I I'm almost thinking they've got one here on the website, but, I I just don't see it. Right. Let's just try a black and see how that works. So we'll just go paint in a black. It's too much contrast.\u003C/p>\u003Cp>It doesn't give me those warm feelings of a coffee shop that I'm looking for. So let's pull this brown from this wood image. Now one of the other tools that I use, Color Slurp, Terrible name. Great product though. Being able to just copy those hex codes for for everything you see on your screen.\u003C/p>\u003Cp>Great tool. Stores all those hex codes as well and then you can quickly bang those in your keyboard. Alright. So next, what we wanna do is we wanna control our list, our sidebar here. So let's add a background to this.\u003C/p>\u003Cp>And for this, I'm gonna use a little tool that I like. We're going to look for the Essential Perk couch color because if you remember inside this coffee shop there's a big couch that just takes up all the area. So we're gonna lift this orange couch and make it our background. Is it weird? Maybe a little bit, but for you folks who didn't live through the 90s, they were a weird time as well.\u003C/p>\u003Cp>So let's let's lean into it and and embrace the journey, see where this theme takes us. A little unorthodox mixing colors like this. But with your tools at your side, enjoy in your heart. You can make any theme work. That looks good.\u003C/p>\u003Cp>So now we've got a nice separation there. Let's resolve the icons here. So again, having those set to the project color of green might not be the best idea. I'm just going to take that detail brush, paint in some foreground, just a white foreground. Let's go in and let's try and make this look like a cloth texture as much as we can.\u003C/p>\u003Cp>So I'm just going to use a little pattern monster here. We're going to find a pattern. Just gonna keep keep looking through our patterns until we find something that we like. Just just browse those patterns. Do we find a pattern that we like?\u003C/p>\u003Cp>This adjoined diamond pattern reminds me of my grandmother's couch and her kitchen floor at the same time. Amazing. Alright. So let's use that same orange base color and we're just going to dial back the opacity here. And then also on the other overlay, Let's just switch that from white to black and again we're gonna dial in that opacity.\u003C/p>\u003Cp>Now I think this is a subtle effect that kind of gives a texture there. Alright. So we're just gonna paint the rest of that in. And, okay. We'll dial back that opacity a little bit just to give this a little more subtle effect.\u003C/p>\u003Cp>And now I'm going to pull out that palette knife and we're just going to paste this in. We're gonna pull up that CSS. We're gonna copy the URL portion. So we've got our data URI. We're just gonna paste that into the background and just bring that all the way down.\u003C/p>\u003Cp>Alright. So now we've got this orange symbolic couch in the middle of our theme. Alright. So if we go into our background, we want to add a subtle background, that stark contrast between the white and the orange. There's opportunity there.\u003C/p>\u003Cp>So we're just gonna dial that in a little bit. Again, we're gonna use our color mix. Just paint that in. We're gonna blend that almond with 80% white. And we get this soft beige.\u003C/p>\u003Cp>Just invites you in like a warm cup of coffee in the morning. Now the last thing that we wanna do is dial in our fonts. We're just gonna pull this up. We've got a custom font here that looks like a scribble. I quite like this effect.\u003C/p>\u003Cp>So we're just gonna go in to our font face, add that there, and then we're just gonna paint this on. Paint in a little family. We're going to call it friends. We're going to paint call it friends. Yeah.\u003C/p>\u003Cp>That's nice. Alright. Use a light touch. Very important. You wanna have a handy hand, heavy hand in this.\u003C/p>\u003Cp>All right. So then we're going to go into our fonts under display, and we're just going to go friends. Just going to add friends in there. Now we can see that at the top and just adjust it a little bit. There we go.\u003C/p>\u003Cp>And now we have our coffee shop theme. We have our friends and the couch in the middle and everything is right. Just like it was in the 1990s. All right. Let's take a look at our public sign in page and while we have our central perk theme.\u003C/p>\u003Cp>That's it for this episode of the joy of theming. Thank you for joining me. It's through your support that we can continue teaching techniques to help everyone theme. Each of us has a perfect theme inside of us. It's time to let yours out.\u003C/p>\u003Cp>We'll see you.\u003C/p>","Hi, friends. Welcome back to the show. I'm your host, Bry Ross. And today, we're gonna take an extra special trip back to the nineties with you, our friends and friends. Alright. So we're gonna be painting a beautiful Central Perk Coffee Company theme. Alright. So let's dive into our theme. 1st, gonna pull up our project settings and we're going to adjust those. Just a quick little project name and description. Your friend's coffee shop. What could be more beautiful for a project descriptor? Alright. So we're gonna paste the URL in there, and we can see that project settings, our name, and descriptor up there at the top. I like to pronounce it descriptor. Makes it sound like Thor. Very powerful. But the effect that themes can have are are very powerful, especially on your users. Alright. So let's pull up our color, and we're just gonna for our project color, we're gonna grab that green from the Central Perk logo. Now that's a good project color. Next, let's add a public foreground and public background. So we'll just look for Central Perk and see if we can just grab a good looking image from from all of our friends here. We're just gonna spread that across the entire background And for the public foreground, we'll just use the same logo. I think that should still look really nice on the login page, don't you? Yeah. Great. Now all these techniques that you see me using, you can use these yourself. There's nothing holding you back. You've got the tools. Just take the first step. Alright. So we're gonna paint in that first note, that public note. We've got our favicon and now we're ready to start theming. Alright. So I really like this walnut light, walnut brown, this almond beige color. Let's use that for our modules background. So we'll just paint that in there at the top. One thing I do see though, I want I want this to match all the way up and down, so I'm just going to paint a couple strokes there. We're just going to look for our background color. I see that's the project color. We need to fix that, so we're going to go into our custom CSS and just add a little dot module dash bar dash logo class. Make that background transparent. Now you see it. Now you don't. Boom. Looks great. Alright. So now for our icons in that module bar, what I wanna do, I wanna be heavy handed. I'm still gonna use light strokes for this, but I am going to try and pick up a, like, a darker brown. I I'm almost thinking they've got one here on the website, but, I I just don't see it. Right. Let's just try a black and see how that works. So we'll just go paint in a black. It's too much contrast. It doesn't give me those warm feelings of a coffee shop that I'm looking for. So let's pull this brown from this wood image. Now one of the other tools that I use, Color Slurp, Terrible name. Great product though. Being able to just copy those hex codes for for everything you see on your screen. Great tool. Stores all those hex codes as well and then you can quickly bang those in your keyboard. Alright. So next, what we wanna do is we wanna control our list, our sidebar here. So let's add a background to this. And for this, I'm gonna use a little tool that I like. We're going to look for the Essential Perk couch color because if you remember inside this coffee shop there's a big couch that just takes up all the area. So we're gonna lift this orange couch and make it our background. Is it weird? Maybe a little bit, but for you folks who didn't live through the 90s, they were a weird time as well. So let's let's lean into it and and embrace the journey, see where this theme takes us. A little unorthodox mixing colors like this. But with your tools at your side, enjoy in your heart. You can make any theme work. That looks good. So now we've got a nice separation there. Let's resolve the icons here. So again, having those set to the project color of green might not be the best idea. I'm just going to take that detail brush, paint in some foreground, just a white foreground. Let's go in and let's try and make this look like a cloth texture as much as we can. So I'm just going to use a little pattern monster here. We're going to find a pattern. Just gonna keep keep looking through our patterns until we find something that we like. Just just browse those patterns. Do we find a pattern that we like? This adjoined diamond pattern reminds me of my grandmother's couch and her kitchen floor at the same time. Amazing. Alright. So let's use that same orange base color and we're just going to dial back the opacity here. And then also on the other overlay, Let's just switch that from white to black and again we're gonna dial in that opacity. Now I think this is a subtle effect that kind of gives a texture there. Alright. So we're just gonna paint the rest of that in. And, okay. We'll dial back that opacity a little bit just to give this a little more subtle effect. And now I'm going to pull out that palette knife and we're just going to paste this in. We're gonna pull up that CSS. We're gonna copy the URL portion. So we've got our data URI. We're just gonna paste that into the background and just bring that all the way down. Alright. So now we've got this orange symbolic couch in the middle of our theme. Alright. So if we go into our background, we want to add a subtle background, that stark contrast between the white and the orange. There's opportunity there. So we're just gonna dial that in a little bit. Again, we're gonna use our color mix. Just paint that in. We're gonna blend that almond with 80% white. And we get this soft beige. Just invites you in like a warm cup of coffee in the morning. Now the last thing that we wanna do is dial in our fonts. We're just gonna pull this up. We've got a custom font here that looks like a scribble. I quite like this effect. So we're just gonna go in to our font face, add that there, and then we're just gonna paint this on. Paint in a little family. We're going to call it friends. We're going to paint call it friends. Yeah. That's nice. Alright. Use a light touch. Very important. You wanna have a handy hand, heavy hand in this. All right. So then we're going to go into our fonts under display, and we're just going to go friends. Just going to add friends in there. Now we can see that at the top and just adjust it a little bit. There we go. And now we have our coffee shop theme. We have our friends and the couch in the middle and everything is right. Just like it was in the 1990s. All right. Let's take a look at our public sign in page and while we have our central perk theme. That's it for this episode of the joy of theming. Thank you for joining me. It's through your support that we can continue teaching techniques to help everyone theme. Each of us has a perfect theme inside of us. It's time to let yours out. We'll see you.",[258],"9ecd99df-4e5f-47a3-be7c-15e6247fd8de",[],{"id":133,"number":134,"show":122,"year":135,"episodes":261},[137,138,139,140,141,142,143,144,145,146,147,148],{"id":144,"slug":263,"vimeo_id":264,"description":265,"tile":266,"length":222,"resources":8,"people":8,"episode_number":238,"published":267,"title":268,"video_transcript_html":269,"video_transcript_text":270,"content":8,"seo":8,"status":130,"episode_people":271,"recommendations":273,"season":274},"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","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.",[272],"bf6cdff4-f3b9-4b6d-8b29-5cca5bf1f75e",[],{"id":133,"number":134,"show":122,"year":135,"episodes":275},[137,138,139,140,141,142,143,144,145,146,147,148],{"id":145,"slug":277,"vimeo_id":278,"description":279,"tile":280,"length":238,"resources":8,"people":8,"episode_number":222,"published":281,"title":282,"video_transcript_html":283,"video_transcript_text":284,"content":8,"seo":8,"status":130,"episode_people":285,"recommendations":287,"season":288},"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.",[286],"de94847e-19bc-4892-a14e-f465a0917f4e",[],{"id":133,"number":134,"show":122,"year":135,"episodes":289},[137,138,139,140,141,142,143,144,145,146,147,148],{"id":146,"slug":291,"vimeo_id":292,"description":293,"tile":294,"length":295,"resources":8,"people":8,"episode_number":295,"published":296,"title":297,"video_transcript_html":298,"video_transcript_text":299,"content":8,"seo":8,"status":130,"episode_people":300,"recommendations":302,"season":303},"tesla-theme","931477106","Charge up your canvas and join Bry as teaches you how you paint an electrifying Directus theme for car maker Tesla.","cbf65318-3f34-4efb-99a1-e240228041fb",10,"2024-05-27","Tesla (Simply Electric)","\u003Cp>Speaker 0: Hi. Welcome back to the show. I was just reading some more fan mail. I thought maybe we'd answer a question before we dive into the actual theme today. Dear Bry, how did you get your signature locks?\u003C/p>\n\u003Cp>Love, Matt. Your biggest fan. Well, Matt, I could tell you that, but I'd have to kill you. No, I'm just kidding. Only slightly.\u003C/p>\n\u003Cp>No, I've I've really kidding. No, I was once at a friend's house, you might know him. His name is, Chuck Norris. And Chuck and I were in a heated battle of Jenga, and the loser had to get a perm. And unfortunately, I toppled 1 too many blocks too fast.\u003C/p>\n\u003Cp>And here we are. Signature perm in check. It's worked in my favor, though, I think. Right. So today, we're gonna be painting a lovely theme for a lovely company and one of the richest men in the world.\u003C/p>\n\u003Cp>Now, I have not a lot of need for money. I'm very happy with just painting beautiful themes. But, mister Musk, if you're watching this, Brian Ross could use a Tesla to get to and from the office. Maybe we can work on that. Let's dive in.\u003C/p>\n\u003Cp>Alright. So let's cover a few tools of the trade. Right? We've got our trusty Logitech MX Keys keyboard. We've got a firm palette knife.\u003C/p>\n\u003Cp>This is great for painting broad strokes. And then we have our trusty half inch brush. Now you wanna hold that at 10 and 2 just like a steering wheel and that way you can get a good grip on your brush. So we're just gonna dive in. We've already added our project settings and looking at the Tesla website it's very very text heavy.\u003C/p>\n\u003Cp>So let's search for Tesla branding guidelines and see if we can find some logos that we can use. Now, I I do like the website. It's got a clean appearance. I I love lots of white space in my websites, especially in my themes. A good calm theme is great.\u003C/p>\n\u003Cp>Alright. So now we've got the Tesla logos. Let's just import those. We'll upload those here. Upload file to device.\u003C/p>\n\u003Cp>Just zip that over there. Just zip it. Alright. So we've got the project logo. That's gonna be white.\u003C/p>\n\u003Cp>Okay. We're gonna use the public foreground. That's great. And for our public background one of the, little known things inside your Directus CMS or back end whatever you're using Directus for you can use videos as the public background now this doesn't break the laws of theming. This is just a 4th dimension to that.\u003C/p>\n\u003Cp>It really makes your login page pop. So we'll just add a public note, welcome to the Tesla CMS plus the PIN. I swear we're gonna store all of our information. We've gotta make sure it's beautiful. Alright, so we'll look for our favicon.\u003C/p>\n\u003Cp>There it is. We're just gonna take that, save it out, just just a little save action and upload to device. If we really want to get fancy with it, we could just paint it on. Alright, so now we've saved this we've got our basic branding in here, but when I look at the Tesla website you know I'm thinking what could this theme be? You know, one of the things that I always consider when I'm theming is is this a dark theme?\u003C/p>\n\u003Cp>Is it a light theme? And in this case, I think we need to go dark. Now, I usually like to paint positive happy themes with bright colors, but sometimes there's no substitute for a great dark theme. Full of soul. Alright, so this is a great base.\u003C/p>\n\u003Cp>The Directus default dark theme provides a good look for theming, but let's add in that Tesla red. Let's make this thing pop. So for our project color, we're gonna change this to the Tesla red. So I'm just gonna take and carefully enter that with a half inch brush. This is an advanced technique so really pay attention.\u003C/p>\n\u003Cp>Just use that half inch brush to enter those hex codes. It's, it takes a little while to master that but I know you'll get the hang of it. Alright. So one of the other subtle effects that I see here, when they offer merch here on the Tesla web site, you got this nice grid, dot pattern background. I love texture.\u003C/p>\n\u003Cp>Texture just adds another element to blend everything harmoniously together into just the most wonderful theme. Alright, so we're going to go in and let's see if we can't find some of these colors that we're working with. Alright, so we're gonna use this dotted grid. We're just gonna paint that into our background accent color. Great.\u003C/p>\n\u003Cp>You can see we've got a a great looking sidebar or module navigation. But the next thing I'm gonna do is go into our navigation and I'm gonna dial in our background. We're gonna use the theme background color. Not not the correct variable. There we go.\u003C/p>\n\u003Cp>Alright. So now this is one color of black. It's a very dark black like a midnight. Looks great. But what we want to do is we want to add that dot pattern background.\u003C/p>\n\u003Cp>So let's just look through the document, see if we can find that. There it is. We have found it. Let's see the styles that are being applied. Right?\u003C/p>\n\u003Cp>So we're just gonna take this and we're going to convert it into a single background property. Now the navigation background can support patterns using SVG or data URLs and, we can also add gradients in. And again, anytime you're doing a lot of theming, you're switching colors, make sure that you just get in there with the dust or Dust the demons out of it. But make sure you don't ever turn your duster upside down because that that will make it freeze. It'll potentially explode.\u003C/p>\n\u003Cp>You don't want that. Alright, so now we're just going to add, negative 20 pixel offset and a little extra pixel inset and, that looks really great. So now we've got that subtle grid effect. This is this is a beautiful, beautiful theme. This is really what I was hoping for.\u003C/p>\n\u003Cp>Sometimes dark themes can be some of the most enlightening themes to paint. You're doing great, by the way. Alright. So now let's add some Tesla fonts. So we can see we've got a Gotham SS m font.\u003C/p>\n\u003Cp>If we take a look and we go through the network tab, we can see where these actual fonts are coming from. Alright. So now we're just going to, try to copy those and paint those in here. We'll search and see if we've got any font face definitions that we can already just use, but it doesn't look like it. So what we're gonna do, we're just gonna copy, and we're going to paste into our custom CSS.\u003C/p>\n\u003Cp>Now, you can get most of your theming done inside the dark or light theme customization, but sometimes you need to reach for a little extra power. That's where this custom CSS comes in. You just spread on a nice little font face property here. We're gonna use Gotham for the name. We'll add that source URL.\u003C/p>\n\u003Cp>We'll go in and paint our fonts for the dark theme customization. Just call this Gotham, kinda like Batman. Always loved that one line that he delivers in the movie. Justice never sleeps. Alright.\u003C/p>\n\u003Cp>Okay. So we'll just dial that back. That's great. The last thing that we need to do here is basically to fix this font. We want to make it all uppercase.\u003C/p>\n\u003Cp>It has to be all uppercase. So we're just gonna go in and just add a little type title. And now I'm gonna go in and just paint a little text transform in there. Just blend that text transform. Just a little up.\u003C/p>\n\u003Cp>Just keep going up until you get it all uppercase. Great job. Amazing. Alright. So this is looking like a beautiful theme.\u003C/p>\n\u003Cp>Let's just check it out. We've got all of our vehicles. It's beautiful. Great theme. Alright.\u003C/p>\n\u003Cp>So we're gonna log out, check out our public login page and wow, does that video ever make this pop? Doesn't that make you just feel like you need to be in a Tesla? I know it does me. So thank you for joining this episode of The Joy of Theming. We've got some extra special tips and techniques for painting beautiful, beautiful themes.\u003C/p>","Hi. Welcome back to the show. I was just reading some more fan mail. I thought maybe we'd answer a question before we dive into the actual theme today. Dear Bry, how did you get your signature locks? Love, Matt. Your biggest fan. Well, Matt, I could tell you that, but I'd have to kill you. No, I'm just kidding. Only slightly. No, I've I've really kidding. No, I was once at a friend's house, you might know him. His name is, Chuck Norris. And Chuck and I were in a heated battle of Jenga, and the loser had to get a perm. And unfortunately, I toppled 1 too many blocks too fast. And here we are. Signature perm in check. It's worked in my favor, though, I think. Right. So today, we're gonna be painting a lovely theme for a lovely company and one of the richest men in the world. Now, I have not a lot of need for money. I'm very happy with just painting beautiful themes. But, mister Musk, if you're watching this, Brian Ross could use a Tesla to get to and from the office. Maybe we can work on that. Let's dive in. Alright. So let's cover a few tools of the trade. Right? We've got our trusty Logitech MX Keys keyboard. We've got a firm palette knife. This is great for painting broad strokes. And then we have our trusty half inch brush. Now you wanna hold that at 10 and 2 just like a steering wheel and that way you can get a good grip on your brush. So we're just gonna dive in. We've already added our project settings and looking at the Tesla website it's very very text heavy. So let's search for Tesla branding guidelines and see if we can find some logos that we can use. Now, I I do like the website. It's got a clean appearance. I I love lots of white space in my websites, especially in my themes. A good calm theme is great. Alright. So now we've got the Tesla logos. Let's just import those. We'll upload those here. Upload file to device. Just zip that over there. Just zip it. Alright. So we've got the project logo. That's gonna be white. Okay. We're gonna use the public foreground. That's great. And for our public background one of the, little known things inside your Directus CMS or back end whatever you're using Directus for you can use videos as the public background now this doesn't break the laws of theming. This is just a 4th dimension to that. It really makes your login page pop. So we'll just add a public note, welcome to the Tesla CMS plus the PIN. I swear we're gonna store all of our information. We've gotta make sure it's beautiful. Alright, so we'll look for our favicon. There it is. We're just gonna take that, save it out, just just a little save action and upload to device. If we really want to get fancy with it, we could just paint it on. Alright, so now we've saved this we've got our basic branding in here, but when I look at the Tesla website you know I'm thinking what could this theme be? You know, one of the things that I always consider when I'm theming is is this a dark theme? Is it a light theme? And in this case, I think we need to go dark. Now, I usually like to paint positive happy themes with bright colors, but sometimes there's no substitute for a great dark theme. Full of soul. Alright, so this is a great base. The Directus default dark theme provides a good look for theming, but let's add in that Tesla red. Let's make this thing pop. So for our project color, we're gonna change this to the Tesla red. So I'm just gonna take and carefully enter that with a half inch brush. This is an advanced technique so really pay attention. Just use that half inch brush to enter those hex codes. It's, it takes a little while to master that but I know you'll get the hang of it. Alright. So one of the other subtle effects that I see here, when they offer merch here on the Tesla web site, you got this nice grid, dot pattern background. I love texture. Texture just adds another element to blend everything harmoniously together into just the most wonderful theme. Alright, so we're going to go in and let's see if we can't find some of these colors that we're working with. Alright, so we're gonna use this dotted grid. We're just gonna paint that into our background accent color. Great. You can see we've got a a great looking sidebar or module navigation. But the next thing I'm gonna do is go into our navigation and I'm gonna dial in our background. We're gonna use the theme background color. Not not the correct variable. There we go. Alright. So now this is one color of black. It's a very dark black like a midnight. Looks great. But what we want to do is we want to add that dot pattern background. So let's just look through the document, see if we can find that. There it is. We have found it. Let's see the styles that are being applied. Right? So we're just gonna take this and we're going to convert it into a single background property. Now the navigation background can support patterns using SVG or data URLs and, we can also add gradients in. And again, anytime you're doing a lot of theming, you're switching colors, make sure that you just get in there with the dust or Dust the demons out of it. But make sure you don't ever turn your duster upside down because that that will make it freeze. It'll potentially explode. You don't want that. Alright, so now we're just going to add, negative 20 pixel offset and a little extra pixel inset and, that looks really great. So now we've got that subtle grid effect. This is this is a beautiful, beautiful theme. This is really what I was hoping for. Sometimes dark themes can be some of the most enlightening themes to paint. You're doing great, by the way. Alright. So now let's add some Tesla fonts. So we can see we've got a Gotham SS m font. If we take a look and we go through the network tab, we can see where these actual fonts are coming from. Alright. So now we're just going to, try to copy those and paint those in here. We'll search and see if we've got any font face definitions that we can already just use, but it doesn't look like it. So what we're gonna do, we're just gonna copy, and we're going to paste into our custom CSS. Now, you can get most of your theming done inside the dark or light theme customization, but sometimes you need to reach for a little extra power. That's where this custom CSS comes in. You just spread on a nice little font face property here. We're gonna use Gotham for the name. We'll add that source URL. We'll go in and paint our fonts for the dark theme customization. Just call this Gotham, kinda like Batman. Always loved that one line that he delivers in the movie. Justice never sleeps. Alright. Okay. So we'll just dial that back. That's great. The last thing that we need to do here is basically to fix this font. We want to make it all uppercase. It has to be all uppercase. So we're just gonna go in and just add a little type title. And now I'm gonna go in and just paint a little text transform in there. Just blend that text transform. Just a little up. Just keep going up until you get it all uppercase. Great job. Amazing. Alright. So this is looking like a beautiful theme. Let's just check it out. We've got all of our vehicles. It's beautiful. Great theme. Alright. So we're gonna log out, check out our public login page and wow, does that video ever make this pop? Doesn't that make you just feel like you need to be in a Tesla? I know it does me. So thank you for joining this episode of The Joy of Theming. We've got some extra special tips and techniques for painting beautiful, beautiful themes.",[301],"2b58734a-bc15-4b6a-be98-4ff372e66fab",[],{"id":133,"number":134,"show":122,"year":135,"episodes":304},[137,138,139,140,141,142,143,144,145,146,147,148],{"id":147,"slug":306,"vimeo_id":307,"description":308,"tile":309,"length":222,"resources":8,"people":8,"episode_number":310,"published":311,"title":312,"video_transcript_html":313,"video_transcript_text":314,"content":8,"seo":315,"status":130,"episode_people":316,"recommendations":318,"season":319},"think-different","941259359","Designed by Bry Ross in California. Time to join your favorite theme guru for an exercise in simplistic theming as he delivers a captivating Apple theme.","78d093b5-7e1e-4833-a1eb-10ac46686dbe",11,"2024-06-03","Apple (Think Different)","\u003Cp>Speaker 0: Welcome back to the show. I'm your host, Bry Ross. I thought you might join me with just a little breathing exercise before we theme today, just to bring us all down to the baseline vibration that we wanna be on when theming. Care to join me? Great.\u003C/p>\u003Cp>Alright. So let's take a deep breath in and out. That's perfect. Right. Let's dive into our theme today.\u003C/p>\u003Cp>Today we are going to be painting a beautiful apple theme. So I always start any project. Couple things. We want to make sure that we've got a properly prepared canvas. And for us, that means we've gotta have a nice data model with some data in there.\u003C/p>\u003Cp>If you don't have any sample data, you need some. Theming, you gotta be prepared. You gotta have that base layer to really properly theme. And then I always set up the project settings. So now that we've got that out of the way, we can go in and start theming.\u003C/p>\u003Cp>So let's go in and just take this Apple logo, looks like it's an SVG. For whatever reason, it's really hard save SVGs that are embedded. So I'm going to open up Versus Code. We're just going to save this SVG out to a file and then we're gonna import that, upload it into this particular project. Alright.\u003C/p>\u003Cp>So we're gonna save that and just paint that project logo on there. Looking great. Looking great. Apple logo. Amazing.\u003C/p>\u003Cp>Alright. For our public foreground, what are we gonna do? We're gonna do the same thing. We wanna use the Apple logo. I don't see any text with Apple on it, so we're just gonna use that same bit.\u003C/p>\u003Cp>I'm gonna take and pinch my palette knife and just dab that logo on the public foreground there. Again, advanced technique, work your way up to it. But just this dabbing and just a little turn can get you great results in your themes. Alright, so next little known fact, but you can include MP 4 files as a public background. So static images, great.\u003C/p>\u003Cp>Beautiful. Videos, even more. Wow. Really upped the wow factor on that. Makes you feel really welcoming when you log in and see a publicly beautiful log in page.\u003C/p>\u003Cp>Alright. So now we're just going to save a little bit. We've got got the basics of our theme. We've got our brand in tact. Now we just want to pull this theme out of the Apple website, out of our psyche, out of our out of our chi.\u003C/p>\u003Cp>And we're gonna do this using the directest minimal base theme. Lots of white space, lots of white space. We've got lots of, room to breathe here and that's really what Apple does well. Inside their design, lots of webs with these. They let the products shine.\u003C/p>\u003Cp>Alright. So we're gonna go into our modules now and let's just remove all the borders. I'm seeing this. I'm seeing the vision. We're not gonna have any borders on this.\u003C/p>\u003Cp>So we're just gonna paint over all those pretty borders. Great. Great. Looks really good. Okay.\u003C/p>\u003Cp>This looks really solid. Alright. So what I'm gonna do now, I'm looking for this subtle gray background that they use. The hex code is actually f a f a f a. In reverse that's AFAF.\u003C/p>\u003Cp>And this theme is calm AF. Alright so we're gonna go in and I want to adjust the logo bar, module bar logo, so we're just gonna edit our custom CSS there. Just, just give it a little background. Alright. Okay.\u003C/p>\u003Cp>And then anytime you change colors, you definitely wanna dive in and make sure you dust those demons out of it. Make sure those hex codes don't get stuck in your number pad. You really gotta take extra special care of that number pad. Alright, so we're gonna put this down. And now we've got this really nice looking canvas.\u003C/p>\u003Cp>It's all white, except we we've got a little border up there at the tippy top that we want to get rid of. But everything else looks it's really nice. Now one of the other things that I noticed on the Apple website is this large border radius around these cards. So if we look for this we could see the card global corner radius is like 28 pixels. This is rather large, but maybe let's dial it into like 18 pixels and see what that looks like.\u003C/p>\u003Cp>That gives like a nice clean effect. I'm feeling this. Do you feel it? Yes. You're doing great.\u003C/p>\u003Cp>Just keep following along. Let the spirit of the theme guide you to the final output. Alright. So, we're gonna pick up our half inch brush here and we're gonna look to dial in this border width on the project. Just like that.\u003C/p>\u003Cp>Just a quick stroke of your brush. You can blend that in, and there are no mistakes. There's only happy accidents and opportunities to paint a better theme. Alright, so within our header we're also going to look to remove that border so we can see it there inside our CSS properties. Border bottom.\u003C/p>\u003Cp>So we're just going to look for the border width inside the header and there we go. We've got this nice no border subtle effects. It looks great. Alright, so now what do we want to do? We want to take a look at our fonts.\u003C/p>\u003Cp>And we're actually using the system UI fonts. And I'm on a Mac as I paint this beautiful theme so we don't necessarily have to even use a different font. And that probably we cut this part here. I do all this and, get, like, a Kors error for this. So maybe, again, like, we cut this out, cut to some point in the future.\u003C/p>\u003Cp>Where is it? Where are you? Where are you? Cut. This is not gonna work.\u003C/p>\u003Cp>I think I'll find the course issue here. Open up the console. Great. Don't even need it. Can't use that font either.\u003C/p>\u003Cp>Yeah. Unfortunately, nope. Not doing it. System UI. Okay.\u003C/p>\u003Cp>Alright. So now within our SANs family we're just going to use the system UI as well and that should adjust all the labels within our forms to use the system default font. Now there's one other thing that I see that I wanna adjust here which is just this search input. So we're gonna go into our CSS settings here. We're going to go to our light theme customization inside our project and we're gonna change this background normal to the same white Xcode.\u003C/p>\u003Cp>Emphasis. Alright, so this is looking great. We'll just paint on a few final touches of this particular theme and we're gonna log out and we've got this beautiful public login page with a very stunning video for the viewers to log in to. That's it for this episode of The Joy of Theming. I hope you've picked up a few tips and tricks to use in your own themes.\u003C/p>\u003Cp>I'm not an expert, you're the expert. Thanks for following along on this journey. We'll see you.\u003C/p>","Welcome back to the show. I'm your host, Bry Ross. I thought you might join me with just a little breathing exercise before we theme today, just to bring us all down to the baseline vibration that we wanna be on when theming. Care to join me? Great. Alright. So let's take a deep breath in and out. That's perfect. Right. Let's dive into our theme today. Today we are going to be painting a beautiful apple theme. So I always start any project. Couple things. We want to make sure that we've got a properly prepared canvas. And for us, that means we've gotta have a nice data model with some data in there. If you don't have any sample data, you need some. Theming, you gotta be prepared. You gotta have that base layer to really properly theme. And then I always set up the project settings. So now that we've got that out of the way, we can go in and start theming. So let's go in and just take this Apple logo, looks like it's an SVG. For whatever reason, it's really hard save SVGs that are embedded. So I'm going to open up Versus Code. We're just going to save this SVG out to a file and then we're gonna import that, upload it into this particular project. Alright. So we're gonna save that and just paint that project logo on there. Looking great. Looking great. Apple logo. Amazing. Alright. For our public foreground, what are we gonna do? We're gonna do the same thing. We wanna use the Apple logo. I don't see any text with Apple on it, so we're just gonna use that same bit. I'm gonna take and pinch my palette knife and just dab that logo on the public foreground there. Again, advanced technique, work your way up to it. But just this dabbing and just a little turn can get you great results in your themes. Alright, so next little known fact, but you can include MP 4 files as a public background. So static images, great. Beautiful. Videos, even more. Wow. Really upped the wow factor on that. Makes you feel really welcoming when you log in and see a publicly beautiful log in page. Alright. So now we're just going to save a little bit. We've got got the basics of our theme. We've got our brand in tact. Now we just want to pull this theme out of the Apple website, out of our psyche, out of our out of our chi. And we're gonna do this using the directest minimal base theme. Lots of white space, lots of white space. We've got lots of, room to breathe here and that's really what Apple does well. Inside their design, lots of webs with these. They let the products shine. Alright. So we're gonna go into our modules now and let's just remove all the borders. I'm seeing this. I'm seeing the vision. We're not gonna have any borders on this. So we're just gonna paint over all those pretty borders. Great. Great. Looks really good. Okay. This looks really solid. Alright. So what I'm gonna do now, I'm looking for this subtle gray background that they use. The hex code is actually f a f a f a. In reverse that's AFAF. And this theme is calm AF. Alright so we're gonna go in and I want to adjust the logo bar, module bar logo, so we're just gonna edit our custom CSS there. Just, just give it a little background. Alright. Okay. And then anytime you change colors, you definitely wanna dive in and make sure you dust those demons out of it. Make sure those hex codes don't get stuck in your number pad. You really gotta take extra special care of that number pad. Alright, so we're gonna put this down. And now we've got this really nice looking canvas. It's all white, except we we've got a little border up there at the tippy top that we want to get rid of. But everything else looks it's really nice. Now one of the other things that I noticed on the Apple website is this large border radius around these cards. So if we look for this we could see the card global corner radius is like 28 pixels. This is rather large, but maybe let's dial it into like 18 pixels and see what that looks like. That gives like a nice clean effect. I'm feeling this. Do you feel it? Yes. You're doing great. Just keep following along. Let the spirit of the theme guide you to the final output. Alright. So, we're gonna pick up our half inch brush here and we're gonna look to dial in this border width on the project. Just like that. Just a quick stroke of your brush. You can blend that in, and there are no mistakes. There's only happy accidents and opportunities to paint a better theme. Alright, so within our header we're also going to look to remove that border so we can see it there inside our CSS properties. Border bottom. So we're just going to look for the border width inside the header and there we go. We've got this nice no border subtle effects. It looks great. Alright, so now what do we want to do? We want to take a look at our fonts. And we're actually using the system UI fonts. And I'm on a Mac as I paint this beautiful theme so we don't necessarily have to even use a different font. And that probably we cut this part here. I do all this and, get, like, a Kors error for this. So maybe, again, like, we cut this out, cut to some point in the future. Where is it? Where are you? Where are you? Cut. This is not gonna work. I think I'll find the course issue here. Open up the console. Great. Don't even need it. Can't use that font either. Yeah. Unfortunately, nope. Not doing it. System UI. Okay. Alright. So now within our SANs family we're just going to use the system UI as well and that should adjust all the labels within our forms to use the system default font. Now there's one other thing that I see that I wanna adjust here which is just this search input. So we're gonna go into our CSS settings here. We're going to go to our light theme customization inside our project and we're gonna change this background normal to the same white Xcode. Emphasis. Alright, so this is looking great. We'll just paint on a few final touches of this particular theme and we're gonna log out and we've got this beautiful public login page with a very stunning video for the viewers to log in to. That's it for this episode of The Joy of Theming. I hope you've picked up a few tips and tricks to use in your own themes. I'm not an expert, you're the expert. Thanks for following along on this journey. We'll see you.","ee082bea-c80f-4df4-a403-e58c2cc738df",[317],"ee50788f-5581-4a8b-80d1-9987d743b177",[],{"id":133,"number":134,"show":122,"year":135,"episodes":320},[137,138,139,140,141,142,143,144,145,146,147,148],{"id":148,"slug":322,"vimeo_id":323,"description":324,"tile":325,"length":222,"resources":8,"people":8,"episode_number":326,"published":327,"title":328,"video_transcript_html":329,"video_transcript_text":330,"content":8,"seo":331,"status":130,"episode_people":332,"recommendations":334,"season":335},"just-do-it","941267333","It might seem hard to get started theming, but it's important to just do it.  Join the GOAT of theming Bry Ross and he kicks out a fresh theme that captures the essence of footwear and apparel legends – Nike.","c134ca69-4f5a-4f54-9227-4b0160cd08b0",12,"2024-06-10","Nike (Just Do It)","\u003Cp>Speaker 0: Hi. Welcome back. You know, when I do public theming shows, I get a lot of questions from folks. Ask me they say, Bry, how did you learn to paint like this? How did you learn to paint those amazing themes?\u003C/p>\u003Cp>I'll never be able to do that. And I look at them in the face, and I say, look, if I can do this, you can. Just a small town boy from the hills of West Virginia. With enough practice and just a little bit of creativity, you too can paint beautiful themes. Let's dive into today's theme.\u003C/p>\u003Cp>We're gonna be painting a beautiful theme for Nike. We're just gonna do it. Alright. So sizing up their web site. It's got a very, very black and white color palette.\u003C/p>\u003Cp>Just a couple of neutral tones. So this is gonna be a challenging theme. And anytime you're theming, one of the things you have to ask yourself is this a dark theme or is this a light theme and depending on how you're feeling you have to let that theme guide you along the journey. Let's start. So we've got our project settings out of the way.\u003C/p>\u003Cp>Let's look at getting our logo from the Nike website. Using my trusty Logitech keyboard here. Just a solid bit of kit. Really good with the hex codes. Great key action as well.\u003C/p>\u003Cp>Alright So we're gonna take that project logo. Alright. We're just gonna upload this logo. Great. SVG.\u003C/p>\u003Cp>It should be showing my logo there. Not sure what's wrong. Let's let's just keep going with that. Actually, let's go in. We're gonna look for the Nike brand assets and we're gonna download these logos.\u003C/p>\u003Cp>Let's let's grab all these. We need an icon. We'll use the icon for the public favicon, which is, close relative to ShakaCon. And now we'll go in and just copy this link address. We're gonna look for the Nike public foreground background image here.\u003C/p>\u003Cp>Trying to find this background image. Background images are important because that's what people see when they first log in to your Directus project. We want to set a good example, evoke all the proper emotions, and this image of of these soccer players just really drives it home for me. Alright, so still looking to find this particular image. There we go.\u003C/p>\u003Cp>Alright. Sometimes themes are just slow to reveal themselves. Looks like we've got this image. That's what we're gonna use for our public background. That's great.\u003C/p>\u003Cp>Now the last thing that I'm gonna do is just go in and paint some beautiful project logos in here. Of course, we have to unzip the file that we downloaded first to be able to use those. So great. Okay. Alright.\u003C/p>\u003Cp>So we're gonna say welcome to Nike PEM. This is where we're gonna store all of our products so we can distribute that information wherever it needs to be. Alright, let's fix our logo there because there were some issues and now this is looking great. Looking really, really good. Okay.\u003C/p>\u003Cp>Alright. So we'll just extract this. For some reason that's not working. Let's just paint in a new logo there. Just take your time paint in a new logo.\u003C/p>\u003Cp>And I'm using the dark logo because I want to mirror the Nike website. We're gonna use the Directus Minimal theme as our base. Lots of white space, lots of white calm atmosphere. That's what we're looking for out of this theme. We're going to adjust the, logo bar at the top.\u003C/p>\u003Cp>Module bar logo. Don't forget your hyphens. Very important in CSS to have your hyphens. And then we will add background. We'll make that white and we'll make that important.\u003C/p>\u003Cp>Or we could do transparent as well. Either one is gonna work in this case. But if you're adding that important modifier, make sure you hit the keys twice as hard so that it sticks. Alright. This is looking great.\u003C/p>\u003Cp>So we've got a really light, airy theme. It's the tone that we're trying to set. We don't want to get it in your way. We're just gonna let you do it. And that's what we're doing now.\u003C/p>\u003Cp>We're doing this theme together. You're doing great. Keep up the keep up the pace. Alright. So for our background, we're gonna use this subtle gray that they use.\u003C/p>\u003Cp>We're gonna just use that in our list. So this is where our secondary navigation shows up. And one of the things that I want to just remove here is are these borders. They're just, you know, normally, I like a good border to provide separation and contrast, but in this case, it's just it's not calming me down. It's it's adding stress.\u003C/p>\u003Cp>So let's just smooth those rough edges and remove those borders. You know, I don't see very many borders on the Nike website and we shall make it so within our Directus project. It's great. Alright. So now we'll just remove that border from the header.\u003C/p>\u003Cp>Just completely erase that like we had just a magic eraser. Those are great products as well, by the way. Very handy if you had little ones. Alright. So now we've got a great looking base.\u003C/p>\u003Cp>Let's go in and adjust our list view. So we're going to add a different background on hover and active states, just so we get a little bit of separation. Now this is where I really like to use my half inch brush because it's just great for painting all those fine details. You just go up and down and side to side, semicircle left semicircle right and then we're just gonna paint in a little bit of color mix action there to, you know, on hover. That's a pretty good effect.\u003C/p>\u003Cp>Maybe we lighten that just a little bit though. I like that effect. I like it. Just happy thoughts. Thoughts, just happy themes, lots of color mixing.\u003C/p>\u003Cp>Let the colors mix and match themselves into whatever form, shape, or fashion they need to be in. Wow. Okay. This is this has a really calming effect. Looks great.\u003C/p>\u003Cp>Alright. So we're gonna dive back into our customization. We're gonna go into our buttons under the module navigation and we're just going to set our project color and we really want to drive home to the user what page they're currently on, what module are they using. And there's nothing better than stark contrast to do that. So it's very clear now which module you're in and it it doesn't take away from the rest of the theme.\u003C/p>\u003Cp>It adds to it. Blends together harmoniously. Alright. So we're just gonna go in and, make a few time final tweaks to this with our half inch brush. We're just gonna adjust our background, our borders just a little bit.\u003C/p>\u003Cp>That's great. Looks great. Okay. Alright. Now, typography is everything to a theme.\u003C/p>\u003Cp>Good typography can elevate a theme. Just pass Mount Olympus. So what we're gonna do is copy this Nike Futura. Futura? Futura?\u003C/p>\u003Cp>I I don't know. Whatever it is I like it. It's a good font. So we're going to use a little font face rules here and then we're gonna use that palette knife. We're gonna be a little thicker here.\u003C/p>\u003Cp>We're just gonna paint that in. Paint that broad stroke in there, paint that broad theme in there. Great. So now we've got that strong bold headline up at the top that that boldly announces where we're at on the on the director's project. But there's one final touch, one final piece de resistance that we have to add to this.\u003C/p>\u003Cp>We're just gonna add type title, so we're gonna use that class. Just do a little text transform action and voila. Now we have the perfect Nike theme. That completes this wonderful theme, and thank you for joining me. This has been such a wonderful journey in theme building.\u003C/p>\u003Cp>We don't always have to use bright colors to have a bright impact. I hope to see you on the next episode. Bye bye.\u003C/p>","Hi. Welcome back. You know, when I do public theming shows, I get a lot of questions from folks. Ask me they say, Bry, how did you learn to paint like this? How did you learn to paint those amazing themes? I'll never be able to do that. And I look at them in the face, and I say, look, if I can do this, you can. Just a small town boy from the hills of West Virginia. With enough practice and just a little bit of creativity, you too can paint beautiful themes. Let's dive into today's theme. We're gonna be painting a beautiful theme for Nike. We're just gonna do it. Alright. So sizing up their web site. It's got a very, very black and white color palette. Just a couple of neutral tones. So this is gonna be a challenging theme. And anytime you're theming, one of the things you have to ask yourself is this a dark theme or is this a light theme and depending on how you're feeling you have to let that theme guide you along the journey. Let's start. So we've got our project settings out of the way. Let's look at getting our logo from the Nike website. Using my trusty Logitech keyboard here. Just a solid bit of kit. Really good with the hex codes. Great key action as well. Alright So we're gonna take that project logo. Alright. We're just gonna upload this logo. Great. SVG. It should be showing my logo there. Not sure what's wrong. Let's let's just keep going with that. Actually, let's go in. We're gonna look for the Nike brand assets and we're gonna download these logos. Let's let's grab all these. We need an icon. We'll use the icon for the public favicon, which is, close relative to ShakaCon. And now we'll go in and just copy this link address. We're gonna look for the Nike public foreground background image here. Trying to find this background image. Background images are important because that's what people see when they first log in to your Directus project. We want to set a good example, evoke all the proper emotions, and this image of of these soccer players just really drives it home for me. Alright, so still looking to find this particular image. There we go. Alright. Sometimes themes are just slow to reveal themselves. Looks like we've got this image. That's what we're gonna use for our public background. That's great. Now the last thing that I'm gonna do is just go in and paint some beautiful project logos in here. Of course, we have to unzip the file that we downloaded first to be able to use those. So great. Okay. Alright. So we're gonna say welcome to Nike PEM. This is where we're gonna store all of our products so we can distribute that information wherever it needs to be. Alright, let's fix our logo there because there were some issues and now this is looking great. Looking really, really good. Okay. Alright. So we'll just extract this. For some reason that's not working. Let's just paint in a new logo there. Just take your time paint in a new logo. And I'm using the dark logo because I want to mirror the Nike website. We're gonna use the Directus Minimal theme as our base. Lots of white space, lots of white calm atmosphere. That's what we're looking for out of this theme. We're going to adjust the, logo bar at the top. Module bar logo. Don't forget your hyphens. Very important in CSS to have your hyphens. And then we will add background. We'll make that white and we'll make that important. Or we could do transparent as well. Either one is gonna work in this case. But if you're adding that important modifier, make sure you hit the keys twice as hard so that it sticks. Alright. This is looking great. So we've got a really light, airy theme. It's the tone that we're trying to set. We don't want to get it in your way. We're just gonna let you do it. And that's what we're doing now. We're doing this theme together. You're doing great. Keep up the keep up the pace. Alright. So for our background, we're gonna use this subtle gray that they use. We're gonna just use that in our list. So this is where our secondary navigation shows up. And one of the things that I want to just remove here is are these borders. They're just, you know, normally, I like a good border to provide separation and contrast, but in this case, it's just it's not calming me down. It's it's adding stress. So let's just smooth those rough edges and remove those borders. You know, I don't see very many borders on the Nike website and we shall make it so within our Directus project. It's great. Alright. So now we'll just remove that border from the header. Just completely erase that like we had just a magic eraser. Those are great products as well, by the way. Very handy if you had little ones. Alright. So now we've got a great looking base. Let's go in and adjust our list view. So we're going to add a different background on hover and active states, just so we get a little bit of separation. Now this is where I really like to use my half inch brush because it's just great for painting all those fine details. You just go up and down and side to side, semicircle left semicircle right and then we're just gonna paint in a little bit of color mix action there to, you know, on hover. That's a pretty good effect. Maybe we lighten that just a little bit though. I like that effect. I like it. Just happy thoughts. Thoughts, just happy themes, lots of color mixing. Let the colors mix and match themselves into whatever form, shape, or fashion they need to be in. Wow. Okay. This is this has a really calming effect. Looks great. Alright. So we're gonna dive back into our customization. We're gonna go into our buttons under the module navigation and we're just going to set our project color and we really want to drive home to the user what page they're currently on, what module are they using. And there's nothing better than stark contrast to do that. So it's very clear now which module you're in and it it doesn't take away from the rest of the theme. It adds to it. Blends together harmoniously. Alright. So we're just gonna go in and, make a few time final tweaks to this with our half inch brush. We're just gonna adjust our background, our borders just a little bit. That's great. Looks great. Okay. Alright. Now, typography is everything to a theme. Good typography can elevate a theme. Just pass Mount Olympus. So what we're gonna do is copy this Nike Futura. Futura? Futura? I I don't know. Whatever it is I like it. It's a good font. So we're going to use a little font face rules here and then we're gonna use that palette knife. We're gonna be a little thicker here. We're just gonna paint that in. Paint that broad stroke in there, paint that broad theme in there. Great. So now we've got that strong bold headline up at the top that that boldly announces where we're at on the on the director's project. But there's one final touch, one final piece de resistance that we have to add to this. We're just gonna add type title, so we're gonna use that class. Just do a little text transform action and voila. Now we have the perfect Nike theme. That completes this wonderful theme, and thank you for joining me. This has been such a wonderful journey in theme building. We don't always have to use bright colors to have a bright impact. I hope to see you on the next episode. Bye bye.","597ace33-814f-4b7d-ad60-56fac119e49d",[333],"022c239d-4b4b-41a4-868c-1988fe165f23",[],{"id":133,"number":134,"show":122,"year":135,"episodes":336},[137,138,139,140,141,142,143,144,145,146,147,148],{"reps":338},[339,395],{"name":340,"sdr":8,"link":341,"countries":342,"states":344},"John Daniels","https://meet.directus.io/meetings/john2144/john-contact-form-meeting",[343],"United States",[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],"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":396,"link":397,"countries":398},"Michelle Riber","https://meetings.hubspot.com/mriber",[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,424,425,426,427,428,429,430,431,432,433,434,435,436,437,438,439,440,441,442,443,444,445,446,447,448,449,450,451,452,453,454,455,456,457,458,459,460,461,462,463,464,465,466,467,468,469,470,471,472,473,474,475,476,477,478,479,480,481,482,483,484,485,486,487,488,489,490,491,492,493,494,495,496,497,498,499,500,501,502,503,504,505,506,507,508,509,510,511,512,513,514,515,516,517,518,519,520,521,522,523,524,525,526,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,542,543,544,545,546,547,548,549,550,551,552,553,554,555,556,557,558,559,560,561,562,563,564,565,566,567,568,569,570,571,572,573,574,575,576,577,578,579,580,581,582,583,584,585,586,376,587,588],"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",1773850416779]