🔹 Card-mod - Super-charge your themes!

[Mariusthvdb (Marius)]

must have changed something in my themes somewhere, but can not find the specific variable responsible for my current trouble, so please let me explain.
Using some modding on the sidebar items, example:

      a[data-panel='ui-develop'] paper-icon-item ha-icon {
        {% set core = is_state('update.home_assistant_core_update','on') %}
        --card-mod-icon: {{'mdi:package-up' if core else 'mdi:home-assistant'}};
        color: {{'red' if states('sensor.memory_use_percent')|int(default=0) > 25 or
                       core else 'var(--ha-color)'}};
        animation: {{'blink 2s ease infinite' if core else 'none'}};
      }

which does this:

regular state, using the ha colors (and some extra notification, which is not the issue at hand, so left that out in the yaml above):

update available:

so far so good.

And then when I select that menu item, it shows a selected colorization I can not explain:

somehow, it overrides the card-mod with my primary-color on sidebar-selected-icon-color: (which also controls the highlighted background) and seems to not touch sidebar-selected-text-color:

I havent set that sidebar-selected-icon-color in my theme anywhere though, so it probably is done in core. (unless anyone here can explain it otherwise)?

The second challenge is, how to keep that alert-color when the menu-item is selected?

appreciate any help or hint

update

As far as I have been able to find the official variables we have this:

    sidebar-background-color: red #ok also above view icons
    sidebar-icon-color: pink #ok
    sidebar-text-color: green #ok
    sidebar-selected-background-color: orange # ??
    sidebar-selected-icon-color: purple  #ok !! also sets selected-background-color
    sidebar-selected-text-color: yellow #ok

which seems to indicate the sidebar-selected-background-color: is no longer functional, and background is set by the sidebar-selected-icon-color.

Still is unclear why my system defaults to the primary-color, unless this is somewhere set inside the core styling (havent found that yet) as fallback default.

[Sweti3 (Markus)]

Hi guys, I also have some issue:

I want to push the two buttons on the “Haustüre” on the right side (Mushroom Lock) more towards the top. The

mushroom-shape-icon {
        --shape-color: none !important;
        }
        ha-state-icon {
          padding-right: 0px;
          padding-left: 10px;
          padding-top: 20px;
          color:  #8C7D75;
          height: 20px;
          width: 50px;
        }

Seems not to work, the buttons always stay otside the card… I am desperate for help please someone has an idea? Thanks a lot in advance!

[halsfeger]

Hi everyone, I have a question posted in the auto-entities post. Maybe it’s more of a question for the card-mod pros:

Auto-entities - Automatically fill cards with entities

Hello everyone I’m trying to put together a small gaming dashboard with Steam shortcuts. This works quite well with auto entities mushroom and card mod. But what I can’t quite manage are the automatic background images for the mushroom cards. if I set them statically, it works, but not dynamically. With the mushroom image it works with the variable, but not with the background: type: custom:auto-entities filter: include: - entity_id: '*game_*' device: TEST name: '*Favorites*…

Does anyone have an idea on how to solve it?

[pgreberg (Peter Greberg)]

Really like the sections. It fixes a problem with Nest Hub calculating masonry layout. I see one problem though which I’m not sure how to handle. The grid-section-min-width is set to 320px for the responsive design which mean only two columns will be used for Google Nest hub (1024x600). Is it any possibility to override the value using card-mod on the section? Using Chrome I can try to override it and it works perfectly with 290px for instance but I’m not sure how to do it in CSS

[Ildar_Gabdullin]

What is a “second card-mod setting”?
Guess there is no need to post whole code (170 lines).
Suggest to post only a relevant part.
If you mean two consecutive ha-card - surely the 2nd style overrides the 1st.
And similar questions are supposed to be asked in card-mod thread, this thread is for themes.
Also, suggest to ask in community first before registering a “bug” in GitHub.

[boheme61]

@stephanschleichstr13

Cardmod lose setting when i try to edit the second card_mod setting

Because it’s wrong to do so !

PS: This is a fun example “Find Five Faults” !

[Ildar_Gabdullin]

Header: vivid selected & hovered tabs

