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

Thanks, I needed the custom number card to understand what may be the issue.

It’s definitley the number-box card. I place the cards inside a grid layout card with 3 columns and still had alignment issues. I was able to add margin mods to align the number boxes

With my entities…

type: entities
entities:
  - type: section
    label: Mode Settings
    card_mod:
      style: |
        .label {
          color: rgb(187, 187, 187) !important;
          font-size: 20px !important;
        }
        .divider {
          background-color: rgb(187, 187, 187) !important;
          height: .5px !important;
        }
  - type: custom:gap-card
    height: 5
  - type: custom:numberbox-card
    icon: false
    entity: number.garage_spotlight_sensor_occupancy_timeout
    name: Temperature HighHigh Trigger
    high: 194
    toggle_entity: switch.kitchen_lights
    card_mod:
      style: |
        .cur-box {
         border: 1px solid red;
         }
         .body .cur-num {
            color: tomato;
          }
  - type: custom:numberbox-card
    icon: false
    entity: number.garage_spotlight_sensor_occupancy_timeout
    name: Temperature Low Trigger
    low: 32
    toggle_entity: switch.kitchen_lights
    card_mod:
      style: |
        .cur-box {
           margin-left: 34px;
           border: 1px solid red;
          }
        .body .cur-num {
            color: lightblue;
          }
  - type: custom:numberbox-card
    icon: false
    entity: number.garage_spotlight_sensor_occupancy_timeout
    name: Humidity High Trigger
    toggle_entity: switch.kitchen_lights
    card_mod:
      style: |
        .cur-box {
           margin-left: 54px;
           border: 1px solid red;
          }
        .body .cur-num {
            color: tomato;
          }
  - type: custom:numberbox-card
    icon: false
    entity: number.garage_spotlight_sensor_occupancy_timeout
    name: Humidity Trigger
    toggle_entity: switch.kitchen_lights
    card_mod:
      style: |
        .cur-box {
           margin-left:88px;
           border: 1px solid red;
          }
        .body .cur-num {
            color: lightblue;
          }
show_header_toggle: false

As soon as you introduce a different UoM you get spacing issues.

Even if you set the width and justify the content you are going to get alignment issue on the right.

card_mod:
      style: |
        .cur-box {
         border: 1px solid red;
          width: 100px;
          justify-content: left !important;     
         }

You can push the margins to the right edge and everything should align.

type: entities
entities:
  - type: section
    label: Mode Settings
    card_mod:
      style: |
        .label {
          color: rgb(187, 187, 187) !important;
          font-size: 20px !important;
        }
        .divider {
          background-color: rgb(187, 187, 187) !important;
          height: .5px !important;
        }
  - type: custom:gap-card
    height: 5
  - type: custom:numberbox-card
    icon: false
    entity: input_number.test3
    name: Temperature HighHigh Trigger
    high: 194
    toggle_entity: switch.kitchen_lights
    card_mod:
      style: |
        .cur-box {
         border: 1px solid red;
          width: 100px;
          justify-content: left !important;     
         }
         .body .cur-num {
            color: tomato;
                   }
  - type: custom:numberbox-card
    icon: false
    entity: number.garage_spotlight_sensor_occupancy_timeout
    name: Temperature Low Trigger
    low: 32
    toggle_entity: switch.kitchen_lights
    card_mod:
      style: |
        .cur-box {
           margin-left: 34px;
           border: 1px solid red;
           width: 100px;
           justify-content: left !important;       
          }
        .body .cur-num {
            color: lightblue;
          }
         .padl {
          color: lime !important;
          padding: 0;
          margin-left: 10px !important;    
             }          
  - type: custom:numberbox-card
    icon: false
    entity: number.garage_spotlight_sensor_occupancy_timeout
    name: Humidity High Trigger
    toggle_entity: switch.kitchen_lights
    card_mod:
      style: |
        .cur-box {
           margin-left: 54px;
           border: 1px solid red;
           width: 100px;
           justify-content: left !important;       
          }
        .body .cur-num {
            color: lightblue;
          }
         .padl {
          color: yellow !important;
          padding: 0;
          margin-left: 10px !important;    
             }   
  - type: custom:numberbox-card
    icon: false
    entity: input_number.test3
    name: Humidity Trigger
    toggle_entity: switch.kitchen_lights
    card_mod:
      style: |
        .cur-box {
           margin-left:88px;
          width: 100px;
          justify-content: left !important;
           border: 1px solid red;
          }
        .body .cur-num {
            color: lightblue;
          }
