Is it possiable to add our own css file to custo,ize the colors and a bit of the interface in Nova 4?
Colors in Laravel Nova 4 can be customized via the config file.
The easiest way to add custom CSS to Nova is by adding the following to your NovaServiceProvider.
public function boot()
{
parent::boot();
Nova::style('custom', public_path('css/custom.css'));
}
Note that Laravel Nova is not really meant for custom styling besides the logo and colors via the config file.
@ramonrietdijk I followed your tip, and made a simple custom.css file trying to make the default left menu font darker:
.sidebar-item-title {
@apply rounded no-underline flex items-center text-gray-900 px-2 py-1;
}
I cleared cache and everything but my font still looks like text-gray-500, like in the original nova.css file...
Hi @internetbug256,
Since you are using a simple css file, you can't use the apply directive from Tailwind. If you add the css manually it should work as intended.
.sidebar-item-title {
color: rgba(var(--colors-gray-900));
...
}
Well, truth is that I have client complains regarding Nova 4 having a too light color schema that makes the reading really hard on some laptop monitors. It's really a pity that Nova does not come with a way to freely customize the theme.
We've been able to customize it thanks to @ramonrietdijk tip.
We still strugle because some changes require HTML changes which is harder and need more tricks.
This doesn't work on the login page :(
@savatudor Login page is a normal Laravel view file and it's not related to Nova
First copy view layout.blade.php from Nova to your app
mkdir -p resources/views/vendor/nova/auth/ && cp vendor/laravel/nova/resources/views/auth/layout.blade.php resources/views/vendor/nova/auth/
Then to file resources/views/vendor/nova/auth/layout.blade.php add css tag
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
Pay attention to the paths which file you copy. Works for me for Nova 3.
@walaskir it's good for version 3, but no good for version 4.
Sadly, in version 4 you cannot make changes to the layout files :(
Please or to participate in this conversation.