[TiToTB]

Since HA 2024.3 some styles are not working properly for me (like ‘margin’)

Is this about something i am doing wrong? e.g.:

    card_mod:
      style: |
        ha-card {
          border: 0px;
          margin-top: -95px;
          margin-right: -120px;
          --icon-size: 35px;
        }

Thanks a lot!!

[LiQuid_cOOled]

have you tried adding !important after the settings that aren’t working? If that doesn’t work, please share a card’s code where it’s not working.

card_mod:
      style: |
        ha-card {
          border: 0px;
          margin-top: -95px !important;
          margin-right: -120px !important;
          --icon-size: 35px;
        }

[Ildar_Gabdullin]

Also, I would suggest to post this detailed info in a card mod thread, this current thread is for themes.

[joeidea (Joe Licht)]

Hello Colleagues,

I’m stuck, despite much trial and error, trying to move working code (styling a Vertical Stack header) in my card to my theme file.

Working code in Card:

decluttering_templates:
  ents_6.2:
    card:
      type: custom:mod-card
      style:
        **hui-vertical-stack-card:**
**          $:**
**            .: |**
**              .card-header {**
**                display: block !important;**
**                font-size: var(--x-vs-hdr-font-size) !important;**
**                text-transform: var(--x-vs-hdr-tt);**
**                letter-spacing: var(--x-vs-hdr-ls) !important;**
**                #background: var(--x-vs-hdr-background) !important;**
**                line-height: var(--x-vs-hdr-lh) !important;**
**                border-radius: var(--x-border-radius) var(--x-border-radius) 0px 0px !important;**
**                color: var(--x-vs-hdr-font-color) !important;**
**                padding: var(--x-vs-hdr-padding) !important;**
**              }**    
      card:
        type: vertical-stack
        title: '[[title]]'
        cards:
          - type: markdown
            content: ' '
          - type: entities
            show_header_toggle: false
            state_color: true
            card_mod:
              class: adjust-top-margin
            entities:
              - entity: '[[ent_1]]'
                name: '[[ent_1_name]]'
                icon: '[[ent_1_icon]]'
                card_mod:

Latest attempt in the Theme (not working):

  card-mod-theme: "Blue Dusk"
  card-mod-card-yaml: |
    .: |
      hui-vertical-stack-card $: |
        #root {
          background: orange !important;
        }
    
      @keyframes fadeIn {
        0% { opacity: 0.1; }
        100% { opacity: 1; }
      }
      .adjust-top-margin {
        margin-top: -24px;                              #  usually for Entities
      }
      .adjust-top-margin-special {
        margin-top: -12px;

Help, please.

Thank you,

Joe

[michaelkrtikos (Michail Kritikos)]

Hello to all,

The card mod is really awesome and i only recently discovered it but i am getting there. I have made a conditional sidebar with inteface options to show or hide parts of my dashboard and it looks like this:

The sidebar is on the right side.

My question is, is it possible for the sidebar not to overlap the interface but rather to push it to the left?

Thank you in advance

[Ildar_Gabdullin]

@joeidea

  card-mod-card-yaml: |
    .: |
      hui-vertical-stack-card $: |

This is wrong, shadowRoot-related styles cannot be inside the “.:” section.

[Ildar_Gabdullin]

@michaelkrtikos

I have made a conditional sidebar

Try using a STANDARD sidebar-layout.

[michaelkrtikos (Michail Kritikos)]

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…

[Ildar_Gabdullin]

@michaelkrtikos

i want to have the sections for drag’n drop

Sections are in alpha testing now.

[michaelkrtikos (Michail Kritikos)]

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.

[Ildar_Gabdullin]

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.

[michaelkrtikos (Michail Kritikos)]

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.

[LiQuid_cOOled]

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

Card-mod - Add css styles to any lovelace card

Here all my posts which may be useful: NOTE: Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3). And also read this important note to create optimized code. In most examples here a code is NOT optimized - just to describe a DOM navigation. Entity card post rotating icon (by @dolodobendan) disabled tap_action Entities card (including some special row elements - button, section, divider) post font-size for Entities card post Entities card with attributes …