yes, and thanks for that, TIL 
where is this transition used in regular Dashboard/Frontend? Must confess I never realized that we have it, and on un-modded cards, I never see that?
btw, the glance-card mod above might not even be functional, given the fact thereās no transition in it in the first place frontend/src/panels/lovelace/cards at dev Ā· home-assistant/frontend Ā· GitHub
e.g. state icon, bulb colors, opening of dialogs, dropdowns, etc.? But I didnāt not check if all this is related to the mentioned single :host entry above. Most probably no, but a lot of transitioning is there, wherever defined everywhere.
right, ofcā¦ Ill see whether any of this is frustrated/affected at all.
Nobody talked about grid, entities.
We talked about vertical-stack only (w/o decluttering card etc).
cards:
- &ref_entities_card
type: entities
entities:
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
# - type: custom:mod-card
# card_mod:
# style:
# hui-vertical-stack-card$: |
# .card-header {
# font-size: 10px !important;
# color: red !important;
# }
# card:
# type: vertical-stack
# title: Some title
# cards:
# - *ref_entities_card
- type: vertical-stack
title: Some title
cards:
- *ref_entities_card
- *ref_entities_card
- *ref_entities_card
And āstickingā is probably not happening always. In this simple case it sticks.
How is this related to the issue?
Cmon man, whatās up? Why the attitude?
I was talking about a preference for using mod-card in combination with those cards. Opposed to some of the other way more complicated suggestions above.
And because of that I also showed the option for modding both stack gap as well as grid card gap in 1 style.
Because that hasnāt been posted in this community before, that seems quite interesting if you ask me.
Feel free to ignore ofc
Cheers!
What are you talking about? I just described facts & corrected some points regarding sticking.
Nobody is blaming you)
cool, sorry if I misinterpreted your tone.
nvm, lets keep up the good work here!
Would someone be able to help me achieve a blinking entity image based on the entity state please? Iāve looked through this thread searaching for entity card examples, but canāt find one that is state based. I have gone a bit card-mod blind after scanning through the thread so may have missed what Iām looking for!
I have a basic entities card with the following config:
type: entities
title: Oil Tank
state_color: false
show_header_toggle: true
entities:
- entity: sensor.oil_status
- entity: sensor.distance_to_oil
- entity: sensor.oil_level
icon: mdi:car-coolant-level
- entity: sensor.oil_remaining
icon: mdi:car-coolant-level
- entity: sensor.wifi_signal
My entity āsensor.oil_statusā instead of an icon, displays my template sensor state picture in my current entities card.
- name: "Oil Status"
state: >
{% if states.sensor.oil_level.state | float(0) > 100 %}
FULL
{% elif states.sensor.oil_level.state | float(0) > 75 %}
GOOD
{% elif states.sensor.oil_level.state | float(0) > 50 %}
OK
{% elif states.sensor.oil_level.state | float(0) > 25 %}
LOW
{% elif states.sensor.oil_level.state | float(0) > 0 %}
WARNING
{% else %}
ERROR
{% endif %}
picture: >
{% if is_state('sensor.oil_status', 'FULL') %}
/local/images/green.png
{% elif is_state('sensor.oil_status', 'GOOD') %}
/local/images/green.png
{% elif is_state('sensor.oil_status', 'OK') %}
/local/images/yellow.png
{% elif is_state('sensor.oil_status', 'LOW') %}
/local/images/amber.png
{% elif is_state('sensor.oil_status', 'WARNING') %}
/local/images/red.png
{% else %}
/local/images/error.png
{% endif %}
If I want this entity state picture to ONLY blink when the entity card is displaying the picture for the ERROR or WARNING states, how do I configure the card with card-mod?
I believe I need to include some card-mod style such as
animation: blink 2s ease infinite
if
is_state('sensor.oil_status', 'WARNING' or 'ERROR')
but Iām stuck on the syntax so it only applies to this one entity within the entity card, and still shows the static pictures for this entity when itās not in either of these 2 states.
This must be incorrect, as it isnāt having any effect on the standard entity card, however hopefully Iām on the right lines?
type: entities
title: Oil Tank
state_color: false
show_header_toggle: true
entities:
- entity: sensor.oil_status
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
animation: {% if is_state('sensor.oil_status', 'ERROR') %} blinking 2s ease infinite;
{% else %} none
{% endif %}
}
- entity: sensor.distance_to_oil
- entity: sensor.oil_level
icon: mdi:car-coolant-level
- entity: sensor.oil_remaining
icon: mdi:car-coolant-level
- entity: sensor.wifi_signal
limiting it to just one state for now until I get it working correctlyā¦
1st post ā link at the bottom ā styles for animation for Entities card
In short - you have not specified your āblinkingā function.
Thank you for your help, working correctly now after specifying
@keyframes blinking {
0% {opacity: 0;}
100% {opacity: 1;}
}
Could somebody help a bloody Beginner to alter an Element inside a Shadow Root?
I managed to find and alter ānormalā Elements, but just donāt get it with the Shadow-Root Thing 
I want to remove both Value and Title Elements from a Gauge Card. In Inspector setting Text Size to 0px works quite well.
How can i adress the
"svg class="text" or
"text class="value-text" ?
Iām at the very limits of my CSS knowledge here, and donāt actually use the Gauge card myself, but in theory this is how you would access these elements, combined with elements before the shadow-root level (here the font-size of the entity name):
- type: gauge
card_mod:
style:
ha-gauge:
$:
svg.text: |
text.value-text {
fill: red;
}
.: |
ha-card div.name {
font-size: 10px;
}
entity: <your-entity>
However, it depends what aspect of these elements you want to modify. Itās complicated by the fact that these elements are contained within a flexible viewbox, which means that changing things like font-size directly on these elements probably wonāt work, as they just get scaled up again by the viewbox properties.
Instead, you would have to change the dimensions of the viewbox itself. Hereās code that works (Firefox browser on Windows desktop) to change both size and color of the gauge value for example, but I have no idea if this would work desirably and consistently across different views, browsers and devices:
- type: gauge
card_mod:
style:
ha-gauge:
$:
svg.text: |
text.value-text {
fill: red;
}
.: |
svg.text {
max-height: 26%;
}
.: |
ha-card div.name {
font-size: 10px;
}
entity: <your-entity>
EDIT: just re-read your post more carefully, and saw you want to remove name and value entirely. This should do that:
- type: gauge
card_mod:
style:
ha-gauge:
$: |
svg.text {
display: none;
}
.: |
ha-card div.name {
display: none;
}
entity: <your_entity>
Whoooa amazing!!! You are a true Hero! It works perfectly 
Now, as i want to learn it, im gonna go through all Lines and check all of them for their functionā¦ Thank you so much again, highly appreciate your help! 
I donāt fancy the date and time picker changes from a few releases ago: Theyāre too high for my taste, so Iām trying to change it. I donāt know if there are theme variables for this (I failed to find any), so Iāve been experimenting with card mod.
I canāt figure out the CSS selector chain to achieve this. I even forced some changes by using the * selector for all elements and setting some property values with !important just to get some kind of effect for testing purposes. I went through the CSS selector docs and combinator docs to see if thereās anything I could use.
I donāt think what I want to do is possible, but perhaps someone here knows (could find anything on the large card mod threads either) how to achieve this.
Here is a screenshot with the styles applied manually. The hour and minute elements must be styled separately from the AM/PM picker: I couldnāt get a parent element styled to do both in one go.
My card config, with one of many variations that Iāve tried:
- type: entities
title: Schedule
show_header_toggle: false
entities:
- entity: input_datetime.wake_up_time
name: Wake-up Time
card_mod:
style:
hui-input-datetime-entity-row:
$:
hui-generic-entity-row:
ha-time-input:
$:
ha-base-time-input:
$: |
.value {
height: 3em
}
- entity: input_datetime.vacation_start
name: Vacation Start
- entity: input_datetime.vacation_end
name: Vacation End
- entity: binary_sensor.workday
name: Workday Today
- entity: binary_sensor.workday_tomorrow
name: Workday Tomorrow
Hi guys,
I am using dwains dashboard v3 and the cyberpunk 2077 theme.
It looks great together but dwains area cards are not labeled as ha-card.
They only have a div class and I canāt find out how to apply this to other ācardsā.
This is html
Card mod should be added at <div class=āflex justify-between h-44 p-3 area-buttonā ā¦ >
An this is the yaml code which is added right now. ha-card should be changed to .area-button.
But just this isnāt doing it. I think I am missing something. maybe a class before the area button.
card-mod-card: |
ha-card {
border-radius: 1px;
clip-path: polygon(
0% 0%,
40px 0%,
45px 4px,
100% 4px,
100% calc(100% - 20px),
calc(100% - 20px) 100%,
0% 100%
);
}
I am thankful for any help!
Iām pretty sure this isnāt correct for starters, or at least it doesnāt look like anything Iāve done with card-mod. But I donāt use Dwainās Dashboard, so I might be completely off the mark here. Or maybe you are using a very old version of the card?
Check the card-mod documentation, but I would expect it to start like this:
card_mod:
style: |
...<etc>
EDIT: on second thoughts, you might be trying to follow the guidance on styling cards without an <ha-card> element. But even that would look something like this (shamelessly copied from the documentation):
type: custom:mod-card
card:
type: vertical-stack # for example
...
card_mod:
style: |
...<etc>
Do not think itās required.
The OP should find out how to style these Area cards first, then he could add the code into themeās file - if he really needs it.