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

There are semi-colons in-between !important too. I was still working on the code realizing it wasn’t right. Feel free to jump in.

1 Like

Yes, we should point a user at these errors, let him/her correct them. Allowing to learn is better than giving a ready solution)

1 Like

I 100% agree. I didn’t see them at first, was answering via my phone.

"Give a man a fish, and you feed him for a day; teach a man to fish and you feed him for a lifetime.

2 Likes

No, not using mushrooms (((

1 Like

Many thanks @LiQuid_cOOled and others for your help and tutelage! Only 2nd week after finding out about HA and I can’t get enough!

Here is the solution that gives me the card I was looking for (feel free to continue pointing out optimizations… and errors!)…

            - type: custom:mushroom-number-card
              entity: input_number.energy_hours
              layout: horizontal
              display_mode: buttons
              icon: none
              icon_type: none
              # icon_color: primary
              fill_container: false
              primary_info: name
              secondary_info: none
              name: "Hours:"
              card_mod:
                style:
                  mushroom-state-info$: |
                    .container {
                      align-items: end;
                      margin: 2px 6px 0px 0px;
                    }
                  mushroom-number-value-control$: |
                    mushroom-input-number {
                      --bg-color: transparent !important;
                      # --bg-color: red !important;
                      }
                  .: |
                    ha-card {
                      position: relative;
                      float: right;
                      width: 250px;
                      background: none !important;
                      border: none !important;
                      height: 20px !important;
                      --control-height: 26px;
                      padding: 0px !important;
                      }

Check out both of these for Mushroom questions and answers. HA is definitely addicting!! Happy to have another member :clap:

and

1 Like

Anyone have any idea why my statistics graph card wont change color?

chart_type: line
period: hour
type: statistics-graph
entities:
  - sensor.mainpowermeter_current_phase_1
  - sensor.mainpowermeter_current_phase_2
  - sensor.mainpowermeter_current_phase_3
  - sensor.heat_pump_phase_a_current
  - sensor.heat_pump_phase_b_current
  - sensor.heat_pump_phase_c_current
stat_types:
  - mean
days_to_show: 1
card_mod:
  style: |
    ha-card {
      --graph-color-1: #ff0000;
      --graph-color-2: #ff0000;
      --graph-color-3: #ff0000;
      --graph-color-4: #ff0000;
      --graph-color-5: #ff0000;
      --graph-color-6: #ff0000;
    }

try adding !important after your colors.

card_mod:
  style: |
    ha-card {
      --graph-color-1: #ff0000 !important;
      --graph-color-2: #ff0000 !important;
      --graph-color-3: #ff0000 !important;
      --graph-color-4: #ff0000 !important;

(tired) Have you checked 1st post → link at the bottom?

this didn’t work for me for a horizontal stack card.
However this worked:

    card_mod:
      style: |
        ha-state-icon  {
          --mdc-icon-size: 150% !important;
        }

but now the icon is not aligned /centered anymore. can you help me to re-align/center the icon in the card? reply would be much appreciated. thank you

hi,I’ve been using cardmod for a while,
but recently i did my half anual HA upgrade:
and my ‘clock’ changed from being perfecty readable to the image below,
anyone got an idea?

card_mod:
      style: |
        ha-card {
        --ha-card-background: #4097AA;
        --ha-card-border-radius: 5px ;
        --primary-text-color: #F3DECA;
        --card-primary-font-size: 60px;
        font-family: "Lucida Console", "Courier New", monospace;
        --ha-cardbox-shadow: 0px;
        --ha-card-border-width: 4px;
        --ha-card-border-color: #254669;
        --icon-size: 40px; 
        max-height: 100%;
        min-height: 235px;
        width:100%;
        }

image

EDIT: I’ve added the line-height now too and this fixed it, has their been any known change that would cause this?

Could you pls share your complete code.

I´m not getting there with my copy/paste skills. :confused:

Add
--card-primary-line-height: 60px;

card_mod:
      style: |
        ha-card {
        --ha-card-background: #4097AA;
        --ha-card-border-radius: 5px ;
        --primary-text-color: #F3DECA;
        --card-primary-font-size: 60px;
        --card-primary-line-height: 60px;
        font-family: "Lucida Console", "Courier New", monospace;
        --ha-cardbox-shadow: 0px;
        --ha-card-border-width: 4px;
        --ha-card-border-color: #254669;
        --icon-size: 40px; 
        max-height: 100%;
        min-height: 235px;
        width:100%;
        }
1 Like

Hello,
I created several cards for my dashboard, but I would like to do something about the lines between each vertical.
Do you have any idea what I should do, to make the intermediate lines vanishing?

I assume it is possible with CSS, but I have less experience with that. Anyone can help me out please?

this is the yaml config:

type: horizontal-stack
cards:
  - type: custom:stack-in-card
    cards:
      - type: vertical-stack
        cards:
          - type: custom:vertical-stack-in-card
            cards:
              - type: custom:weather-card
                entity: weather.openweathermap
                forecast: true
                details: true
                current: true
                hourly_forecast: false
              - type: custom:apexcharts-card
                apex_config:
                  chart:
                    height: 200px
                  annotations:
                    yaxis:
                      - 'y': 0.25
                        label:
                          style:
                            color: var(--secondary-text-color)
                            background: var(--secondary-background-color)
                          text: light
                      - 'y': 1
                        label:
                          style:
                            color: var(--secondary-text-color)
                            background: var(--secondary-background-color)
                          text: moderate
                      - 'y': 2.5
                        label:
                          style:
                            color: var(--secondary-text-color)
                            background: var(--secondary-background-color)
                          text: heavy
                yaxis:
                  - decimals: 2
                    min: 0
                    max: ~0.5
                    apex_config:
                      tickAmount: 5
                update_interval: 5m
                graph_span: 2h
                span:
                  start: minute
                now:
                  show: true
                  color: var(--primary-text-color)
                series:
                  - entity: sensor.neerslag_buienradar_regen_data
                    data_generator: >
                      return entity.attributes.data.split(' ').slice(0,
                      -1).map(item => {
                        return [moment(item.split('|')[1], 'HH:mm').valueOf(), Math.pow(10, ((parseInt(item.split('|')[0] - 109) / 32)))]
                      })
                    color: '#6e9bd4'
                    type: area
                    name: Buienradar
                    stroke_width: 2
                    group_by:
                      func: avg
                      duration: 10min
                    show:
                      legend_value: false
                  - entity: sensor.neerslag_buienalarm_regen_data
                    data_generator: >
                      return entity.attributes.data.precip.map((item, index) =>
                      {
                        return [moment.unix(entity.attributes.data.start).add(index*entity.attributes.data.delta, 's').valueOf(), item]
                      })
                    color: '#224179'
                    type: area
                    curve: smooth
                    stroke_width: 2
                    group_by:
                      func: avg
                      duration: 10min
                    name: Buienalarm
                    show:
                      legend_value: false
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-template-card
                primary: ' {{ states("sensor.event_rain_rate") }} mm'
                secondary: Vandaag
                icon: mdi:weather-rainy
                fill_container: true
                entity: sensor.hourly_rain_rate
                layout: vertical
                icon_color: blue
              - type: custom:mushroom-template-card
                primary: ' {{ states("sensor.hourly_rain_rate") }} mm'
                secondary: Afgelopen uur
                icon: mdi:weather-rainy
                fill_container: true
                entity: sensor.daily_rain_rate
                layout: vertical
                icon_color: blue
              - type: custom:mushroom-template-card
                primary: ' {{ states("sensor.hourly_rain_rate") }} mm'
                secondary: Gemiddeld mm/h
                icon: mdi:weather-rainy
                fill_container: true
                entity: sensor.hourly_rain_rate
                layout: vertical
                icon_color: blue
  - type: custom:stack-in-card
    cards:
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-entity-card
                icon_color: light-green
                entity: sensor.buiten_temperatuur
                name: Buiten
              - type: custom:mushroom-entity-card
                icon: mdi:temperature-celsius
                entity: sensor.gevoelstemperatuur
                name: Gevoel
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-entity-card
                entity: sensor.wind_gust
                fill_container: true
                icon_color: orange
                icon: mdi:weather-windy-variant
                layout: vertical
                card_mod:
                  style:
                    mushroom-shape-icon$: |
                      ha-icon {
                        --icon-animation: cloudy 10s ease-in-out infinite, wind 5s infinite; 
                      }
                      @keyframes cloudy {
                        0%, 100% { transform: translateX(3px); }
                        30% { transform: translateX(-1px); }
                        45% { transform: translateX(1.5px); }
                        75% { transform: translateX(-3.2px); }
                      }
                      @keyframes wind {
                        0%, 50%, 100% { clip-path: inset(0 0 0 0); }
                        25% { clip-path: inset(0 0 37% 0); }
                      }
              - type: custom:compass-card
                indicator_sensors:
                  - sensor: sensor.wind_direction
                  - sensor: sun.sun
                    attribute: azimuth
                    indicator:
                      type: circle
                value_sensors:
                  - sensor: sensor.wind_speed
                    language: nl
                compass:
                  east:
                    show: true
                  west:
                    show: true
                  south:
                    show: true
                  north:
                    show: true
                    offset: 210
                language: nl
              - type: custom:mushroom-entity-card
                entity: sensor.max_daily_gust
                fill_container: true
                icon_color: red
                icon: mdi:weather-windy-variant
                layout: vertical
                card_mod:
                  style:
                    mushroom-shape-icon$: |
                      ha-icon {
                        --icon-animation: cloudy 10s ease-in-out infinite, wind 5s infinite; 
                      }
                      @keyframes cloudy {
                        0%, 100% { transform: translateX(3px); }
                        30% { transform: translateX(-1px); }
                        45% { transform: translateX(1.5px); }
                        75% { transform: translateX(-3.2px); }
                      }
                      @keyframes wind {
                        0%, 50%, 100% { clip-path: inset(0 0 0 0); }
                        25% { clip-path: inset(0 0 37% 0); }
                      }
          - type: horizontal-stack
            cards: []
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-template-card
                primary: |-
                  {% if is_state('binary_sensor.regensensor', 'on') %}
                   Het regent
                  {% else %}
                   Droog
                  {% endif %}
                secondary: ''
                icon: |2-

                    {% if is_state('binary_sensor.regensensor', 'on') %}
                      mdi:weather-rainy
                    {% elif is_state('sun.sun', 'above_horizon') %}
                      mdi:weather-sunny
                    {% else %}
                      mdi:moon-waning-crescent
                    {% endif %}
                entity: binary_sensor.regensensor
                icon_color: |-
                  {% if is_state('binary_sensor.regensensor', 'on') %}
                    blue
                  {% else %}
                    yellow
                  {% endif %}
                fill_container: true
                multiline_secondary: true
                tap_action:
                  action: more-info
                card_mod: null
                style: |
                  ha-state-icon {
                    {{'animation: cloudy 10s ease-in-out infinite, rain 1.5s infinite;' if is_state(config.entity, 'on') }}
                      }
                      @keyframes cloudy {
                        0%, 100% { transform: translateX(3px); }
                        30% { transform: translateX(-1px); }
                        45% { transform: translateX(1.5px); }
                        75% { transform: translateX(-3.2px); }
                      }
                      @keyframes rain {
                        50% { clip-path: polygon(0 0, 100% 0, 100% 73%, 71% 73%, 50% 39%, 29% 73%, 0 73%); }
                      }
              - type: custom:mushroom-template-card
                primary: KNMI
                secondary: '{{ ''Onveilig! '' if is_state(entity, ''on'') else ''Veilig'' }}'
                icon: mdi:alert
                entity: binary_sensor.knmi_huis_fam_otte_waarschuwing
                icon_color: >
                  {% if
                  is_state('binary_sensor.knmi_huis_fam_otte_waarschuwing',
                  'on') %}
                   red
                  {% else %}
                   blue
                  {% endif %}
          - type: custom:vertical-stack-in-card
            cards:
              - type: grid
                square: false
                columns: 2
                cards:
                  - type: custom:mushroom-entity-card
                    entity: sensor.buiten_temperatuur
                    primary_info: state
                    secondary_info: name
                    name: Temperatuur
                    icon_color: green
                    fill_container: true
                  - type: custom:mushroom-entity-card
                    primary_info: state
                    secondary_info: name
                    name: Luchtvochtigheid
                    icon_color: blue
                    fill_container: true
                    entity: sensor.humidity
              - type: custom:mini-graph-card
                entities:
                  - entity: sensor.buiten_temperatuur
                    name: Buiten temperatuur
                  - entity: sensor.humidity
                    name: Buiten luchtvochtigheid
                  - entity: sensor.gemiddelde_buiten_temperatuur
                    name: Gemiddelde Temperatuur
                  - color: gray
                    entity: sun.sun
                    name: Night
                    show_line: false
                    show_points: false
                    show_legend: false
                    y_axis: secondary
                show:
                  labels: false
                  labels_secondary: false
                  state_map:
                    - value: below_horizon
                      label: Night
                    - value: above_horizon
                      label: Day
  - type: vertical-stack
    cards:
      - type: custom:hourly-weather
        entity: weather.huis_fam_otte_hourly
        icons: true
        colors: null
        sunny: '#bbccee'
        snowy-rainy: rgba(255, 255, 255, 0.8)
        exceptional: red
        name: Weer vandaag
        offset: '1'
        num_segments: '12'
        show_precipitation_amounts: true
        show_wind: 'false'
      - show_state: false
        show_name: false
        camera_view: auto
        type: picture-entity
        image: https://demo.home-assistant.io/stub_config/bedroom.png
        entity: camera.buienradar
        camera_image: camera.buienradar
        theme: Mushroom
        name: Nederland
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: ' {{ states("sensor.boom_pollen") }} ppm'
            secondary: Boom
            icon: mdi:tree
            fill_container: true
            layout: vertical
            icon_color: brown
            multiline_secondary: true
            entity: sensor.boom_pollen
            tap_action:
              action: navigate
              navigation_path: >-
                /lovelace/title: My Awesome Home views:     # View tab title.  
                - title: Example     # Unique path for direct access
                /lovelace/${path}     path: example     # Each view can have a
                different theme applied. Theme should be defined in the
                frontend.     theme: dark-mode     # The cards to show on this
                view.     cards:         # The filter card will filter entities
                for their state       - type: entity-filter        
                entities:           - device_tracker.paulus           -
                device_tracker.anne_there         state_filter:           -
                'home'         card:           type: glance           title:
                People that are home          # The picture entity card will
                represent an entity with a picture       - type:
                picture-entity         image:
                https://www.home-assistant.io/images/default-social.png        
                entity: light.bed_light      # Specify a tab icon if you want
                the view tab to be an icon.   - icon: mdi:home-assistant     #
                Title of the view. Will be used as the tooltip for tab icon    
                title: Second view     cards:         # Entities card will take
                a list of entities and show their state.       - type:
                entities         # Title of the entities card         title:
                Example         # The entities here will be shown in the same
                order as specified.         # Each entry is an entity ID or a
                map with extra options.         entities:           -
                light.kitchen           - switch.ac           - entity:
                light.living_room             # Override the name to
                use             name: LR Lights          # The markdown card
                will render markdown text.       - type: markdown         title:
                Dashboard         content: >           Welcome to your
                **dashboard**.
          - type: custom:mushroom-template-card
            primary: ' {{ states("sensor.gras_pollen") }} ppm'
            secondary: Gras
            icon: mdi:grass
            fill_container: true
            layout: vertical
            icon_color: green
            entity: sensor.gras_pollen
            multiline_secondary: true
          - type: custom:mushroom-template-card
            primary: ' {{ states("sensor.onkruid_pollen") }} ppm'
            secondary: Onkruid
            icon: mdi:cannabis
            fill_container: true
            layout: vertical
            icon_color: orange
            entity: sensor.onkruid_pollen
            multiline_secondary: true

if anyone struggles with the same problem, i found a solution using the code inspector:

    card_mod:
      style: |
        ha-state-icon  {
          width: 70% !important;
        }
        ha-state-icon + span {
          margin-top: 0px !important;
        }

the second part is not necessary for resizing purposes. it just moves the text closer to the icon

I’m not sure the second part modifies or adjusts anything…

type: custom:mushroom-entity-card
icon: mdi:fan
entity: fan.bedroom_fan
card_mod:
      style: |
        ha-state-icon  {
           width: 0% !important;
           margin-top: 10px !important;
        }

width is controlling the distance between the icon and text
margin-top is controlling the position of the icon

Is it possible to put everything on the same row? I want the secondary info on the same row as the entity name.

This is my code…

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.viking_0203502038_d7_00_humidity
    card_mod:
      style:
        hui-generic-entity-row $: |
          .info.pointer .secondary ha-relative-time {
            {% set last_updated = states[config.entity].last_updated %}
            {% set time_difference = as_timestamp(now()) - as_timestamp(last_updated) %}
            {% if time_difference > 25 %}
              color: red;
              font-size: 9px;
            {% elif time_difference < 25 %}
              color: blue;
              font-size: 9px;
            {% endif %}
          }
          :host {
          color:
            {% if states(config.entity) | int <= 32 %} 
              black
            {% elif states(config.entity) | int <= 38 %}
              orange
            {% elif states(config.entity) | int <= 100 %}
              red
            {% endif %}
            ;

          }
    secondary_info: last-changed

that code gives me this:

Snap11

But I want this, if it is possible:

Snap12

How can I make this card react to a tap / double tap / hold action not only on the text itself but also the outer area (here white, basically everything except the toggle switch)?

type: custom:auto-entities
card:
  type: entities
  title: ''
  state_color: true
  show_header_toggle: false
  card_mod:
    style: |
      ha-card {
        text-align: center;
        letter-spacing: 1px;
        font-weight: bold;
        border: 1px solid grey;
        padding: 0px;
        background: default;
      }
filter:
  include:
    - entity_id: input_boolean.gui_global_details
      options:
        name: Z U R Ü C K | Alles zeigen
        icon: mdi:home-circle
        tap_action:
          action: navigate
          navigation_path: /lovelace/default_view
        double_tap_action:
          action: navigate
          navigation_path: /lovelace/home
        hold_action:
          action: more-info
  exclude: null
show_empty: false
unique: true
sort: []

Has anyone successfully styled the h1 tag in the vanilla Calendar Card? I’m trying to supply my own title via a stack-in-card/mushroom-title-card and want the calendar’s h1 text, ie “25 Feb – 2 Mar 2024”, to present like the usual h2 secondary information.

My CSS is a bit rusty, but I want to achieve 2 things in a Mushroom Template card:

  1. Make the heigth of the box bigger
  2. Change the font size

I can achieve both, but never at the same time… Can anyone point me to what I am doing wrong?

type: custom:mushroom-template-card
primary: '{{now().timestamp() | timestamp_custom("%H:%M")}}'
secondary: '{{now().timestamp() | timestamp_custom("%A %d %B")}}'
icon: mdi:home
fill_container: true
view_layout:
  grid-area: tijd
card_mod:
  style: |
    mushroom-state-info$: |
      .container {
       --card-secondary-font-size: 20px;
       --card-primary-font-size: 20px;
      }
    ha-card {
      height: 300px !important;
    }