[MUSIC PLAYING] This is my favorite part. We have seen hundreds of options for customizing various elements in filament. But if you want to change the whole look and feel of the app or make certain very specific style changes, then adding custom CSS is the way to go. How do we do that? Using CSS hooks. All throughout the filament markup,

Using CSS hooks. All throughout the filament markup, if you inspect the page and check, you will see a lot of these classes with the prefix Fi. Fi, TAC, TN, Fi, SC component, Fi, TA header tool bar, Fi, pagination, and all of these. These are the classes that you can hook onto. Add them in your theme file and override the existing styles. Does it feel hacky?

Add them in your theme file and override the existing styles. Does it feel hacky? No. It's the official way of doing things in filament. You will have to inspect your page. Look for classes, which have the Fi prefix. And you can apply the styles and override them. So here are some common hook class observations, the abbreviations that we can look for. Fi-FO, if it's something related to forms.

the abbreviations that we can look for. Fi-FO, if it's something related to forms. Fi-TA, if it's something related to tables, and so on. With this information, let's start changing the look of our application. Let's start with the sidebar first. It would be nice to separate this from the rest of the page. So let's open the theme file, which we created in the very beginning of this course. This is where we add all the hook classes

which we created in the very beginning of this course. This is where we add all the hook classes and override the styles. Since we wish to change the background of sidebar, let's see what class to use. You can right-click on the sidebar. Let me reduce this with. And probably add a higher resolution. And now let's try and inspect the entire sidebar. And go, yeah, something like this.

And now let's try and inspect the entire sidebar. And go, yeah, something like this. Yes, exactly here. This is the sidebar. This is where if you change the background color, it affects the entire sidebar. If you look at the class, it is Fi-sidebar, great. So let's add that. And we'll use the apply directive from Tailwind CSS and use all the tailwind classes.

And we'll use the apply directive from Tailwind CSS and use all the tailwind classes. Let's add BG white because the rest of the color is some sort of a gray refresh. As you can see, now the sidebar is separated from our main body. This is great. Now I want to give the slightly modern look where this main content on the side seems to be stacking on top of body

where this main content on the side seems to be stacking on top of body while the sidebar is on the body itself. So for this, we need to add a white background to body. Let's do that even before sidebar. So to the entire body, I will apply BG white. And for this main content, we need to figure out the class. Yeah, so now you see everything became white. So we need to change the background of this content here. So inspect, let's move up.

So we need to change the background of this content here. So inspect, let's move up. Yeah, it was right here. So looks like it's this main element and the class is Fi main. Let's use that. Fi main, let me apply BG slate 100 and add a little bit of margin at the top and bottom so that it looks like it's stacked on top. So yes, my two and some rounded corners.

and bottom so that it looks like it's stacked on top. So yes, my two and some rounded corners. So let's add rounded MD. Now refresh, let me close this so you can see what this looks like. This is what I was talking about. If you go to the dashboard, you can make it even more clearly. It looks like this is stacked on top. This is good.

It looks like this is stacked on top. This is good. But if we reduce the screen size, even at this point, I don't know if you can notice, let me increase the percentage. Yeah, so this rounded corners appears even on smaller screens where we don't need it. You can keep it or you can change it. You can add rounded corners only after the MD break point. So let me go back

You can add rounded corners only after the MD break point. So let me go back and set this to MD, rounded MD. Okay, so now you don't see rounded corners here only when the dashboard, when the sidebar appears, is when you see it. Okay, now I want a collapsible sidebar which we can add in the panel provider easily. Let's open the base panel provider and right here, we can say collapsible sidebar.

Let's open the base panel provider and right here, we can say collapsible sidebar. Sorry sidebar collapsible on desktop. Yes, that's the option. So what happens now is you get this arrow, you get this icon where clicking on it will collapse the sidebar. This collapsed one is great. But I don't like this arrow right here, which is pushing our logo to the right.

But I don't like this arrow right here, which is pushing our logo to the right. This doesn't look good. However, if the logo was on the left and the arrow was on the right, that would have been great. Luckily, we can change that. So let's inspect this and look at the parent component which probably has a flexbox. Yes, this one as you can see flex.

which probably has a flexbox. Yes, this one as you can see flex. So this is the header element with Fi sidebar header and it has the flex row. I'm sure it has display flex and the default is flex row. Let's change that to flex row reverse so we can reverse this. Okay, go to theme Fi sidebar header, it was right. Yeah, apply flex row reverse.

Okay, go to theme Fi sidebar header, it was right. Yeah, apply flex row reverse. Now it's done. Yeah, this looks better. Let me close this and you can see. However, we need to change the alignment. We can apply a little bit of margin top for this. So we need to find the class for this particular icon. Now you have to be careful to not apply a style to a very general icon.