show_header_toggle: false
1 Like

Hiya IIdar,

May I enquire if you are able to change the swtich’s size? I managed to change the colour with the code below but couldn’t change the size. Thanks for your kind advice.

type: entities
entities:
  - light.living_room_lights
  - light.study_lights
  - light.all_lights
card_mod:
  style:
    hui-generic-entity-row:
      ha-entity-toggle:
        $:
          ha-switch:
            $: |
              .mdc-switch .mdc-switch__track {
                border-color: green !important;
              }
            .: |
              ha-switch {
              --switch-unchecked-track-color: yellow;
              --switch-checked-track-color: red;
              }

Please post your code and questions using the community standards. See #11 and 16.

Good afternoon,
I have a Conditional Card with Card-mod, but I am stuggling.
I would like to have the font color: black.
But somehow, it stays gray.

Anyone know the solution?

type: conditional
conditions:
  - condition: state
    entity: binary_sensor.meteoalarm
    state_not: 'off'
  - condition: state
    entity: binary_sensor.meteoalarm
    state_not: unknown
card:
  type: vertical-stack
  cards:
    - type: custom:mushroom-template-card
      primary: >-
        {{ (state_attr('binary_sensor.meteoalarm','senderName')).split ()[0]  }}
        WeerCode :{% if
        (state_attr('binary_sensor.meteoalarm','awareness_level')).split (';
        ')[1] == 'green' %}Groen {% endif %} {% if
        (state_attr('binary_sensor.meteoalarm','awareness_level')).split (';
        ')[1] == 'yellow' %}Geel{% endif %}{% if
        (state_attr('binary_sensor.meteoalarm','awareness_level')).split (';
        ')[1] == 'orange' %}Oranje{% endif %}{% if
        (state_attr('binary_sensor.meteoalarm','awareness_level')).split (';
        ')[1] == 'red' %}Rood{% endif %} (Noord-Holland)
      secondary: >-
        {{ (state_attr('binary_sensor.meteoalarm', 'description')) }}

        Van {{ as_timestamp(state_attr('binary_sensor.meteoalarm','onset')) |
        timestamp_custom('%d-%m %H:%M') }} tot {{
        as_timestamp(state_attr('binary_sensor.meteoalarm','expires')) |
        timestamp_custom('%d-%m %H:%M') }}
      icon: |-
        {% if is_state('sensor.knmi_weercode', 'Groen') %}
          mdi:alert-circle-check
        {% elif is_state('sensor.knmi_weercode', 'Geel') %}
          mdi:alert-decagram
        {% else %}
          mdi:alert
        {% endif %}
      icon_color: >-
        {% if (state_attr('binary_sensor.meteoalarm','awareness_level')).split
        ('; ')[1] == 'green' %}
         green
        {% endif %}

        {% if (state_attr('binary_sensor.meteoalarm','awareness_level')).split
        ('; ')[1] == 'yellow' %}
         red
        {% endif %}

        {% if (state_attr('binary_sensor.meteoalarm','awareness_level')).split
        ('; ')[1] == 'orange' %}
         red
        {% endif %}

        {% if (state_attr('binary_sensor.meteoalarm','awareness_level')).split
        ('; ')[1] == 'red' %}
         yellow
        {% endif %}
      hold_action:
        action: url
        url_path: 'https://www.knmi.nl/nederland-nu/weer/waarschuwingen/noord-holland '
      multiline_secondary: true
      fill_container: false
      tap_action:
        action: url
        url_path: 'https://www.knmi.nl/nederland-nu/weer/waarschuwingen/noord-holland '
      double_tap_action:
        action: more-info
      card_mod:
        style: |
          ha-card {
            font-color: black;
            {% if (state_attr('binary_sensor.meteoalarm','awareness_level')).split ('; ')[1] == 'green' %}
                --primary-text-color: blue;
                --secondary-text-color: black;                    
                --card-secondary-font-size: 10px; 
                --card-primary-font-size: 14px;                        
              background-color: green;
              opacity: 0.7;
            {% endif %}
            {% if (state_attr('binary_sensor.meteoalarm','awareness_level')).split ('; ')[1] == 'yellow' %}
                --primary-text-color: blue;
                --secondary-text-color: black;                    
                --card-secondary-font-size: 10px; 
                --card-primary-font-size: 14px;                        
              font-color: black; 
              background-color: yellow;
              opacity: 0.7;
            {% endif %}
            {% if (state_attr('binary_sensor.meteoalarm','awareness_level')).split ('; ')[1] == 'orange' %}
                --primary-text-color: blue;
                --secondary-text-color: black;                    
                --card-secondary-font-size: 10px; 
                --card-primary-font-size: 14px;                        
              background-color: orange;
              opacity: 0.7;
            {% endif %}
            {% if (state_attr('binary_sensor.meteoalarm','awareness_level')).split ('; ')[1] == 'red' %}
                --primary-text-color: blue;
                --secondary-text-color: black;                    
                --card-secondary-font-size: 10px; 
                --card-primary-font-size: 14px;                        
              background-color: red;
              opacity: 0.7;
            {% endif %}                  

          }             
card_mod:
  style: |
    ha-state-icon {
      --icon-symbol-size: 50px;
    } mushroom-shape-icon {
      --icon-size: 80px;
    }
    ha-card {
      width: center;
      background: none;
      border: none !important;
      box-shadow: none !important;
    }

image

1 Like

Replace

--primary-text-color: blue;
--secondary-text-color: black;    

With

 --card-primary-color: blue !important;
 --card-secondary-color: black !important;
1 Like

Yes. That worked. I appreciate the help.

There are several components, but this should assist you.

You can also move the colors directly to the thumb and track.

type: entities
show_header_toggle: false
entities:
  - entity: input_boolean.test
    card_mod:
      style:
        hui-generic-entity-row:
          ha-entity-toggle:
            $:
              ha-switch:
                $: |
                  .mdc-switch__track  {
                     height: 12px !important;
                     width: 30px !important;
                     padding: 1px 1px;
                     margin: 1.5px 1px;
                     --switch-unchecked-track-color: lime;
                     --switch-checked-track-color: yellow;
                    
                     }
                  .mdc-switch__thumb {
                     border: 1px !important;
                     height: 15px !important;
                     width: 15px !important;
                     --switch-unchecked-button-color: lime;
                     --switch-checked-button-color: yellow;
                        }
  - entity: input_boolean.test

Hello, the modification is not visible in the card code editor. It looks and works in the RAW file. What mistake are you making?

type: custom:mushroom-template-card
primary: |-
  {% set time = now().hour %}
  {% if (time >= 18) %}
    Jó estét, {{ user }}
  {% elif (time >= 12) %}
    Kellemes délutánt, {{ user }}
  {% elif (time >= 5) %}
    Jó reggelt, {{ user }}
  {% elif (time >= 8) %}
    Kellemes napot, {{ user }}
  {% else %}
    Jó éjszakát, {{ user }}
  {% endif %}
secondary: >
  {% set alarm_state = states('alarm_control_panel.partition_area_1') %} {% if
  alarm_state == 'disarmed' %}
    A riasztó állapota: Hatástalanítva
  {% elif alarm_state == 'armed_away' %}
    A riasztó élesítve: Távol
  {% elif alarm_state == 'armed_night' %}
    A riasztó élesítve: Éjszakai
  {% else %}
    {{ alarm_state }}
  {% endif %}
icon: mdi:home
tap_action:
  action: navigate
  navigation_path: /dashboard-kezelfelulet/info
picture: ''
badge_color: |
  {% if is_state('alarm_control_panel.partition_area_1','disarmed') %}
    blue
  {% endif %}
  {% if is_state('alarm_control_panel.partition_area_1','armed_away') %}
    red
  {% endif %}
  {% if is_state('alarm_control_panel.partition_area_1','armed_night') %}
    green
  {% endif %}
  {% if is_state('alarm_control_panel.partition_area_1','armed_stay') %}
    orange
  {% endif %}
badge_icon: mdi:shield-home
icon_color: cyan
multiline_secondary: true
fill_container: true
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            card_mod:
              style:
                mushroom-state-info$: |
                  .container {
                    align-items: end;
                  }
                .: |
                  ha-card {
                    box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75) !important;
                    width: 250px;
                  }
            primary: |-
              {% set time = now().hour %}
              {% if (time >= 18) %}
                Jó estét, {{ user }}
              {% elif (time >= 12) %}
                Kellemes délutánt, {{ user }}
              {% elif (time >= 5) %}
                Jó reggelt, {{ user }}
              {% elif (time >= 8) %}
                Kellemes napot, {{ user }}
              {% else %}
                Jó éjszakát, {{ user }}
              {% endif %}
            secondary: >
              {% set alarm_state =
              states('alarm_control_panel.partition_area_1') %} {% if
              alarm_state == 'disarmed' %}
                A riasztó állapota: Hatástalanítva
              {% elif alarm_state == 'armed_away' %}
                A riasztó élesítve: Távol
              {% elif alarm_state == 'armed_night' %}
                A riasztó élesítve: Éjszakai
              {% else %}
                {{ alarm_state }}
              {% endif %}
            icon: mdi:home
            tap_action:
              action: navigate
              navigation_path: /dashboard-kezelfelulet/info
            picture: ''
            badge_color: >
              {% if is_state('alarm_control_panel.partition_area_1','disarmed')
              %}
                blue
              {% endif %}

              {% if
              is_state('alarm_control_panel.partition_area_1','armed_away') %}
                red
              {% endif %}

              {% if
              is_state('alarm_control_panel.partition_area_1','armed_night') %}
                green
              {% endif %}

              {% if
              is_state('alarm_control_panel.partition_area_1','armed_stay') %}
                orange
              {% endif %}
            badge_icon: mdi:shield-home
            icon_color: cyan
            multiline_secondary: true
            fill_container: true

hello i tried this code to make blink a picture to make some text but it seems it isn’t work

type: picture-elements
elements:
  - type: image
    entity: input_boolean.notify_home
    style:
      top: 50%
      left: 50%
      width: 100%
      animation: my-blink 1s linear infinite
    state_image:
      'on': /local/FloorPlan/light.msl120_c7f7_light_bulb.png
      'off': /local/FloorPlan/Transparent.png
  - type: state-icon
    entity: light.msl120_c7f7_light_bulb
    style:
      top: 85%
      left: 107%
      width: 100%
    tap action:
      action: toggle
image: /local/FloorPlan/Eteint.png
style: |

  @keyframes my-blink {
    from {opacity: 0;}
    to {opacity: 100;}
    from {opacity: 100;}
    to {opacity: 0;}
  }

@Thomas-Webster Are you asking for assistance or responding to a post? It’s not clear…

how to optimize the code?
button-card in this card it is solved like this

type: custom:button-card
entity: sensor.moon_phase
entity_picture: |
  [[[ return `/local/images/moon/${entity.state}.png`; ]]]
show_entity_picture: true

how to do this in this card?

    card_mod:
      style: |
        ha-card {
          --ha-card-border-width: 0;
          {% if is_state('sensor.moon_phase', 'new_moon') %}
            background: url('/local/images/moon/new_moon.png');
              background-size: 50% auto, cover;
              background-position: right;
              background-repeat: no-repeat;
              background-blend-mode: saturation;
            {% else %}
          {% if is_state('sensor.moon_phase', 'waxing_crescent') %}
            background: url('/local/images/moon/waxing_crescent.png');
              background-size: 50% auto, cover;
              background-position: right;
              background-repeat: no-repeat;
              background-blend-mode: saturation;
            {% else %}
          {% if is_state('sensor.moon_phase', 'first_quarter') %}
            background: url('/local/images/moon/first_quarter.png');
              background-size: 50% auto, cover;
              background-position: right;
              background-repeat: no-repeat;
              background-blend-mode: saturation;
            {% else %}
          {% if is_state('sensor.moon_phase', 'waxing_gibbous') %}
            background: url('/local/images/moon/waxing_gibbous.png');
              background-size: 20% auto, cover;
              background-position: right;
              background-repeat: no-repeat;
              background-blend-mode: saturation;
          {% if is_state('sensor.moon_phase', 'full_moon') %}
            background: url('/local/images/moon/full_moon.png');
              background-size: 10% auto, cover;
              background-position: right;
              background-repeat: no-repeat;
              background-blend-mode: saturation;
            {% else %}
          {% if is_state('sensor.moon_phase', 'waning_gibbous') %}
            background: url('/local/images/moon/waning_gibbous.png');
              background-size: 10% auto, cover;
              background-position: right;
              background-repeat: no-repeat;
              background-blend-mode: saturation;
            {% else %}
          {% if is_state('sensor.moon_phase', 'last_quarter') %}
            background: url('/local/images/moon/last_quarter.png');
              background-size: 10% auto, cover;
              background-position: right;
              background-repeat: no-repeat;
              background-blend-mode: saturation;
            {% else %}
          {% if is_state('sensor.moon_phase', 'waning_crescent') %}
            background: url('/local/images/moon/waning_crescent.png');
              background-size: 10% auto, cover;
              background-position: right;
              background-repeat: no-repeat;
              background-blend-mode: saturation;
            {% endif %}
            {% endif %}
            {% endif %}
            {% endif %}
            {% endif %}
            {% endif %}
            {% endif %}
            {% endif %}
        }

What card are you referring to ?

Your coding should resemble this format…

{% if is_state('sensor.moon_phase', 'new_moon') %}
xxxx
{% elif is_state('sensor.moon_phase', 'waxing_crescent') %}
xxxx
{% elif is_state('sensor.moon_phase', 'first_quarter') %}
xxxx
{% else %}
xxxx
 {% endif %}

I’m sorry you didn’t understand
artificial intelligence helped me solve the problem
everything is simpler

        background: url('/local/images/moon/{{ states('sensor.moon_phase') |
        lower | replace(' ', '_') }}.png');

full code

    card_mod:
      style: |
        ha-card {
           --ha-card-border-width: 0;
            background: url('/local/images/moon/{{ states('sensor.moon_phase') |
            lower | replace(' ', '_') }}.png');
            background-size: 50% auto, cover;
            background-position: right;
            background-repeat: no-repeat;
            background-blend-mode: saturation;

What is the point of your reply?

1 Like

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:horizon-card
    title: []
    fields:
      sunrise: true
      sunset: true
      dawn: false
      noon: false
      dusk: false
    southern_flip: false
    language: ru
    time_format: language
    number_format: language
    card_mod:
      style: |
        ha-card {      
          --ha-card-border-width: 0;
          --ha-card-border-color: rgba(0,255,255,0.2);
          height: 170px;
          width: 100%;
        }
  - type: custom:stack-in-card
    cards:
      - type: entity
        entity: sensor.moon_phase
        name: Фаза луны
        card_mod:
          style: |
            ha-card {
              font-family: "PT Sans Narrow";
              height: 100%;
              width: 100%;
              right: 0px;
              bottom: 0px;
              top: 0px;
              --mdc-icon-size: 1px;
            }
    card_mod:
      style: >
        ha-card {
          --ha-card-border-width: 0;
        background: url('/local/images/moon/{{ states('sensor.moon_phase') |
        lower | replace(' ', '_') }}.png');
        background-size: 20% auto, cover;
        background-position: right;
        background-repeat: no-repeat;
        background-blend-mode: saturation;
card_mod:
  style: |
    ha-card {
       background: transparent;
       border-color: cyan;
    }

no need to write spam

Hello, I apologize for the imprecise wording. Please help.
The “card-mod” modification works, but it does not appear. This is a bit confusing. I made some mistake that I don’t understand.

You did not provide context, solved your issue and wrote an unproductive response. Help people help you or help others. Happy AI solved your problem.

2 Likes