Customizing the Nova logo 0:00Once you've finished implementing your backend using Laravel Nova, maybe you want to change how it looks as well. Luckily, this is pretty easy with Laravel Nova. So the first thing that I personally would want to change is change the logo on the top left corner. So if I would use this for my own company, maybe I want to use my company logo and brand name on there. So to do this, we can go to Sublime and in the resources, views directory, we have the vendor and this contains the Nova partials that we can overwrite. So out of the box, we have a logo blade PHP file, which contains the SVG logo.vendor and this contains the Nova partials that we can overwrite. So out of the box, we have a logo blade PHP file, which contains the SVG logo. So let's just get rid of this. And instead we have just a P tag with text center and full width, and it's just going to say beyond code. Okay, let's take a look at it. Okay, I like that. Now we also have this user menu. So maybe we want to add different entries in here as well. So we can do this by going to the user blade PHP file. Editing the user menu 1:12So maybe we want to add different entries in here as well. So we can do this by going to the user blade PHP file. So in here we have the dropdown. It has by default uses the Gravatar for the user's email address. So if you want to display your own avatars, you can just change this. It displays the user's name and then we have the dropdown menu. So in here, you can just copy the logout link and add your own custom link. And if we take a look at it, now we see that we now have two links in here. Okay, what else would I change? Maybe I want to remove this footer entirely. Overriding layout to remove footer 1:56Okay, what else would I change? Maybe I want to remove this footer entirely. I don't want this on every page. And as you can see, you don't have this blade file in the vendor directory by default, but this behaves just as every other vendor and package view files. So you can just overwrite them in your application resource directory. So what we can do is we can go to our Nova directory, go to the resources, and in there we see the views and there is a layout blade PHP file. And this is the layout that is being used for the complete page. So we can just copy this content.And this is the layout that is being used for the complete page. So we can just copy this content. Then in our own resource views vendor, Nova directory, we're going to create a new file. Just paste in the content, and then we're going to save this as layout.blade.php. Yes, use PHP extension. So now Laravel is, when it's looking for this layout blade PHP file, it's using our file instead of the one that comes with the Nova package. So now we are able to take this footer text and just remove it entirely. And if we refresh the page, we changed this. So this way you can modify the complete layout in terms of how the view looks like. Creating a Nova theme 3:25And if we refresh the page, we changed this. So this way you can modify the complete layout in terms of how the view looks like. What else would be nice is if we can change the colors. So maybe you want to change the colors so it matches your brand and your company or the clients that you use colors or just change the CSS entirely. And to do this, you can also create Nova themes. So themes are just CSS files that you can also share with other people and reuse throughout different projects. And you can create your own theme by using the Nova CLI tool. So head back to iTerm and there I'm going to say PHP artisan Nova theme and give itAnd you can create your own theme by using the Nova CLI tool. So head back to iTerm and there I'm going to say PHP artisan Nova theme and give it the name of the theme. So this as this can be shared, it's also just like the tool or the card or the field expecting a package like name. So we're going to use beyond code and just call it Nova theme. And then it asks us if we want to add it to our package file. Yes, we do. Okay. And now you can already see that it does covered the package beyond code Nova theme. Modifying theme CSS 4:43Okay. And now you can already see that it does covered the package beyond code Nova theme. So if we just go back and refresh, let's see what changes. Okay, so now we have a completely new theme. And let's take a look at how we can modify this. So if you go to our Nova components directory, we now have this Nova theme directory. And it also has a service provider that you can use. And it comes with a theme dot CSS file. And this CSS file overrides some CSS variables that we can use. And it can just define different CSS selectors and different styles that will be appliedAnd this CSS file overrides some CSS variables that we can use. And it can just define different CSS selectors and different styles that will be applied to our Nova application. So just like this, you can change the basic layout and the look and feel of your Nova application. Together with custom themes and being able to override existing blade views that ship with Nova, you have complete flexibility on the way that Nova looks and feels like so that you can make it work in your environment.
