šŸ”¹ Card-mod - Add css styles to any lovelace card

This worked out perfect. Thank you very much.

1 Like

Hi
I feel like I have tried everything: I want to change the color of the bars i plot in a mini-graph-card with an if-statement based on which hour it is to highlight which bar represents the current electricity price. I thought card-mod is the best way to go but I canā€™t find out even how to change the color with card-mod. I have tried place the card-mod code in different places but I donā€™t really know what iā€™m doing. I can change the color with the ā€œcolor entryā€ when i add the entitiy to the graph but not with card-mod to include the if-statement. Any suggestions how to proceed here? Perhaps there is another smarter way than if-statement based on the current hour?

image

The image should show what Iā€™m after, The code I have right now is belowā€¦ i have removed some entity entries just to make the code a bit more readable.

type: custom:mini-graph-card
entities:
  - entity: sensor.nordpool_kwh_se3_sek_3_095_025
    color: '#d0cdcd'
    show_graph: false
    show_state: true
    state_adaptive_color: true
  - entity: sensor.nordpool_today_hr_00_01
    name: Today hour 1
    color: '#03a9f4'
    show_legend: false
  - entity: sensor.nordpool_today_hr_01_02
    name: Today hour 2
    color: '#03a9f4'
    show_legend: false
name: Elpris idag
group_by: hour
hours_to_show: 1
lower_bound: 0
hour24: true
icon: mdi:cash-multiple
show:
  graph: bar
card_mod:
  style: |
    ha-card > div.graph > div > div.graph__container__svg > svg > g > g:nth-child(17) > rect {
      fill: 'grey';  
    }

Thanks in advance !
//Noob HA user :slight_smile:

@kjlindehammar

  1. A path for some ā€œbarā€ should be defined as below:
      type: custom:mini-graph-card
      entities:
        - entity: sensor.processor_use
      group_by: hour
      hours_to_show: 24
      show:
        graph: bar
      card_mod:
        style: |
          .graph__container__svg svg g.bars .bar:nth-child(5) {
            fill: grey;  
          }

ŠøŠ·Š¾Š±Ń€Š°Š¶ŠµŠ½ŠøŠµ

This works for a ā€œshow 1 graphā€ case.
In your case a code contains 3 graphs (one with ā€œshow_graph: falseā€) - so adapt this style for your case.

  1. To select some bar you need to use smth like ā€œnth-child(17)ā€.
    Each bar corresponds to some hour. If you need to select the current hour - this will be the LAST bar.
    Goto 1st post ā†’ link at the bottom ā†’ styles for mini-graph-card ā†’ How to set a color for the last bar.

If you need to select SOME PARTICULAR bar - then use this:

      card_mod:
        style: |
          {% set INDEX = ................ -%}
          .graph__container__svg svg g.bars .bar:nth-child({{INDEX}}) {
            fill: grey;  
          }

where you need to specify a formula for the ā€œINDEXā€ value.

in addition to the great main post on picture-glance, I needed a way to style the pointer-events: none

first I set it to the ha-card, but that was moot, since I use these picture-element cards to navigate to my roomsā€¦ only looked for a way to have the bottom-section icons be non-responsive.

this seems to work as hoped for, posting here for others to help, and if something could be optimized, please do (as always the challenge is in combining several styling aspects, in the case the border on the card. the [[]] originate the decluttering template I use for these Navigating cards):

  type: picture-glance
  card_mod:
    style:
      .: |
        ha-card {
          border: {{'1em solid red' if is_state('[[trigger_id]]','[[trigger_state]]')
                  else 'none'}};
        }
      .box: |
        .wrapper {
          pointer-events: none;
        }

full decluttering-card template:

default:
  - trigger_state: 'on'
card:
  type: picture-glance
  card_mod:
    style:
      .: |
        ha-card {
          border: {{'1em solid red' if is_state('[[trigger_id]]','[[trigger_state]]')
                  else 'none'}};
        }
      .box: |
        .wrapper {
          pointer-events: none;
        }
  entity: '[[main_id]]'
#   title: '[[title]]'
  show_state: true
  state_filter:
    'off': grayscale(80%)
    'unavailable': grayscale(100%)
#   area: '[[area]]'
  image: /local/images/areas/[[image]]
  aspect_ratio: 100%
  tap_action: none
  hold_action:
    action: navigate
    navigation_path: /ui-sub-views/[[path]]
  double_tap_action:
    action: toggle
  entities:
    '[[entities]]'

