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

[ofirm (Ofir)]

I have a couple of basic questions, couldn’t figure it out (not a frontend guy)…

1. How do I mod a heading card (type: heading), for example changing the super-small font size or aligning to center?
2. How to I mod a dashboard tab text (again, changing font or increasing its size, or increasing its width)?
   I did manage to make such changes in other places, simply by appending something standard as below, but it doesn’t work for me in the above cases

card_mod:
  style: |
    ha-card  {
      text-align: center;  
    }

[mike.aumiller]

Im trying to target the color attribute of this subtitle text “Low Humidity” that is shown within this apexcharts-card leveraging card_mod.

I want to either change the text color to red if humidity falls below 30% or to amber if the humidity rises above 50%.
Can someone with a little more card_mod experience help with this?

type: custom:apexcharts-card
experimental:
  color_threshold: true
header:
  show: true
  show_states: true
  standard_format: true
  colorize_states: true
  title: Office Comfort
graph_span: 12h
cache: true
yaxis:
  - id: humidity
    show: false
    apex_config:
      opposite: true
  - id: temperature
    show: false
all_series_config:
  group_by:
    func: last
    duration: 1h
  show:
    header_color_threshold: true
series:
  - entity: sensor.ep1_office_temperature
    type: area
    name: Temperature
    yaxis_id: temperature
    stroke_width: 3
    opacity: 0.3
    curve: smooth
    color: "#FEB019"
  
  - entity: sensor.ep1_boho_suite_humidity
    yaxis_id: humidity
    type: column
    name: Humidity
    opacity: 0.3
    color_threshold:
      - value: 0
        color: "#E74C3C"
      - value: 30
        color: "#585858"
      - value: 50
        color: "#FEB019"
apex_config:
  plotOptions:
    bar:
      borderRadius: 6
      columnWidth: 90%
  tooltip:
    fillSeriesColor: false
    theme: light
    x:
      show: false
  states:
    hover:
      filter:
        type: lighten
        value: 0.7
  subtitle:
    text: Low Humidity
    align: center
    floating: true
    offsetY: -20
    style: 
      fontSize: 18px
      color: yellow
  markers:
    size: 5
    strokeColors: "#282828"
    strokeWidth: 3
    shape: circle
  chart:
    zoom:
      type: x
      enabled: true
      autoScaleYaxis: true
    toolbar:
      show: true
      autoSelected: zoom
      tools:
        download: false
    xaxis.type: datetime
    height: 250px
  grid:
    position: back
    borderColor: "#282828"
    strokeDashArray: 0
    xaxis:
      lines:
        show: true
  legend:
    show: false
card_mod: # just an example - div target is incorrect
  style:
    $: |
      .card-header {
        {% if states('sensor.ep1_office_temperature')|float >= 50.0 %}
          color: red;
        {% elif states('sensor.ep1_office_temperature')|float <= 30.0 %}
          color: amber;
        {% else %} 
          color: grey;
        {% endif %}
            }

Chrome Inspector Screenshot

[Milosz83]

I think I have two very simple questions that I haven’t been able to find answers to for a few days. How can I change the color of the icon in a picture-glance card depending on the entity’s state? If a given entity is active, it should have a different color than other icons? For example: all icons are gray but only fan and light are yellow becuse at the moment are active. Second question, can I change the contrast or color of the bar on which the icons appear at the bottom of the picture-glance card?

[Ildar_Gabdullin]

@ofirm

How do I mod a heading card (type: heading)

1st post of this thread - link at the bottom (titled “fantastic post bla bla”) - heading card

[Ildar_Gabdullin]

@ofirm

mod a dashboard tab text

What is a “dashboard tab”?

As for styling with “ha-card” - it may only work for UI elements (cards, for example) which contain “ha-card”. Means - do not use thoughtlessly.

[Ildar_Gabdullin]

@Milosz83

change the color of the icon in a picture-glance card depending on the entity’s state

1st post of this thread - link at the bottom - picture glance.
Just use jinja to define a color in a template, check other examples in the thread.

@Milosz83

change the contrast or color of the bar on which the icons appear at the bottom of the picture-glance card?

Same, use that given info as a starting point.

[ehu156]

I want the icon and text to change color to orange here when hvac_action is “heating”. Can anyone advise how to do this? Thanks very much.

Here is the current YAML:

type: heading
icon: mdi:home-floor-g
heading: Hall
heading_style: subtitle
badges:
  - type: entity
    show_state: true
    show_icon: true
    entity: climate.1_ground_landing_and_toilet_neo
    state_content:
      - current_temperature
      - hvac_action
    tap_action:
      action: more-info

[Ildar_Gabdullin]

Use examples for Heading card as I already explained you with more details in your initial thread.
1st post - link at the bottom - Heading

[ehu156]

thanks. I have had a look at this - saw your post from October 2 (extract below) - and have no idea how I can use the logic from this YAML coding at all for my purpose. Sorry, I just don’t understand.

