[{"data":1,"prerenderedAt":428},["ShallowReactive",2],{"footer-primary":3,"footer-secondary":93,"footer-description":119,"joy-of-theming-pampers-theme":121,"joy-of-theming-pampers-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},"22e15c9f-e0d1-4a6b-8dd1-c5b51c9f1568","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",7,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.","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,122,151,152,153,154,155,156,157,158],"ef8afd5a-ba9f-49c5-ae0e-091de1d7d85e","e7dd4c60-0a87-4ce5-a054-fbef2c80bd74","a4c00ba5-0cb9-4b40-90a4-8c03b4410e4b","2b1886f5-7508-44dc-b0a9-c4f73e18d889","c9c86f91-d3e9-4287-9bfc-4c0fd50c6dfd","c338c610-19d5-45b1-af66-3cf34c67a2ec","07649ac4-e135-42c0-bcc9-bafb980dd9ec","ed8c1a76-e3b6-4c75-b4b9-9a7a37ebcf61","118828b8-a8d9-4329-8537-aa3716455328","03a91de3-cffa-41be-a56e-6448ae0cbfd8","4ba7fb8e-72ae-4e8f-908a-8d9032a1603f",{"title":160,"tile":161},"The Joy of Theming","1a50a74b-b774-4fca-9264-88a55d956b5b",{"id":151,"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},"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.",[174],"96d82e6e-504f-4595-8d58-58dc7f4ca48e",[],{"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",1773850438833]