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

[booyakafoo (Scoot)]

@CDRX2

!important.

Thanks for taking the time to assist. Correct, the card size is ok. I would leave it bigger if it adjusted the font clipping but that doesn’t seem to help.

Here is what it looks like when I adjust the card height.

I do suspect I need an overflow visible somewhere but it doesn’t do anything when I add it to my existing card mod style section.

When I drill down in dev tools, I can unselect the overflow property and it does show the full text.

“#view>hui-view>hui-masonry-view$#columns>div>hui-vertical-stack-card$#root>hui-glance-card$ha-card>div>div$div”

[CDRX2]

Ok, just tested, the following worked:

card_mod:
  style:
    .: |
      ha-card {
        font-size: 35px;
        height: 100px !important;
      }
      .entities {
        height: 100px;
      }
    .entity$: |
      div {
        overflow: visible;
      }

The height is not necessary, you can remove those entries if it doesn’t suit what your’e looking for.

[xlyralycanx (Lyra)]

Hey guys. I’m stumped on this.
Is there a (probably simple) way to make the padding change consistent, when the mini media player entity changes to ‘–inactive’ the code ceases to work.
Many Thanks

---- Edit ----
I found the answer. ‘!important’. Damn i feel dumb


^^ Working ^^

^^ --inactive var breaks it ^^

  - type: custom:mini-media-player
    card_mod:
      style: |
        ha-card .mmp-player {
          padding: 0px;
        }
         ha-card {
           border-width: 0px;
         }

[booyakafoo (Scoot)]

This worked out perfect. Thank you very much.

[kjlindehammar]

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?

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

[Ildar_Gabdullin]

@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.

2. 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.

[Mariusthvdb (Marius)]

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:

• only disable pointer-events on the div:nth-child(2) and not on the actionable entities in the 3d section to the right
• only allow hover popups, and nu further interaction. which is not that straightforward so it seems…html - Is there a `pointer-events:hoverOnly` or similar in CSS? - Stack Overflow

[Mariusthvdb (Marius)]

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

[Mariusthvdb (Marius)]

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

well, except for the color of the sun ofc, but hey, that’s a minor detail…

[kjlindehammar]

@Ildar_Gabdullin Thanks for taking time to explain for a beginner

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

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

[Ildar_Gabdullin]

@kjlindehammar

Your example colors the whole graph

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.

[jonathonp (Jon)]

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

[Mariusthvdb (Marius)]

this Is the complete yaml code

this is a generic camera integration entity,

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

[Mariusthvdb (Marius)]

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:

[kjlindehammar]

@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 ?

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 THanks again for helping out, It is much appreciated!

[Mariusthvdb (Marius)]

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

[Mariusthvdb (Marius)]

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

[Ildar_Gabdullin]

@kjlindehammar

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.

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

[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