Filament•3w ago

Custom theme not affecting panel

I am trying to play with custom themes, but the first thing that I walk into is an example from the docs that is not working. Anyone got any ideas?

.fi-topbar {
    @apply bg-gradient-to-l from-[#009CC3] to-[#02B1DE];
}

.fi-topbar {
    @apply bg-gradient-to-l from-[#009CC3] to-[#02B1DE];
}

I followed every step on https://filamentphp.com/docs/3.x/support/style-customization. As seen in the picture, the background is affected, but it does not seem to work properly like the docs is showing.

Installation - Panel Builder - Filament

12 Replies

KaaimanOP•3w ago

This is a picture of a piece of the topbar:

Mohamed Ayaou•3w ago

Did you create a custom theme first? https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Themes - Panel Builder - Filament

KaaimanOP•3w ago

Yes I did This works, but seems weird to do:

.fi-topbar {
    nav {
        @apply bg-gradient-to-l from-[#009CC3] to-[#02B1DE];
    }
}

.fi-topbar {
    nav {
        @apply bg-gradient-to-l from-[#009CC3] to-[#02B1DE];
    }
}

Mohamed Ayaou•3w ago

I think you need to add it under a @layer e.g:

@layer components {
    .fi-main {
        max-width: 90rem;
    }
}

@layer components {
    .fi-main {
        max-width: 90rem;
    }
}

KaaimanOP•3w ago

For me that is still not working..

@layer components {
    .fi-topbar {
        @apply bg-gradient-to-l from-[#009CC3] to-[#02B1DE];
    }
}

@layer components {
    .fi-topbar {
        @apply bg-gradient-to-l from-[#009CC3] to-[#02B1DE];
    }
}

Mohamed Ayaou•3w ago

not sure but as a previous way is working then your theme is setup an compiled and loaded, so the only issue might be just some css selectors order issue try different layer and the !important keyword

KaaimanOP•3w ago

It seems it just doesn't work on the topbar, sidebar works

Mohamed Ayaou•3w ago

Yeah, I believe it is just a CSS priority issue Check the layer name of the fi-topbar class too

KaaimanOP•3w ago

@Mohamed Ayaou How do I check the layer name?

Mohamed Ayaou•3w ago

Click here, it will take you to the compiled tailwindcss file

Mohamed Ayaou•3w ago

and directly to the targeted class. go up to see under which layer they are

KaaimanOP•3w ago

components layer as far as i can see

Gaming

Programming

Custom theme not affecting panel

Did you find this page helpful?