[{"data":1,"prerenderedAt":427},["ShallowReactive",2],{"footer-primary":3,"footer-secondary":93,"footer-description":119,"joy-of-theming-friends-theme":121,"joy-of-theming-friends-theme-next":162,"sales-reps":175},{"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},"c338c610-19d5-45b1-af66-3cf34c67a2ec","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.","published",[135],{"people_id":136},{"id":137,"first_name":138,"last_name":139,"avatar":140,"bio":141,"links":8},"a318327f-99e2-4938-b332-5fa049c29047","Bry","Ross","2c4d6cd9-5765-4268-b1a0-42ac7ce5adb9","Master Themer and Chuck Norris' BFF",[],{"id":144,"number":145,"year":146,"episodes":147,"show":159},"61d16eae-2910-4009-a3e0-65e1a96be877",1,"2024",[148,149,150,151,152,153,122,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","c9c86f91-d3e9-4287-9bfc-4c0fd50c6dfd","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":154,"slug":163,"season":144,"vimeo_id":164,"description":165,"tile":166,"length":127,"resources":8,"people":8,"episode_number":167,"published":168,"title":169,"video_transcript_html":170,"video_transcript_text":171,"content":8,"seo":8,"status":133,"episode_people":172,"recommendations":174},"amazon-theme","931467487","Join your favorite theme master, Bry Ross, as he takes on a dynamic Amazon theme. Grab your brushes (and your duster) and let's paint a bold theme that perfectly captures the spirit of a thriving marketplace.","633d9813-59b8-4d29-8ff9-3a49b56be786",8,"2024-05-13","Amazon (From A to Zest)","\u003Cp>Speaker 0: Hi, friends. Welcome back to the show. I'm your host, Bry Ross. Before we start our theme today, I thought it was important to cover just how to clean your brush. So, this is how I like to clean my brush.\u003C/p>\u003Cp>It's super important to have a clean brush anytime you are doing a theme. You've got to make sure that you've got the right colors that you're putting on the theme. So what I like to do, I take my duster, give it a couple shakes, and then just aim the the little red tip of this nozzle at the brush. Just just give it a little flip there. And then you can hit it on your desk and now you've got a brush that's ready to go.\u003C/p>\u003Cp>So the theme that we are building today is Amazon from a to z. So if you're following along, I hope you've got your canvas prepped with a great looking data model, and let's get started by adding our project settings. Amazon. Everything, all the time. Whenever you want it.\u003C/p>\u003Cp>Alright. So we're gonna copy the project URL and just paste that in there. I would probably remove that ref tag as well. So we'll just paste that in there. And now we're ready to theme.\u003C/p>\u003Cp>So I always start everything by dialing in the branding. The branding is so important. We're going to inspect this Amazon logo from the website. It looks like it's gonna be a real pain to get access to this. They're using a sprite sheet which is is probably smart for performance, but makes our job as themers just a little bit more difficult.\u003C/p>\u003Cp>So we'll just use the Amazon logos that they have, And what I'm going to do, I'm going to use a combo move here. I'm just going to put both of these together. Copy. And import from URL. Great.\u003C/p>\u003Cp>Okay. So now we've got our project logo, public foreground. What are we gonna use? We're gonna choose the same file from the library. That's okay.\u003C/p>\u003Cp>We don't necessarily need 2 different images for our logo and our public foreground. It's all good. So we're just gonna paint that on. Great. Good, good luck.\u003C/p>\u003Cp>Okay. Alright. So as far as a public background image, we've got to find something that works. What are we going to do? Well, I'll show you.\u003C/p>\u003Cp>Way back when, I used to paint t shirts before I painted themes. And, yeah, one of the t shirts that I loved by my friends at the mountain, are these Wolf t shirts. These are such masterpieces. If you've ever seen them, they're some of the most highly rated shirts on Amazon. So let's just use one of those as the public background.\u003C/p>\u003Cp>We'll just paint that beautiful, beautiful theme there. Alright, so now we're looking for a favicon. I don't see that here. I'm not seeing it. Again, theming is a journey.\u003C/p>\u003Cp>There's many twists and turns that we have to navigate to bring out that theme. So let's just search for Amazon Fab icon. This looks like a good one. Copy that image address, and I'm just gonna brush that in there. Just pick up that half inch brush.\u003C/p>\u003Cp>The fab icon is such a small detail. Absolutely critical though. Alright, so for our project color, what we want to do, we want to find this Amazon yellow, this Amazon orange. Is it orange? Is it yellow?\u003C/p>\u003Cp>Is it in between? I don't know. But it's it's lovely. It's reassuring, but also stands out against that darker background. Alright.\u003C/p>\u003Cp>So we're just gonna paste that in. Now we've we've got that. We've got our project color. So this is gonna bring all of our buttons up to that color, but again, we want to match that Amazon website. So we've got to go in and we need to adjust this module bar logo.\u003C/p>\u003Cp>So to do that, what we're gonna do, we're gonna go into our modules. I'm not seeing that that CSS there. We're actually gonna have to use our custom CSS here. So we'll do a class selector module dash bar dot logo and just paint some background transparency on there. It's almost like we're removing it but essentially we're just blending it in.\u003C/p>\u003Cp>Just, you know, we'll add that important modifier just to make sure that it's set. Great. Okay. Alright. So next we're gonna dive in to this second nav, this secondary navigation.\u003C/p>\u003Cp>It's more of a navy blue like a midnight navy. Like a very soulful color. Alright. So now inside our list, we need to go in and set our foreground colors. Now this is a an advanced technique.\u003C/p>\u003Cp>Your mileage may vary, but I like to take my half inch brush, Just stroke the keys ever so softly and that way we can get this nice color effect that we're looking for. So for our divider here, that white is too much. Maybe we use a little color mix to bring it down. Mute that just a little bit, but as you can see we've got a weird hover effect going on. How can I fix that, right?\u003C/p>\u003Cp>That is going to be in our background hover and our background active color. So I can take this color mix and from our background hover maybe I just dial it back a bit, just a little bit, just dial it back just a little bit. It's very nice. You're doing great, by the way. Amazing.\u003C/p>\u003Cp>It is so fun and so enlightening just to see how some of these themes take shape. Alright, so this is nice, but at the very top we have our project bar that is getting in the way. It's just too much contrast. So let's remove that, set our foreground to be the same, and now we've completed the navigation. So now what we want to do is take a look at our fonts.\u003C/p>\u003Cp>Fonts always make or break a theme. And Amazon is using this Amazon ember font. Alright so if we look at our actual font network requests we could see that font. If I check our font face inside the document, I don't see it. So we're just gonna search for Amazon Amber font.\u003C/p>\u003Cp>There we go. We've got a breakdown of this particular font. I don't want to necessarily load 25 megabytes. Who has that space? It's a lot of space.\u003C/p>\u003Cp>So what we're gonna do is just copy this from this Amazon typography site, add some font face values for it. We're gonna do a little font family, ember. And then for our source declaration here, I'm gonna use URL and just input that URL that we get from the Amazon website. Now, we save that. Directus will load that custom CSS for us on all the pages.\u003C/p>\u003Cp>But the last piece of the puzzle, we've got to take our half inch brush and we've got to go into our fonts and just apply that particular setting. Right, okay. Yeah, I'm not seeing that being applied. Why is it not? Oh.\u003C/p>\u003Cp>Silly me. I put it in the dark theme. So now as we apply it to the light theme customization, our display font is ember. This is a great looking theme. It really pops to me.\u003C/p>\u003Cp>Let's take a look at the public login page. And have you ever seen a more beautiful public login page? 2 wolves, moon, Amazon. Harmonious. Harmonious.\u003C/p>\u003Cp>That's it for this episode of The Joy of Theming. Thank you for joining me. I hope to see you on the next one. Bye.\u003C/p>","Hi, friends. Welcome back to the show. I'm your host, Bry Ross. Before we start our theme today, I thought it was important to cover just how to clean your brush. So, this is how I like to clean my brush. It's super important to have a clean brush anytime you are doing a theme. You've got to make sure that you've got the right colors that you're putting on the theme. So what I like to do, I take my duster, give it a couple shakes, and then just aim the the little red tip of this nozzle at the brush. Just just give it a little flip there. And then you can hit it on your desk and now you've got a brush that's ready to go. So the theme that we are building today is Amazon from a to z. So if you're following along, I hope you've got your canvas prepped with a great looking data model, and let's get started by adding our project settings. Amazon. Everything, all the time. Whenever you want it. Alright. So we're gonna copy the project URL and just paste that in there. I would probably remove that ref tag as well. So we'll just paste that in there. And now we're ready to theme. So I always start everything by dialing in the branding. The branding is so important. We're going to inspect this Amazon logo from the website. It looks like it's gonna be a real pain to get access to this. They're using a sprite sheet which is is probably smart for performance, but makes our job as themers just a little bit more difficult. So we'll just use the Amazon logos that they have, And what I'm going to do, I'm going to use a combo move here. I'm just going to put both of these together. Copy. And import from URL. Great. Okay. So now we've got our project logo, public foreground. What are we gonna use? We're gonna choose the same file from the library. That's okay. We don't necessarily need 2 different images for our logo and our public foreground. It's all good. So we're just gonna paint that on. Great. Good, good luck. Okay. Alright. So as far as a public background image, we've got to find something that works. What are we going to do? Well, I'll show you. Way back when, I used to paint t shirts before I painted themes. And, yeah, one of the t shirts that I loved by my friends at the mountain, are these Wolf t shirts. These are such masterpieces. If you've ever seen them, they're some of the most highly rated shirts on Amazon. So let's just use one of those as the public background. We'll just paint that beautiful, beautiful theme there. Alright, so now we're looking for a favicon. I don't see that here. I'm not seeing it. Again, theming is a journey. There's many twists and turns that we have to navigate to bring out that theme. So let's just search for Amazon Fab icon. This looks like a good one. Copy that image address, and I'm just gonna brush that in there. Just pick up that half inch brush. The fab icon is such a small detail. Absolutely critical though. Alright, so for our project color, what we want to do, we want to find this Amazon yellow, this Amazon orange. Is it orange? Is it yellow? Is it in between? I don't know. But it's it's lovely. It's reassuring, but also stands out against that darker background. Alright. So we're just gonna paste that in. Now we've we've got that. We've got our project color. So this is gonna bring all of our buttons up to that color, but again, we want to match that Amazon website. So we've got to go in and we need to adjust this module bar logo. So to do that, what we're gonna do, we're gonna go into our modules. I'm not seeing that that CSS there. We're actually gonna have to use our custom CSS here. So we'll do a class selector module dash bar dot logo and just paint some background transparency on there. It's almost like we're removing it but essentially we're just blending it in. Just, you know, we'll add that important modifier just to make sure that it's set. Great. Okay. Alright. So next we're gonna dive in to this second nav, this secondary navigation. It's more of a navy blue like a midnight navy. Like a very soulful color. Alright. So now inside our list, we need to go in and set our foreground colors. Now this is a an advanced technique. Your mileage may vary, but I like to take my half inch brush, Just stroke the keys ever so softly and that way we can get this nice color effect that we're looking for. So for our divider here, that white is too much. Maybe we use a little color mix to bring it down. Mute that just a little bit, but as you can see we've got a weird hover effect going on. How can I fix that, right? That is going to be in our background hover and our background active color. So I can take this color mix and from our background hover maybe I just dial it back a bit, just a little bit, just dial it back just a little bit. It's very nice. You're doing great, by the way. Amazing. It is so fun and so enlightening just to see how some of these themes take shape. Alright, so this is nice, but at the very top we have our project bar that is getting in the way. It's just too much contrast. So let's remove that, set our foreground to be the same, and now we've completed the navigation. So now what we want to do is take a look at our fonts. Fonts always make or break a theme. And Amazon is using this Amazon ember font. Alright so if we look at our actual font network requests we could see that font. If I check our font face inside the document, I don't see it. So we're just gonna search for Amazon Amber font. There we go. We've got a breakdown of this particular font. I don't want to necessarily load 25 megabytes. Who has that space? It's a lot of space. So what we're gonna do is just copy this from this Amazon typography site, add some font face values for it. We're gonna do a little font family, ember. And then for our source declaration here, I'm gonna use URL and just input that URL that we get from the Amazon website. Now, we save that. Directus will load that custom CSS for us on all the pages. But the last piece of the puzzle, we've got to take our half inch brush and we've got to go into our fonts and just apply that particular setting. Right, okay. Yeah, I'm not seeing that being applied. Why is it not? Oh. Silly me. I put it in the dark theme. So now as we apply it to the light theme customization, our display font is ember. This is a great looking theme. It really pops to me. Let's take a look at the public login page. And have you ever seen a more beautiful public login page? 2 wolves, moon, Amazon. Harmonious. Harmonious. That's it for this episode of The Joy of Theming. Thank you for joining me. I hope to see you on the next one. Bye.",[173],"bf6cdff4-f3b9-4b6d-8b29-5cca5bf1f75e",[],{"reps":176},[177,233],{"name":178,"sdr":8,"link":179,"countries":180,"states":182},"John Daniels","https://meet.directus.io/meetings/john2144/john-contact-form-meeting",[181],"United States",[183,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],"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":234,"link":235,"countries":236},"Michelle Riber","https://meetings.hubspot.com/mriber",[237,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,214,425,426],"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",1773850447594]