Filament•11mo ago

notification color

I have added the following code to position the notifications used in the panel builder forms , and it is perfect (I can't remember how I found out how to do this):

    public function boot(): void
    {
        // All sorts of other stuff

    // Set position for notifications in Filament pages
        Notifications::alignment(Alignment::Center);
        Notifications::verticalAlignment(VerticalAlignment::Center);
    }

    public function boot(): void
    {
        // All sorts of other stuff

    // Set position for notifications in Filament pages
        Notifications::alignment(Alignment::Center);
        Notifications::verticalAlignment(VerticalAlignment::Center);
    }

The notifications are a bit subtle for my use case. Is there a way to do something similar to change the notification colours and / or backgrounds for create and edit pages?

Solution:

I found it - create a custom theme, and then in theme.css add ``` .fi-no-notification { background-color : rgba(var(--primary-600),var(--tw-bg-opacity)); }...

Jump to solution

1 Reply

Solution

WiseWill•11mo ago

I found it - create a custom theme, and then in theme.css add

.fi-no-notification {
    background-color : rgba(var(--primary-600),var(--tw-bg-opacity));
}

.fi-no-notification-title {
    color: whitesmoke !important;
        font-size: 1.25rem !important;
        line-height: 1.5rem !important;
}

.fi-no-notification-body {
    color: whitesmoke !important;
}

.fi-no-notification {
    background-color : rgba(var(--primary-600),var(--tw-bg-opacity));
}

.fi-no-notification-title {
    color: whitesmoke !important;
        font-size: 1.25rem !important;
        line-height: 1.5rem !important;
}

.fi-no-notification-body {
    color: whitesmoke !important;
}

Hopefully the CSS classes don't change in future versions.

Gaming

Programming

notification color