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