Now you have to be careful to not apply a style to a very general icon. Say for example, if you try and apply to Fi icon, then all the icons and filament will get affected. So you'll have to be very specific here. Look for the exact sidebar button. So something like Fi sidebar, close, collapse sidebar button. I think this is it. We could apply some top margin here. Fresh, yeah, that's more aligned, that's better.

We could apply some top margin here. Fresh, yeah, that's more aligned, that's better. Now it would be nice if I could actually hover over the sidebar and only then show the icon. Otherwise it's hidden. So what we can do for that is we can say Fi sidebar hover Fi sidebar, close, collapse sidebar button. Yes, apply inline flex. Yeah, I think it has flex. So you can apply this, but we have to first hide it.

Yeah, I think it has flex. So you can apply this, but we have to first hide it. So right here, it's first hidden and on hover over the sidebar, it appears, right? So fresh, you see, that looks great. Also, I think this icon is slightly bigger and it's looking out of place. If we add this within something that looks like a button but very subtle, it would be great. So you can add a background color to this.

but very subtle, it would be great. So you can add a background color to this. Maybe BG Slate 100 and also like I said, it's slightly bigger, right? So I think the button size is okay, but the icon size is quite big. That's what we need to change. So let me copy this Fi sidebar, close, collapse sidebar button. SVG is the thing we need to change. Apply size four, size five.

SVG is the thing we need to change. Apply size four, size five. Let me see. Yeah, size five is okay. All right, now if I click on this and close it, we still see this icon having the same old styles. It needs to be consistent. Inspect, check. Yeah, this has Fi sidebar open collapse sidebar button instead of close.

Yeah, this has Fi sidebar open collapse sidebar button instead of close. The same thing, just copy it again instead of close. We just have to apply all the styles except for hidden, okay? And here we do the same for the open one as well, which is yeah, this. So apply size five or I think size four is better. See, close it, refresh. Yeah, this looks subtle and it's there. Now these icons here, I feel they are quite thick.

Yeah, this looks subtle and it's there. Now these icons here, I feel they are quite thick. We can even change the stroke width. It is Fi sidebar item icon. Perfect. Let's apply stroke. One, we'll see what this looks like. Close this, one might be too light. Let's change the stroke width to 1.5. I don't know if we can do that in tailwind.

Let's change the stroke width to 1.5. I don't know if we can do that in tailwind. So let's just use CSS here. That's the best part. We can both use both CSS and tailwind 1.5. Let's refresh. I think it was 1.5. So we don't see much of a difference. Let's make it 1.25. This should be good.

Let's make it 1.25. This should be good. Yeah, this is great. All right, now our sidebar looks really good. Now onto this table. Now I do want this white background for the table itself because our cards anyway have white backgrounds. It would be great to show these cards directly. So let's see if we can set a transparent color, transparent background to this table.

So let's see if we can set a transparent color, transparent background to this table. And let's find the exact element. Yeah, looks like this is the entire table. Now when you're not sure which element to add styles for, you can do that directly in the browser and check. If this is the one, then you can copy the exact class name and make the actual changes. So right here, if I just say background color, transparent, yes, that worked.

So right here, if I just say background color, transparent, yes, that worked. So we don't have that background color. Let's also remove the borders. I don't know, is it border? None. Okay, this didn't work. Let's see what are the actual styles here. Border, radius, okay, background color, which is changed.

Border, radius, okay, background color, which is changed. All right, so what we are seeing is not a border. It's a shadow. So let's add a box, shadow and set it to none. That worked. So we don't see a border around this. Let's actually make these changes here. So what was the class name again?

Let's actually make these changes here. So what was the class name again? F-I-T-A-C-T-N. Based it here, we can use tailwind classes here, BG transparent and shadow none. Okay, let's see if that works. Yeah, the shadow none is not working. Sometimes that happens that you cannot override that exact thing in CSS, in tailwind. So let's add box, shadow to none, and that works.

that exact thing in CSS, in tailwind. So let's add box, shadow to none, and that works. Let's remove this border also. So inspect, find the exact one. Okay, after digging around a little, I found that this is the element that has a border bottom as one pixels. So if you remove that, it's gone. So this is F-I-T-A-C-T-N and F-I-T-A header toolbar.

So this is F-I-T-A-C-T-N and F-I-T-A header toolbar. Let me copy it exactly as it is. And let's see if apply border none works. Close this and refresh. It does work. Okay, similarly, we have this border also and I have done the digging around. So let me make those changes. It is F-I-T-A-C-T-N and F-I pagination.

So let me make those changes. It is F-I-T-A-C-T-N and F-I pagination. Yes, apply, sorry, apply border none. Let's see, does it change? Yeah, it did change. This is great. We also need to remove the unnecessary padding here. When we had the table border, we needed the padding. Now that we've removed it, we can remove the padding from this header,

