Struggling to find the correct syntax, but I am using the room_card (marcokreeft87/room-card) and am trying to find the proper selector for the ha-icon to increase the size.
Thatās my issue. I tried several but I donāt ever seem to see an effect on the front. If I manually select it and change it with the developer tools it works. Suggestions for what I may be doing wrong?
i am trying to change the icons of the buttons of a media_player.template card
i have managed to change the size , spacing etc of the icons but i have not managed to change the actual icons.
what did work was to change the icon of the card itself (see below āmdi:kodiā) but not for the buttons
What I want to add is coloring of the 3rd child of the secondary entries so it changes the state color on switch state. Without the main entry mod this works for that:
As always: First post, link to Ildas examples/tutorials and there you will find an entry for combining such things. Or search for this in this thread and you will find the same question and same answer and even more examples a lot (!) of times.
Sometimes it is really faster and more helpful to do some search and see, how the others are doing it and if the same questions has been flying around again and again.
Example: The last same question has been answered just 2d/15 posts above.
Anyone willing to look at the below and tell me where I am going astray? Problem is the text color is not changing when then the background changes to yellow. The card is showing me the output of some of the FLUME sensors. The background color will change based on the # of gallons used, this is working, problem I am having is when it turns yellow I canāt read the numbers so I want the text color to change to black only when the background is yellow. this is all the code for ref. the Card Mod stuff is at the end, attempt 1 was this-
mode: horizontal
cards:
- type: custom:button-card
entity: sensor.flume_sensor_denmans_current_day
name: Today
icon: mdi:water
show_state: true
styles:
card:
- '--keep-background': 'true'
- filter: opacity(70%)
- height: 40px
icon:
- color: white
name:
- font-size: 12px
- color: white
- type: custom:button-card
entity: sensor.flume_sensor_denmans_current_week
name: This Week
icon: mdi:water
show_state: true
styles:
card:
- '--keep-background': 'true'
- filter: opacity(70%)
- height: 40px
icon:
- color: white
name:
- font-size: 12px
- color: white
- type: custom:button-card
entity: sensor.flume_sensor_denmans_current_month
name: This Month
icon: mdi:water
show_state: true
styles:
card:
- '--keep-background': 'true'
- filter: opacity(70%)
- height: 40px
icon:
- color: white
name:
- font-size: 12px
- color: white
card_mod:
style: |
ha-card {
{% set value = states('sensor.flume_sensor_denmans_current_month')|int %}
{% if value >= 0 and value <= 12000 %}
--ha-card-background: green;
{% elif value >= 12001 and value <= 15000 %}
--ha-card-background: yellow;
{% else %}
--ha-card-background: red;
{% endif %}
{% if value >= 12001 and value <= 15000 %}
color: black;
{% else %}
color: var(--accent-color);
{% endif %}
} ```
Attempt 2, Just the changed Card Mod stuff-
``` card_mod:
style: |
ha-card {
{% set value = states('sensor.flume_sensor_denmans_current_month')|int %}
{% if value >= 0 and value <= 12000 %}
--ha-card-background: green;
{% elif value >= 12001 and value <= 15000 %}
--ha-card-background: yellow;
{% else %}
--ha-card-background: red;
{% endif %}
{% if value >= 12001 and value <= 15000 %}
color: black;
{% endif %}
}
Atempt 3, also no go.
style: |
ha-card {
{% set value = states('sensor.flume_sensor_denmans_current_month')|int %}
{% if value >= 0 and value <= 12000 %}
--ha-card-background: green;
{% elif value >= 12001 and value <= 15000 %}
--ha-card-background: yellow;
{% else %}
--ha-card-background: red;
{% endif %}
}
.card-content {
color: var(--accent-color);
}
.card-content.yellow {
color: black;
}
This should make the icon containers almost square, with a round of 15px at the corners but now they are all round. I suppose this is being ignored.
Someone have some pointers on how to solve this?
