Remove borders in a stacked card

Can someone assist me in removing this border line in the middle of my card? I saw someone mention to use card_mod (code below) and I installed it via HACS and was looking at the documentation. I played around with it and can get my font color for my text to change so I know it’s working. Tried plugging it into different places in my YAML, but no change.

                card_mod:
                  style: |
                    ha-card {
                      box-shadow: 0px 0px;
                    }

image

YAML

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:mushroom-template-card
            entity: switch.kitchen
            primary: Kitchen
            secondary: '{{ states(''sensor.pantry_motion_device_temperature'') }}°F'
            layout: horizontal
            icon: mdi:countertop-outline
            icon_color: >-
              {% if is_state('switch.kitchen', 'on') or
              is_state('switch.dining', 'on') or is_state('switch.pantry', 'on')
              %}
                amber
              {% endif %} 
            tap_action:
              action: navigate
              navigation_path: /lovelace-mushroom/master
            hold_action:
              action: toggle
            card_mod:
              style: |
                ha-card {
                  color: red;
                }
          - type: custom:vertical-stack-in-card
            horizontal: true
            cards:
              - type: custom:mushroom-template-card
                entity: switch.kitchen
                layout: vertical
                icon: mdi:pot-steam-outline
                icon_color: |-
                  {% if is_state('switch.kitchen', 'on') %}
                    amber
                  {% endif %}
              - type: custom:mushroom-template-card
                entity: switch.dining
                layout: vertical
                icon: mdi:table-chair
                icon_color: |-
                  {% if is_state('switch.kitchen', 'on') %}
                    amber
                  {% endif %}
              - type: custom:mushroom-template-card
                entity: switch.pantry
                layout: vertical
                icon: mdi:food-variant
                icon_color: |-
                  {% if is_state('switch.pantry', 'on') %}
                    amber
                  {% endif %}
          - type: horizontal-stack
            cards: []
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:mushroom-template-card
            entity: switch.master_light
            primary: Master
            secondary: '{{ states(''sensor.downstairs_temperature'') }}°F'
            layout: horizontal
            icon: mdi:bed-king-outline
            icon_color: >-
              {% if is_state('switch.master_light', 'on') or
              is_state('fan.master_fan', 'on') or is_state('switch.master_bath',
              'on') %}
                amber
              {% endif %} 
            tap_action:
              action: navigate
              navigation_path: /lovelace-mushroom/master
            hold_action:
              action: toggle
          - type: custom:vertical-stack-in-card
            horizontal: true
            cards:
              - type: custom:mushroom-template-card
                entity: switch.master_light
                layout: vertical
                icon: mdi:ceiling-fan-light
                icon_color: |-
                  {% if is_state('switch.master_light', 'on') %}
                    amber
                  {% endif %}
              - type: custom:mushroom-template-card
                entity: fan.master_fan
                layout: vertical
                icon: mdi:ceiling-fan
                icon_color: |-
                  {% if is_state('fan.master_fan', 'on') %}
                    amber
                  {% endif %}
              - type: custom:mushroom-template-card
                entity: switch.master_bath
                layout: vertical
                icon: mdi:toilet
                icon_color: |-
                  {% if is_state('switch.master_bath', 'on') %}
                    amber
                  {% endif %}
                card_mod:
                  style: |
                    ha-card {
                      box-shadow: 0px 0px;
                    }
          - type: horizontal-stack
            cards: []

Hello! Did you find a solution for that?

you can take the border out using:

ha-card-border-width: 0px

in your theme. It will fix it for all of your cards everywhere.

if you only want to do so on a single card, set border-width: 0px using card-mod.

or check border-style: none CSS Borders

This worked for the chips card

        card_mod:
          style: |
            ha-card {
              --chip-border-width: 0px;
            }

Can you give me an example how this would be for the mushroom template card? Can’t make it work.
Thank you!

2 Likes

well, as said, I use the global theme variable, so don’t have those borders anywhere. Not into Mushroom that much, so you’d best hop over to that dedicated thread, where many have preceded you…

I was able to do in it in this manner. I found that using the custom:stack-in-card makes a difference, versus the custom:vertical-stack-in-card that you used. I couldn’t get it to work with that method.

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-template-card
    style: |
      ha-card {
        border: none;
      }
3 Likes

I am quite new to custom styling and i don’t know whats wrong but no matter what i do i cannot remove the border at all when using horizontal stack card, as you can see its both in the buttons that say “-1 -5 +5 +1” but also on the top status and light card

Card Code (Without the graph section, which doesnt change the outcome but is alot of lines not needed for this post)

