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

Hey all, I am new to HA and am having trouble with creating a theme with a side panel. I finally figured out how to create a new theme and move the side bar to the left using card-mod-theme. Now I am trying to change the background of the sidebar to a gray color; or change the background of a vertical stack card using this theme to a gray color. Could anyone help me with this? I am sure Iā€™m missing something simple, but canā€™t seem to find it on Google anywhere. Here is what I currently have for trying to turn the background of a vertical stack a new color,

Left_sidebar_test:
  card-mod-theme: Left_sidebar_test
  card-mod-card: |
    hui-vertical-stack-card $: |
      #root {
        background-color: black;
        border-radius: var(--ha-card-border-radius);
        box-shadow: var(--ha-card-box-shadow);
      }
  card-mod-view-yaml: |
    hui-sidebar-view $: |
      .container {
        flex-direction: row-reverse;
      }
1 Like

I am trying to hide as much as I can from the new stats in more-info in version 2022.11.

Since you can click min/mean/max and show/hide the values,
could you force it to always only show mean (or state if there are no min/mean/max) ?
Like changing the default value from ā€œshow all threeā€ to ā€œshow only meanā€.

And as a separate question, could we hide the <div class="chartLegend"> to get rid of the legend?

card-mod thread ā†’ 1st post ā†’ link at the bottom ā†’ styles for statistics card

Do not think this can be controlled by CSS.
You cannot hide some graph since it is a ā€œcanvasā€ element.
And you cannot simulate ā€œswitched-offā€ legendā€™s element too.

Another point is that ā€œmean graphā€ is NOT a ā€œreal graphā€ at all - it is absolutely wrong idea to show approximate data in more-info popup.
So, the right way is ā€œshow a real history graph (like it was before 2022.11)ā€ and (optionally, and only if available) ā€œshow statistical graphā€ (probably with min/max/mean).

Thanks, I didnā€™t know about that other thread.
I really donā€™t understand the change to statistics in more-info but balloob made it quite clear there will be no reverting to the old state graphs and there will be no options to use states. So until someone invents a replacement for all more-info, Iā€™ll try to make the best of it.

I suppose you mean this https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/3414.

I have tried to read up on how it works, but I just donā€™t get it yet so I donā€™t know how to use the example in my scenario (within more-info). I hide a lot of other elements, but thatā€™s thanks to you and Mariusthvdb and hours of trial and errorā€¦

Example of theme where I hide other more-info stuff: https://hatebin.com/hqqaomlwws

Once again a new HA release has changed how more-info popups show up. They for some reason changed the position yet again, while it alread was changed in september and it broke. Can someone pinpoint me what the correct code now is to center more-info dialogs?

    .: |
      ha-dialog {
        --vertial-align-dialog: center !important;
      }

Like anything else is done for more-info - like ā€œhide logbookā€ etc.

Sad if it is true.

A part of a trend ā€œmake HA usable for inexperienced peopleā€ like getting rid of yaml for integrations and moving everything to UI.


A legend seems to be hidden in the future release:
ŠøŠ·Š¾Š±Ń€Š°Š¶ŠµŠ½ŠøŠµ

Nice commit. I suggested that in beta when I realised I wonā€™t get the states back. No response then, but someone listened. Thanks!

Is it possible to use arribute of a device to drive card background color?

I am quite happy with my theme setup right now, with active cards having a highlighted color. However, my smart ovens only shows activity through attribute.

my code:

    card-mod-card: |
      ha-card {
        background: {% if is_state(config.entity, 'on') %} rgba(225, 225, 225, 1);
        --primary-text-color: black;
        {% elif is_state(config.entity, 'home') %} rgba(225, 225, 225, 1);
        --primary-text-color: black;
        {% elif is_state(config.entity, 'open') %} rgba(225, 225, 225, 1);
        --primary-text-color: black;
        {% elif is_state(config.entity, 'heating') %} rgba(225, 225, 225, 1);
        --primary-text-color: black;
        {% elif is_state(config.entity, 'playing') %} rgba(225, 225, 225, 1);
        --primary-text-color: black;
        {% endif %}
      }
      
        ha-card {  background: {{ 'rgba(225, 225, 225, 1)' if
        is_state_attr('config.entity', 'hvac_action',
        'heating') }}; --primary-text-color: black;

        } 


Try achieving the same result (i.e. dependingly of your oven) by using card-mod WITHOUT a theme.

That works very fine, and i could continue doing that. I just want to have most of my settings in my theme to keep it simple.

I proposed to test it w/o a theme it since I thought that there could be some problem with your styles.
You need a styles for the oven entity only - then you should ā€œlimitā€ it correspondingly - like it is done here for a fan entity only:

  card-mod-row-yaml: |
    hui-generic-entity-row $: |
      state-badge {
        {% if config is defined %}
          {% if config.entity is defined %}
            {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %}
              animation: spin 3s infinite linear;
            {% endif %}
          {% endif %}
        {% endif %}
      }
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(359deg);
        }
      }

Aah, i see!

Iā€™m a hack at this, but will try to play around with it and see if i could get it to work!

Thanks! :relaxed:

Edit:

Works like a charm.

ha-card {
        background: {% if config.entity.startswith('climate.') and is_state_attr(config.entity, 'hvac_action', 'heating') %} rgba(225, 225, 225, 1);
        --primary-text-color: black;
        {% endif %}
      }

