Filament•6mo ago

Css Issue - Buttons & Navigation Icon

I need a help with Buttons Css, In a form there are 3 Buttons out of which I just want to change bg-color of one , which I'm doing using class fi-btn but it doesn't change anything.. am I doing something wrong? and Need to know which class are we using for navigation icons that is not working as well ty.

18 Replies

Andrew Wallo•6mo ago

Can I see your CSS?

Noor•6mo ago

/** button */
.fi-btn {
    @apply ring-transparent shadow-gray-400 dark:shadow-gray-950 dark:bg-cyan-500;
}

/** button */
.fi-btn {
    @apply ring-transparent shadow-gray-400 dark:shadow-gray-950 dark:bg-cyan-500;
}

@Andrew Wallo

Andrew Wallo•6mo ago

So you only want the background color to be different in dark mode? And you only want one of the buttons to be a different background color?

Noor•6mo ago

yes

Andrew Wallo•6mo ago

Well what type of button is it in the form? Is it a submit button? What are different from this button compared to the other buttons you don't want to change? I need more info.. I can tell you that using this instead will work but it won't target only one of the buttons, it will target all of them.

.fi-btn {
    @apply ring-transparent shadow-gray-400 dark:shadow-gray-950 dark:!bg-cyan-500;
}

.fi-btn {
    @apply ring-transparent shadow-gray-400 dark:shadow-gray-950 dark:!bg-cyan-500;
}

Noor•6mo ago

Its a Edit button in infolist and the other one is report and delete but class for all of them is same fi-btn

Andrew Wallo•6mo ago

There should be more than just "fi-btn" shown in the css. Inspect the elements in the browser and see what is different.

Noor•6mo ago

<a href="http://192.168.111.189/app/clients/436/edit" style="--c-400:var(--primary-400);--c-500:var(--primary-500);--c-600:var(--primary-600);" class="fi-btn relative grid-flow-col items-center justify-center font-semibold outline-none transition duration-75 focus-visible:ring-2 rounded-lg fi-color-custom fi-btn-color-primary fi-size-md fi-btn-size-md gap-1.5 px-3 py-2 text-sm inline-grid shadow-sm bg-custom-600 text-white hover:bg-custom-500 dark:bg-custom-500 dark:hover:bg-custom-400 focus-visible:ring-custom-500/50 dark:focus-visible:ring-custom-400/50 fi-ac-btn-action">

<a href="http://192.168.111.189/app/clients/436/edit" style="--c-400:var(--primary-400);--c-500:var(--primary-500);--c-600:var(--primary-600);" class="fi-btn relative grid-flow-col items-center justify-center font-semibold outline-none transition duration-75 focus-visible:ring-2 rounded-lg fi-color-custom fi-btn-color-primary fi-size-md fi-btn-size-md gap-1.5 px-3 py-2 text-sm inline-grid shadow-sm bg-custom-600 text-white hover:bg-custom-500 dark:bg-custom-500 dark:hover:bg-custom-400 focus-visible:ring-custom-500/50 dark:focus-visible:ring-custom-400/50 fi-ac-btn-action">

 <span class="fi-btn-label">
            Edit
        </span>
    </a>

 <span class="fi-btn-label">
            Edit
        </span>
    </a>

I even used .fi-btn .fi-btn-label which is inside fi-btn but it shows two diff. color one with bg and other for label

Andrew Wallo•6mo ago

If you can't target it specifically any other way and the href link here is unlikely to change just use something like this:

.fi-btn[href="http://192.168.111.189/app/clients/436/edit"] {
    @apply ring-transparent shadow-gray-400 dark:shadow-gray-950 dark:!bg-cyan-500;
}

.fi-btn[href="http://192.168.111.189/app/clients/436/edit"] {
    @apply ring-transparent shadow-gray-400 dark:shadow-gray-950 dark:!bg-cyan-500;
}

This may not be the best way, but you can target css elements by using anything you can that makes it specific.

Noor•6mo ago

Yeah I know because it's just gonna change color for single record doesn't make any sense but I appreciate your help thanks 🙂

Andrew Wallo•6mo ago

Alright well just trying to help 👍 And just wanted to make sure, there is no way to edit the color of the action/button in Filament?

Andrew Wallo•6mo ago

https://filamentphp.com/docs/3.x/infolists/actions#defining-a-infolist-component-action

Actions - Infolist Builder - Filament

Noor•6mo ago

Yay it worked... Idk what I was thinking 😄 it was always there in docs.

Andrew Wallo•6mo ago

Glad it worked!

Noor•6mo ago

but its not gonna change color for light/dark

Andrew Wallo•6mo ago

Then use extraAttributes(['class' => 'dark:bg-whatever']). May work I dont know. But it does support it. You just have to find a way to do it. Not everything imaginable is going to be supported "first class" or whatever. You don't have to use the package if you don't want to, but you decided to because of what it offers. And its because publishing and customizing views from a package is not the best idea in order to avoid breaking changes. That has nothing to do with Filament. But you are definitely welcome to publish views as long as you know the implications of doing so.

Noor•6mo ago

It worked thanks a bunch 🙂

Andrew Wallo•6mo ago

Great! Make sure to mark the question as solved if all good.

Gaming

Programming

Css Issue - Buttons & Navigation Icon