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

show_name: true
show_icon: true
type: button
entity: sun.sun
card_mod:
  style: |
    span {
      font-size: 50px;
      color: orange;
    }

изображение

Styles should not be added “by a guess” - always use Code Editor.

Doesn’t work for me. Adding this without code to update the icon it works. My problem is once I start to combine it with the css to update the svg-icon it doesn’t. It’s probably really simple, but I just am not seeing it. Probably because everytone now falls under the ha-state-icon and ha-icon?

  style:
    ha-state-icon $ ha-icon $: |
      ha-svg-icon {
        color: #2196f3;
        background-color: #1c3447;
        width: 25px;
        height: 25px;
        padding: 10px;
        border: 0px solid blue;
        border-radius: 100%;
      }
      span {
        font-size: 50px;
        color: orange;
      }

Hope these schema will help you:

element_1:
  $: |
    element_1_1 {
      ...
    }
    element_1_2 {
      ...
    }
  .: |
     element_1 {
       ...
     }
     element_1 element_1_3 {
       ...
     }
     element_2 {
       ...
     }
     element_2 element_2_1 {
       ...
     }

Here:
– “element_1” & “element_2” are on the same level
– “element_1_3” is inside “element_1”
– “element_1_1” & “element_1_2” are inside shadowRoot of “element_1”
– “element_2_1” is inside “element_2”

Hi all.

In another topic I had a question to change the color of my media player icon. That worked fine thanks to the help of the community.

Now, I want to change the color of this item:

I cannot seem to find the correct element to change the color. Is there a tutorial on how to find the right elements? I have searched in this topic but without succes…

trying to mod the header (title) of a type: grid card

    - type: custom:mod-card
      card_mod:
        style: |
          .card-header {
            color: red;
          }
      card:
        type: grid
        title: Verlichting Cards
        columns: 4
  #       square: false
        cards:

without succes yet.

the DOM

Scherm­afbeelding 2023-03-07 om 15.53.17

and elements:

(nevermind the red there, Ive set the manually to check if its the correct element…)

nvm me either:

    - type: custom:mod-card
      card_mod:
        style:
          hui-grid-card $: |
           .card-header {
             color: red;
           }

the DOM was telling it, I just missed it…

Have you tried using the card-mod-helper?

Trying to combine things posted by 🔹 Card-mod - Add css styles to any lovelace card - #4280 by Ildar_Gabdullin to achieve a slightly better look to my tabs.

Here’ a picture:

I got the “Vivid” look but what I am trying to accomplish is coloring the “active” tabs so that it is easier to see the level of selected tabs that are active. The green underline and text is great but I want a slight tint to the active tabs to further stand out.

Right now, I have this for tabs snipped to the important piece:

            tabs:
              - attributes:
                    label: NHL
                    icon: mdi:ballot
                card:
                    type: custom:mod-card
                    card_mod:
                        style:
                            tabbed-card $: |
                                mwc-tab {
                                  background: var(--ha-card-background, var(--card-background-color, white) );
                                  border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0) );
                                  border-width: 2px;
                                  border-top-left-radius: 20px;
                                  border-top-right-radius: 20px;
                                  border-style: solid;
                                  overflow: hidden;
                                }

And cannot figure out how to combine this with the example for the active tab background sample:

card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $: |
          .mdc-tab--active {
            background: lightgreen !important;
          }

Any help is appreciated!

Hmm, try these recommendations:
one
two
What you are asking is a thing which you have to face very often. So it is better to learn it.
If you experience any troubles with navigation - ping me.

What I was missing I got now. I just wanted to modify the “active” ones and all I needed was:

mwc-tab[active] {
     background: #EBFFD8 !important;
}

If you want to hide the scrollbar, but keep a section scrollable, add this:

card_mod:
  style: |
    ::-webkit-scrollbar {
        display: none;
    }
1 Like

Trying to mod a core entities card Title content so we can add dynamic templating, I could not find a way to completely set it via card_mod (and replace the title field in the card config itself)

I did find a way to add an ‘after’ section though like:

type: entities
title: Air quality dashboard
card_mod:
  class: class-header-no-margin-no-color
  style: |
    .card-header .name::after {
          content:"{{': ' + states('sensor.u_s_air_pollution_level')}}";
     }

    .card-header {
      background: {% set aqi = states('sensor.u_s_air_quality_index')|int(0) %}
                  {% if aqi <= 50 %} seagreen
                  {% elif aqi <= 100 %} gold
                  {% elif aqi <= 150 %} orange
                  {% elif aqi <= 200 %} crimson
                  {% elif aqi <= 300 %} purple
                  {% else %} maroon
                  {% endif %};
      color: {{'var(--text-color-off)' if 51 < states('sensor.u_s_air_quality_index')|int(0) < 101
                else 'ivory'}};
    }

Note the class only sets some other card/font specifics.

Normally I restructure these entities cards to vertical-stacks and have a default button title card do that trick, but this ofc is kind of nice too.

As you can see the colon is preceded by a space, which my eyes don’t like, I want it to be

Airquality dashboard: Good

or, as it would be with the button card:

  - type: custom:button-card
    template: button_default_title
    name: >
      [[[ return 'Airquality dashboard: '
          + states['sensor.u_s_air_pollution_level'].state; ]]]
    styles:
      card:
        - background: seagreen

So, the question for now: can we remove the empty space in the card_mod on the entities card title?

1 Like

I have a list of battery entities like this:
image
And I would like to make the font red if any of the values are under 20%
I know this is to be added to the card which makes all red for example.

card_mod:
  style: |
    ha-card {
      color: red;
    }

And there is a way to add to each entities but I have a lot more than 3 entities so what is the way to only add it once per card? Not sure sure how to set it if any state is < 20% then make it red.

