šŸ”¹ Card-mod - Super-charge your themes!

Thank you for this Ildar! Iā€™ve been trying to hide the Assist button for some time now and had given up until I saw your post. This worked perfect for hiding the Assist button as well.

hiding those menu items is super robust nowadays with the Kiosk-mode custom card. In fact, Ive removed all hide_xxx from my themes and have Kiosk mode take care of it.

its options are hugely expanded, and there is but 1 item it cant hide yet, (and I wont tell because you might not even be bothered by it :wink: )

anyways, install Kiosk mode and make the card_mod_themes more robust, but not having to take care of it anymore.
Its very actively developed currently so cant underdress its usefulness

Hello,
with the new energy panel color option. I realized that it is only the bars that change color, but not the sources.
I modified my theme to use card_mod and modify the source colors.

mushroom_noborder:
  ha-card-border-width: 0
  energy-grid-consumption-color-0: red
  energy-grid-consumption-color-1: green
  card-mod-theme: mushroom_noborder
  card-mod-card: |
    ha-card > div > div > table > tbody > tr:nth-child(1) >
    td.mdc-data-table__cell.cell-bullet > div {
      background: red !important;
    } 
    ha-card > div > div > table > tbody > tr:nth-child(2) >
    td.mdc-data-table__cell.cell-bullet > div {
      background: green !important;
    }       
  modes:
    light: {}
    dark: {}

1 Like

Helloā€¦ pleaseā€¦
This code work for me in card yaml
bbb

But, in theme not workig.
aaa
ā€¦
What is wrong please?

card-mod-card-yaml

If I try *-yaml ā€¦ styles not write in

because ā€œha-card.xxxxx xxxx $:ā€ is a wrong syntax.

Thank you so muchā€¦
Only round-slider$ on start works greatā€¦ but how i select only thermostat card?

