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
anyone please ?
Show some code.
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
you'll need a more specific selector then.
like ?
@awcodes
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.
there's only fi-badge class and under that grid and truncate class
This is the same issue I'm facing with action buttons
go higher up the tree. you can also use extraAttributes(['class' => 'reset-badge']) then target like
div:not(.reset-badge) .fi-badgeI don't understand how to target specific class when we are using one class for each button or badge
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.
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
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.
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.ok thankyou I'll see and try to do it