[{"data":1,"prerenderedAt":429},["ShallowReactive",2],{"footer-primary":3,"footer-secondary":93,"footer-description":119,"joy-of-theming-think-different":121,"joy-of-theming-think-different-next":163,"sales-reps":177},{"items":4},[5,29,49,69],{"id":6,"title":7,"url":8,"page":8,"children":9},"522e608a-77b0-4333-820d-d4f44be2ade1","Solutions",null,[10,15,20,25],{"id":11,"title":12,"url":8,"page":13},"fcafe85a-a798-4710-9e7a-776fe413aae5","Headless CMS",{"permalink":14},"/solutions/headless-cms",{"id":16,"title":17,"url":8,"page":18},"79972923-93cf-4777-9e32-5c9b0315fc10","Backend-as-a-Service",{"permalink":19},"/solutions/backend-as-a-service",{"id":21,"title":22,"url":8,"page":23},"0fa8d0c1-7b64-4f6f-939d-d7fdb99fc407","Product Information",{"permalink":24},"/solutions/product-information-management",{"id":26,"title":27,"url":28,"page":8},"63946d54-6052-4780-8ff4-91f5a9931dcc","100+ Things to Build","https://directus.io/blog/100-tools-apps-and-platforms-you-can-build-with-directus",{"id":30,"title":31,"url":8,"page":8,"children":32},"8ab4f9b1-f3e2-44d6-919b-011d91fe072f","Resources",[33,37,41,45],{"id":34,"title":35,"url":36,"page":8},"f951fb84-8777-4b84-9e91-996fe9d25483","Documentation","https://docs.directus.io",{"id":38,"title":39,"url":40,"page":8},"366febc7-a538-4c08-a326-e6204957f1e3","Guides","https://docs.directus.io/guides/",{"id":42,"title":43,"url":44,"page":8},"aeb9128e-1c5f-417f-863c-2449416433cd","Community","https://directus.chat",{"id":46,"title":47,"url":48,"page":8},"da1c2ed8-0a77-49b0-a903-49c56cb07de5","Release Notes","https://github.com/directus/directus/releases",{"id":50,"title":51,"url":8,"page":8,"children":52},"d61fae8c-7502-494a-822f-19ecff3d0256","Support",[53,57,61,65],{"id":54,"title":55,"url":56,"page":8},"8c43c781-7ebd-475f-a931-747e293c0a88","Issue Tracker","https://github.com/directus/directus/issues",{"id":58,"title":59,"url":60,"page":8},"d77bb78e-cf7b-4e01-932a-514414ba49d3","Feature Requests","https://github.com/directus/directus/discussions?discussions_q=is:open+sort:top",{"id":62,"title":63,"url":64,"page":8},"4346be2b-2c53-476e-b53b-becacec626a6","Community Chat","https://discord.com/channels/725371605378924594/741317677397704757",{"id":66,"title":67,"url":68,"page":8},"26c115d2-49f7-4edc-935e-d37d427fb89d","Cloud Dashboard","https://directus.cloud",{"id":70,"title":71,"url":8,"page":8,"children":72},"49141403-4f20-44ac-8453-25ace1265812","Organization",[73,78,84,88],{"id":74,"title":75,"url":76,"page":77},"1f36ea92-8a5e-47c8-914c-9822a8b9538a","About","/about",{"permalink":76},{"id":79,"title":80,"url":81,"page":82},"b84bf525-5471-4b14-a93c-225f6c386005","Careers","#",{"permalink":83},"/careers",{"id":85,"title":86,"url":87,"page":8},"86aabc3a-433d-434b-9efa-ad1d34be0a34","Brand Assets","https://drive.google.com/drive/folders/1lBOTba4RaA5ikqOn8Ewo4RYzD0XcymG9?usp=sharing",{"id":89,"title":90,"url":8,"page":91},"8d2fa1e3-198e-4405-81e1-2ceb858bc237","Contact",{"permalink":92},"/contact",{"items":94},[95,101,107,113],{"id":96,"title":97,"url":8,"page":98,"children":100},"8a1b7bfa-429d-4ffc-a650-2a5fdcf356da","Cloud Policies",{"permalink":99},"/cloud-policies",[],{"id":102,"title":103,"url":81,"page":104,"children":106},"bea848ef-828f-4306-8017-6b00ec5d4a0c","License",{"permalink":105},"/bsl",[],{"id":108,"title":109,"url":81,"page":110,"children":112},"4e914f47-4bee-42b7-b445-3119ee4196ef","Terms",{"permalink":111},"/terms",[],{"id":114,"title":115,"url":81,"page":116,"children":118},"ea69eda6-d317-4981-8421-fcabb1826bfd","Privacy",{"permalink":117},"/privacy",[],{"description":120},"\u003Cp>A composable backend to build your Headless CMS, BaaS, and more. \u003C/p>",{"id":122,"slug":123,"vimeo_id":124,"description":125,"tile":126,"length":127,"resources":8,"people":8,"episode_number":128,"published":129,"title":130,"video_transcript_html":131,"video_transcript_text":132,"content":8,"status":133,"episode_people":134,"recommendations":142,"season":143,"seo":162},"03a91de3-cffa-41be-a56e-6448ae0cbfd8","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",9,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.","published",[135],{"people_id":136},{"id":137,"first_name":138,"last_name":139,"avatar":140,"bio":141,"links":8},"a318327f-99e2-4938-b332-5fa049c29047","Bry","Ross","2c4d6cd9-5765-4268-b1a0-42ac7ce5adb9","Master Themer and Chuck Norris' BFF",[],{"id":144,"number":145,"year":146,"episodes":147,"show":159},"61d16eae-2910-4009-a3e0-65e1a96be877",1,"2024",[148,149,150,151,152,153,154,155,156,157,122,158],"ef8afd5a-ba9f-49c5-ae0e-091de1d7d85e","e7dd4c60-0a87-4ce5-a054-fbef2c80bd74","a4c00ba5-0cb9-4b40-90a4-8c03b4410e4b","22e15c9f-e0d1-4a6b-8dd1-c5b51c9f1568","2b1886f5-7508-44dc-b0a9-c4f73e18d889","c9c86f91-d3e9-4287-9bfc-4c0fd50c6dfd","c338c610-19d5-45b1-af66-3cf34c67a2ec","07649ac4-e135-42c0-bcc9-bafb980dd9ec","ed8c1a76-e3b6-4c75-b4b9-9a7a37ebcf61","118828b8-a8d9-4329-8537-aa3716455328","4ba7fb8e-72ae-4e8f-908a-8d9032a1603f",{"title":160,"tile":161},"The Joy of Theming","1a50a74b-b774-4fca-9264-88a55d956b5b",{"title":8,"meta_description":8},{"id":158,"slug":164,"season":144,"vimeo_id":165,"description":166,"tile":167,"length":127,"resources":8,"people":8,"episode_number":168,"published":169,"title":170,"video_transcript_html":171,"video_transcript_text":172,"content":8,"seo":173,"status":133,"episode_people":174,"recommendations":176},"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",[175],"022c239d-4b4b-41a4-868c-1988fe165f23",[],{"reps":178},[179,235],{"name":180,"sdr":8,"link":181,"countries":182,"states":184},"John Daniels","https://meet.directus.io/meetings/john2144/john-contact-form-meeting",[183],"United States",[185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234],"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":236,"link":237,"countries":238},"Michelle Riber","https://meetings.hubspot.com/mriber",[239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348,349,350,351,352,353,354,355,356,357,358,359,360,361,362,363,364,365,366,367,368,369,370,371,372,373,374,375,376,377,378,379,380,381,382,383,384,385,386,387,388,389,390,391,392,393,394,395,396,397,398,399,400,401,402,403,404,405,406,407,408,409,410,411,412,413,414,415,416,417,418,419,420,421,422,423,424,425,426,216,427,428],"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",1773850453929]