The only thing pending now is a beautiful login page because that's the first thing our users see. So how do we transform this simple default filament login page into something beautiful without much effort? By using render hooks. Let's say I want to show some text below the login form that says something like need help logging in, contact support. Filament allows you to render blade content at different places in views using render hooks.

Filament allows you to render blade content at different places in views using render hooks. The documentation has a list of available ones as you can see in the panels and then in the tables and then probably actions and widgets and so on. If you look at the panel render hooks, the very first one here. Oth login form after is the one we can use to render some blade content immediately after the login form. So first let's register a render hook in the app service provider in the boot method. Let's call filament view, register render hook where the first argument is the

method. Let's call filament view, register render hook where the first argument is the name of the render hook which is panels render hook. As you can see, Oth login form after is what we need. And the second argument is a call back with the content function view something like that. We can create a blade file filament hooks. Let's call it login info. And let's create this view file.

Let's call it login info. And let's create this view file. Now here you can add any HTML content something like I said need help logging in. And then you can say contact support can give a link here. We don't have a contact page, let's just add some color like text primary 600. Over underline or something. And let's see what happens. So this is what you get right after the login form you get this custom blade content.

So this is what you get right after the login form you get this custom blade content. Let's just align it in the center. Let's add text center and a slightly gray text text slate maybe 600. And some margin top like empty six refresh. The margin top is in taking effect. I think we'll have to do npm run dev once again stop the process run it again. And now refresh yes, this is good. So it's not just HTML that you can inject you can also inject styles. Say for example, let me close this terminal.

So it's not just HTML that you can inject you can also inject styles. Say for example, let me close this terminal. And I can add some styles here only for this page. Something like let's add a background color to body. Some dark gray just to see if it works. Yeah, so you see you can add any styles which will affect only this page because the blade view is rendered only here. Now we can't use tail when CSS here. So what we do is we will create a CSS file and import tail when CSS is there.

Now we can't use tail when CSS here. So what we do is we will create a CSS file and import tail when CSS is there. Go to resources CSS filament create a new file login. Yeah, you can just say login dot CSS. Here you can import tail when CSS. And add any styles here. But even before that we need to add this in our wheat config. In the input also add resources CSS filament login dot CSS. Also include this instead of styles here include this using the wheat directive .

Also include this instead of styles here include this using the wheat directive . Resources CSS filament login dot CSS. Now instead of using regular CSS. Let's use the apply directive of tail when and add some color like BG slate 500 . Yeah. So as you can see this is BG slate 500. Now in this login dot CSS we can add any styles that will apply only to the login page.

Now in this login dot CSS we can add any styles that will apply only to the login page. So let's convert this login page into something really beautiful. We'll start with the mobile design first. So for a small screen size we can simply add a background image. And for slightly larger screens like a desktop maybe above 1200 pixels. We can we can make this into a split screen where the left part of the screen is an image. The right half is contains this exact form. We'll start with the mobile.

The right half is contains this exact form. We'll start with the mobile. So let's add a background image to the body instead of BG slate. I will use regular CSS here to add a background image. I've picked one a beautiful image from unsplash. Let's just center this using BG cover and BG center. Let's see what this looks like first. Yeah. This is actually a beautiful image of some books here since we are not able to see the books.

This is actually a beautiful image of some books here since we are not able to see the books. I think BG center is not the best. BG left would be better. Refresh. Yeah. So now you can see some books but that's okay. Since it's a mobile screen there isn't much you can do. But once we go slightly bigger let's make this image appear on the left half and this on the right.

But once we go slightly bigger let's make this image appear on the left half and this on the right. So let's see what this section is called if you inspect. So this login box that you see is the main element. So we can simply apply styles to main and we want to do this for screens above 1024 pixels, media screen and min with thousand right full pixels. Here for the main element let's apply position absolute. So we can position it wherever we want and it's in the right. So we can say right zero and also we wanted to stretch the full height of the

So we can position it wherever we want and it's in the right. So we can say right zero and also we wanted to stretch the full height of the screen. So we say heads screen let's see what this looks like. Yeah. So as you can see it is a position to the entire right but it's not occupying half the screen. So we'll have to mention the width. So here we can say width one by two and there were some rounded corners. We don't want that rounded none.

So here we can say width one by two and there were some rounded corners. We don't want that rounded none. So width one by two isn't taking any effect looks like the some other style. Let's inspect. And here if in main if you scroll down and look there is a max width style which needs to be overridden. Otherwise it doesn't work. So we can either say W half and max width none or we can override max width itself to half. And now yes it's occupying half the screen.

itself to half. And now yes it's occupying half the screen. That's great. Now whatever is the content within the law within the main. That is this form and the logo and the entire content needs to be vertically and horizontally centered. So this div let's apply grid and place item center to main so that the content inside gets centered. Yeah, that's better. But we need to stretch it a little maybe use a width for the content within

Yeah, that's better. But we need to stretch it a little maybe use a width for the content within that is this div. So let's say main div something like this apply with full and also limited. Yeah, so this is perfect. Now however notice that the image here is not actually in the left it is still applying for the entire body. But for larger screens we want the image to be exactly here. So what we can do is for the body we can actually set BG none. That is we can reset the background image to none.

So what we can do is for the body we can actually set BG none. That is we can reset the background image to none. Just add a background color but add another element that is a pseudo element using CSS with body before and set this exact background image to that div and also position it absolute. In set zero the first half of the screen and yes BG cover. It could be BG center here and also make it slightly transparent by setting opacity to 80. Alright, let's see. Yeah, this looks really nice.

Alright, let's see. Yeah, this looks really nice. We can see the entire image here. So this is what we have for small screens. It really doesn't matter. There isn't much space to play around. But for larger screens we see a beautiful image on the left and some content on the right. Maybe the logo here can be slightly bigger. We can use the CSS hook fi logo and apply height maybe h16 or h20.

Maybe the logo here can be slightly bigger. We can use the CSS hook fi logo and apply height maybe h16 or h20. Let's see. Okay, it doesn't apply. Sometimes if this happens you will have to use the important modifier. So prepend it with an exclamation. Yes, this works but it's slightly big. Let's make it had 16. That looks great. Let's add some margin bottom to the logo using MB, maybe 10 fresh.

That looks great. Let's add some margin bottom to the logo using MB, maybe 10 fresh. Yeah, now that is great. So we have a beautiful login page by just injecting some HTML in CSS. You can do the same in the signup page also if you want or you can just retain this in the login page. Make sure to explore the other render hooks available. That's the easiest way to add some additional content. And that brings us to the end of the series. You've seen how to go from a plain filament install to a beautifully customized

And that brings us to the end of the series. You've seen how to go from a plain filament install to a beautifully customized app end-to-end. Hopefully the series gave you the confidence to make filament work the way you want it to. Not just out of the box but best suited for your apps brand and user experience . Thank you for sticking till the end. See you in another course.