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

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):

SchermĀ­afbeelding 2024-03-06 om 09.47.17

update available:

Mar-06-2024 09-48-25

so far so good.

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

Mar-06-2024 09-48-31

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.

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!

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

Does anyone have an idea on how to solve it?

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

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.

1 Like

Because itā€™s wrong to do so !
15.03.2024_21.19.23_REC

PS: This is a fun example ā€œFind Five Faultsā€ !

1 Like

Header: vivid selected & hovered tabs

1q

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!!

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

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

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

Hello to all,

The card mod is really awesome and i only recently discovered it :frowning: 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

This is wrong, shadowRoot-related styles cannot be inside the ā€œ.:ā€ section.

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