🔹 Card-mod - Add css styles to any lovelace card

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

    .graph__container__svg svg g.bars:nth-of-type(3) .bar {
      fill: magenta;  
    }

nice Ildar!
can confirm

        {% set now = now().hour %}
        .graph__container__svg svg g.bars:nth-of-type({{now}}) .bar {
          fill: magenta;
        }

to work also

for obvious reasons (the bars are colored depending on the actual price thresholds) Id like it to be distinguished eg by setting a border

        {% set now = now().hour %}
        .graph__container__svg svg g.bars:nth-of-type({{now}}) .bar {
          border: solid 0.5em red;
        }

however does not change the bar border, even though inspector seems to use that element.

[PSagan (Peter Lindh)]

Hello
I have been following your discussions and thoughts regarding the apexcharts card with great interest. I have a different thought than the ones I’ve seen you discuss so far, but it still applies to the sensor for the energy price. My desire is to be able to color the different bars depending on whether they are above or below, say, the average for the day. If it were possible to use the value of a sensor or some kind of template to specify the value of a color_threshold, that would solve my problem. I have made a few attempts without success. Is there any solution to this./Peter

[kjlindehammar]

Both methods are great suggestions, thanks this works perfectly for my purpose

[Mariusthvdb (Marius)]

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

[PSagan (Peter Lindh)]

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

[Mariusthvdb (Marius)]

this is the one: https://community.home-assistant.io/t/apexcharts-card-a-highly-customizable-graph-card

[PSagan (Peter Lindh)]

Thank you! /Peter

[charly405]

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

[Ildar_Gabdullin]

1st post - link at the bottom

[smugleafdev]

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?

[Ildar_Gabdullin]

Examples are not supposed to solve every case. They just give a first push.
Try playing with styles for the “text” element.

[svenson]

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;
  }

[Ildar_Gabdullin]

??
1st post - link at the bottom

[svenson]

Ups, thanks.

[ausfas]

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 %}  
    }

[Ildar_Gabdullin]

@ausfas

--paper-item-icon-active-color

This var is not supported anymore.

[ausfas]

what should I do to fix this ?, please

[Ildar_Gabdullin]

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.

[Snacker]

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!!

[Ildar_Gabdullin]

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;
        }