šŸ”¹ 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;
                      }
1 Like

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