[{"data":1,"prerenderedAt":428},["ShallowReactive",2],{"footer-primary":3,"footer-secondary":93,"footer-description":119,"joy-of-theming-chickfila-theme":121,"joy-of-theming-chickfila-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},"c9c86f91-d3e9-4287-9bfc-4c0fd50c6dfd","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.","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,122,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","2b1886f5-7508-44dc-b0a9-c4f73e18d889","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":153,"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},"friends-theme","931466342","Step into Bry's studio for a splash of '90s nostalgia as he brews a Central Perk theme, rich with the essence of our favorite TV coffee shop.","07645337-6064-4baf-99de-a3dbece7c73a",9,7,"2024-05-06","Central Perk (Coffee is Better with Friends)","\u003Cp>Speaker 0: Hi, friends. Welcome back to the show. I'm your host, Bry Ross. And today, we're gonna take an extra special trip back to the nineties with you, our friends and friends. Alright.\u003C/p>\u003Cp>So we're gonna be painting a beautiful Central Perk Coffee Company theme. Alright. So let's dive into our theme. 1st, gonna pull up our project settings and we're going to adjust those. Just a quick little project name and description.\u003C/p>\u003Cp>Your friend's coffee shop. What could be more beautiful for a project descriptor? Alright. So we're gonna paste the URL in there, and we can see that project settings, our name, and descriptor up there at the top. I like to pronounce it descriptor.\u003C/p>\u003Cp>Makes it sound like Thor. Very powerful. But the effect that themes can have are are very powerful, especially on your users. Alright. So let's pull up our color, and we're just gonna for our project color, we're gonna grab that green from the Central Perk logo.\u003C/p>\u003Cp>Now that's a good project color. Next, let's add a public foreground and public background. So we'll just look for Central Perk and see if we can just grab a good looking image from from all of our friends here. We're just gonna spread that across the entire background And for the public foreground, we'll just use the same logo. I think that should still look really nice on the login page, don't you?\u003C/p>\u003Cp>Yeah. Great. Now all these techniques that you see me using, you can use these yourself. There's nothing holding you back. You've got the tools.\u003C/p>\u003Cp>Just take the first step. Alright. So we're gonna paint in that first note, that public note. We've got our favicon and now we're ready to start theming. Alright.\u003C/p>\u003Cp>So I really like this walnut light, walnut brown, this almond beige color. Let's use that for our modules background. So we'll just paint that in there at the top. One thing I do see though, I want I want this to match all the way up and down, so I'm just going to paint a couple strokes there. We're just going to look for our background color.\u003C/p>\u003Cp>I see that's the project color. We need to fix that, so we're going to go into our custom CSS and just add a little dot module dash bar dash logo class. Make that background transparent. Now you see it. Now you don't.\u003C/p>\u003Cp>Boom. Looks great. Alright. So now for our icons in that module bar, what I wanna do, I wanna be heavy handed. I'm still gonna use light strokes for this, but I am going to try and pick up a, like, a darker brown.\u003C/p>\u003Cp>I I'm almost thinking they've got one here on the website, but, I I just don't see it. Right. Let's just try a black and see how that works. So we'll just go paint in a black. It's too much contrast.\u003C/p>\u003Cp>It doesn't give me those warm feelings of a coffee shop that I'm looking for. So let's pull this brown from this wood image. Now one of the other tools that I use, Color Slurp, Terrible name. Great product though. Being able to just copy those hex codes for for everything you see on your screen.\u003C/p>\u003Cp>Great tool. Stores all those hex codes as well and then you can quickly bang those in your keyboard. Alright. So next, what we wanna do is we wanna control our list, our sidebar here. So let's add a background to this.\u003C/p>\u003Cp>And for this, I'm gonna use a little tool that I like. We're going to look for the Essential Perk couch color because if you remember inside this coffee shop there's a big couch that just takes up all the area. So we're gonna lift this orange couch and make it our background. Is it weird? Maybe a little bit, but for you folks who didn't live through the 90s, they were a weird time as well.\u003C/p>\u003Cp>So let's let's lean into it and and embrace the journey, see where this theme takes us. A little unorthodox mixing colors like this. But with your tools at your side, enjoy in your heart. You can make any theme work. That looks good.\u003C/p>\u003Cp>So now we've got a nice separation there. Let's resolve the icons here. So again, having those set to the project color of green might not be the best idea. I'm just going to take that detail brush, paint in some foreground, just a white foreground. Let's go in and let's try and make this look like a cloth texture as much as we can.\u003C/p>\u003Cp>So I'm just going to use a little pattern monster here. We're going to find a pattern. Just gonna keep keep looking through our patterns until we find something that we like. Just just browse those patterns. Do we find a pattern that we like?\u003C/p>\u003Cp>This adjoined diamond pattern reminds me of my grandmother's couch and her kitchen floor at the same time. Amazing. Alright. So let's use that same orange base color and we're just going to dial back the opacity here. And then also on the other overlay, Let's just switch that from white to black and again we're gonna dial in that opacity.\u003C/p>\u003Cp>Now I think this is a subtle effect that kind of gives a texture there. Alright. So we're just gonna paint the rest of that in. And, okay. We'll dial back that opacity a little bit just to give this a little more subtle effect.\u003C/p>\u003Cp>And now I'm going to pull out that palette knife and we're just going to paste this in. We're gonna pull up that CSS. We're gonna copy the URL portion. So we've got our data URI. We're just gonna paste that into the background and just bring that all the way down.\u003C/p>\u003Cp>Alright. So now we've got this orange symbolic couch in the middle of our theme. Alright. So if we go into our background, we want to add a subtle background, that stark contrast between the white and the orange. There's opportunity there.\u003C/p>\u003Cp>So we're just gonna dial that in a little bit. Again, we're gonna use our color mix. Just paint that in. We're gonna blend that almond with 80% white. And we get this soft beige.\u003C/p>\u003Cp>Just invites you in like a warm cup of coffee in the morning. Now the last thing that we wanna do is dial in our fonts. We're just gonna pull this up. We've got a custom font here that looks like a scribble. I quite like this effect.\u003C/p>\u003Cp>So we're just gonna go in to our font face, add that there, and then we're just gonna paint this on. Paint in a little family. We're going to call it friends. We're going to paint call it friends. Yeah.\u003C/p>\u003Cp>That's nice. Alright. Use a light touch. Very important. You wanna have a handy hand, heavy hand in this.\u003C/p>\u003Cp>All right. So then we're going to go into our fonts under display, and we're just going to go friends. Just going to add friends in there. Now we can see that at the top and just adjust it a little bit. There we go.\u003C/p>\u003Cp>And now we have our coffee shop theme. We have our friends and the couch in the middle and everything is right. Just like it was in the 1990s. All right. Let's take a look at our public sign in page and while we have our central perk theme.\u003C/p>\u003Cp>That's it for this episode of the joy of theming. Thank you for joining me. It's through your support that we can continue teaching techniques to help everyone theme. Each of us has a perfect theme inside of us. It's time to let yours out.\u003C/p>\u003Cp>We'll see you.\u003C/p>","Hi, friends. Welcome back to the show. I'm your host, Bry Ross. And today, we're gonna take an extra special trip back to the nineties with you, our friends and friends. Alright. So we're gonna be painting a beautiful Central Perk Coffee Company theme. Alright. So let's dive into our theme. 1st, gonna pull up our project settings and we're going to adjust those. Just a quick little project name and description. Your friend's coffee shop. What could be more beautiful for a project descriptor? Alright. So we're gonna paste the URL in there, and we can see that project settings, our name, and descriptor up there at the top. I like to pronounce it descriptor. Makes it sound like Thor. Very powerful. But the effect that themes can have are are very powerful, especially on your users. Alright. So let's pull up our color, and we're just gonna for our project color, we're gonna grab that green from the Central Perk logo. Now that's a good project color. Next, let's add a public foreground and public background. So we'll just look for Central Perk and see if we can just grab a good looking image from from all of our friends here. We're just gonna spread that across the entire background And for the public foreground, we'll just use the same logo. I think that should still look really nice on the login page, don't you? Yeah. Great. Now all these techniques that you see me using, you can use these yourself. There's nothing holding you back. You've got the tools. Just take the first step. Alright. So we're gonna paint in that first note, that public note. We've got our favicon and now we're ready to start theming. Alright. So I really like this walnut light, walnut brown, this almond beige color. Let's use that for our modules background. So we'll just paint that in there at the top. One thing I do see though, I want I want this to match all the way up and down, so I'm just going to paint a couple strokes there. We're just going to look for our background color. I see that's the project color. We need to fix that, so we're going to go into our custom CSS and just add a little dot module dash bar dash logo class. Make that background transparent. Now you see it. Now you don't. Boom. Looks great. Alright. So now for our icons in that module bar, what I wanna do, I wanna be heavy handed. I'm still gonna use light strokes for this, but I am going to try and pick up a, like, a darker brown. I I'm almost thinking they've got one here on the website, but, I I just don't see it. Right. Let's just try a black and see how that works. So we'll just go paint in a black. It's too much contrast. It doesn't give me those warm feelings of a coffee shop that I'm looking for. So let's pull this brown from this wood image. Now one of the other tools that I use, Color Slurp, Terrible name. Great product though. Being able to just copy those hex codes for for everything you see on your screen. Great tool. Stores all those hex codes as well and then you can quickly bang those in your keyboard. Alright. So next, what we wanna do is we wanna control our list, our sidebar here. So let's add a background to this. And for this, I'm gonna use a little tool that I like. We're going to look for the Essential Perk couch color because if you remember inside this coffee shop there's a big couch that just takes up all the area. So we're gonna lift this orange couch and make it our background. Is it weird? Maybe a little bit, but for you folks who didn't live through the 90s, they were a weird time as well. So let's let's lean into it and and embrace the journey, see where this theme takes us. A little unorthodox mixing colors like this. But with your tools at your side, enjoy in your heart. You can make any theme work. That looks good. So now we've got a nice separation there. Let's resolve the icons here. So again, having those set to the project color of green might not be the best idea. I'm just going to take that detail brush, paint in some foreground, just a white foreground. Let's go in and let's try and make this look like a cloth texture as much as we can. So I'm just going to use a little pattern monster here. We're going to find a pattern. Just gonna keep keep looking through our patterns until we find something that we like. Just just browse those patterns. Do we find a pattern that we like? This adjoined diamond pattern reminds me of my grandmother's couch and her kitchen floor at the same time. Amazing. Alright. So let's use that same orange base color and we're just going to dial back the opacity here. And then also on the other overlay, Let's just switch that from white to black and again we're gonna dial in that opacity. Now I think this is a subtle effect that kind of gives a texture there. Alright. So we're just gonna paint the rest of that in. And, okay. We'll dial back that opacity a little bit just to give this a little more subtle effect. And now I'm going to pull out that palette knife and we're just going to paste this in. We're gonna pull up that CSS. We're gonna copy the URL portion. So we've got our data URI. We're just gonna paste that into the background and just bring that all the way down. Alright. So now we've got this orange symbolic couch in the middle of our theme. Alright. So if we go into our background, we want to add a subtle background, that stark contrast between the white and the orange. There's opportunity there. So we're just gonna dial that in a little bit. Again, we're gonna use our color mix. Just paint that in. We're gonna blend that almond with 80% white. And we get this soft beige. Just invites you in like a warm cup of coffee in the morning. Now the last thing that we wanna do is dial in our fonts. We're just gonna pull this up. We've got a custom font here that looks like a scribble. I quite like this effect. So we're just gonna go in to our font face, add that there, and then we're just gonna paint this on. Paint in a little family. We're going to call it friends. We're going to paint call it friends. Yeah. That's nice. Alright. Use a light touch. Very important. You wanna have a handy hand, heavy hand in this. All right. So then we're going to go into our fonts under display, and we're just going to go friends. Just going to add friends in there. Now we can see that at the top and just adjust it a little bit. There we go. And now we have our coffee shop theme. We have our friends and the couch in the middle and everything is right. Just like it was in the 1990s. All right. Let's take a look at our public sign in page and while we have our central perk theme. That's it for this episode of the joy of theming. Thank you for joining me. It's through your support that we can continue teaching techniques to help everyone theme. Each of us has a perfect theme inside of us. It's time to let yours out. We'll see you.",[174],"9ecd99df-4e5f-47a3-be7c-15e6247fd8de",[],{"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",1773850444755]