The Simpsons (Doh!)

Speaker 0: Hi. Welcome back to the show. I'm your host, Brad Ross. And for the next few moments together, you and I will experience the joy of theming. So we've got an extra special show for you today.

We're gonna be painting a beautiful Simpsons theme. The Simpsons is one of the longest running animated shows in history and couples very well with Directus because Directus has been 20 years in the making. The Simpsons may be even older than some of you watching this. You know what? That's okay, We can all paint beautiful themes.

So let's dive in. Alright, so whenever I'm painting a theme the first thing I always like to do is pull out my keyboard and bang in the project settings. So we'll just name this The Simpsons, it's the greatest show, and then we'll add our URL. So now that that's done we're going to pull out our brush a little bit and just dab a little bit of that Simpsons yellow all over our theme, all over our canvas here. Now we're gonna pick up the logo, add some public foreground, just use that same logo there.

And then let's find a a great background for The Simpsons. What could be more perfect than painting just a little of that that couch scene that is in every episode. Now as far as the public note this is what displays on the bottom of the login page. So we'll just add that welcome to Simpsons Wiki. Wiki Wiki.

Alright. And now for the public favicon maybe we'll just use this lovely image of Homer. Just paint that in there. Just great. Okay.

So now we've got our basic shades. We've got a nice looking logo. Let's dive in and actually start theming this. One of the things that I wanna do, I'm gonna pull out my trusty palette knife and for our module background we're just gonna spread that yellow on our module background and then adjust our foreground colors. Now this is looking very nice, it's looking very Simpson y, if that's a good word.

Now we'll just add a little bit of a hover effect to this, make it very subtle. And, any time you change colors remember that you have to just get in there and dust those demons out so those colors don't create unwanted combinations. Now as far as this theme, it's looking really nice. Let's go in and adjust some of our global settings. So our background for the the whole page here, I wanna use a Simpson color.

So we're just gonna use a little CSS color mix there. That's a little bright, little bright. We're gonna dial that back to, like, 80%. Okay. So that's a nice mix.

Color mix is one of my favorite methods in CSS to blend colors together. So now let's, how fun would it be if we took our palette knife and we just spread a little of that Homer Simpson donut all over this theme. So let's try and recreate that effect. We'll just look for a sprinkle SVG background and let's make a donut out of this. So we'll use a light pink color here and then bring out that fine detail brush that half inch brush just dial back the sprinkle opacity a little bit and wow this is looking really great.

So I'm gonna copy this CSS, we're gonna open up my code editor and, I just want the URL piece of this. Now inside our navigation background paste that in there and just just paint those lovely sprinkles up and down this theme. That's looking really nice. This is looking like something Homer himself would love to eat. Alright, so we're gonna dive in as well.

Now we're gonna change the background of the project settings up at the top, give it just a little bit of opacity to make it easier to see, but we don't want to obstruct our beautiful Let's also set up our little active, for those links. So we want the background to be white on active and then on hover we're just gonna paint in a nice little opacity, just 80% opacity. That's a really good value for opacity. You're doing great, hope you're following along at home and really enjoying this theme. Alright, so now we're gonna pick back up that palette knife just paint some border colors on there.

There we go, we get a nice little border accent. Looking great, looking great. Alright, now we want to add a little bit of border to separate these different sections, give them a little more breathing room. So again, I'm gonna pull up, just this sprinkle, and a little darker 4 pixel border for the navigation on the far right side. And then I'm also gonna do the same on the module setting so that we can, separate that donut, make it look like, an actual donut here.

So we'll just bang in some settings there for our border color and voila, it's looking really nice. Again, don't don't forget to use that duster liberally just because you don't want those colors to mix unwantedly. Oh, I just missed a little spot there. Alright, so now we've got this great, great looking thing. Things are starting to come together.

But, I wanna adjust my fonts. So we see this font, it's a good looking font, but we need to add our title heading, but we also need that blue background. So let's do that. We're gonna use a little subtle blue across the top just to really set this theme off. So we'll just use our 5 inch, half inch brush there.

Just really nice. Just paint that little detail in. Just keeps blending those colors a little bit till we get exactly what we're looking for out of it. Great. Great.

Yeah. Nice. Very good. We've got a little darker border. This is chef's kiss.

This is looking very nice. This is totally a theme that Homer would want to eat. Alright, so this is not a great font, but this, this rock salt font on Google Fonts looks very close to what the Simpsons title font is. So we'll just add that in there. Take a look at it.

Maybe we dial that back a little bit to 400. And what I also wanna do here is just change the color to white. So I may just spread that color all over there. One of the other things that you'll notice is the Simpsons title font has a little subtle offset. It's got a black offset to it as well.

So we can do that here inside custom CSS inside Directus. So it doesn't have to be all just themes, we can just go in and paint some custom CSS in there. That looks really nice. So now we've got our appearance set up. Everything's looking good.

Let's dial this in even further because we we see we've got a search collection box that is just messing with our Mojo, and I don't like it. There are no mistakes, only happy accidents, opportunities to improve our theme, but this is one that I have to fix. So we'll just go in there and use our CSS selector for that. Just clean that up a little bit there. Blend that in.

Looking very nice. Okay. All right. So we're done with our theme. Let's log out, take a look at our public login page, and wow, this really makes me feel like I'm right there in Springfield.

That's it for this episode of the joy of theming. Tune in for the next episode where we have an extra special surprise for you.