Card Mod and Tabbed card won't work

Configuration Frontend
1

here my code:

type: custom:tabbed-card
options: {}
tabs:
  - card:
      type: picture-elements
      elements:
        - type: conditional
          conditions:
            - condition: state
              state_not: unavailable
              entity: sensor.bambu_a1_ams_0_id
            - condition: state
              state_not: unknown
              entity: sensor.bambu_a1_ams_0_id
          elements:
            - type: state-label
              entity: sensor.bambu_a1_ams_0_id
              tap_action:
                action: none
              style:
                top: 77%
                left: 30%
                text-align: center
                font-size: 0.8em
                background-color: rgba(0,0,0,0)
                box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0)
                border-radius: 10px
                pointer-events: none
                color: "#FFFFFF"
        - type: custom:config-template-card
          entities:
            - sensor.a1_ams1_slot_1
          element:
            type: state-icon
            entity: sensor.a1_ams1_slot_1
            icon: >-
              ${states['sensor.a1_ams1_slot_1'].state.toLowerCase() != 'empty'?
              'fapro:filament-1' : 'mdi:tray' }
          style:
            top: 27%
            left: 45%
            "--paper-item-icon-color": var(--slot_0_color)
            background-color: rgba(0,0,0,0.5)
            padding: 7px
            border: 2px solid rgba(255,255,255,0.6)
            box-shadow: 0 0 5px 5px var(--slot_0_bg)
            border-radius: 50px
            "--mdc-icon-size": 2.4em
        - type: state-label
          entity: sensor.a1_ams1_slot_1
          attribute: type
          tap_action:
            action: none
          style:
            top: 40%
            left: 45%
            text-align: center
            font-size: 1em
            background-color: rgba(0,0,0,0.5)
            padding: 7px
            border: 2px solid rgba(255,255,255,0.6)
            box-shadow: 0 0 5px 5px var(--slot_0_bg)
            border-radius: 50px
            pointer-events: none
            color: "#FFFFFF"
        - type: custom:config-template-card
          entities:
            - sensor.a1_ams1_slot_2
          element:
            type: state-icon
            entity: sensor.a1_ams1_slot_2
            icon: >-
              ${states['sensor.a1_ams1_slot_2'].state.toLowerCase() != 'empty'?
              'fapro:filament-1' : 'mdi:tray' }
          style:
            top: 62%
            left: 12%
            "--paper-item-icon-color": var(--slot_1_color)
            background-color: rgba(0,0,0,0.5)
            padding: 7px
            border: 2px solid rgba(255,255,255,0.6)
            box-shadow: 0 0 5px 5px var(--slot_1_bg)
            border-radius: 50px
            "--mdc-icon-size": 2.4em
        - type: state-label
          entity: sensor.a1_ams1_slot_2
          attribute: type
          tap_action:
            action: none
          style:
            top: 77%
            left: 12%
            text-align: center
            font-size: 1em
            background-color: rgba(0,0,0,0.5)
            padding: 7px
            border: 2px solid rgba(255,255,255,0.6)
            box-shadow: 0 0 5px 5px var(--slot_1_bg)
            border-radius: 50px
            pointer-events: none
            color: "#FFFFFF"
        - type: custom:config-template-card
          entities:
            - sensor.a1_ams1_slot_3
          element:
            type: state-icon
            entity: sensor.a1_ams1_slot_3
            icon: >-
              ${states['sensor.a1_ams1_slot_3'].state.toLowerCase() != 'empty'?
              'fapro:filament-1' : 'mdi:tray' }
          style:
            top: 63%
            left: 63%
            "--paper-item-icon-color": var(--slot_2_color)
            background-color: rgba(0,0,0,0.5)
            padding: 7px
            border: 2px solid rgba(255,255,255,0.6)
            box-shadow: 0 0 5px 5px var(--slot_2_bg)
            border-radius: 50px
            "--mdc-icon-size": 2.4em
        - type: state-label
          entity: sensor.a1_ams1_slot_3
          attribute: type
          tap_action:
            action: none
          style:
            top: 77%
            left: 63%
            text-align: center
            font-size: 1em
            background-color: rgba(0,0,0,0.5)
            padding: 7px
            border: 2px solid rgba(255,255,255,0.6)
            box-shadow: 0 0 5px 5px var(--slot_2_bg)
            border-radius: 50px
            pointer-events: none
            color: "#FFFFFF"
        - type: custom:config-template-card
          entities:
            - sensor.a1_ams1_slot_4
          element:
            type: state-icon
            entity: sensor.a1_ams1_slot_4
            icon: >-
              ${states['sensor.a1_ams1_slot_4'].state.toLowerCase() != 'empty'?
              'fapro:filament-1' : 'mdi:tray' }
          style:
            top: 27%
            left: 88%
            "--paper-item-icon-color": var(--slot_3_color)
            background-color: rgba(0,0,0,0.5)
            padding: 7px
            border: 2px solid rgba(255,255,255,0.6)
            box-shadow: 0 0 5px 5px var(--slot_3_bg)
            border-radius: 50px
            "--mdc-icon-size": 2.4em
        - type: state-label
          entity: sensor.a1_ams1_slot_4
          attribute: type
          tap_action:
            action: none
          style:
            top: 41%
            left: 88%
            text-align: center
            font-size: 1em
            background-color: rgba(0,0,0,0.5)
            padding: 7px
            border: 2px solid rgba(255,255,255,0.6)
            box-shadow: 0 0 5px 5px var(--slot_3_bg)
            border-radius: 50px
            pointer-events: none
            color: "#FFFFFF"
      image: /local/media/bambuprinter/ams_lite.png
      card_mod:
        style: |
          ha-card {
            background: none !important;
            border: none !important;
            box-shadow: none !important;
            --slot_0_color: {% if is_state_attr('sensor.a1_ams1_slot_1', 'color', '#00000000') %} rgb(255, 255, 255); {% else %} {{state_attr('sensor.a1_ams1_slot_1', 'color') }}; {% endif %}
            --slot_1_color: {% if is_state_attr('sensor.a1_ams1_slot_2', 'color', '#00000000') %} rgb(255, 255, 255); {% else %} {{state_attr('sensor.a1_ams1_slot_2', 'color') }}; {% endif %}
            --slot_2_color: {% if is_state_attr('sensor.a1_ams1_slot_3', 'color', '#00000000') %} rgb(255, 255, 255); {% else %} {{state_attr('sensor.a1_ams1_slot_3', 'color') }}; {% endif %}
            --slot_3_color: {% if is_state_attr('sensor.a1_ams1_slot_4', 'color', '#00000000') %} rgb(255, 255, 255); {% else %} {{state_attr('sensor.a1_ams1_slot_4', 'color') }}; {% endif %}
            --slot_0_bg: {% if is_state_attr('sensor.a1_ams1_slot_1', 'in_use', true) %} rgba(255, 255, 126, 0.5); {% else %} rgba(0,0,0,0); {% endif %}
            --slot_1_bg: {% if is_state_attr('sensor.a1_ams1_slot_2', 'in_use', true) %} rgba(255, 255, 126, 0.5); {% else %} rgba(0,0,0,0); {% endif %}
            --slot_2_bg: {% if is_state_attr('sensor.a1_ams1_slot_3', 'in_use', true) %} rgba(255, 255, 126, 0.5); {% else %} rgba(0,0,0,0); {% endif %}
            --slot_3_bg: {% if is_state_attr('sensor.a1_ams1_slot_4', 'in_use', true) %} rgba(255, 255, 126, 0.5); {% else %} rgba(0,0,0,0); {% endif %}
          }
    attributes:
      label: AMS
  - card:
      type: picture-elements
      elements:
        - type: custom:config-template-card
          entities:
            - sensor.a1_externalspool_bobina_esterna
          element:
            type: state-icon
            entity: sensor.a1_externalspool_bobina_esterna
            icon: >-
              ${states['sensor.a1_externalspool_bobina_esterna'].state.toLowerCase()
              != 'empty' ? 'fapro:filament-1' : 'mdi:tray' }
          style:
            top: 50%
            left: 50%
            transform: translate(-50%, -50%) scale(200%)
            "--paper-item-icon-color": var(--slot_vt_color)
            background-color: rgba(0,0,0,0.5)
            box-shadow: 0 0 5px 5px var(--slot_vt_bg)
            border-radius: 50px
            "--mdc-icon-size": 1.8em
        - type: state-label
          entity: sensor.a1_externalspool_bobina_esterna
          attribute: type
          tap_action:
            action: none
          style:
            top: 50%
            left: 85%
            text-align: center
            font-size: 1em
            background-color: rgba(0,0,0,0.4)
            box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.4)
            border-radius: 50px
            pointer-events: none
            color: "#FFFFFF"
        - entity: button.bambu_a1_clear_external_spool
          icon: mdi:delete
          service: button.press
          style:
            top: 40%
            color: rgb(180,33,50)
            "--mdc-icon-size": 3.5em
            left: 2%
            transform: initial
          tap_action:
            action: call-service
            service: button.press
            target:
              entity_id: button.bambu_a1_clear_external_spool
          type: icon
      image: /local/media/bambuprinter/spool.png
      card_mod:
        style: |
          ha-card {
            margin-left: auto;
            margin-right: auto;
            width: 60%;
            height: 60%;
            background: none !important;
            border: none !important;
            box-shadow: none !important;
            --slot_vt_color: {{state_attr('sensor.a1_externalspool_bobina_esterna', 'color') }};
            --slot_vt_bg: {% if is_state_attr('sensor.a1_externalspool_bobina_esterna', 'in_use', true) %} rgba(255, 255, 126, 0.5); {% else %} rgba(0,0,0,0.5); {% endif %}
          }
    attributes:
      label: External

