Central Perk (Coffee is Better with Friends)

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.

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.