Filament•7mo ago

Section Heading-Background-Color

Hi - Is it possible to change the background-color of a section-heading? I already tried the extraAttributes-way to add the section-danger-class (like it was in V2), but to no avail. Thanks

Solution:

yeah custom theme ```PHP Forms\Components\Section::make('Section') ->extraAttributes(['class' => 'nice'])...

Jump to solution

6 Replies

Tally•7mo ago

Do you want to style the whole section or only the heading? Using the

Forms\Components\Section::make('Section')
  ->extraAttributes(['style' => 'background-color: red'])
  ->schema([

Forms\Components\Section::make('Section')
  ->extraAttributes(['style' => 'background-color: red'])
  ->schema([

will style the whole section... you could use the extraAttributes to add a specific class and create a selector in your theme.css to target the header

Tally•7mo ago

Tally•7mo ago

https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Themes - Panel Builder - Filament

Husky110OP•7mo ago

Thank you! Did you use the custom-theme for the heading there or something else?

Solution

Tally•7mo ago

yeah custom theme

Forms\Components\Section::make('Section')
  ->extraAttributes(['class' => 'nice'])

Forms\Components\Section::make('Section')
  ->extraAttributes(['class' => 'nice'])

.nice { @apply bg-blue-500 }
.nice .fi-section-header { @apply bg-red-500 rounded-t-lg }
.nice .fi-section-header .fi-section-header-heading { @apply text-white }

.nice { @apply bg-blue-500 }
.nice .fi-section-header { @apply bg-red-500 rounded-t-lg }
.nice .fi-section-header .fi-section-header-heading { @apply text-white }

Husky110OP•7mo ago

Ah okay - Thank you! 🙂

Gaming

Programming

Section Heading-Background-Color