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

Try using a STANDARD sidebar-layout.

This is not an option because i want to have the sections for dragā€™n drop. Currently i use the custom card mod card with css to position it on the right side and all this inside a conditional card with a toggle helper. When the helper is on the sidebar appears. When its off it hidesā€¦ Hope it makes senseā€¦

Sections are in alpha testing now.

Thank you for your comment but it doesnā€™t help my question.
Both comments donā€™t. I asked if there is any way to push the interface to the left with card mod and i mentioned that i use a conditional sidebar. Your response was to use the standard sidebar. When i said that i use the sections your response is that it is testing (which i know). I donā€™t know what your comments have to do with my question. A simple ā€œnoā€ would suffice.

When you asked your 1st question - you have not specified that you are using sections.
What you are trying to do - join together two worlds: working and well known (at least by experienced users) traditional approach and alpha-tested / buggy / limited sections approach.

Well, i am in a card-mod topic so my question is not about the sections (which are working perfectly BTW). Ok, so in case i wasnā€™t clear let me ask again. I have made a sidebar with the custom:mod-card and possitioned it to the left with CSS. It is wrapped in a conditional card with condition to appear on desktop (as i donā€™t want it on mobile view) and also if a specific helper is on. Here is the code for furhter understanding:

type: conditional
conditions:
  - condition: screen
    media_query: '(min-width: 1024px)'
  - condition: state
    entity: input_boolean.show_interface_options
    state: 'on'
card:
  type: custom:mod-card
  card_mod:
    style: |
      @media (min-width:100px) {
        ha-card {
          background: linear-gradient(180deg, rgba(39, 39, 39, 1) 11.2%, rgba(32, 36, 32, 01) 100%);
          border-radius: 10px;
          position: fixed;
          top: var(--header-height);
          z-index: 9;
          right: 0px;
          width: 25%;
          height: 100%;
          padding: 5px;
        }
      }
  card:
    type: vertical-stack
    cards:
      - type: custom:mushroom-title-card
        title: Interface Options
      - type: entities
        entities:
          - input_boolean.dashboard_automations
          - type: divider
          - input_boolean.show_location
          - input_boolean.show_person_card
          - input_boolean.show_notifications
          - input_boolean.show_plex_button
          - input_boolean.show_battery_information
          - input_boolean.phone_control
          - type: divider
          - switch.tapo_c210_41a4_privacy
          - switch.tapo_c210_41a4_auto_track
        card_mod:
          style: |
            ha-card {
              --ha-card-background: linear-gradient(180deg, rgba(39, 39, 39, 0.93) 11.2%, rgb(32, 36, 32) 100%);
              border-radius: 10px;
              --mdc-theme-primary: var(--primary-text-color) !important;}
      - show_name: true
        show_icon: false
        type: button
        tap_action:
          action: toggle
        entity: input_boolean.show_interface_options
        name: Hide Interface Options
        card_mod:
          style: |
            ha-card {
              --ha-card-background: linear-gradient(145deg, rgb(195, 67, 129) 11%, rgb(90, 43, 186) 83.4%);
              border-radius: 10px;
              --mdc-theme-primary: var(--primary-text-color) !important;}

As it is, the card overlaps the interface and my question is, is there any way, either in the card itself or in the theme to make it push the inteface to the left?

Hope this time i was more clearā€¦ This is a pure CSS question.

You are in a card_mod discussion, sort of, but itā€™s not for individual cards. The thread discusses modding within an entire custom theme and not directly to lovelace cards. Page 1 explains it best!

The thread you are looking for is here with a vast CSS mod guide created by @Ildar_Gabdullin

1 Like

Right, but as i understand the CSS placed in the card affects the card itself which is somethimg that i dont want to do. This is why i didnt give much details about the card itself.

What i am looking for, is to adjust the view behind the card iā€™ve made. Maybe this is possible through the themeā€¦ I believe i am in the right place but as you suggest, i am gonna post my question also to the other thread.

Hi. I found something you typed on github a few years ago, regarding styling a broswer pop up card. I pasted some of your code below that you gave for the pop up box

I am desperate to figure out how to use a drop down menu that drops down further than the pop up menu.

Overflow: visible for example. But I cant figure it out, been at this for days lol. Can you please let me know if this is possible with card mod? Thank you in advance

style:
  $: |
    .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
      border-radius: 25px;
    }
  .: |
    :host {
      --mdc-theme-surface: rgba(0,0,0,0);
      --secondary-background-color: rgba(0,0,0,0.5);
      --ha-card-background: rgba(0,0,0,0.5);
    }
    :host .content {
      width: 90vw;
      height: 90vh;
     }

Someone see in this example a wrong Style Code?
My card_mod Style will be removed when i change something in the gui but he is working

  - entity: input_boolean.heizperiode
    name: Heizperiode
    icon: mdi:thermostat-box-auto
  - type: custom:mushroom-select-card
    entity: input_select.advanced_heating_control_wohnzimmer_scheduler
    name: Scheduler
    icon: mdi:calendar-month-outline
    layout: horizontal
    secondary_info: none
    card_mod:
      style: |
        ha-card {
        --ha-card-border-width: 0;
        --card-primary-font-weight: normal;
        margin-left: -13px;
        mushroom-shape-icon 
          {
          --shape-color: none;
          --icon-color: #44739e;
          }
        }

