The ::after is the most important one to change as this is on the click. The hover::before is with a mouse hover so isnt so important for mobile at least
Opacity not needed if you only want to change the color.
Being very new to home assistant and being overwhelmed on how to add custom css with card-mod can i just ask what does the ‘$’ represent in the code. I am trying to add a simple bottom border to my horizontal stack card but cant for the life of me work out how to do it as its inside a shadow dom and i keep seeing references to this ‘$’ in a selector.
$ means the object is in a shadow root of another so here is the example:
i cant refer to .mdc-ripple-surface without entering the shadow root of mwc-ripple first.
Thanks for this, i think i am slowly getting my head around it. Just out of curiosity how would i target the container vertical which is part of a shadow root below. Its a mushroom template card. On a side note what is the selector you would need to use if you were going through more than 1 shadow root to target an element
Thank you so much for this, you have explained it really well and i think i actually get it.
One final thing, in the above example where i target mushroom-state-item$, how do i then style anything above it in the DOM tree for example ha-card? As mushroom-state-item$ is directly underneath the style in the yaml code if that makes sense.
Sure. There is a built in function for that in card mod.
So if you wanted to do both it would be with the .: |
This essentially brings you back to style: | but just keep in mind the indentation of this as it needs to be put in the same place as the other things you first put after style:
card_mod:
style:
mushroom-state-item$: |
.container {
outline: red solid 1px !important;
}
.: |
ha-card {
background: blue !important;
}
Thats fab thank you so much for your kind help. You’ve made it sound so easy it now makes sense.
I lied this is my final question it just came to my mind, is there a way say in a horizontal stack where you have 4 cards that you want to apply all the same styles to without having to use the card_mod parameter on every card?
Yes you can use yaml anchors like this. But often when you then save and reopen the full card mod code is added rather than the anchor. But if you just want to save copying the same code a bunch of times you can.
Hi,
I am trying to customise custom bar card. Looks like I am on the right track, but can’t get the indicator to move. I have swapped solid color bar with image and got stuck.
here is the code:
First i would post a version of this that doesnt immediately have bunch of errors due to indentation or duplicate statements:
after fixing the duplicate:
after fixing first indentation:
you should be able to easily move it just by using top, bottom, right, left. you can even use negative values, and i am pretty sure the position: relative; that you have on it isnt even required.
Thanks,
There is no errors on my side. Indentation got screwed when pasted the code.
The width: 10% is part of styling (width of card on screen)
the other width 100% is internal to the card (indicator bar width inside card)
With correct formatting it makes more sense.
It supposed to move by adjusting value of input_number… unfortunately it does not and I am trying to find the problem.
Ok,
I have changed tactics and moved to custom button card with moving entity picture.
Now, my question is… is it possible to convert current position of the picture and use it inside keyframe statement?
Youll need to now ask this question in the button card thread. I believe that button card can use JS which might be better for this usecase but i dont know. I dont use button card at all.
I’m trying to change the text color based on some temperature ranges. I have already installed the card mode plugin. I followed some examples but can’t make it work.
type: entities
entities:
- entity: sensor.lumi_lumi_weather_0e402702_temperature
card_mod:
style: |
:host {
color: {% if states(config.entity) | float <= 20 %} blue {% else %} green {% endif%};
}
name: Temperatura
- entity: sensor.lumi_lumi_weather_0e402702_humidity
name: Humidade
title: Teste
First try to get a red color unconditionally. Remove templates, leave just “color: red;”.
Are you sure you have card-mod installed? Open Code Inspector (or whatever it is called in your browser), check info messages - can you see a message with card-mod version?