Now that we've removed it, we can remove the padding from this header, from the main content and from the pagination. Once again, I have found out the class names. So I'll save you some time and this is what we do. F-I-T-A-C-T-A-C-T-N header toolbar, pagination. And we can apply two pixels of padding just to show this border. I'll show you what I mean because if I make it zero,

I'll show you what I mean because if I make it zero, if I make the horizontal padding zero, for some reason, yeah, you see this shadow seems to be getting cut off. That's not what we want. So let's leave a little bit of room and apply two pixels of padding. It's not visible, but it's okay. Next, we are not able to read the entire placeholder text here.

It's not visible, but it's okay. Next, we are not able to read the entire placeholder text here. The search bar is, the search input is too short. Let's increase this. Once again, I've found the class that is F-I-T-A-Search-Field-Input. Search-Field and Input is within that. Apply with 48 and that's much better. This change applies in the other pages as well. So you can look at it. Now, coming to the cards UX.

So you can look at it. Now, coming to the cards UX. You see both these cards, the titles, the authors, they're not aligned. That's because we have extra information here. That is the requested badge, this doesn't. And it seems like the items are aligned in their center. That's not what we want in our case. So if you inspect, go to the element which has Flex. Here, if you use the Align items property

So if you inspect, go to the element which has Flex. Here, if you use the Align items property and set it to start, yeah, you see immediately it changed. And it changed only for this card. So let's do this for all the cards using F-I-T-A split class. That's the CSS hook class. And we need to say apply items start, yeah. Close this. And yeah, now you see this is aligned so much better. And the same changes, of course, reflect in all the pages.

And yeah, now you see this is aligned so much better. And the same changes, of course, reflect in all the pages. These images have very sharp corners. Let's change those also. If you inspect again, this is the F-I-T-A image, image, that is the image within our table. Since we wanted to affect all the images in all tables, we could say F-I-T-A image, image, apply rounded MD, yeah. And that looks good. Or we could change it to SM as well.

And that looks good. Or we could change it to SM as well. Too very rounded, SM should be nice as well. Yeah, all right, most of our changes are done. One more thing I would like to do is shift these tabs to the left, so inspect element. And yeah, we see F-I tabs. And here you see the style margin in line auto, which is why it's in the center. So if you uncheck this, you get full width,

which is why it's in the center. So if you uncheck this, you get full width, but then we can again change it using width and set it to min content, right? So this is F-I tabs, copy F-I tabs, paste it here, apply MX-0, yes, that's perfect, and W-fit. Now refresh, yes. These tabs are on the left, that's great. Even the highlight, I feel this is very, very subtle. I can't immediately make out which is the highlighted tab.

Even the highlight, I feel this is very, very subtle. I can't immediately make out which is the highlighted tab. I would like to change the background to something more prominent, which is probably the primary color. So inspect this and let's see what this is, yeah. This is probably the button and it's the active one. So pick this up, F-I tabs item and F-I active. Change the background color, apply BG primary 500, I guess. Yeah, and let's add text white here. I don't know if that will work, refresh.

Yeah, and let's add text white here. I don't know if that will work, refresh. Yeah, so the background color worked, but not the text. Maybe we'll have to go to a span. Yeah, we might have to change the color here within the span. You could copy this, change the span color to sorry, text white. Let's see, oh, so changing the span color also changed this color within the badge. So instead let's try and get the exact class here. So F-I tabs item label is the one within the active tab.

So instead let's try and get the exact class here. So F-I tabs item label is the one within the active tab. So, yeah, so this is what we do, refresh. Yeah, now only the text has been changed. We also need to change the icon. So let's say, and F-I active SVG as well. Refresh, yes, let's check. Yeah, this is working great. Great, now our app doesn't look like the default filament app at all.

Great, now our app doesn't look like the default filament app at all. It looks more like a library. And also if you ever feel like filament uses two very rounded corners and a little bold shadows, you can change all of that in one single place. You can change the theme variables itself. So let's go back here on top. You can change the theme, the tailwind theme itself like so. So the theme variables that tailwind uses

You can change the theme, the tailwind theme itself like so. So the theme variables that tailwind uses of radius LG and Excel, this is used everywhere in filament. So what if we change that itself to something much lesser? And refresh, look at that. We have much better rounded corners. This looks great for our app, so I'm retaining the styles. You can obviously make a lot more changes if we keep going, this will never end.

You can obviously make a lot more changes if we keep going, this will never end. So this was just a way to show you how to hook into those classes, how to actually dig into those classes, find them, make changes right in the browser, and then probably go and do those in your theme file. See you in the next one.