can someone help me to find if this is a bug or my mistake?

2

Can you describe what is working vs what isn’t? It’s a large chunk of data.

3

yes sure… all is working except card-mod
the result is this:

Screenshot 2025-01-26 alle 07.57.52
Screenshot 2025-01-26 alle 07.57.52878×1066 61.9 KB

background is still present and the filament icons don’t update on their colors

4

Card_mod does not work with tabbed card. You have to use mod card instead if you want to make deeper changes.

Here is an example:

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $: |
          .mdc-tab {
            background: dimgray !important;
            border-top-left-radius: 10% 30%;
            border-top-right-radius: 10% 30%; 
          }
          .mdc-tab--active {
            background: var(--accent-color) !important;
            border-top-left-radius: 10% 30%;
            border-top-right-radius: 10% 30%;
          }       
      .: |
        mwc-tab {
          padding: 0px;
          border: 1px solid grey;
          border-top-left-radius: 10% 30%;
          border-top-right-radius: 10% 30%;
        }
        mwc-tab-bar {
          margin-left: 20px;
          margin-right: 20px;
        }  
card:
  type: custom:tabbed-card

However, you can style a good couple of attributes directly in the card without card mod or mod card:

styles:
  "--mdc-theme-primary": var(--accent-color);
  "--mdc-tab-text-label-color-default": var(--primary-color);
  "--mdc-tab-height": 28px;
  "--mdc-typography-button-font-family": "Roboto, sans-serif;\L"
  "--mdc-typography-button-line-height": 2rem;
  "--mdc-typography-button-font-weight": 500;
  "--mdc-typography-button-letter-spacing": 0.0892857em;
  "--mdc-typography-button-text-decoration": none;
  "--mdc-typography-button-text-transform": "uppercase;\L"
  "--mdc-tab-color-default": rgba(var(--rgb-primary-text-color), 0.7);
  "--mdc-typography-button-font-size": "16px;\L"
5

cause I am a noob could you please give me the best code complete?

6

As far as I can see, you are not trying to style the tabbed card but the picture elements card inside. But it’s not clear what do you want to achieve.

7

I want to have this result, but in a tabbed card:

Screenshot 2025-01-26 alle 20.42.54
Screenshot 2025-01-26 alle 20.42.541302×1272 80.6 KB

8

Styling tabbed-card:
main card-mod thread → 1st post → link at the bottom titled “fantastic” → tabbed-card

Styling picture elements:
same path → picture-elements

Suggest to ask all card-mod related questions in the main card-mod thread.