I am trying to style the new Group Headers in automation view to be bigger so I can actually see them but I am having a bit of trouble. Does anyone know what i am doing wrong?

My Theme file:

skynet_dark_v2:
  card-mod-theme: skynet_dark_v2
  card-mod-view: |
    .group-header {
      font-weight: 800;
      font-size: 18px;
      color: #FFC10A;
    }

Iā€™m trying to add simple drop-shadow effect globally to all my Home Assistant cards via my custom theme file. For some reason, when I append ha-card { box-shadow: 0px 5px 15px rgba(255,255,255,0.3) !important; } to my card-mode code below, it has no visible effect. However, the other card-mod modifications work just fine. Is there a more effective way to do this?

  card-mod-root: |
    .edit-mode, app-header, app-toolbar {
      background: var(--app-header-background-color) !important;
      color: var(--primary-text-color) !important;
    }
    ha-tabs {
      --paper-tabs-selection-bar-color: var(--primary-color) !important;
    }
    paper-tab[aria-selected=true] {
      color: var(--primary-color) !important;
    }
    ha-card {
      box-shadow: 0px 5px 15px rgba(255,255,255,0.3) !important;
    }

Iā€™m trying to change sidebar title while maintaining the style from my current theme (ios-dark-mode-dark-blue), but it always change to a default HA white theme. Something like this is possible?

my-theme:
  card-mod-theme: "ios-dark-mode-dark-blue"

  card-mod-sidebar-yaml: |
    .: |
      .menu .title {
        display: none !important;
      }
      .menu:after {
        content: "My Title";
        margin-left: 16px;
      }

wont cross-post the full discovery I did todayā€¦
but I do like to post this snippet here, because I never realized we could list card-mod classes like this:

type: entities
title: Tijd
icon: []
card_mod:
  class:
    - class-header-margin
    - class-header-icon
  style: |
    .card-header {
      {% set up = states('sun.sun') == 'above_horizon' %}
      --card-mod-icon-color: {{'gold' if up else 'var(--card-background-color)' }};
      --card-mod-icon: mdi:weather-sunset{{'-up' if up  else 'down'}};
    }
entities:

which is pretty cool, because with this, we can re-use those often used classes easily, and still have tailor made per-card settings if we need that. Without having to rewrite those in each and every card.

btw, this does Not work:

card_mod:
  class: class-header-margin, class-header-icon

Could someone share a working transparent header and bottom please?

I tried the codes here, but still see a black status bar, and background colour when scrolling to bottom, the background seems to be scrolling and not fixed as defined.

Hereā€™s my code in themes.yaml with kiosk-mode enabled:

 card-mod-root-yaml: |
    .header {
      display: none;
    }
    #view {
      padding: 0 !important;
      height: 100vh !important;
      padding-bottom: var(--header-height) !important;
    }
 # Background image
  background-image: center / cover no-repeat fixed url(/local/img/bg/blur.jpg)
  lovelace-background: var(--background-image)
  # Header:
  app-header-background-color: rgba(0, 0, 0, 0.1) 
  app-header-text-color: rgb(198, 203, 210)
  app-header-selection-bar-color: rgba(0, 0, 0, 0.1)
  app-header-edit-background-color: rgb(036, 036, 036)

Thanks

What Iā€™m doing wrong?

my_theme:

  card-mod-theme: my_theme
  card-mod-card: |
    hui-card-features$:
      hui-light-brightness-card-feature$:
        ha-control-slider {
          --control-slider-thickness: 20px !important;
        }

You need to use this. I added color to verify it is working.

  card-mod-card-yaml: |
   hui-card-features$:
      hui-light-brightness-card-feature$:
        ha-control-slider$: |
          .slider {
             height: 20px !important; 
             --control-slider-color: lime !important; 
                    }

Thanks, this is working and the slider is not that height anymore but the height of the container ha-control-slider stays the same. If we could change --control-slider-thickness it scales itself.

has anyone ever changed the response time of the tooltip on the view icons?
during recent beta, I realized they were a bit slow, and rather unreliable out of the box, so I tried setting the tools known to me to make them flashier. To no avail though.

normally in button-card or so, I use transition: opacity 0.5s and checking the dom I tried to set that to the ha-svg-icon element in the paper-tab, or just plain to it.

nothing happening. When I checked more precisely, I noticed the tooltip is only happening when actually ā€˜touchingā€™ the center of the tab, and thats seems to be happening when doing this:

      paper-tab:hover {
        transition: opacity 0.5s;
        color: var(--primary-color);
        background: var(--hover-color);
      }

color and background work as designed (had those already), but again, adding the transition does nothingā€¦

maybe anyone else has tried to do that, please let me know

This works.

card-mod-card-yaml: |
     hui-card-features$:
      hui-light-brightness-card-feature$: |
        ha-control-slider {
             --control-slider-thickness: 5px !important;
                 }