type: vertical-stack
cards:
  - type: heading
    icon: mdi:fan
    heading: some long long long long long long title
    heading_style: title
    badges:
      - type: entity
        entity: sun.sun
        icon: mdi:fan
      - type: entity
        entity: fan.kitchen
    card_mod:
      style:
        .badges hui-heading-badge:nth-child(1) hui-entity-heading-badge $: |
          ha-heading-badge {
            --icon-color: red;
          }
          state-display {
            color: magenta;
          }
          ha-state-icon {
            animation: rotating 2s linear infinite;
          }
          @keyframes rotating {
            0% {transform: rotate(0);}
            100% {transform: rotate(359deg);}
          }
        .badges hui-heading-badge:nth-child(2) hui-entity-heading-badge $: |
          ha-heading-badge {
            --icon-color: orange;
          }
          state-display {
            color: red;
          }
          ha-state-icon {
            animation: rotating 2s linear infinite;
          }
          @keyframes rotating {
            0% {transform: rotate(359deg);}
            100% {transform: rotate(0);}
          }
        .: |
          ha-card {
            background-color: lightgreen !important;
            border-radius: var(--ha-card-border-radius, 12px);
            border-width: var(--ha-card-border-width, 1px);
            border-style: solid;
          }
          .title > p {
            color: red;
            white-space: break-spaces !important;
          }
          .title ha-icon {
            --icon-primary-color: yellow;
            --mdc-icon-size: 32px;
            animation: rotating 2s linear infinite;
          }
          @keyframes rotating {
            0% {transform: rotate(0);}
            100% {transform: rotate(359deg);}
          }

  - type: entities
    entities:
      - entity: sun.sun
      - entity: sun.sun

[Ildar_Gabdullin]

Basic description: how to set a css property dynamically:

ha-card {
{% if state_attr(‘sensor.xxx’,’some_attr’) == ‘xxxx’ -%}
color: green;
{%- else -%}
color: red;
{%- endif %}
}

Adapt this example to your case.

[Milosz83]

@Ildar_Gabdullin Many thanks for your support !!!
Your guide to card_mod’s capabilities is amazing

[ehu156]

thank you very much.

I tried this and it didn’t work - any suggestions?

type: heading
icon: mdi:home-floor-g
heading: Hall
heading_style: subtitle
badges:
  - type: entity
    show_state: true
    show_icon: true
    entity: climate.1_ground_landing_and_toilet_neo
    state_content:
      - current_temperature
      - hvac_action
    tap_action:
      action: more-info
card_mod:
  style: 
    ha-card {
      {% if state_attr(‘climate.1_ground_landing_and_toilet_neo’,‘hvac_action’) == ‘heating’ -%}
      color: green;
      {%- else -%}
      color: red;
      {%- endif %}
    }

[Ildar_Gabdullin]

I said “adapt” - which does not mean you should use it “as is”. Use a proper path for elements in your card-mod code.

[ehu156]

Thanks. I don’t know how to adapt the language more than I have already done. Sorry, I’m just not that familiar with this all.

[Ildar_Gabdullin]

I see. Take your prev post with static customized (by card-mod) color; assume it looks like

xxx {
  some-icon-color-property: red;
}

and then use a jinja expression “{% if … -%} … {%- endif %}” from my example.
I am not giving you a ready solution, not easy from a mobile, so it is better for you to create it yourself.

[ferbulous (Shaq)]

Hi, could anyone help with this?
I’m having this issue with some of the bar graphs going outside the box

Lovelace: Bar Card

Ok, I think I got it working now using config-card thanks to this post Only issue I have now is the bar exceed the column it’s in Anyway I can edit this so it stays inside? Also how do I reduce the numbers (remove .0 or %) display so each bar width is smaller? [image] [image] type: custom:config-template-card variables: - states['number.mmwave_g0_still_threshold_2'] - states['number.mmwave_g1_still_threshold_2'] - states['number.mmwave_g2_still_threshold_2'] - states['number.mm…

Basically i just need to have them fit inside the box or probably resize it to remove the empty space below

[ofirm (Ofir)]

wow, thanks! I need to spend some over over this, great stuff!

[ofirm (Ofir)]

I want to increase the text size of the tabs on the top of the dashboard, they are too small on the desktop (circled in red)

[stickpin]

Here is the mod for the badge icon size in the Heading card.
Just in case someone wants to modify the icon size.

card_mod:
  style:
    .badges hui-entity-heading-badge $: |
      ha-state-icon {
        --mdc-icon-size: 18px;
      }

[scoma24]

Hi everyone, here is my first post:
(sections, type: heading)
I have this, which worked until 2024.10. unfortunately not since 2024.11. Do you know if something has changed since 2024.11 or what could be the reason?

card_mod:
  style:
    .badges hui-heading-badge:nth-child(1) hui-entity-heading-badge $: |
      ha-heading-badge {
                    {% if is_state('binary_sensor.sensor1', 'on') %}
                      color: orange !important;
                    {% else %}
                      color: white !important;
                    {% endif %}
                  }

  .badges hui-heading-badge:nth-child(4) hui-entity-heading-badge $: |
                  ha-heading-badge {
                    {% if is_state('binary_sensor.kontakt_2', 'on') %}
                      color: orange !important;
                      --card-mod-icon: phu:double-window-open !important;
                    {% else %}
                      color: white !important;
                      --card-mod-icon: phu:double-window-closed !important;
                    {% endif %}
                  }
                .badges hui-heading-badge:nth-child(5) hui-entity-heading-badge $: |
                  ha-heading-badge {
                    {% if states('sensor.kohlendioxid') | int <= 1000 %}
                      color: lightgreen !important;
                      /*--card-mod-icon: mdi:check-circle !important;*/
                    {% elif states('sensor.kohlendioxid') | int > 1000 and states('sensor.kohlendioxid') | int <= 2000 %}
                      color: orange !important;
                      --card-mod-icon: mdi:cloud-alert !important;
                    {% else %}
                      color: red !important;
                      --card-mod-icon: mdi:alert-circle !important;
                    {% endif %}
                  }
    .: |
                  ha-card.type-heading {
                    font-size: 8px !important;
                    height: 50px; !important;
                    padding: 0px; !important;
                  }

The font size adjustment works, but the icon change and the color change no longer do. As I said, only since 2024.11