Transparent Background

[Ringo982]

Hello can u help to create a vacuum card with transparent background? I've tried with card_mod but it is not working:

type: custom:vacuum-card card_mod: style: | ha-card { --vc-background: transparent; --vc-toolbar-background: transparent; }

any help will be appreciated! Thanks

[vsnthdev]

I'm also facing the same issue. With the following code 👇

type: custom:vacuum-card
entity: vacuum.deepbot_n10
stats:
  default:
    - entity_id: sensor.deepbot_n10_stats_area
      unit: m²
      subtitle: Area
    - entity_id: sensor.deepbot_n10_stats_time
      unit: min
      subtitle: Time
shortcuts:
  - name: Living room
    service: script.clean_living_room
    icon: mdi:sofa-outline
  - name: Master bedroom
    service: script.clean_master_bedroom
    icon: mdi:bed-king-outline
  - name: Second bedroom
    service: script.clean_second_bedroom
    icon: mdi:lamp-outline
  - name: Kitchen
    service: script.clean_kitchen
    icon: mdi:food-apple-outline
card_mod:
  style: |
    ha-card {
      --vc-background: transparent;
      --vc-toolbar-background: transparent;
    }

The card looks like the following 👇

Let me check if downgrading card-mod or vacuum-card makes any difference 🤔

[vsnthdev]

Upgrading or downgrading card-mod and vacuum-card makes no difference.

[JOHLC]

Also seeing this

[vsnthdev]

@JOHLC Which version of card-mod and vacuum card are you using?

Can you please share your vacuum card YAML snippet? I'd like to try this on my setup once to check if something else unrelated is causing this problem 🤔

[JOHLC]

@JOHLC Which version of card-mod and vacuum card are you using?

Can you please share your vacuum card YAML snippet? I'd like to try this on my setup once to check if something else unrelated is causing this problem 🤔

Latest on both. Please note I am not great with card-mod. Here is my config:

type: custom:vacuum-card
card_mod:
  style: |-
    ha-card {
      --vc-background: transparent;
    }
    :host {
      --ha-card-background: transparent;

    }
entity: vacuum.shark_vacuum
compact_view: true
actions:
  pause:
    service: vacuum.stop
    service_data:
      entity_id: vacuum.shark_vacuum
stats:
  default:
    - entity_id: sensor.shark_vacuum_cleaning_time_this_month
      subtitle: Cleaning (month)
      unit: h
    - entity_id: sensor.shark_vacuum_filter_running_time
      subtitle: Filter
      unit: h
    - entity_id: sensor.shark_vacuum_roller_running_time
      subtitle: Roller
      unit: h
    - entity_id: sensor.shark_vacuum_left_brush_running_time
      subtitle: Brush (L)
      unit: h
    - entity_id: sensor.shark_vacuum_right_brush_running_time
      subtitle: Brush (R)
      unit: h
  cleaning:
    - entity_id: sensor.shark_vacuum_cleaning_time_today
      subtitle: Cleaning time today
      unit: h
    - entity_id: sensor.shark_vacuum_running_time_since_maintenance
      subtitle: Runtime since maintenance
      unit: h
shortcuts:
  - name: null
    service: automation.trigger
    service_data:
      entity_id: automation.shark_reload_when_unavailable
    icon: mdi:restart-alert

[vsnthdev]

Thank you, let me see if putting this exact card-mod config works for my setup. Then we'll know if a fix is required.

[Ringo982]

In my case, using your code in my ha installation, the card still remain NOT transparent....

[Notrial]