the card_mod stops me from requiring this on all cards per entity:

          - entities:
              - entity: sensor.laundry_sensor_temperature
                <<: &none
                  tap_action: none
                  hold_action: none
                  double_tap_action: none
              - entity: sensor.laundry_sensor_illuminance
                <<: *none
              - entity: binary_sensor.back_door
                <<: *none
              - entity: switch.boiler_bijkeuken
                <<: *none

saving a lot of (already anchored) yamlā€¦

2 things needing further exploration:

juist for reference, this can be done, and is probably tidier:

  type: picture-glance
  card_mod:
    style: |
      ha-card {
        border: {{'1em solid red' if is_state('[[trigger_id]]','[[trigger_state]]')
                else 'none'}};
      }
      .box div:nth-child(1) .wrapper {
        pointer-events: none;
      }

and even

      .box div:nth-child(1) {
        pointer-events: none;
      }

since I dont use titles for the picture-glance cards, the div is 1ā€¦ it opens up the right section for interaction.

I also tried to set cursor: none in that section, but suppose I need another property to attach that to, because it cant be dine generically in that div

the hover popups are a bit slow (in button-card I always use

transition: opacity 0.5s

for that)

, but this shows what it does alright
Feb-04-2023 12-12-14

just found a card_mod I dont think that has been posted here yet:

  - type: picture-entity
    card_mod:
      style: |
        ha-card {
          {{'filter: invert(100%)' if is_state('binary_sensor.dark_outside','on')
             else 'filter: none'}} ;
        }
    show_state: false
    show_name: false
    entity: camera.weer_roosendaal

turning day card/light:

into night/dark:

which I find to be exactly what I was looking for :wink:

well, except for the color of the sun ofc, but hey, thatā€™s a minor detailā€¦

@Ildar_Gabdullin Thanks for taking time to explain for a beginner :slight_smile:

Your example colors the whole graph if I select nth-child(1) since I only show 1 hour per entity. My entities are energy prices for one hour that is why I have this set up.

I donā€™t see how to tweak it to select the right entity to color When i check the inspector the bars seem to have individual numbers so I donā€™t really understand :open_mouth:

Do you have any additional suggestion?
Thanks for helping out!

Not sure I understand you.
In my example there is a graph with N bars for some time span (hours_to_show). By card-mod you may colorize some bar(s) - the first, the last, the 7th etc.
Probably your initial goal is not clear then. Post a graph and explain which bar you want to colorize.

Can you share the complete yaml code this this card? Thanks.

this Is the complete yaml code :wink:

this is a generic camera integration entity,

SchermĀ­afbeelding 2023-02-05 om 13.52.08

made on the
https://www.yr.no/en/content/2-2747930/meteogram.svg resource.

if you go there you find your own region and save thathttps://www.yr.no/en

1 Like

besides the current price indicator, didnt you consider using some thresholds? I find the bar card especially suited for that:

        color_threshold:
          - value: 0.05
            color: lightgreen
          - value: 0.1
            color: green
          - value: 0.2
            color: orange
          - value: 0.3
            color: darkorange
          - value: 0.4
            color: red
          - value: 0.5
            color: maroon
          - value: 0.6
            color: purple
          - value: 0.7
            color: black

more configurability is available using apexcharts btw, making indicating the current price even easier, injecting a secondary graph, and the Now indicator:

@Ildar_Gabdullin

Hi, Yes sorry Iā€™m probably not being clear.
Iā€™ll take it from beginning maybe it will be more clear:

I have sensor data for energy price for each hour. So sensor.nordpool_today_hr_00_01 (energy cost during 00:00 - 01:00), sensor.nordpool_today_hr_01_02 ( energy cost during 01:00 - 02:00) I have 24 bars that are plotted with individal entity and I only show 1 hour.

group_by: hour
hours_to_show: 1

But since i put

entities:
  - entity: sensor.nordpool_today_hr_00_01
    name: Today hour 1
    show_legend: false
  - entity: sensor.nordpool_today_hr_01_02
    name: Today hour 2
    show_legend: false

 ... and so on until ...

  - entity: sensor.nordpool_today_hr_23_24
    name: Today hour 24
    show_legend: false

If i put in your card_mod code addressing the 2nth bar in the end of my card:

card_mod:
  style: |
    .graph__container__svg svg g.bars .bar:nth-child(2) {
      fill: grey;  
    }

Nothing happens since i donā€™t show the 2nth bar of any entity.
If I however, put in 1 in nth-child:

card_mod:
  style: |
    .graph__container__svg svg g.bars .bar:nth-child(1) {
      fill: grey;  
    }

I color the whole graph (all 24 bars get color grey) because each entity has is represented by 1 bar and iā€™m now coloring 1st bar of every entity. Do you see my problem ? :slight_smile:

I donā€™t understand the how to translate the DOM to CSS/YAML for card-mod but what Iā€™m after (i know it is not correct but):

card_mod:
  style: |
    .graph__container__svg svg g.bars .bar:nth-child(1)  entity(1) {
      fill: grey;  
    }

Your figure with Processor use where you are colring the 5th bar is exaclty what Iā€™m after and the generic code to set the id of the bar is perfect for my purpose but it seems like the card_mod style is not specifying which entity it is refering to modify the fill for which in my case seems to be needed.

I hope that makes sence :slight_smile: THanks again for helping out, It is much appreciated!

this wont work, because for 24 hours, you show 24 entities.
that is a completely different config from a single entity shown for 24 hours.

sadly there is no option in the mini-graph-card card to add a ā€˜nowā€™ label. if you d need the now indicator, maybe some nifty vertical-stack option could work showing the 2 on top of each other.

ofc, the easiest way out here would be the apexcharts, which has the option builtin:

    now:
      show: true
      label: Now

I opened a discussion on mini-graph-card for it, because it seems very usable addition to that great card

Was it changed recently that we need to set --section-header-text-color in the mod styling for the fold-entity-row label?

I just noticed that my original color: no loner worked:

      - type: custom:fold-entity-row
        card_mod:
          style: |
            :host {
              color: {{'ivory' if is_state('binary_sensor.dark','on') else 'green'}};
              --paper-item-icon-color: {{'ivory' if is_state('binary_sensor.dark','on') else
               'darkgreen' }};
            }
        head:
          type: section
          label: Details
          card_mod: &label
            style: |
              .label {
                --section-header-text-color:{{'ivory' if is_state('binary_sensor.dark','on') else 'green'}};
                margin-left: 0px;
              }

Then there is no need to use card-mod.
Consider these 24 sensors:

sensor.testing_price_0_1
...
sensor.testing_price_23_0

where each is a price for a particular hour.
Let them be equal to ā€œ1, ā€¦, 24ā€ for simplicity.

Then we got 24 bars , orange/green colors to differentiate every 4-hours interval, and the red bar is the current time:

ŠøŠ·Š¾Š±Ń€Š°Š¶ŠµŠ½ŠøŠµ

where the bottom card is for a ā€œsome bar is selectedā€ case.

code
  - type: custom:auto-entities
    card:
      type: custom:mini-graph-card
      name: prices
      hours_to_show: 1
      points_per_hour: 1
      show:
        graph: bar
        name: true
        state: false
        icon: false
        labels: true
        legend: false
    filter:
      template: >-
        {% set PART_1 = states.sensor |
                        selectattr('entity_id','search','testing_price_[\d]_') | 
                        sort(reverse=false,attribute='entity_id') -%}
        {%- set PART_2 = states.sensor |
                          selectattr('entity_id','search','testing_price_[\d][\d]_') | 
                          sort(reverse=false,attribute='entity_id') -%}
        {%- set PRICES = PART_1 + PART_2 -%}
        {%- for state in PRICES -%}
          {%- if loop.index == now().hour|int(0) -%}
            {%- set COLOR = 'red' -%}
          {%- elif loop.index in [1,2,3,4,9,10,11,12,17,18,19,20] -%}
            {%- set COLOR = 'orange' -%}
          {%- else -%}
            {%- set COLOR = 'lightgreen' -%}
          {%- endif -%}
          {{
              {
                'entity': state.entity_id,
                'color': COLOR
              }
          }},
        {%- endfor %}

Just for educational purpose: this is a valid selector to colorize the 3rd bar (may be used if you decide not to use auto-entities):

card_mod:
  style: |
    .graph__container__svg svg g.bars:nth-of-type(3) .bar {
      fill: magenta;  
    }
2 Likes

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.

1 Like

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

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

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