check New interactive history explorer custom card - #352 by HeyImAlex

Iā€™ve been using card-mod for quite awhile, but Iā€™m just getting into creating some themes. Unfortunately, I can get neither my icons to change color or to get the battery level bars to appear using the theme below:

iPhone_Default:
  card-mod-theme: iPhone_Default
  background-image: "center / cover no-repeat fixed url('/local/images/tall/background1.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#FFFFFF"
  light-primary-color: "#888888"
  primary-background-color: "#e5e5ea"
  secondary-background-color: rgba(255, 255, 255, 0.9)
  divider-color: "#FFFFFF"
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#FFFFFF"
  secondary-text-color: "#888888"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#FFFFFF"
  text-dark-color: "#888888"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: var(--light-primary-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FFFFFF"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: white
  state-icon-active-color: red
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: "#FFFFFF"
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#007aff"
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 149, 9, 0.7)
  # Cards
  card-background-color: var(--secondary-background-color)
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(245, 245, 245, 0.4)
  paper-card-background-color: var(--ha-card-background)
  ha-card-border-width: 0
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Toggle Switches
  switch-checked-color: "#30d257"
  switch-checked-track-color: "#3092FF"
  switch-checked-button-color: "#00B3FF"
  # Other
  paper-dialog-background-color: rgba(200, 200, 200, 0.8)
  paper-item-icon-color: "#333333"
  more-info-header-background: rgba(230, 230, 230, 0.5)
  lumo-body-text-color: var(--primary-text-color)
  app-header-background-color: rgba(61, 107, 86, 0.4)
  markdown-code-background-color: "#FFFFFF"
  code-editor-background-color: "#FFF"
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)
  card-mod-row: |
    :host {
      display: block;
      {% set battery = state_attr(config.entity, 'battery') or state_attr(config.entity, 'battery_level') %}
      {% if battery %}
        background: linear-gradient(to right, rgba(0,255,0,0.5), {{battery}}%, white {{battery}}%);
      {% endif %}
    }

I expect the icons in my entities cards to be white, and to change to red when activeā€¦ but the icons are actually a dark grey color irrespective of state. And the battery bars, wellā€¦ no sign of those. I welcome any input.

A very humble proposal - to describe the issue you may safely remove everything between these lines since it is not related to card-mod.
The post becomes shorter.

Also , the ā€œbatteryā€ variable seem be true or false - do not think this is what you need.

Great idea - proposal accepted, see below. I originally included everything in case something else was impacting my icon colors, but admittedly thatā€™s not related to card-mod (I donā€™t believe).

iPhone_Default:
  card-mod-theme: iPhone_Default
  background-image: "center / cover no-repeat fixed url('/local/images/tall/background1.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#FFFFFF"
  light-primary-color: "#888888"
  primary-background-color: "#e5e5ea"
  secondary-background-color: rgba(255, 255, 255, 0.9)
  divider-color: "#FFFFFF"
  accent-color: rgba(255, 159, 9, 1)
  [ ... ]
# States and Badges
  state-icon-color: white
  state-icon-active-color: red
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: "#FFFFFF"
  card-mod-row: |
    :host {
      display: block;
      {% set battery = state_attr(config.entity, 'battery') or state_attr(config.entity, 'battery_level') %}
      {% if battery %}
        background: linear-gradient(to right, rgba(0,255,0,0.5), {{battery}}%, white {{battery}}%);
      {% endif %}
    }

I started using this today, and using the art-nouveau theme, I canā€™t see the background image. If I use a local image, one that works outside of the theme, still nothing. If I use background outside the theme, it appears for a split second.

Hi,
Iā€™m no CSS profi but try many thinks with your great card-mod, but I ca not find a solution for the mini-graph-card.

Screen_20221114-165833

I want to have a distance from the fine border line to the graph but always the graph is going to the border. Here my code:

  - type: custom:mini-graph-card
    card_mod:
      style: |
        ha-card {
          padding: 10px;
        }
    name: CPU Auslastung
    entities:
      - entity: sensor.processor_use
        state_adaptive_color: true
        show_fill: false
    decimals: 1
    hour24: true
    hours_to_show: 3
    height: 150
    line_width: 4
    points_per_hour: 360
    show:
      name: false
      graph: line
      icon: false
      state: false
      legend: false
      points: false
      labels: false
    color_thresholds:
      - color: '#6aa84f'
        value: 0
      - color: '#f1c232'
      - color: '#e69138'
      - color: '#cc0000'
        value: 100

Thank you for a little help.
Steffen

Iā€™m struggling with adapting my old solution as well.

Placing is set in

image

And this variable is displayed as inherited from ha-dialog as before. But changes to this are not taken into account anymore.

image

The below if from card_mod but the above is used now, coming from HA.

Even if I try to ingest in .mdc-dialog__container directly

    ha-dialog:
      $: |
        .mdc-dialog__container {
          align-items: center !important;
          color: red !important;
        }

it is not in css/dom at all.

Perhaps Ildar has an idea or explanation about the behavior?

Update: Easier than expected.

    .: |
      ha-dialog {
        --vertical-align-dialog: center !important;
      }

I seems that they have corrected a typo, which I didnā€™t see neither in the past nor in the screenshow but used from the old definition. If I corrected it now as well ā€¦

But I still not understand why I canā€™t shadow-root in ha-dialog.

1 Like

never mind, it works now.