type: custom:vertical-stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mod-card
        card_mod:
          style:
            hui-horizontal-stack-card $: |
              hui-entity-card:nth-of-type(1) {
              flex-grow: 5 !important; 
              border-width: 0px;
              border: 0px;
              border: none;
              }
              hui-entity-card:nth-of-type(2) {
              flex-grow: 1 !important; 
              border-width: 0px;
              border: 0px;
              }
        card:
          type: horizontal-stack
          cards:
            - type: entity
              entity: sensor.prusa_mk4
              state_color: false
            - show_name: true
              show_icon: true
              type: button
              tap_action:
                action: toggle
              entity: input_boolean.toggle_printerenclosure_light
              icon: mdi:lightbulb
              name: Light
              show_state: false
              icon_height: 15px
  - type: entity
    entity: sensor.prusa_mk4
    state_color: false
  - type: horizontal-stack
    cards:
      - type: gauge
        entity: sensor.hue_motion_sensor_1_temperature
        needle: false
        severity:
          green: input_number.enclosure_target_temp
          yellow: 0
          red: 0
        name: Enclosure Temperature
        min: 15
        max: 60
      - type: gauge
        entity: input_number.enclosure_target_temp
        name: Target Temperature
        severity:
          green: 0
          yellow: 0
          red: 0
        min: 15
        max: 60
  - type: horizontal-stack
    cards:
      - type: tile
        tap_action:
          action: none
        icon_tap_action:
          action: none
        entity: input_boolean.toggle_printerenclosure_fan
        vertical: false
        show_entity_picture: true
        name: Cooling
      - type: tile
        tap_action:
          action: none
        icon_tap_action:
          action: none
        entity: input_boolean.toggle_printerenclosure_light
        vertical: false
        show_entity_picture: true
        name: Heating
        icon: mdi:heating-coil
  - type: horizontal-stack
    cards:
      - type: custom:slider-entity-row
        entity: input_number.enclosure_target_temp
        name: ' '
        icon: mdi:temperature-celsius
        full_row: true
        hide_state: true
        show_icon: true
        min: 15
        max: 60
        step: 1
      - type: horizontal-stack
        cards:
          - show_name: true
            show_icon: false
            type: button
            tap_action:
              action: toggle
            entity: script.3d_printer_enclosure_target_temperature_minus1
            show_state: false
            name: '-1'
            card_mod:
              style:
                hui-buttons-base $: ''
                ha-card-border: 0px
          - show_name: true
            show_icon: false
            type: button
            tap_action:
              action: toggle
            entity: script.3d_printer_enclosure_target_temperature_minus5
            show_state: false
            name: '-5'
          - show_name: true
            show_icon: false
            type: button
            tap_action:
              action: toggle
            entity: script.3d_printer_enclosure_target_temperature_plus5
            show_state: false
            name: '+5'
          - show_name: true
            show_icon: false
            type: button
            tap_action:
              action: toggle
            entity: script.3d_printer_enclosure_target_temperature_plus1
            show_state: false
            name: '+1'

This should work

card_mod:
  style: |
    ha-card {
      box-shadow: none;
    } 

It doesnt work doesnt matter if i delete the “hui-horizontal-stack-card $: |” lines and just have the code you sent. borders are still there. is it possible you could insert your code to mine just incase i am formatting it wrong

type: custom:vertical-stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mod-card
        card_mod:
          style: 
            hui-horizontal-stack-card $: |
              hui-entity-card:nth-of-type(1) {
              flex-grow: 5 !important; 
              box-shadow: none;
              }
              hui-entity-card:nth-of-type(2) {
              flex-grow: 1 !important; 
              box-shadow: none;
              }
              ha-card {
              box-shadow: none;
              } 
        card:
          type: horizontal-stack
          cards:
            - type: entity
              entity: sensor.prusa_mk4
              state_color: false
            - show_name: true
              show_icon: true
              type: button
              tap_action:
                action: toggle
              entity: input_boolean.toggle_printerenclosure_light
              icon: mdi:lightbulb
              name: Light
              show_state: false
              icon_height: 15px
  - type: entity
    entity: sensor.prusa_mk4
    state_color: false
  - type: horizontal-stack
    cards:
      - type: gauge
        entity: sensor.hue_motion_sensor_1_temperature
        needle: false
        severity:
          green: input_number.enclosure_target_temp
          yellow: 0
          red: 0
        name: Enclosure Temperature
        min: 15
        max: 60
      - type: gauge
        entity: input_number.enclosure_target_temp
        name: Target Temperature
        severity:
          green: 0
          yellow: 0
          red: 0
        min: 15
        max: 60
  - type: horizontal-stack
    cards:
      - type: tile
        tap_action:
          action: none
        icon_tap_action:
          action: none
        entity: input_boolean.toggle_printerenclosure_fan
        vertical: false
        show_entity_picture: true
        name: Cooling
      - type: tile
        tap_action:
          action: none
        icon_tap_action:
          action: none
        entity: input_boolean.toggle_printerenclosure_light
        vertical: false
        show_entity_picture: true
        name: Heating
        icon: mdi:heating-coil
  - type: horizontal-stack
    cards:
      - type: custom:slider-entity-row
        entity: input_number.enclosure_target_temp
        name: ' '
        icon: mdi:temperature-celsius
        full_row: true
        hide_state: true
        show_icon: true
        min: 15
        max: 60
        step: 1
      - type: horizontal-stack
        cards:
          - show_name: true
            show_icon: false
            type: button
            tap_action:
              action: toggle
            entity: script.3d_printer_enclosure_target_temperature_minus1
            show_state: false
            name: '-1'
            card_mod:
              style:
                hui-buttons-base $: ''
                ha-card-border: 0px
          - show_name: true
            show_icon: false
            type: button
            tap_action:
              action: toggle
            entity: script.3d_printer_enclosure_target_temperature_minus5
            show_state: false
            name: '-5'
          - show_name: true
            show_icon: false
            type: button
            tap_action:
              action: toggle
            entity: script.3d_printer_enclosure_target_temperature_plus5
            show_state: false
            name: '+5'
          - show_name: true
            show_icon: false
            type: button
            tap_action:
              action: toggle
            entity: script.3d_printer_enclosure_target_temperature_plus1
            show_state: false
            name: '+1'

