Would anyone know how to recreate the hover and click effects on Tile cards on Mushroom cards?
Need some help if possible:
since the recent badges change i seem to not be able to use card-mod with badges.
This was my old code, how would i make the badge images bigger
Thanks
entity: person.ryan
name: null
card_mod:
style: |
:host {
--ha-label-badge-size: 120px;
--ha-label-badge-title-width: 120px;
color: white;
--label-badge-text-color: red;
--label-badge-red: #1c1c1c;
--label-badge-background-color: yellow;
--ha-label-badge-label-color: white;
}
need help to narrow buttons of cover-entity in entities-card:
I have search this thread (and others) and could already manage to reduce the height of my entity card. Thanks for this.
I still want to optimize the card and ānarrowā the buttons of the cover entity:
Using the browser developer console with F12 I have already found out that if I set the CSS āmargin-left: -20px;ā in the appropriate place, the buttons are displayed the way I want them. Here I have to set the CSS:
Unfortunately, I can not get my code to work. I am not sure how to build the āpathā to this element. This i what I have so far:
card:
type: horizontal-stack
title: Rollladen
cards:
- type: entities
card_mod:
style:
.: >
#states > div {
margin: -15px -10px -15px -10px !important;
}
ha-card $ div#div hui-cover-entity-row $ hui-generic-entity-row
$ ha-cover-controls $ div#ha-icon-button {
margin-left: -20px !important;
}
show_header_toggle: false
entities:
- entity: cover.hmip_roll_kuche_vorne
name: KĆ¼che vorne
state_color: true
(The "#states > div " is for decreasing the rows height).
Can someone help with this?
Thanks for any hint
This is a wrong syntax in general.
See Docs:
and dictionary is smth like
xxxx:
xxx: xxx
xxx: xxx
And what you got is
card_mod:
style:
.: long long string with shadowroots
Take literally ANY example from this thread with shadowroot - you will see smth like
card_mod:
style:
xxx $ xxx $: |
some string
xxx $ xxx $: |
some string
.: |
some string
Using card-mod is not about a blind copy/paste.
Hi Ildar_Gabdullin,
thanks for giving some hint.
Of course it is not about blind copy/paste.
Quite sure I saw this āsyntaxā somewhere. But thatās the/my problem. As long as one does not really understand things, one has to ask and try.
I find your sample abstract and can not get my concrete isue to work with it 
I understand the dictionary thing with the shadow elements.
But I am not sure what you mean with āsome stringā and where to put the ādivsā existing in my concrete DOM.
Could you please give a more concrete sample, maybe even with the objects from my DOM?
Thanks a lot for any push in the right direction
I cannot reproduce your case - so this MIGHT BE a proper syntax:
type: entities
entities:
- ...
- entity: cover....
- ...
card_mod:
style:
hui-cover-entity-row $ hui-generic-entity-row $ ......... $: |
some_element {
color: red;
}
.: |
#states {
...
}
and you need to find out a particular path.
OK, try using this:
type: entities
title: xxxxxxxxxx
entities:
- entity: sun.sun
- entity: cover.test_garage_door
- entity: cover.test_garage_door
card_mod:
style:
'#states div':
hui-cover-entity-row $ hui-generic-entity-row ha-cover-controls $:
ha-icon-button $:
mwc-icon-button $: |
.mdc-icon-button {
width: 32px !important;
}
.: |
#states {
background: cyan;
}
Just a concept demo with glitches like āno round bordersā etc.
Any chance someone can help me out setting pointer-events to none on the alarm panel feature mode buttons?
Iāve tried adding it to my existing tile card mods but canāt make it happen.
Only need to use the tile card as monitor for the mode and donāt want interaction ( it may show the tooltip thoughā¦)
O and I would love it per button, since the disarm should be reachableā¦
Hello, please help me, I canāt get rid of the white gauge bordersā¦ I tried border: none; but for some reason this doesnāt help meā¦ Maybe someone can tell me how to get rid of white borders?
- type: custom:stack-in-card
cards:
- type: gauge
entity: sensor.miata_zigbee_vlazhnost_soil_moisture
name: Humidity
min: 0
max: 100
needle: false
segments:
- from: 20
color: '#db4437'
- from: 40
color: '#ffa600'
- from: 60
color: '#039be5'
- from: 85
color: '#ffa600'
- from: 95
color: '#db4437'
card_mod:
style:
ha-gauge:
$: |
svg.text > .value-text {
fill: green !important;
}
svg.gauge > .needle {
fill: black !important;
}
.: |
ha-card {
--primary-text-color: #ffffff;
border: none;
background: none !important;
}
style:
top: 78%
left: 75%
width: 40%
Assuming this is not a copy/paste issue, your card_mod section doesnāt appear to be indented far enough.
At the moment itās effectively at the level of the custom:stack-in-card (and therefore not being applied to anything as far as I can see) rather than the level of the gauge card.
1 Like
is this what you are looking for?
card_mod:
style:
hui-card-features $ hui-card-feature $ hui-alarm-modes-card-feature $ ha-control-select $ : |
#option-armed_home {
color: red;
pointer-events: none;
}
each button has a unique id, which makes targeting it fairly easy.
however: I donāt have an alarm system available to test this with, so I canāt verify this works.
1 Like
I am using a tilecard to show the output of the jokes integration. The tilecard will only show 1 line of text by default and cut off the rest like this.
But I could make it display completely with the cardmod addition below. It would wrap the text and the tilecard would extend the height so it would show the complete text.
type: tile
entity: sensor.random_joke
icon: mdi:cow
hide_state: false
state_content: joke
card_mod:
style:
ha-tile-info$: |
.secondary {
white-space: normal;
}
However this stopped working with 2024.8. Now it still wraps the text like before, but the tilecard does not extend in height anymore resulting in the text becoming only partially visible.
I tried poking around in the developertools, but I canāt figure out what is causing the height to stay fixed and not autogrowing like it did.
Anyone have an idea on how to control the height of the tilecard?
This was working for me for ācustom:gauge-cardā:
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px;
}
1 Like
div.icon has a height of 36px set:
Thatās why youāre not seeing your secondary content grow in size. Set that to auto and you should be good to go.
If you encounter issues like this, all you have to do is open your dev tools, select your troublemaker (in this case the actual text of the joke) and start investigating. I filtered for height css styles and went up level by level until I found an element with a fixed-height. Itās pretty simple, actually 
1 Like
This code works fine!..kuddoās
But i fail to get rid of the icon backgroundā¦
card_mod:
style:
ha-tile-info$: |
.secondary {
white-space: normal;
}
.info {
height: auto !important;
margin-top: -6px!important;
}
ha-tile-icon$: |
.shape {
background: none !important;
margin-top: -8px!important;
}
What im missing?
Change it from none to a color like red works fineā¦
Ayone an idea?
Thanksā¦
Itās pretty simple, actually
I theory yes, but in practice not always
CSS always stays quite mysterious to me.
Anyway, thanks to your help I managed to get the card-mod code updated. While changing from the developertools worked perfectly it did not want to take the value from card-mod initially. It seems it gets overridden somehow as it also showed a strikethough in the developertools on my height:auto. In the end I put ā!importantā in there and it now works.
type: tile
entity: sensor.random_joke
icon: mdi:cow
hide_state: false
state_content: joke
card_mod:
style:
ha-tile-info$: |
.info {
height: auto !important;
}
.secondary {
white-space: normal;
}
Note that the icon seems to be vertically aligned in the middle when the height grows beyond the standard height. The icon used to stay top-left. Will try to figure that out next.
true 
yes, thatās very common if you want to overwrite styles with card_mod - that can have multiple reasons. Either due to specificity of CSS, as youāre normally targeting just a simple html tag, sometimes a class, while HA likely often takes multiple chained classes for styling.
Another reason (probably the case in your situation) is the order of style application - probably card_mod gets injected earlier in the code than the other styles and it will just take the very last style being applied to an element.
The tile card is a flexbox, so you should be golden with:
.icon-container {
align-self: start !important;
}
This puts just the icon at the top. If you have a use case where the icon is larger than the text, then you could also do align-items: start on the entire flexbox, but that seems unlikely.
2 Likes
Cool, thanks for the help!
It is back to how it used to be.
Thx! Will try when I return next week. Suppose this also blocks the tooltip when hoveringā¦?
It would be even better if we could only block the action
do you mean the āHomeā, āAwayā, etc. tooltip? Yes, that is blocked as well. But Iām sure thereās a way around that. Maybe thereās an alternative to the pointer-events: none; or otherwise this can probably be done with an ::after element as well. Youād then just create your own tooltip to mirror what youāve had before.
1 Like
Nobody has an idea?