[{"data":1,"prerenderedAt":427},["ShallowReactive",2],{"footer-primary":3,"footer-secondary":93,"footer-description":119,"joy-of-theming-walmart-theme":121,"joy-of-theming-walmart-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},"ed8c1a76-e3b6-4c75-b4b9-9a7a37ebcf61","walmart-theme","931473260","Join Bry as he brings the essence of better living to life with a happy little Walmart theme. Grab your theming brushes and following to turn savings into art.","b0bf0366-015c-43a4-a6f9-267366bd3bbe",8,9,"2024-05-20","Walmart (Blueprint for Savings)","\u003Cp>Speaker 0: Oh, hi. How are you? Welcome back to the show. I'm your host, Bry Ross. I was just taking a look at some of our fan mail.\u003C/p>\n\u003Cp>Got a couple questions from some viewers here and maybe we'll just start the show by reading those. Dear Bry, I wanted to know if your pet squirrel, Peapod, could paint themes as good as you can. Love, Mary. Well, Mary, I I think that even animals can be very creative. But, unfortunately, Peapod doesn't have opposable thumbs so it makes it really hard for her to grasp a palette knife or a half inch brush.\u003C/p>\n\u003Cp>Now, she could potentially use her teeth but I've not had the time to train her for that yet. But thank you for writing in and maybe we'll get there one day when squirrels can paint beautiful themes just like the rest of us. Alright, so let's dive into our theme today. We are going to be painting a Walmart theme. So if you're new to the show I can't overemphasize the importance of having a prepared canvas.\u003C/p>\n\u003Cp>So as you can see as I set up my project settings I've got a complete data model already ready to theme. This is absolutely vital as a starting point. So we're just gonna go in and add our project name. We're going to add the project descriptor to save money, live better. Of course Walmart does it.\u003C/p>\n\u003Cp>And then we'll go in and start adding our branding. So we're gonna lift that Walmart logo, import that using the, import from file URL, and then for the public foreground we'll just use that as well. We'll go in and also just start painting the rest of our broad strokes, looking for a public background that's gonna do us justice here. Just keep keep working the canvas until we find what we're looking for. Just a little up and down there, a little wax on, wax off if you're a fan of mister Miyagi.\u003C/p>\n\u003Cp>He was a student of mine in the past, came to me for theming help and was able to give that to him. Alright, so this looks like a beautiful representation of everything that is Walmart. Who doesn't love getting bags of groceries delivered to their door? Amazing. So we'll just paint that as the public background.\u003C/p>\n\u003Cp>Alright. So now that we've got our basic appearance, let's start adding some color to this canvas. Alright. So I'm just gonna come in and pick up a couple of hex codes here. Trying to find this on the Walmart website is what we really want to do, so we'll just look for that background for that header, that's gonna be our project color.\u003C/p>\n\u003Cp>We'll call that the Royal Walmart Blue because they are clearly American royalty. Alright, so we've got that. Now I want to make that whole module bar that same color. So I'm going to go into our light theme, into the navigation and into the background. We're just going to spray on a little bit of CSS variable using project dash color.\u003C/p>\n\u003Cp>Alright, so that's great. Now we've got that whole bar fixed, but we need to fix the foreground because we want that to be white and make it match the website exactly. We want to hit that same tone. We want to evoke those same emotions. And remember, as you're theming, there are no mistakes.\u003C/p>\n\u003Cp>There's only opportunities. Opportunities to add a little more character, a little more beauty. It's all right in your hands. Alright. So now this is looking nice.\u003C/p>\n\u003Cp>We got a nice subtle hover effect when you look over the modules. And last but not least, I'm just going to paint in a little foreground active. We're gonna use that same project color just to finish off that last little touch there. Alright. So now anytime you are theming, whenever you change colors, you wanna make sure you clean your keyboard so those hex codes don't get stuck in there.\u003C/p>\n\u003Cp>Otherwise, you might be messing with colors that you don't really want on your palette, on your theme. Alright, so now let's move on to the list view for Walmart. Right? We want to control that secondary navigation there. Let's make this whole thing blue to match the Walmart website.\u003C/p>\n\u003Cp>This is the job for our trusty pallet knife. We're just going to pick this up and just flip it at a 90 degree angle. Just break that down. Just break it on down the sidebar or navigation. Alright, so we set our foreground.\u003C/p>\n\u003Cp>We're gonna set that to be white as well. This is looking really nice. Just a little more. Just light strokes. You want to use a light touch when you're theming.\u003C/p>\n\u003Cp>You don't need to force anything. Just light little strokes. Great job. Great job. Now, we're also gonna go in and paint a couple little happy hover effects in here.\u003C/p>\n\u003Cp>Looking great, so we'll just add a little background hover, make that just a hair darker and on the background active, just lighten that up a little bit, make it a little darker as well. There we go. Okay, now this is looking really nice. Just take this. Okay.\u003C/p>\n\u003Cp>Great. Alright. So one of the next things that I want to do here is just dial in those fonts. So we're gonna inspect for the font. I'm just gonna search.\u003C/p>\n\u003Cp>So we'll bring up that keyboard, search for the font within the CSS and the font name is Bogle. Alright, so custom CSS, we're gonna use the at fontface rules. Just use a little font family action there And we're going to call this Bogle. And we're going to take this URL that we've got from Walmart and just paste that in there. Just copy, oh, just do a little copy action there.\u003C/p>\n\u003Cp>Sometimes those, those URLs are tricky, They don't wanna be copied. So you just gotta approach them slowly and just paste them. Alright. So now we've got that. We can see, if the font is being loaded.\u003C/p>\n\u003Cp>I don't necessarily see it, but, oh, there it is. Sometimes we just gotta go in and paint that into our fonts before it appears. So we go into our light theme customization for the display font. We'll set that and voila. Wow.\u003C/p>\n\u003Cp>This theme is really coming together. Let's go in and just sign out and paint the final touches there. Looking really nice. Got all of our products. We're gonna sign out and beautiful.\u003C/p>\n\u003Cp>We've got a great looking login page with a smiling happy customer. What could be better? That's it for this episode of The Joy of Theming. Thanks for joining me. And remember, you too can paint a perfect theme.\u003C/p>","Oh, hi. How are you? Welcome back to the show. I'm your host, Bry Ross. I was just taking a look at some of our fan mail. Got a couple questions from some viewers here and maybe we'll just start the show by reading those. Dear Bry, I wanted to know if your pet squirrel, Peapod, could paint themes as good as you can. Love, Mary. Well, Mary, I I think that even animals can be very creative. But, unfortunately, Peapod doesn't have opposable thumbs so it makes it really hard for her to grasp a palette knife or a half inch brush. Now, she could potentially use her teeth but I've not had the time to train her for that yet. But thank you for writing in and maybe we'll get there one day when squirrels can paint beautiful themes just like the rest of us. Alright, so let's dive into our theme today. We are going to be painting a Walmart theme. So if you're new to the show I can't overemphasize the importance of having a prepared canvas. So as you can see as I set up my project settings I've got a complete data model already ready to theme. This is absolutely vital as a starting point. So we're just gonna go in and add our project name. We're going to add the project descriptor to save money, live better. Of course Walmart does it. And then we'll go in and start adding our branding. So we're gonna lift that Walmart logo, import that using the, import from file URL, and then for the public foreground we'll just use that as well. We'll go in and also just start painting the rest of our broad strokes, looking for a public background that's gonna do us justice here. Just keep keep working the canvas until we find what we're looking for. Just a little up and down there, a little wax on, wax off if you're a fan of mister Miyagi. He was a student of mine in the past, came to me for theming help and was able to give that to him. Alright, so this looks like a beautiful representation of everything that is Walmart. Who doesn't love getting bags of groceries delivered to their door? Amazing. So we'll just paint that as the public background. Alright. So now that we've got our basic appearance, let's start adding some color to this canvas. Alright. So I'm just gonna come in and pick up a couple of hex codes here. Trying to find this on the Walmart website is what we really want to do, so we'll just look for that background for that header, that's gonna be our project color. We'll call that the Royal Walmart Blue because they are clearly American royalty. Alright, so we've got that. Now I want to make that whole module bar that same color. So I'm going to go into our light theme, into the navigation and into the background. We're just going to spray on a little bit of CSS variable using project dash color. Alright, so that's great. Now we've got that whole bar fixed, but we need to fix the foreground because we want that to be white and make it match the website exactly. We want to hit that same tone. We want to evoke those same emotions. And remember, as you're theming, there are no mistakes. There's only opportunities. Opportunities to add a little more character, a little more beauty. It's all right in your hands. Alright. So now this is looking nice. We got a nice subtle hover effect when you look over the modules. And last but not least, I'm just going to paint in a little foreground active. We're gonna use that same project color just to finish off that last little touch there. Alright. So now anytime you are theming, whenever you change colors, you wanna make sure you clean your keyboard so those hex codes don't get stuck in there. Otherwise, you might be messing with colors that you don't really want on your palette, on your theme. Alright, so now let's move on to the list view for Walmart. Right? We want to control that secondary navigation there. Let's make this whole thing blue to match the Walmart website. This is the job for our trusty pallet knife. We're just going to pick this up and just flip it at a 90 degree angle. Just break that down. Just break it on down the sidebar or navigation. Alright, so we set our foreground. We're gonna set that to be white as well. This is looking really nice. Just a little more. Just light strokes. You want to use a light touch when you're theming. You don't need to force anything. Just light little strokes. Great job. Great job. Now, we're also gonna go in and paint a couple little happy hover effects in here. Looking great, so we'll just add a little background hover, make that just a hair darker and on the background active, just lighten that up a little bit, make it a little darker as well. There we go. Okay, now this is looking really nice. Just take this. Okay. Great. Alright. So one of the next things that I want to do here is just dial in those fonts. So we're gonna inspect for the font. I'm just gonna search. So we'll bring up that keyboard, search for the font within the CSS and the font name is Bogle. Alright, so custom CSS, we're gonna use the at fontface rules. Just use a little font family action there And we're going to call this Bogle. And we're going to take this URL that we've got from Walmart and just paste that in there. Just copy, oh, just do a little copy action there. Sometimes those, those URLs are tricky, They don't wanna be copied. So you just gotta approach them slowly and just paste them. Alright. So now we've got that. We can see, if the font is being loaded. I don't necessarily see it, but, oh, there it is. Sometimes we just gotta go in and paint that into our fonts before it appears. So we go into our light theme customization for the display font. We'll set that and voila. Wow. This theme is really coming together. Let's go in and just sign out and paint the final touches there. Looking really nice. Got all of our products. We're gonna sign out and beautiful. We've got a great looking login page with a smiling happy customer. What could be better? That's it for this episode of The Joy of Theming. Thanks for joining me. And remember, you too can paint a perfect theme.","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,154,155,122,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","c338c610-19d5-45b1-af66-3cf34c67a2ec","07649ac4-e135-42c0-bcc9-bafb980dd9ec","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":156,"slug":163,"season":144,"vimeo_id":164,"description":165,"tile":166,"length":167,"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},"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.",[173],"2b58734a-bc15-4b6a-be98-4ff372e66fab",[],{"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",1773850452203]