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>
3 Likes
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! 
1 Like
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.
Yes itās a theme. The code I put in my text is from cyberpunk theme. https://github.com/flejz/hass-cyberpunk-2077-theme
And this works for all ha-card elements.
When I try to add the same code on .area-button in developer tools it works. But I donāt get it to work when I change the theme yaml file. Thatswhy I posted here.
I need assistance with putting this code into the theme file.
card-mod-card: |
.area-button {
border-radius: 1px;
clip-path: polygon(
0% 0%,
40px 0%,
45px 4px,
100% 4px,
100% calc(100% - 20px),
calc(100% - 20px) 100%,
0% 100%
);
}
This is what I tried but I did nothing for me.
Already told you:
Place your card on some view, then try to style it with a default theme first.
OK once again. I want to style some cards of dwains dashboard. Dwains Lovelace Dashboard | An fully auto generating Home Assistant UI dashboard for desktop, tablet and mobile by Dwains for desktop, tablet, mobile
I canāt place the card anywhere because its an auto generating dashboard which generates these area cards from home assistant areas.
I already know the styling and it worked from google chrome developer tools. but I donāt know how to do it with card mod.
When I add this code
card-mod-card: |
.area-button {
border-radius: 1px;
clip-path: polygon(
0% 0%,
40px 0%,
45px 4px,
100% 4px,
100% calc(100% - 20px),
calc(100% - 20px) 100%,
0% 100%
);
}
to chrome dev tools the cards have a different look. But when I add this code into my theme file nothing happens. I tried different syntax to show anything from card mod theme but nothing worked for me so Iām here for help.
I want the code above to be in "<card-mod slot=ānoneā but for now there is no card mod slot on these area cards. So how Im gonna add this card mod slot?
Then I would suggest to jump over to the card-mod themes topic/thread.
@Bourner Imho this is rather rare case, I would suggest to ask this question in a thread dedicated to that auto-generated dashboard.
This case I cannot simulate; adding the Area card manually does not seem to help, I cannot see the āarea-buttonā selector you mentioned.
Hence, do not think that moving the question to card-mod-theme thread may help.
Its not the default HA card for areas. its something from dwains dashboard.
I already asked the developer but didnāt get an answer so I thought this is the correct place.
So in general how would you style a div that has no ha-card element with card-mod themes?