You are aware that current Frontend does just that by itself? Wel, the icon that is

Just set the card to use state_color: true and you’re set. No need for card_mod at all

Current battery level thresholds are weird - smth like 20% & 70% instead of usual 33% & 66%.
That is why I do not use default colors.

agreed they could use some more granularity… I’ve asked for that some time ago, but no response. still, what we can do core is better than using extra system resources in the Frontend.

Especially since this core option also changes the more-info.
trying to cut down on any customization possible…

1 Like
  1. Created a PR to change thresholds to 33 & 66 - was refused by Paul ))). Reason was like “we use x10 values to change an icon - that is why we use same x10 values for thresholds”, no comments.
  2. Your Custom UI allows to override colors in more-info too.

Yes I have seen it and enabled it in the past but I would like to set my own % values and colors.

Yes, there’s even an example using dynamic levels in custom-ui/EXAMPLES.md at 9d7890d9a8546a438b3ae418779f67cd717465d3 · Mariusthvdb/custom-ui · GitHub :wink:

or, use a fixed granularity:

    sensor.*_bewegingssensor:
      templates: &battery_color
        icon_color: >
          if (['unavailable','unknown'].includes(state)) return 'steelblue';
          if (state > 75) return 'green';
          if (state > 50) return 'gold';
          if (state > 25) return 'orange';
          if (state > 10) return 'brown';
          return 'red';

Having said that, it was designed for entities card and some of the more modern cards don’t use this attribute

this is my current battery card, and it allows you to only show those cards below a certain threshold:

type: entities
title: Batterij
card_mod:
  class: class-header-no-margin
show_header_toggle: false
state_color: true
entities:
  - type: custom:config-template-card
    entities:
      - input_number.battery_alert_level
    variables:
      threshold: states['input_number.battery_alert_level'].state
    row:
      type: section
      label: >-
        ${'Below: ' + threshold}
  - type: custom:slider-entity-row
    entity: input_number.battery_alert_level
#  - type: custom:auto-entities
#    card:
#      type: entities
#      card_mod: &mod
#        style: |
#          ha-card {
#            box-shadow: none;
#            margin: -16px -16px 0px -16px;
#          }
#    filter:
#      template: >
#        {% set threshold = states('input_number.battery_alert_level')|float(0) %}
#        {% set ns = namespace(below_threshold=[]) %}
#        {% for s in expand('group.battery_sensors')|rejectattr('state','in',['unknown','unavailable'])
#         if s.state|float(0) < threshold %}
#        {% set ns.below_threshold = ns.below_threshold + [s.entity_id] %}
#        {% endfor %}
#        {{ns.below_threshold}}
#    sort:
#      method: state
#      numeric: true
#  - type: divider

  - type: custom:auto-entities
    card:
      type: entities
      state_color: true
      card_mod:
        style: |
          ha-card {
            box-shadow: none;
            margin: 0px -16px;
          }
      #title: Threshold buttons battery template
    filter:
      template: >

        {% set threshold = states('input_number.battery_alert_level')|float(0) %}
        {% set batteries =
             states.sensor
              |selectattr('attributes.device_class','defined')
              |selectattr('attributes.device_class','eq','battery')
              |map(attribute='entity_id')|list %}
        {% for s in expand(batteries)
           if s.state|is_number and s.state|float(0) < threshold %}
          {{s.entity_id}}
        {%- endfor %}

#        {% set threshold = states('input_number.battery_alert_level')|float(0) %}
#        {% for s in states.sensor|selectattr('attributes.device_class','eq','battery')
#           if s.state|is_number and s.state|float(0) < threshold %}
#          {{s.entity_id}}
#        {%- endfor %}
    sort:
      method: state
      numeric: true

  - entity: sensor.low_level_batteries
    secondary_info: last-changed
  - entity: binary_sensor.battery_alert
    secondary_info: last-changed
    state_color: true

  - type: custom:fold-entity-row
    head:
      type: section
      label: All batteries
      card_mod: &label
        style: |
          .label {
            margin-left: 0px;
          }
    padding: 0
    entities:
      - type: custom:auto-entities
        card:
          #title: Batteries
          type: entities
          state_color: true
          card_mod:
            style: |
              ha-card {
                box-shadow: none;
                margin: 0px -16px;
              }
              .card-content {
                max-height: 300px;
                overflow-y: scroll;
              }

        filter:
          exclude:
            - domain: binary_sensor
            - state: unavailable
          include:
            - attributes: {device_class: battery}
              options:
                secondary_info: last-updated
#                 style: |
#                   :host {
#                     --card-mod-icon-color: {% if states(config.entity)|int(-1) < 30 %}red
#                                            {% elif states(config.entity)|int(-1) < 60 %}orange
#                                            {% else %}green
#                                            {% endif %};
#                   }
        sort: {method: state, numeric: true}

  - entity: automation.alert_when_batteries_are_below_alert_level
    secondary_info: last-triggered
#     state_color: true
  - entity: automation.create_battery_group
    secondary_info: last-triggered

openend a new discussion on the matter here: Add more granularity to device_class:battery colors · home-assistant/frontend · Discussion #15791 · GitHub
please chime in if you +1 or add new info helping the devs to implement this

Trying to change the padding on a vertical stack card header without success, this is what i got so far, any ides?

type: vertical-stack
title: Kitchen
style: |
  .card-header {
      padding: 6px 16px 2px !important;
  }
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.temperature_77
      - type: entity
        entity: sensor.humidity_76
      - type: entity
        entity: sensor.lightlevel_48
    alignment: end
    style: |
      .chip-container {
          padding-right: 4px;
          margin-top: -30px
      }

image
image