box-shadow: none wont take out borders, it will block any shadow on the cards.

you can set ha-card-border-width: 0px in your theme and have it make any card borderless (its what we need ever since HA change the borders some time ago).

or you can use that on an individual card-mod (for the stack cards you indeed need the mod-card) using border-width: 0px

also it would probably be required to set it to :host

  - type: custom:mod-card
    card_mod:
      style: |
        :host {
          --stack-card-margin: 0px;
          --ha-card-border-radius: 12px;
          --ha-card-border-width: 0px;
        }
    card:

and indeed need the full variable name again. see above for some examples

1 Like

Do you by chance know a good source for how to create a theme and just add the “border-width: 0px” line since ive tried googling how to create themes but can’t really find a way without downloading external themes. again i am a noob to custom home assistant stuff and also not having english as first lang is not helping :frowning:

sure, just see the official documentation on theming

The solution of @Mariusthvdb worked for me in the combination of vertical-stack-in-card, conditional-card and Mushroom entity-card or Mushroom number-card.

I didn’t need the custom:mod-card (which by the way isn’t recommended by the card-mod developer) since both vertical-stack-in-card and the mushroom-card contain ha-card elements.

type: custom:vertical-stack-in-card
cards:
  - type: conditional
    conditions:
      - condition: state
        entity: input_select.my_entity
        state_not: Something
    card:
      type: custom:mushroom-number-card
      display_mode: buttons
      layout: horizontal
      name: Something else
      entity: input_number.my_other_entity
      card_mod:
        style: |
          :host {
            --ha-card-border-width: 0px;
            }

Same goes for mushroom entity card.

I only get a small delay in the removal of the border when the condition is changing or the browser is refreshing. But that’s good enough for me.

Hey all,
I’m having trouble getting this to work:

type: custom:mushroom-media-player-card
entity: media_player.rx_v483_fba621
tap_action:
  action: more-info
name: 'RX-V483   '
icon_type: entity-picture
volume_controls:
  - volume_mute
  - volume_set
  - volume_buttons
collapsible_controls: true
use_media_info: true
show_volume_level: true
fill_container: false
media_controls: []
card_mod:
  style: |
    ha-card {
     --ha-card-border-width: 0;
     --ha-card-background: transparent

This works just fine and removes the border and make the background transparent.

If I replace the card mod with the following, I can get the slider to change to the color I want:

card_mod:
 style:
  .: |
    :host {
      --mush-rgb-state-media-player: var(--rgb-blue);
      --secondary-text-color: rgb(var(--rgb-cyan));

What I can’t seem to do is combine them, I have tried a bunch of different iterations, anyone got any Idea?

As a secondary question I have noticed that when I add a card mod, it works, but when I save the card and go back later to edit it, the card mod is gone. Wondering if anyone else has experienced that?

This how you address the text, but I’m not sure this is actuallly doing anything.

:host {
        --mush-rgb-state-media-player: var(--rgb-blue);
       --secondary-text-color: rgb(var(--rgb-cyan));
         }	

This should work.

type: custom:mushroom-media-player-card
entity: media_player.shield
tap_action:
  action: more-info
name: 'RX-V483   '
icon_type: entity-picture
volume_controls:
  - volume_mute
  - volume_set
  - volume_buttons
collapsible_controls: true
use_media_info: true
show_volume_level: true
fill_container: false
media_controls: []
card_mod:
  style:
    mushroom-state-info$: |
      .container {
        --card-primary-color: green !important;
        --card-secondary-color: !important;
         }
    .: |
      ha-card {
      background-color: transparent;
       }

In general - instead of

card_mod:
  style: |
    xxx {
      ...
    }
    .: |
     yyy {
       ...
     }	

just use

card_mod:
  style: |
    xxx {
      ...
    }
    yyy {
      ...
    }	

P.S. can say nothing about THIS particular styling of a card.

I appreciate the advice!! I tested it and it worked, but it’s better to have it right.

1 Like

Thanks guys, I’ll give it a try tonight!

EDIT: I tried it and it works. I’m posting it here in case anyone else ever comes searching for this:

card_mod:
  style: |
   :host {
      --mush-rgb-state-media-player: var(--rgb-blue);
      --secondary-text-color: rgb(var(--rgb-cyan));
    }
    ha-card {
     --ha-card-border-width: 0;
     --ha-card-background: transparent
     }