ok! thanks
Hi, I have a question about height. I want to shrink an entity-card to have it minimalistic and save space. The Problem is, I achieve it after several trying only for the box and the valuetext remains. If i move it upwards it stays “cutoff” like this:
type: custom:mod-card
card_mod:
style:
hui-horizontal-stack-card $: |
div#root > :first-child {
width: 30%;
height:50px !important;
flex: auto;
}
div#root > :last-child {
width: 70%;
height: 50px !important;
flex: auto;
}
card:
type: horizontal-stack
cards:
- type: entity
entity: sensor.time
name: ' '
unit: Uhr
icon: none
style: |
ha-card {
margin: -30px 0px !important;
}
- type: entity
entity: sensor.date_long
icon: none
name: ' '
style: |
ha-card {
margin: -30px 0px !important;
}I don’t know if you are referring to my question or Carlo’s…
I need to inject some CSS code to modify the button cards so I think for my question the thread is right.
I answered to a post which is deleted by its author.
Can you help me for my problem?
that hacs card does not work for me, the colors are all wrong.
Did you maybe found a way to make the circular-slider smaler in style?
unfortunately no, I’m really hoping they will update the Thermostat card.
1 Like
I’m having trouble modifying the card-header of glance card. This is what I’ve got:
type: glance
entities:
- entity: binary_sensor.smoke_alarm_smoke
name: ''
- entity: sensor.smoke_alarm_smoke_amount
name: ''
- entity: sensor.smoke_alarm_battery
name: ''
columns: 3
state_color: true
title: Smoke Alarm
card_mod:
style: |
ha-card {
color: red;
}
.card-header {
font-size: 14px !important;
margin-top: -30px !important;
}
So I see that card-mod is working because the text get colored red, but the .card-header block isn’t working, the font size isn’t getting smaller. What am I doing wrong? Thanks!
1st post - link at the bottom - glance
1 Like
Missed it, that was actually very helpful, thanks!
Hi there, need help to merge 3 working card_mod codes:
card_mod:
style: |
.states.flex {
{% if (states('sensor.condiz_giorno_power')|int) < (10|int) %}
color: green;
{% else %}
color: red;
animation: blinking 0.5s linear alternate infinite !important;
{% endif %}
}
@keyframes blinking {
0% {opacity: 0;}
100% {opacity: 1;}
}
with:
card_mod:
style:
.header.flex .icon ha-icon:
$: |
ha-svg-icon {
--mdc-icon-size: 120px;
{% if (states('sensor.condiz_giorno_power')|int) > (750|int) -%}
fill: red;
animation: rotation 0.1s linear infinite;
{%- elif (states('sensor.condiz_giorno_power')|int) > (500|int) and (states('sensor.condiz_giorno_power')|int) <= (750|int) -%}
fill: orange;
animation: rotation 1s linear infinite;
{%- elif (states('sensor.condiz_giorno_power')|int) > (30|int) and (states('sensor.condiz_giorno_power')|int) <= (500|int) -%}
fill: gold;
animation: rotation 2s linear infinite;
{%- else -%}
fill: green;
animation: rotation 0s linear infinite;
{%- endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
and
card_mod:
style:
ha-card {
zoom: 0.6;
}
Thanks in advance!
Again, 1st post - link at the bottom - how to combine
1 Like
I’m trying to use 2 styles for my mushroom card. But somehow this does not seem to work.
type: custom:mushroom-template-card
primary: Airco
secondary: |-
{% if states('climate.woonkamer') == 'off' -%}
Off
{%- else -%}
On - {{ state_attr('climate.woonkamer', 'current_temperature') }}°C
{%- endif %}
icon: |-
{% if states('climate.woonkamer') == 'off' -%}
mdi:fan
{%- else -%}
mdi:fan
{%- endif %}
entity: climate.woonkamer
badge_icon: |-
{% if states('climate.woonkamer') == 'off' -%}
mdi:ab-testing
{%- elif states('climate.woonkamer') == 'fan_only' -%}
mdi:weather-windy
{%- elif states('climate.woonkamer') == 'heat' -%}
mdi:heat-wave
{%- elif states('climate.woonkamer') == 'heat_cool' -%}
mdi:auto-mode
{%- else -%}
mdi:snowflake
{%- endif %}
icon_color: |-
{% if states('climate.woonkamer') == 'off' -%}
{%- else -%}
white
{%- endif %}
layout: horizontal
tap_action:
action: more-info
badge_color: |-
{% if states('climate.woonkamer') == 'off' -%}
{%- elif states('climate.woonkamer') == 'fan_only' -%}
grey
{%- elif states('climate.woonkamer') == 'heat' -%}
red
{%- elif states('climate.woonkamer') == 'heat_cool' -%}
orange
{%- else -%}
blue
{%- endif %}
card_mod:
style: |
{% if states('climate.woonkamer') == 'on' -%}
mushroom-shape-icon$: |
ha-state-icon {
animation: rotate 5s linear infinite ;
}
@keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
{%- endif %}
mushroom-badge-icon$: |
.badge {
animation: ping 1s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
50% {box-shadow: 0 0 0 7px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
In some cases only one of the animations works and it seems it has something todo with the way the style is specified. There seems to be a difference between “style: |” and “style: >-” and “style:” but I don’t see any clear explanation in the documentation.
Could someone help me out regarding the different styles and perhaps point me into a direction to make both animations work?
am using custom:weather-card
entity: weather.spiti
name: Home
type: custom:weather-card
number_of_forecasts: '5'
hourly_forecast: false
forecast: true
details: true
style: |
ha-card {
pointer-events: none;
}
it doesn’t accept tap action.
Can I use card-mod to direct to another tab on tap ???
No you can not
Check out the guide in my profile for mushroom and card mod info.
But the first thing you need to understand is this.
You can only have one | in a given flow. So what i mean by that is:
This is allowed:
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: red !important;
}
This is not:
card_mod:
style: |
mushroom-shape-icon$: |
.shape {
background: red !important;
}
This is also allowed.
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: red !important;
}
mushroom-badge-icon$: |
.badge {
background: red !important;
}
This is not:
card_mod:
style: |
mushroom-shape-icon$: |
.shape {
background: red !important;
}
mushroom-badge-icon$: |
.badge {
background: red !important;
}
I would also recommend not doing this wherever possible.
{% if something %}
ha-state-icon {
color: red !important;
}
{% endif %}
Rather do this:
ha-state-icon {
{% if something %}
color: red !important;
{% endif %}
}
Here is your fixed card mod section. But please look at my guide to try and understand before just copying other peoples code and immediately expecting it to work 
card_mod:
style:
mushroom-badge-icon$: |
.badge {
animation: ping 1s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
50% {box-shadow: 0 0 0 7px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
.: |
ha-state-icon {
{% if states('climate.thermostat') == 'on' -%}
animation: rotate 5s linear infinite ;
{%- endif %}
}
@keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
1 Like
Why? I know, we had this discussion already in this thread but what you are suggesting is only ingesting not needed lines. To surround the whole not needed part in if-not-case is better, that means the opposite of your recommendation.
In the example above in not-case you would ingest just nothing (= better) instead of
ha-state-icon {
}
which is useless, additional size and traffic, etc.
But one suggestions from me as well:
Avoid mushroom-badge-icon$ and do mushroom-badge-icon:$ because there are sometimes problems with the first way. You can find this suggestion form Thomas on the github page as well. The first is only evaluated if the element is already available at time of ingestion, the second later on as well. Search for “card-mod only sometimes on reload, …”.
is there a way I can add a tap-action to this card???
Contact the card code owner and make a feature request.
I have found that having your if statements around the block of the element means inconsistent application. So sometimes when the if statement goes from false to true nothing changes when entirely sorrounded by the if statement. Whereas when contained within the element i have never seen this behaviour.
I havent seen any inconsistency with using mushroom-badge-icon$ ill take a look at what you mention by Thomas. But everything in my guide works and is tested to work.