Filament•6mo ago

fi-badge css

I'm working on badge-color everything works fine , The only only issue I'm facing is It changes the color for status-badge which I don't want I want status badge to be green but others blue, How can I fix that?

14 Replies

Noor•6mo ago

anyone please ?

awcodes•6mo ago

Show some code.

Noor•6mo ago

/* badge */
.fi-badge{
    @apply rounded-full ring-sky-400 bg-sky-100 text-sky-600;
}

/* badge */
.fi-badge{
    @apply rounded-full ring-sky-400 bg-sky-100 text-sky-600;
}

This is my code but I don't want to change color of status as it shows color based on status type eg if status is won then green if lost then red but this code overriding all badges @awcodes

awcodes•6mo ago

you'll need a more specific selector then.

Noor•6mo ago

like ? @awcodes

awcodes•6mo ago

you'll have to inspect the html and find a way to target the specific badges you don't want to override. i don't have a specific answer for you. it's basic css specificity though.

Noor•6mo ago

there's only fi-badge class and under that grid and truncate class This is the same issue I'm facing with action buttons

awcodes•6mo ago

go higher up the tree. you can also use extraAttributes(['class' => 'reset-badge']) then target like div:not(.reset-badge) .fi-badge

Noor•6mo ago

I don't understand how to target specific class when we are using one class for each button or badge

awcodes•6mo ago

actions and badges default to the primary color. sounds like you're maybe trying to do something in a round about way there are a lot of ways to target element in css without even using a class name. just might need to brush up on that.

Noor•6mo ago

yes I tried ->extraAttributes(['class' => 'dark:bg-cyan-500']) but if I try 600 or 800 it doesn't work ok Idk about that I'm new in css can you tell me some examples or any link where I can see

awcodes•6mo ago

i don't know of any specific tutorials, but start here. https://developer.mozilla.org/en-US/docs/Web/CSS

MDN Web Docs

CSS: Cascading Style Sheets | MDN

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

awcodes•6mo ago

for example though, this is a valid CSS selector [wire\:key*="open_curator_picker"], it says to target any element that has an attribute called wire:key whose value contains the open_curator_picker string. point is, that with modern css, you're not limited to ids and class when applying styles.

Noor•6mo ago

ok thankyou I'll see and try to do it

Gaming

Programming

fi-badge css