[{"data":1,"prerenderedAt":428},["ShallowReactive",2],{"footer-primary":3,"footer-secondary":93,"footer-description":119,"joy-of-theming-tesla-theme":121,"joy-of-theming-tesla-theme-next":161,"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":127,"published":128,"title":129,"video_transcript_html":130,"video_transcript_text":131,"content":8,"status":132,"episode_people":133,"recommendations":141,"season":142,"seo":8},"118828b8-a8d9-4329-8537-aa3716455328","tesla-theme","931477106","Charge up your canvas and join Bry as teaches you how you paint an electrifying Directus theme for car maker Tesla.","cbf65318-3f34-4efb-99a1-e240228041fb",10,"2024-05-27","Tesla (Simply Electric)","\u003Cp>Speaker 0: Hi. Welcome back to the show. I was just reading some more fan mail. I thought maybe we'd answer a question before we dive into the actual theme today. Dear Bry, how did you get your signature locks?\u003C/p>\n\u003Cp>Love, Matt. Your biggest fan. Well, Matt, I could tell you that, but I'd have to kill you. No, I'm just kidding. Only slightly.\u003C/p>\n\u003Cp>No, I've I've really kidding. No, I was once at a friend's house, you might know him. His name is, Chuck Norris. And Chuck and I were in a heated battle of Jenga, and the loser had to get a perm. And unfortunately, I toppled 1 too many blocks too fast.\u003C/p>\n\u003Cp>And here we are. Signature perm in check. It's worked in my favor, though, I think. Right. So today, we're gonna be painting a lovely theme for a lovely company and one of the richest men in the world.\u003C/p>\n\u003Cp>Now, I have not a lot of need for money. I'm very happy with just painting beautiful themes. But, mister Musk, if you're watching this, Brian Ross could use a Tesla to get to and from the office. Maybe we can work on that. Let's dive in.\u003C/p>\n\u003Cp>Alright. So let's cover a few tools of the trade. Right? We've got our trusty Logitech MX Keys keyboard. We've got a firm palette knife.\u003C/p>\n\u003Cp>This is great for painting broad strokes. And then we have our trusty half inch brush. Now you wanna hold that at 10 and 2 just like a steering wheel and that way you can get a good grip on your brush. So we're just gonna dive in. We've already added our project settings and looking at the Tesla website it's very very text heavy.\u003C/p>\n\u003Cp>So let's search for Tesla branding guidelines and see if we can find some logos that we can use. Now, I I do like the website. It's got a clean appearance. I I love lots of white space in my websites, especially in my themes. A good calm theme is great.\u003C/p>\n\u003Cp>Alright. So now we've got the Tesla logos. Let's just import those. We'll upload those here. Upload file to device.\u003C/p>\n\u003Cp>Just zip that over there. Just zip it. Alright. So we've got the project logo. That's gonna be white.\u003C/p>\n\u003Cp>Okay. We're gonna use the public foreground. That's great. And for our public background one of the, little known things inside your Directus CMS or back end whatever you're using Directus for you can use videos as the public background now this doesn't break the laws of theming. This is just a 4th dimension to that.\u003C/p>\n\u003Cp>It really makes your login page pop. So we'll just add a public note, welcome to the Tesla CMS plus the PIN. I swear we're gonna store all of our information. We've gotta make sure it's beautiful. Alright, so we'll look for our favicon.\u003C/p>\n\u003Cp>There it is. We're just gonna take that, save it out, just just a little save action and upload to device. If we really want to get fancy with it, we could just paint it on. Alright, so now we've saved this we've got our basic branding in here, but when I look at the Tesla website you know I'm thinking what could this theme be? You know, one of the things that I always consider when I'm theming is is this a dark theme?\u003C/p>\n\u003Cp>Is it a light theme? And in this case, I think we need to go dark. Now, I usually like to paint positive happy themes with bright colors, but sometimes there's no substitute for a great dark theme. Full of soul. Alright, so this is a great base.\u003C/p>\n\u003Cp>The Directus default dark theme provides a good look for theming, but let's add in that Tesla red. Let's make this thing pop. So for our project color, we're gonna change this to the Tesla red. So I'm just gonna take and carefully enter that with a half inch brush. This is an advanced technique so really pay attention.\u003C/p>\n\u003Cp>Just use that half inch brush to enter those hex codes. It's, it takes a little while to master that but I know you'll get the hang of it. Alright. So one of the other subtle effects that I see here, when they offer merch here on the Tesla web site, you got this nice grid, dot pattern background. I love texture.\u003C/p>\n\u003Cp>Texture just adds another element to blend everything harmoniously together into just the most wonderful theme. Alright, so we're going to go in and let's see if we can't find some of these colors that we're working with. Alright, so we're gonna use this dotted grid. We're just gonna paint that into our background accent color. Great.\u003C/p>\n\u003Cp>You can see we've got a a great looking sidebar or module navigation. But the next thing I'm gonna do is go into our navigation and I'm gonna dial in our background. We're gonna use the theme background color. Not not the correct variable. There we go.\u003C/p>\n\u003Cp>Alright. So now this is one color of black. It's a very dark black like a midnight. Looks great. But what we want to do is we want to add that dot pattern background.\u003C/p>\n\u003Cp>So let's just look through the document, see if we can find that. There it is. We have found it. Let's see the styles that are being applied. Right?\u003C/p>\n\u003Cp>So we're just gonna take this and we're going to convert it into a single background property. Now the navigation background can support patterns using SVG or data URLs and, we can also add gradients in. And again, anytime you're doing a lot of theming, you're switching colors, make sure that you just get in there with the dust or Dust the demons out of it. But make sure you don't ever turn your duster upside down because that that will make it freeze. It'll potentially explode.\u003C/p>\n\u003Cp>You don't want that. Alright, so now we're just going to add, negative 20 pixel offset and a little extra pixel inset and, that looks really great. So now we've got that subtle grid effect. This is this is a beautiful, beautiful theme. This is really what I was hoping for.\u003C/p>\n\u003Cp>Sometimes dark themes can be some of the most enlightening themes to paint. You're doing great, by the way. Alright. So now let's add some Tesla fonts. So we can see we've got a Gotham SS m font.\u003C/p>\n\u003Cp>If we take a look and we go through the network tab, we can see where these actual fonts are coming from. Alright. So now we're just going to, try to copy those and paint those in here. We'll search and see if we've got any font face definitions that we can already just use, but it doesn't look like it. So what we're gonna do, we're just gonna copy, and we're going to paste into our custom CSS.\u003C/p>\n\u003Cp>Now, you can get most of your theming done inside the dark or light theme customization, but sometimes you need to reach for a little extra power. That's where this custom CSS comes in. You just spread on a nice little font face property here. We're gonna use Gotham for the name. We'll add that source URL.\u003C/p>\n\u003Cp>We'll go in and paint our fonts for the dark theme customization. Just call this Gotham, kinda like Batman. Always loved that one line that he delivers in the movie. Justice never sleeps. Alright.\u003C/p>\n\u003Cp>Okay. So we'll just dial that back. That's great. The last thing that we need to do here is basically to fix this font. We want to make it all uppercase.\u003C/p>\n\u003Cp>It has to be all uppercase. So we're just gonna go in and just add a little type title. And now I'm gonna go in and just paint a little text transform in there. Just blend that text transform. Just a little up.\u003C/p>\n\u003Cp>Just keep going up until you get it all uppercase. Great job. Amazing. Alright. So this is looking like a beautiful theme.\u003C/p>\n\u003Cp>Let's just check it out. We've got all of our vehicles. It's beautiful. Great theme. Alright.\u003C/p>\n\u003Cp>So we're gonna log out, check out our public login page and wow, does that video ever make this pop? Doesn't that make you just feel like you need to be in a Tesla? I know it does me. So thank you for joining this episode of The Joy of Theming. We've got some extra special tips and techniques for painting beautiful, beautiful themes.\u003C/p>","Hi. Welcome back to the show. I was just reading some more fan mail. I thought maybe we'd answer a question before we dive into the actual theme today. Dear Bry, how did you get your signature locks? Love, Matt. Your biggest fan. Well, Matt, I could tell you that, but I'd have to kill you. No, I'm just kidding. Only slightly. No, I've I've really kidding. No, I was once at a friend's house, you might know him. His name is, Chuck Norris. And Chuck and I were in a heated battle of Jenga, and the loser had to get a perm. And unfortunately, I toppled 1 too many blocks too fast. And here we are. Signature perm in check. It's worked in my favor, though, I think. Right. So today, we're gonna be painting a lovely theme for a lovely company and one of the richest men in the world. Now, I have not a lot of need for money. I'm very happy with just painting beautiful themes. But, mister Musk, if you're watching this, Brian Ross could use a Tesla to get to and from the office. Maybe we can work on that. Let's dive in. Alright. So let's cover a few tools of the trade. Right? We've got our trusty Logitech MX Keys keyboard. We've got a firm palette knife. This is great for painting broad strokes. And then we have our trusty half inch brush. Now you wanna hold that at 10 and 2 just like a steering wheel and that way you can get a good grip on your brush. So we're just gonna dive in. We've already added our project settings and looking at the Tesla website it's very very text heavy. So let's search for Tesla branding guidelines and see if we can find some logos that we can use. Now, I I do like the website. It's got a clean appearance. I I love lots of white space in my websites, especially in my themes. A good calm theme is great. Alright. So now we've got the Tesla logos. Let's just import those. We'll upload those here. Upload file to device. Just zip that over there. Just zip it. Alright. So we've got the project logo. That's gonna be white. Okay. We're gonna use the public foreground. That's great. And for our public background one of the, little known things inside your Directus CMS or back end whatever you're using Directus for you can use videos as the public background now this doesn't break the laws of theming. This is just a 4th dimension to that. It really makes your login page pop. So we'll just add a public note, welcome to the Tesla CMS plus the PIN. I swear we're gonna store all of our information. We've gotta make sure it's beautiful. Alright, so we'll look for our favicon. There it is. We're just gonna take that, save it out, just just a little save action and upload to device. If we really want to get fancy with it, we could just paint it on. Alright, so now we've saved this we've got our basic branding in here, but when I look at the Tesla website you know I'm thinking what could this theme be? You know, one of the things that I always consider when I'm theming is is this a dark theme? Is it a light theme? And in this case, I think we need to go dark. Now, I usually like to paint positive happy themes with bright colors, but sometimes there's no substitute for a great dark theme. Full of soul. Alright, so this is a great base. The Directus default dark theme provides a good look for theming, but let's add in that Tesla red. Let's make this thing pop. So for our project color, we're gonna change this to the Tesla red. So I'm just gonna take and carefully enter that with a half inch brush. This is an advanced technique so really pay attention. Just use that half inch brush to enter those hex codes. It's, it takes a little while to master that but I know you'll get the hang of it. Alright. So one of the other subtle effects that I see here, when they offer merch here on the Tesla web site, you got this nice grid, dot pattern background. I love texture. Texture just adds another element to blend everything harmoniously together into just the most wonderful theme. Alright, so we're going to go in and let's see if we can't find some of these colors that we're working with. Alright, so we're gonna use this dotted grid. We're just gonna paint that into our background accent color. Great. You can see we've got a a great looking sidebar or module navigation. But the next thing I'm gonna do is go into our navigation and I'm gonna dial in our background. We're gonna use the theme background color. Not not the correct variable. There we go. Alright. So now this is one color of black. It's a very dark black like a midnight. Looks great. But what we want to do is we want to add that dot pattern background. So let's just look through the document, see if we can find that. There it is. We have found it. Let's see the styles that are being applied. Right? So we're just gonna take this and we're going to convert it into a single background property. Now the navigation background can support patterns using SVG or data URLs and, we can also add gradients in. And again, anytime you're doing a lot of theming, you're switching colors, make sure that you just get in there with the dust or Dust the demons out of it. But make sure you don't ever turn your duster upside down because that that will make it freeze. It'll potentially explode. You don't want that. Alright, so now we're just going to add, negative 20 pixel offset and a little extra pixel inset and, that looks really great. So now we've got that subtle grid effect. This is this is a beautiful, beautiful theme. This is really what I was hoping for. Sometimes dark themes can be some of the most enlightening themes to paint. You're doing great, by the way. Alright. So now let's add some Tesla fonts. So we can see we've got a Gotham SS m font. If we take a look and we go through the network tab, we can see where these actual fonts are coming from. Alright. So now we're just going to, try to copy those and paint those in here. We'll search and see if we've got any font face definitions that we can already just use, but it doesn't look like it. So what we're gonna do, we're just gonna copy, and we're going to paste into our custom CSS. Now, you can get most of your theming done inside the dark or light theme customization, but sometimes you need to reach for a little extra power. That's where this custom CSS comes in. You just spread on a nice little font face property here. We're gonna use Gotham for the name. We'll add that source URL. We'll go in and paint our fonts for the dark theme customization. Just call this Gotham, kinda like Batman. Always loved that one line that he delivers in the movie. Justice never sleeps. Alright. Okay. So we'll just dial that back. That's great. The last thing that we need to do here is basically to fix this font. We want to make it all uppercase. It has to be all uppercase. So we're just gonna go in and just add a little type title. And now I'm gonna go in and just paint a little text transform in there. Just blend that text transform. Just a little up. Just keep going up until you get it all uppercase. Great job. Amazing. Alright. So this is looking like a beautiful theme. Let's just check it out. We've got all of our vehicles. It's beautiful. Great theme. Alright. So we're gonna log out, check out our public login page and wow, does that video ever make this pop? Doesn't that make you just feel like you need to be in a Tesla? I know it does me. So thank you for joining this episode of The Joy of Theming. We've got some extra special tips and techniques for painting beautiful, beautiful themes.","published",[134],{"people_id":135},{"id":136,"first_name":137,"last_name":138,"avatar":139,"bio":140,"links":8},"a318327f-99e2-4938-b332-5fa049c29047","Bry","Ross","2c4d6cd9-5765-4268-b1a0-42ac7ce5adb9","Master Themer and Chuck Norris' BFF",[],{"id":143,"number":144,"year":145,"episodes":146,"show":158},"61d16eae-2910-4009-a3e0-65e1a96be877",1,"2024",[147,148,149,150,151,152,153,154,155,122,156,157],"ef8afd5a-ba9f-49c5-ae0e-091de1d7d85e","e7dd4c60-0a87-4ce5-a054-fbef2c80bd74","a4c00ba5-0cb9-4b40-90a4-8c03b4410e4b","22e15c9f-e0d1-4a6b-8dd1-c5b51c9f1568","2b1886f5-7508-44dc-b0a9-c4f73e18d889","c9c86f91-d3e9-4287-9bfc-4c0fd50c6dfd","c338c610-19d5-45b1-af66-3cf34c67a2ec","07649ac4-e135-42c0-bcc9-bafb980dd9ec","ed8c1a76-e3b6-4c75-b4b9-9a7a37ebcf61","03a91de3-cffa-41be-a56e-6448ae0cbfd8","4ba7fb8e-72ae-4e8f-908a-8d9032a1603f",{"title":159,"tile":160},"The Joy of Theming","1a50a74b-b774-4fca-9264-88a55d956b5b",{"id":156,"slug":162,"season":143,"vimeo_id":163,"description":164,"tile":165,"length":166,"resources":8,"people":8,"episode_number":167,"published":168,"title":169,"video_transcript_html":170,"video_transcript_text":171,"content":8,"seo":172,"status":132,"episode_people":173,"recommendations":175},"think-different","941259359","Designed by Bry Ross in California. Time to join your favorite theme guru for an exercise in simplistic theming as he delivers a captivating Apple theme.","78d093b5-7e1e-4833-a1eb-10ac46686dbe",9,11,"2024-06-03","Apple (Think Different)","\u003Cp>Speaker 0: Welcome back to the show. I'm your host, Bry Ross. I thought you might join me with just a little breathing exercise before we theme today, just to bring us all down to the baseline vibration that we wanna be on when theming. Care to join me? Great.\u003C/p>\u003Cp>Alright. So let's take a deep breath in and out. That's perfect. Right. Let's dive into our theme today.\u003C/p>\u003Cp>Today we are going to be painting a beautiful apple theme. So I always start any project. Couple things. We want to make sure that we've got a properly prepared canvas. And for us, that means we've gotta have a nice data model with some data in there.\u003C/p>\u003Cp>If you don't have any sample data, you need some. Theming, you gotta be prepared. You gotta have that base layer to really properly theme. And then I always set up the project settings. So now that we've got that out of the way, we can go in and start theming.\u003C/p>\u003Cp>So let's go in and just take this Apple logo, looks like it's an SVG. For whatever reason, it's really hard save SVGs that are embedded. So I'm going to open up Versus Code. We're just going to save this SVG out to a file and then we're gonna import that, upload it into this particular project. Alright.\u003C/p>\u003Cp>So we're gonna save that and just paint that project logo on there. Looking great. Looking great. Apple logo. Amazing.\u003C/p>\u003Cp>Alright. For our public foreground, what are we gonna do? We're gonna do the same thing. We wanna use the Apple logo. I don't see any text with Apple on it, so we're just gonna use that same bit.\u003C/p>\u003Cp>I'm gonna take and pinch my palette knife and just dab that logo on the public foreground there. Again, advanced technique, work your way up to it. But just this dabbing and just a little turn can get you great results in your themes. Alright, so next little known fact, but you can include MP 4 files as a public background. So static images, great.\u003C/p>\u003Cp>Beautiful. Videos, even more. Wow. Really upped the wow factor on that. Makes you feel really welcoming when you log in and see a publicly beautiful log in page.\u003C/p>\u003Cp>Alright. So now we're just going to save a little bit. We've got got the basics of our theme. We've got our brand in tact. Now we just want to pull this theme out of the Apple website, out of our psyche, out of our out of our chi.\u003C/p>\u003Cp>And we're gonna do this using the directest minimal base theme. Lots of white space, lots of white space. We've got lots of, room to breathe here and that's really what Apple does well. Inside their design, lots of webs with these. They let the products shine.\u003C/p>\u003Cp>Alright. So we're gonna go into our modules now and let's just remove all the borders. I'm seeing this. I'm seeing the vision. We're not gonna have any borders on this.\u003C/p>\u003Cp>So we're just gonna paint over all those pretty borders. Great. Great. Looks really good. Okay.\u003C/p>\u003Cp>This looks really solid. Alright. So what I'm gonna do now, I'm looking for this subtle gray background that they use. The hex code is actually f a f a f a. In reverse that's AFAF.\u003C/p>\u003Cp>And this theme is calm AF. Alright so we're gonna go in and I want to adjust the logo bar, module bar logo, so we're just gonna edit our custom CSS there. Just, just give it a little background. Alright. Okay.\u003C/p>\u003Cp>And then anytime you change colors, you definitely wanna dive in and make sure you dust those demons out of it. Make sure those hex codes don't get stuck in your number pad. You really gotta take extra special care of that number pad. Alright, so we're gonna put this down. And now we've got this really nice looking canvas.\u003C/p>\u003Cp>It's all white, except we we've got a little border up there at the tippy top that we want to get rid of. But everything else looks it's really nice. Now one of the other things that I noticed on the Apple website is this large border radius around these cards. So if we look for this we could see the card global corner radius is like 28 pixels. This is rather large, but maybe let's dial it into like 18 pixels and see what that looks like.\u003C/p>\u003Cp>That gives like a nice clean effect. I'm feeling this. Do you feel it? Yes. You're doing great.\u003C/p>\u003Cp>Just keep following along. Let the spirit of the theme guide you to the final output. Alright. So, we're gonna pick up our half inch brush here and we're gonna look to dial in this border width on the project. Just like that.\u003C/p>\u003Cp>Just a quick stroke of your brush. You can blend that in, and there are no mistakes. There's only happy accidents and opportunities to paint a better theme. Alright, so within our header we're also going to look to remove that border so we can see it there inside our CSS properties. Border bottom.\u003C/p>\u003Cp>So we're just going to look for the border width inside the header and there we go. We've got this nice no border subtle effects. It looks great. Alright, so now what do we want to do? We want to take a look at our fonts.\u003C/p>\u003Cp>And we're actually using the system UI fonts. And I'm on a Mac as I paint this beautiful theme so we don't necessarily have to even use a different font. And that probably we cut this part here. I do all this and, get, like, a Kors error for this. So maybe, again, like, we cut this out, cut to some point in the future.\u003C/p>\u003Cp>Where is it? Where are you? Where are you? Cut. This is not gonna work.\u003C/p>\u003Cp>I think I'll find the course issue here. Open up the console. Great. Don't even need it. Can't use that font either.\u003C/p>\u003Cp>Yeah. Unfortunately, nope. Not doing it. System UI. Okay.\u003C/p>\u003Cp>Alright. So now within our SANs family we're just going to use the system UI as well and that should adjust all the labels within our forms to use the system default font. Now there's one other thing that I see that I wanna adjust here which is just this search input. So we're gonna go into our CSS settings here. We're going to go to our light theme customization inside our project and we're gonna change this background normal to the same white Xcode.\u003C/p>\u003Cp>Emphasis. Alright, so this is looking great. We'll just paint on a few final touches of this particular theme and we're gonna log out and we've got this beautiful public login page with a very stunning video for the viewers to log in to. That's it for this episode of The Joy of Theming. I hope you've picked up a few tips and tricks to use in your own themes.\u003C/p>\u003Cp>I'm not an expert, you're the expert. Thanks for following along on this journey. We'll see you.\u003C/p>","Welcome back to the show. I'm your host, Bry Ross. I thought you might join me with just a little breathing exercise before we theme today, just to bring us all down to the baseline vibration that we wanna be on when theming. Care to join me? Great. Alright. So let's take a deep breath in and out. That's perfect. Right. Let's dive into our theme today. Today we are going to be painting a beautiful apple theme. So I always start any project. Couple things. We want to make sure that we've got a properly prepared canvas. And for us, that means we've gotta have a nice data model with some data in there. If you don't have any sample data, you need some. Theming, you gotta be prepared. You gotta have that base layer to really properly theme. And then I always set up the project settings. So now that we've got that out of the way, we can go in and start theming. So let's go in and just take this Apple logo, looks like it's an SVG. For whatever reason, it's really hard save SVGs that are embedded. So I'm going to open up Versus Code. We're just going to save this SVG out to a file and then we're gonna import that, upload it into this particular project. Alright. So we're gonna save that and just paint that project logo on there. Looking great. Looking great. Apple logo. Amazing. Alright. For our public foreground, what are we gonna do? We're gonna do the same thing. We wanna use the Apple logo. I don't see any text with Apple on it, so we're just gonna use that same bit. I'm gonna take and pinch my palette knife and just dab that logo on the public foreground there. Again, advanced technique, work your way up to it. But just this dabbing and just a little turn can get you great results in your themes. Alright, so next little known fact, but you can include MP 4 files as a public background. So static images, great. Beautiful. Videos, even more. Wow. Really upped the wow factor on that. Makes you feel really welcoming when you log in and see a publicly beautiful log in page. Alright. So now we're just going to save a little bit. We've got got the basics of our theme. We've got our brand in tact. Now we just want to pull this theme out of the Apple website, out of our psyche, out of our out of our chi. And we're gonna do this using the directest minimal base theme. Lots of white space, lots of white space. We've got lots of, room to breathe here and that's really what Apple does well. Inside their design, lots of webs with these. They let the products shine. Alright. So we're gonna go into our modules now and let's just remove all the borders. I'm seeing this. I'm seeing the vision. We're not gonna have any borders on this. So we're just gonna paint over all those pretty borders. Great. Great. Looks really good. Okay. This looks really solid. Alright. So what I'm gonna do now, I'm looking for this subtle gray background that they use. The hex code is actually f a f a f a. In reverse that's AFAF. And this theme is calm AF. Alright so we're gonna go in and I want to adjust the logo bar, module bar logo, so we're just gonna edit our custom CSS there. Just, just give it a little background. Alright. Okay. And then anytime you change colors, you definitely wanna dive in and make sure you dust those demons out of it. Make sure those hex codes don't get stuck in your number pad. You really gotta take extra special care of that number pad. Alright, so we're gonna put this down. And now we've got this really nice looking canvas. It's all white, except we we've got a little border up there at the tippy top that we want to get rid of. But everything else looks it's really nice. Now one of the other things that I noticed on the Apple website is this large border radius around these cards. So if we look for this we could see the card global corner radius is like 28 pixels. This is rather large, but maybe let's dial it into like 18 pixels and see what that looks like. That gives like a nice clean effect. I'm feeling this. Do you feel it? Yes. You're doing great. Just keep following along. Let the spirit of the theme guide you to the final output. Alright. So, we're gonna pick up our half inch brush here and we're gonna look to dial in this border width on the project. Just like that. Just a quick stroke of your brush. You can blend that in, and there are no mistakes. There's only happy accidents and opportunities to paint a better theme. Alright, so within our header we're also going to look to remove that border so we can see it there inside our CSS properties. Border bottom. So we're just going to look for the border width inside the header and there we go. We've got this nice no border subtle effects. It looks great. Alright, so now what do we want to do? We want to take a look at our fonts. And we're actually using the system UI fonts. And I'm on a Mac as I paint this beautiful theme so we don't necessarily have to even use a different font. And that probably we cut this part here. I do all this and, get, like, a Kors error for this. So maybe, again, like, we cut this out, cut to some point in the future. Where is it? Where are you? Where are you? Cut. This is not gonna work. I think I'll find the course issue here. Open up the console. Great. Don't even need it. Can't use that font either. Yeah. Unfortunately, nope. Not doing it. System UI. Okay. Alright. So now within our SANs family we're just going to use the system UI as well and that should adjust all the labels within our forms to use the system default font. Now there's one other thing that I see that I wanna adjust here which is just this search input. So we're gonna go into our CSS settings here. We're going to go to our light theme customization inside our project and we're gonna change this background normal to the same white Xcode. Emphasis. Alright, so this is looking great. We'll just paint on a few final touches of this particular theme and we're gonna log out and we've got this beautiful public login page with a very stunning video for the viewers to log in to. That's it for this episode of The Joy of Theming. I hope you've picked up a few tips and tricks to use in your own themes. I'm not an expert, you're the expert. Thanks for following along on this journey. We'll see you.","ee082bea-c80f-4df4-a403-e58c2cc738df",[174],"ee50788f-5581-4a8b-80d1-9987d743b177",[],{"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",1773850453243]