Admin Panel Customization

We have utilized the Filamentphp plugin for the backend (admin) side. While there are limited options for completely customizing the admin panel, there are several customization options available. Let's take a look at them.

Themes

Changing the colors

In the Configuration (AdminPanelProvider.php), you can easily change the colors that are used. Filament ships with 6 predefined colors that are used everywhere within the framework. They are customizable as follows:

use Filament\Panel;
use Filament\Support\Colors\Color;
 
public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->colors([
            'danger' => Color::Rose,
            'gray' => Color::Gray,
            'info' => Color::Blue,
            'primary' => Color::Indigo,
            'success' => Color::Emerald,
            'warning' => Color::Orange,
        ]);
}

Changing the font

By default, Filament use the Inter font. You can change this using the font() method in the Configuration (AdminPanelProvider.php) file:

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->font('Poppins');
}

Adding a logo

By default, Filament uses your app's name to render a simple text-based logo. However, you can easily customize this.

If you want to simply change the text that is used in the logo, you can use the brandName() method:

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->brandName('Filament Demo');
}

To render an image instead, you can pass a URL to the brandLogo() method:

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->brandLogo(asset('images/logo.svg'));
}

Adding a favicon

To add a favicon, you can use the configuration file, passing the public URL of the favicon:

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->favicon(asset('images/favicon.png'));
}

For more advanced theme customization, please refer to the official Filament documentation: https://filamentphp.com/docs/3.x/panels/themes

Navigation Menu

Customizing a navigation item's label

By default, the navigation label is generated from the resource or page's name. You may customize this using the $navigationLabel property:

protected static ?string $navigationLabel = 'Custom Navigation Label';

Alternatively, you may override the getNavigationLabel() method:

public static function getNavigationLabel(): string
{
    return 'Custom Navigation Label';
}

Customizing a navigation item's icon

To customize a navigation item's icon, you may override the $navigationIcon property on the resource or page class:

protected static ?string $navigationIcon = 'heroicon-o-document-text';

If you set $navigationIcon = null on all items within the same navigation group, those items will be joined with a vertical bar below the group label.

Sorting navigation items

By default, navigation items are sorted alphabetically. You may customize this using the $navigationSort property:

protected static ?int $navigationSort = 3;

Now, navigation items with a lower sort value will appear before those with a higher sort value - the order is ascending.

Adding a badge to a navigation item

To add a badge next to the navigation item, you can use the getNavigationBadge() method and return the content of the badge:

public static function getNavigationBadge(): ?string
{
  return static::getModel()::count();
}

Grouping navigation items

You may group navigation items by specifying a $navigationGroup property on a resource and custom page:

protected static ?string $navigationGroup = 'Settings';

All items in the same navigation group will be displayed together under the same group label, "Settings" in this case. Ungrouped items will remain at the start of the navigation.

For more advanced Navigation customization, please refer to the official Filament documentation: https://filamentphp.com/docs/3.x/panels/navigation

How to add new item in navigation menu

Navbar

Global Search

Global search allows you to search across all of your resource records, from anywhere in the app. To enable global search on your model, you must set a title attribute for your resource:

protected static ?string $recordTitleAttribute = 'title';

This attribute is used to retrieve the search result title for that record.

For more advance global search options, please refer to the filamentphp official docs: https://filamentphp.com/docs/3.x/panels/resources/global-search

Customizing the user menu

The user menu is featured in the top right corner of the admin layout. It's fully customizable.

To register new items to the user menu, you can use the configuration:

use App\Filament\Pages\Settings;
use Filament\Navigation\MenuItem;
use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->userMenuItems([
            MenuItem::make()
                ->label('Settings')
                ->url(fn (): string => Settings::getUrl())
                ->icon('heroicon-o-cog-6-tooth'),
            // ...
        ]);
}

For more advance User menu options, please refer to the filamentphp official docs: https://filamentphp.com/docs/3.x/panels/navigation#customizing-the-user-menu

Icons

Filament by default, uses blade-icons. There are many icon sets available, and FilamentPHP uses Heroicon.

How to use icons

