Both methods are great suggestions, thanks this works perfectly for my purpose 
I’d say that to be a apexcharts specific challenge… maybe better hop over to that thread, did you check there btw?
If not already possible inside the supported card option, Id try it with custom:config-template-card and set a template on the color like that
No, I just stumbled upon this thread via a google search. I’ll have to try to find another thread about this then. Thanks anyway
this is the one: https://community.home-assistant.io/t/apexcharts-card-a-highly-customizable-graph-card
Thank you! /Peter
Hello,
I am trying to change the background color of my custom:mini-graph-card based on the state of the switch.socket_isomactea switch
Green = On
Red = Off
So i added
card_mod:
style:
.: |
ha-card {
background-color: green
}
but how i change to color based on the Item Stat?
type: custom:mini-graph-card
name: La Pavoni
icon: mdi:coffee
card_mod:
style:
.: |
ha-card {
background-color: green
}
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.socket_isomactea
entities:
- entity: sensor.socket_isomactea_energy_power
name: now
- entity: sensor.socket_isomactea_energy_today
name: today
show_state: true
show_indicator: true
show_graph: false
- entity: sensor.socket_isomactea_energy_yesterday
name: yesterday
show_state: true
show_indicator: true
show_graph: false
hours_to_show: 24
line_width: 3
hour24: true
aggregate_func: max
height: 50
1st post - link at the bottom
This makes the icons misaligned as they expand from the top left to the bottom right. How can I use this but have them scale in size from the center?
Examples are not supposed to solve every case. They just give a first push.
Try playing with styles for the “text” element.
I try to change the font color of the sun card, with no sucess. Any idea?
type: custom:sun-card
language: de
style: |
ha-card {
color: red;
}
??
1st post - link at the bottom
Ups, thanks.
I used your example, but why is this not working "
type: entity
entity: switch.daikin_ac_beds
card_mod:
style: |
.header .icon {
{% if is_state(config.entity,'on') %}
color: var(--paper-item-icon-active-color);
{% else %}
color: var(--state-icon-color);
{% endif %}
}
This var is not supported anymore.
what should I do to fix this ?, please
Use a partucular color (like red, rgb(255,0,0), #ff0000) instead of some variable.
Or use freshly added variables (check a changelog in the Blog) on your own risk.
I have been trying to read and follow the syntax for cardmod across the 4000+ great comments, but I consistently fail to get this working on my own cards (or follow the logic of how others are approaching).
As a simple example on a slider row, just to see if I can follow a solution. I am trying to change the text-align of the number from the default left to center. I have tried all sorts, but without success and am really just shooting in the dark at this stage!
Here is a very basic card I am playing with:
type: custom:slider-entity-row
entity: input_number.bed_timer
full_row: true
grow: false
show_header_toggle: false
state_color: true
card_mod:
style:
slider-entity-row$: |
.state {
text-align: center !important;
}
Can someone help educate me please! Knowing how to properly interrogate (or make baby-steps towards) with give me lots of new things to play around with!!
code
type: entities
entities:
- type: custom:slider-entity-row
entity: input_number.test_number
- type: custom:slider-entity-row
entity: input_number.test_number
card_mod:
style: |
.state {
text-align: center !important;
color: red;
}
Thank you very much for the solution. That was a variant I had tried previously, but the missing point was to embed it within an entities card. Is that generally something required rather than just directly having the custom card?