Same here, I just can't change any properties via card mod. All other cards work as intended. This is the only one that won't budge :(

[jpslv]

Hey. Took some time to figure it out (noob here), but here is the code for a transparent background and smaller font size for the vacuum card.

type: custom:mod-card
card_mod:
  style: |
    ha-card {
      font-size: 12px !important;
      --ha-card-background: transparent !important;
    }
card:
  type: custom:vacuum-card
  entity: vacuum.vacuum_mop_pro
  image: default
  compact_view: false
  show_status: true
  show_name: true
  show_toolbar: true

[vsnthdev]

Strange how that doesn't work for me at all 🤔

[jpslv]

Strange how that doesn't work for me at all 🤔

Don't know if it helps, but I'm using the lovelace minimalist theme.

[Ringo982]

Any update about this? I'm still trying without any success..... @denysdovhan

[Ringo982]

@denysdovhan is this project still active? Nobody can help??

[derailius]

check your yaml, make sure no theme is set.

mine had theme: backend-selected even though i had no theme selected. but you couldn't tell this in the visual editor. Anyway, it killed some of my attemps at using card-mod. @jpslv 's config worked for me. Thanks!

edit: here's mine if it helps someone. and yes. i like me some shadows.

type: custom:mod-card
card_mod:
  style: >
    ha-card { font-size: 14px !important; --ha-card-background: transparent
    !important;  --ha-card-border-radius: 30px !important; 
    --ha-card-box-shadow: 10px 5px 5px var(--primary-background-color)
    !important; --ha-card-border-width: 2px !important;  }
card:
  type: custom:vacuum-card
  entity: vacuum.roomba
  image: default
  compact_view: false
  show_status: true
  show_name: true
  show_toolbar: true

[Ringo982]

check your yaml, make sure no theme is set.

mine had theme: backend-selected even though i had no theme selected. but you couldn't tell this in the visual editor. Anyway, it killed some of my attemps at using card-mod. @jpslv 's config worked for me. Thanks!

edit: here's mine if it helps someone. and yes. i like me some shadows.

type: custom:mod-card
card_mod:
  style: >
    ha-card { font-size: 14px !important; --ha-card-background: transparent
    !important;  --ha-card-border-radius: 30px !important; 
    --ha-card-box-shadow: 10px 5px 5px var(--primary-background-color)
    !important; --ha-card-border-width: 2px !important;  }
card:
  type: custom:vacuum-card
  entity: vacuum.roomba
  image: default
  compact_view: false
  show_status: true
  show_name: true
  show_toolbar: true

yes i have a theme selected, but if i remove it i loos the theme in all the dashboard....... how can i make it working using themes?

[derailius]

check your yaml, make sure no theme is set. mine had theme: backend-selected even though i had no theme selected. but you couldn't tell this in the visual editor. Anyway, it killed some of my attemps at using card-mod. @jpslv 's config worked for me. Thanks! edit: here's mine if it helps someone. and yes. i like me some shadows.

type: custom:mod-card
card_mod:
  style: >
    ha-card { font-size: 14px !important; --ha-card-background: transparent
    !important;  --ha-card-border-radius: 30px !important; 
    --ha-card-box-shadow: 10px 5px 5px var(--primary-background-color)
    !important; --ha-card-border-width: 2px !important;  }
card:
  type: custom:vacuum-card
  entity: vacuum.roomba
  image: default
  compact_view: false
  show_status: true
  show_name: true
  show_toolbar: true

yes i have a theme selected, but if i remove it i loos the theme in all the dashboard....... how can i make it working using themes?

Set your theme from your profile page to a global theme? Maybe I'm not understanding the question.

[Ringo982]

check your yaml, make sure no theme is set. mine had theme: backend-selected even though i had no theme selected. but you couldn't tell this in the visual editor. Anyway, it killed some of my attemps at using card-mod. @jpslv 's config worked for me. Thanks! edit: here's mine if it helps someone. and yes. i like me some shadows.

type: custom:mod-card
card_mod:
  style: >
    ha-card { font-size: 14px !important; --ha-card-background: transparent
    !important;  --ha-card-border-radius: 30px !important; 
    --ha-card-box-shadow: 10px 5px 5px var(--primary-background-color)
    !important; --ha-card-border-width: 2px !important;  }
card:
  type: custom:vacuum-card
  entity: vacuum.roomba
  image: default
  compact_view: false
  show_status: true
  show_name: true
  show_toolbar: true

yes i have a theme selected, but if i remove it i loos the theme in all the dashboard....... how can i make it working using themes?

Set your theme from your profile page to a global theme? Maybe I'm not understanding the question.

If i correctly understand you are saying that i have to remove the theme configuration from the dashboard yaml code. But if i do this all the dashboard loose the theme config, isn't it?

[github-actions[bot]]

There hasn't been any activity on this issue recently. This issue has now been marked as stale and will be closed if no further activity occurs. Please, update to the latest version and check if that solves the issue. Thank you for your contributions!

[github-actions[bot]]

This issue was closed because it has been stalled for 30 days with no activity. Please open a new issue if the issue is still relevant, linking to this one.