We can access icon using the @svg('heroicon-o-cog-6-tooth') blade helper function throughout the template.

Using custom SVGs as icons

The Blade Icons package allows you to register custom SVGs as icons. This is useful if you want to use your own custom icons in Filament.

To start with, publish the Blade Icons configuration file:

php artisan vendor:publish --tag=blade-icons

Now, open the config/blade-icons.php file, and uncomment the default set in the sets array.

Now that the default set exists in the config file, you can simply put any icons you want inside the resources/svg directory of your application. For example, if you put an SVG file named star.svg inside the resources/svg directory, you can reference it anywhere in Filament as icon-star. The icon- prefix is configurable in the config/blade-icons.php file too. You can also render the custom icon in a Blade view using the @svg('icon-star') directive.

Replacing the default icons

For more icon customization, please refer to the official docs: https://filamentphp.com/docs/3.x/support/icons#replacing-the-default-icons

Layouts

Customizing the maximum content width

By default, Filament will restrict the width of the content on the page, so it doesn't become too wide on large screens. To change this, you may use the maxContentWidth() method. Options correspond to Tailwind's max-width scale. The options are ExtraSmall, Small, Medium, Large, ExtraLarge, TwoExtraLarge, ThreeExtraLarge, FourExtraLarge, FiveExtraLarge, SixExtraLarge, SevenExtraLarge, Full, MinContent, MaxContent, FitContent, Prose, ScreenSmall, ScreenMedium, ScreenLarge, ScreenExtraLarge and ScreenTwoExtraLarge. The default is SevenExtraLarge:

use Filament\Panel;
use Filament\Support\Enums\MaxWidth;
 
public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->maxContentWidth(MaxWidth::Full);
}

For more panel configuration: https://filamentphp.com/docs/3.x/panels/configuration

Custom Theme

Filament allows you to change the CSS used to render the UI by compiling a custom stylesheet to replace the default one. This custom stylesheet is called a "theme".

Themes use Tailwind CSS, the Tailwind Forms plugin, the Tailwind Typography plugin, the PostCSS Nesting plugin, and Autoprefixer.

To create a custom theme for a panel, you can use the php artisan make:filament-theme command:

php artisan make:filament-theme

If you have multiple panels, you can specify the panel you want to create a theme for:

php artisan make:filament-theme admin

The command will create a CSS file and Tailwind Configuration file in the /resources/css/filament directory. You can then customize the theme by editing these files. It will also give you instructions on how to compile the theme and register it in Filament. Please follow the instructions in the command to complete the setup process:

⇂ First, add a new item to the `input` array of `vite.config.js`: `resources/css/filament/admin/theme.css`
⇂ Next, register the theme in the admin panel provider using `->viteTheme('resources/css/filament/admin/theme.css')`
⇂ Finally, run `npm run build` to compile the theme

Style customization

Filament uses CSS "hook" classes to allow various HTML elements to be customized using CSS.

All hook classes are prefixed with fi-, which is a great way to identify them. They are usually right at the start of the class list, so they are easy to find, but sometimes they may fall further down the list if we have to apply them conditionally with JavaScript or Blade.

Applying styles to hook classes

For example, if you want to customize the color of the sidebar, you can inspect the sidebar element in your browser's developer tools, see that it uses the fi-sidebar, and then add CSS to your app like this:

.fi-sidebar {
   background-color: #fafafa;
}

Alternatively, since Filament is built upon Tailwind CSS, you can use their @apply directive to apply Tailwind classes to Filament elements:

.fi-sidebar {
    @apply bg-gray-50 dark:bg-gray-950;
}

Occasionally, you may need to use the !important modifier to override existing styles, but please use this sparingly, as it can make your styles difficult to maintain:

.fi-sidebar {
    @apply bg-gray-50 dark:bg-gray-950 !important;
}

You can even apply !important to only specific Tailwind classes, which is a little less intrusive, by prefixing the class name with !:

.fi-sidebar {
    @apply !bg-gray-50 dark:!bg-gray-950;
}

For more : https://filamentphp.com/docs/3.x/support/style-customization