Cannot say for sure, not using this card(((

Trying to do this now, this goes in the theme file right? Also how do I select the tab I want the icon on specifically? Thanks.

Addressed by a tabā€™s label:

aria-label='badge_in_tab'

Yes.
See more detailed examples here or in Github how card-mod is used in themes.

1 Like

Does card_mod not affect iframe?

Trying to remove the header but itā€™s not working.

type: custom:mod-card
card_mod:
  style: |
    .mdc-top-app-bar {
      display: none !important;
    }
card:
  type: iframe
  url: >-
    /media-browser/browser/app%2Cmedia-source%3A%2F%2Fnest/
  aspect_ratio: 150%

If you are asking about modding iframe card - then you are asking in a wrong thread.
Go to card-mod thread.

But I guess this about modding a subviewā€™s header, right?
Then why the iframe here in your code?

Did latest update (2023.10.0) ā€œmessed upā€ card-mod-root-yaml ā€¦ again ? , or is it just my installation ?

  • Fixed by renaming card-mod-root-yaml TO card-mod-root
  • and card-mod-sidebar-yaml TO card-mod-sidebar

mhhh, weird

And now i see core-2023.10.1 released ā€¦ guess it should be ā€œsafeā€ , in this matter :slight_smile:

Oh right this is the themeā€™s card-mod oops.

Also no Iā€™m trying to put the media page in a iframe card on one of my dashboards, not a subview, Im trying to remove the header inside the media page in the iframe cuz I donā€™t need that to show on the card. Nothing to do with a subview, its the iframe card.

Hi guys,

Iā€™m new one in HA ecosystem. Now Iā€™m building my home heating system with automation.
I have a variable with a ā€œlight.ā€ type. I want to show itā€™s status ā€œON or OFFā€ in lovelance as a Glance element.

How can I remove all actions from this card? So it could only show the status of the variable. I donā€™t need tap or hold action on this element.
Is there a way to remove all actions from card with card-mod?
Please help, someone who can.

For this card I use this code:

- show_name: false
    show_icon: true
    show_state: true
    type: glance
    entities:
      - entity: light.tz3000_u3oupgdy_ts0004_light
    state_color: true
    title: Status of Heater
    style: |
      ha-card {
        background: {% if is_state('light.tz3000_u3oupgdy_ts0004_light', 'on') %}
          rgba(150, 120, 0, 1)
        {% else %}
          rgba(100, 20, 0, 1)
        {% endif %};
      }

Iā€™m trying ā€“ really. I must just not be too sharp.

I have a lovelace with the following code and Iā€™m trying to set a theme so all the 20+ cards have the same look.

The first card in the list has the card-mod properties that work, but I just canā€™t get a theme working.

views:
  - title: Home
    type: custom:layout-card
    layout_type: grid
    layout:
      card-mod-theme: borderless-theme
      grid-template-columns: 20% 20% 20% 20% 20%
      grid-template-rows: auto
      column-widths: 100%
      width: 300
      card_margin: 3px 1px
      columns: 5
      max_cols: 5
      reflow: true
    cards:
      - type: gauge
        entity: sensor.125_1st_floor_temperature
        name: 125 1st Fl
        needle: true
        min: 30
        max: 100
        segments:
          - from: 0
            color: '#37aadb'
          - from: 60
            color: '#16ab90'
          - from: 74
            color: '#ab1616'
        card_mod:
          style: |
            ha-card {
              background: none;
              box-shadow: none;
              border: none;
              padding: 0px !important;
                    }
      - type: gauge
        entity: sensor.125_2nd_floor_temperature
        name: 125 2nd Fl
        needle: true
        min: 30
        max: 100
        segments:
          - from: 0
            color: '#37aadb'
          - from: 60
            color: '#16ab90'
          - from: 74
            color: '#ab1616'
      - type: gauge
        entity: sensor.371_1st_floor_temperature
        name: 371 1st Fl
        needle: true
        min: 30
        max: 100
        segments:
          - from: 0
            color: '#37aadb'
          - from: 60
            color: '#16ab90'
          - from: 74
            color: '#ab1616'
      - type: gauge
        entity: sensor.371_2nd_floor_temperature
        name: 371 2nd Fl
        needle: true
        min: 30
        max: 100
        segments:
          - from: 0
            color: '#37aadb'
          - from: 60
            color: '#16ab90'
          - from: 74
            color: '#ab1616'
      - type: gauge
        entity: sensor.371_hydronic_temperature
        name: 371 Hydronic
        needle: true
        min: 30
        max: 100
        segments:
          - from: 0
            color: '#37aadb'
          - from: 60
            color: '#16ab90'
          - from: 74
            color: '#ab1616'
      - type: gauge
        entity: sensor.carmine_temperature
        name: Carmine
        needle: true
        min: 30
        max: 100
        segments:
          - from: 0
            color: '#37aadb'
          - from: 60
            color: '#16ab90'
          - from: 74
            color: '#ab1616'
      - type: gauge
        entity: sensor.sonoff_1001829f81_temperature
        name: Eddie
        needle: true
        min: 30
        max: 100
        segments:
          - from: 0
            color: '#37aadb'
          - from: 60
            color: '#16ab90'
          - from: 74
            color: '#ab1616'
      - type: gauge
        entity: sensor.76_temperature
        name: 76
        needle: true
        min: 30
        max: 100
        segments:
          - from: 0
            color: '#37aadb'
          - from: 60
            color: '#16ab90'
          - from: 74
            color: '#ab1616'
      - type: gauge
        entity: sensor.sonoff_10013932b1_temperature
        name: 629
        needle: true
        min: 30
        max: 100
        segments:
          - from: 0
            color: '#37aadb'
          - from: 60
            color: '#16ab90'
          - from: 74
            color: '#ab1616'
      - type: gauge
        entity: sensor.630_temperature
        name: 630
        needle: true
        min: 30
        max: 100
        segments:
          - from: 0
            color: '#37aadb'
          - from: 60
            color: '#16ab90'
          - from: 74
            color: '#ab1616'
      - type: gauge
        entity: sensor.sonoff_1001dabf2f_temperature
        name: 630 Water
        needle: true
        min: 30
        max: 100
        segments:
          - from: 0
            color: '#37aadb'
          - from: 60
            color: '#16ab90'
          - from: 74
            color: '#ab1616'
      - type: gauge
        entity: sensor.1st_floor_room_temperature
        name: 255 1st Fl
        needle: true
        min: 30
        max: 100
        segments:
          - from: 0
            color: '#37aadb'
          - from: 60
            color: '#16ab90'
          - from: 74
            color: '#ab1616'
      - type: gauge
        entity: sensor.2nd_floor_east_room_temperature
        name: 255 2nd Fl East
        needle: true
        min: 30
        max: 100
        segments:
          - from: 0
            color: '#37aadb'
          - from: 60
            color: '#16ab90'
          - from: 74
            color: '#ab1616'
      - type: gauge
        entity: sensor.2nd_floor_west_room_temperature
        name: 255 2nd Fl West
        needle: true
        min: 30
        max: 100
        segments:
          - from: 0
            color: '#37aadb'
          - from: 60
            color: '#16ab90'
          - from: 74
            color: '#ab1616'
      - type: gauge
        entity: sensor.3rd_floor_room_temperature
        name: 255 3rd Fl
        needle: true
        min: 30
        max: 100
        segments:
          - from: 0
            color: '#37aadb'
          - from: 60
            color: '#16ab90'
          - from: 74
            color: '#ab1616'
      - type: gauge
        entity: sensor.well_ecobee_temperature
        name: Well
        needle: true
        min: 30
        max: 100
        segments:
          - from: 0
            color: '#37aadb'
          - from: 60
            color: '#16ab90'
          - from: 74
            color: '#ab1616'
      - type: gauge
        entity: sensor.sonoff_1001392bce_temperature
        name: White
        needle: true
        min: 30
        max: 100
        segments:
          - from: 0
            color: '#37aadb'
          - from: 60
            color: '#16ab90'
          - from: 74
            color: '#ab1616'
      - type: gauge
        entity: sensor.sonoff_1001392bd9_temperature
        name: Purple THR316
        needle: true
        min: 30
        max: 100
        segments:
          - from: 0
            color: '#37aadb'
          - from: 60
            color: '#16ab90'
          - from: 74
            color: '#ab1616'
      - type: gauge
        entity: sensor.sonoff_100139390d_temperature
        name: Blue Closet
        needle: true
        min: 30
        max: 100
        segments:
          - from: 0
            color: '#37aadb'
          - from: 60
            color: '#16ab90'
          - from: 74
            color: '#ab1616'
      - type: gauge
        entity: sensor.sonoff_100139392c_temperature
        name: White Water
        needle: true
        min: 30
        max: 100
        segments:
          - from: 0
            color: '#37aadb'
          - from: 60
            color: '#16ab90'
          - from: 74
            color: '#ab1616'
      - type: gauge
        entity: sensor.sonoff_1001829f54_temperature
        name: Green
        needle: true
        min: 30
        max: 100
        segments:
          - from: 0
            color: '#37aadb'
          - from: 60
            color: '#16ab90'
          - from: 74
            color: '#ab1616'
      - type: gauge
        entity: sensor.sonoff_1001dabe7c_temperature
        name: Blue THR316
        needle: true
        min: 30
        max: 100
        segments:
          - from: 0
            color: '#37aadb'
          - from: 60
            color: '#16ab90'
          - from: 74
            color: '#ab1616'
      - type: gauge
        entity: sensor.sonoff_1001393418_temperature
        name: Purple Water
        needle: true
        min: 30
        max: 100
        segments:
          - from: 0
            color: '#37aadb'
          - from: 60
            color: '#16ab90'
          - from: 74
            color: '#ab1616'
      - type: gauge
        entity: sensor.shop_temperature
        needle: true
        min: 30
        max: 100
        segments:
          - from: 0
            color: '#37aadb'
          - from: 60
            color: '#16ab90'
          - from: 74
            color: '#ab1616'

I created a folder /config/themes

and a file in that folders called: borderless-theme

The contents of that file, and how to invoke the theme from the lovelace code above is where I get lost.

Can someone please help?

Thank you!

/moved question to mainthread

Moved to other topic

Hi guys!
I am currently redesigning my entire dashboard using card-mod to change the look of all the cards.

One example is that all the cards are getting a ā€œglassā€ background and a new border-radius, these changes are made in the theme using:

card-mod-theme: homeplus
      card-mod-card: |
        ha-card {
          background: rgba( 28, 28, 18, 0.5 );
          backdrop-filter: blur( 20px );
          -webkit-backdrop-filter: blur( 20px );

          border: 0px;
          border-radius: 18px;
          }

This works like a charm, but since I added this code, ALL the card mod styling for individual cards stopped working.

For example: A specific card should have a larger font-size, which I added to the card using:

card_mod:
style: |
  ha-card {
    font-size: 3rem;
    font-weight: bold;
    background-color: rgba(0,0,0,0) !important;
    border: 0px;
    margin-top: 4rem; 
  }

But no matter what I try the card mod used on individual cards is getting ignored once there is any card mod in the configuration file.

I also removed all the card mod code from the theme file and once I did that all the other card mod started to work again.

Could it be that you need to decide between styling using the theme file ore styling one card at a time?
But the documentation stated that you could combine the two styling methodsā€¦

Has anyone got an idea why this is happening?

All the best
David