Possibility to hide the Backround in Homeassistant Dashboard

[dropdennisdead]

Hi :)

is it possible to hide the Black Backround of the Card in the Dashboard of Home Assistant? It would be better if it's uniformly with the Dashboard. (Picture)

[PRProd]

@dropdennisdead - That's a great idea. Based on the image you attached, is it safe to assume that this request is only for the AL1 and AL2 remote styles?

[dropdennisdead]

yes would only be for the remote styles AL1 and AL2. what would be the best way to implement this?

Greetings Dennis

[PRProd]

I'll work on something and let you know when it's ready for you to test out. I'm not sure about a timeline yet, though. I'm just getting back after a long vacation so I have a lot of catching up to do everywhere else.

[PRProd]

@dropdennisdead Could you help me out a little bit by providing the YAML for one of your custom dashboards (like the one you provided above) so I can use that example while I test on my end? I want to try to get it right the first time. :smile:

[dropdennisdead]

Dashboard YAML

```yaml background: var(--background-image) views: - theme: Backend-selected title: Tablet path: Tablet icon: mdi:tablet-dashboard layout: width: 350 type: custom:masonry-layout badges: [] cards: - type: vertical-stack cards: - type: custom:stack-in-card cards: - type: markdown content: Family style: | ha-card { font-size: 25px; } - type: horizontal-stack mode: horizontal cards: - type: custom:button-card entity: device_tracker.iphone_von_dennis_3 aspect_ratio: 4/4 show_name: false show_icon: false styles: card: - padding: 4% - background-image: url("/local/Bilder/dennis1.PNG") - background-size: 99% - background-repeat: no-repeat - background-position: top center - '--keep-background': 'true' custom_fields: location: - text-transform: capitalize - position: absolute - left: 4% - top: 4% - color: >- [[[ if (states["device_tracker.iphone_von_dennis_3"].state == "not_home") return "#e45649"; else return "#50A14F"; ]]] battery: - align-self: right - position: absolute - right: 4% - top: 4% - color: >- [[[ if (states["sensor.iphone_von_dennis_battery_state_2"].state <= 30) return "#e45649"; if (states["sensor.iphone_von_dennis_battery_state_2"].state <= 50) return "#ffa229"; else return "#50A14F"; ]]] custom_fields: location: | [[[ if (states["device_tracker.iphone_von_dennis_3"].state == "not_home") return ` ` if (states["device_tracker.iphone_von_dennis_3"].state == "Work") return ` ` else return ` ` ]]] battery: | [[[ return `${states['sensor.iphone_von_dennis_battery_state_2'].state}%` ]]] style: | ha-card { background: rgba(10, 10, 10, 0) } - type: custom:button-card entity: person.mimi aspect_ratio: 4/4 show_name: false show_icon: false styles: card: - padding: 4% - background-image: url("/local/Bilder/mimi1.PNG") - background-size: 99% - background-repeat: no-repeat - background-position: top center - '--keep-background': 'true' custom_fields: location: - text-transform: capitalize - position: absolute - left: 4% - top: 4% - color: >- [[[ if (states["person.mimi"].state == "not_home") return "#e45649"; else return "#50A14F"; ]]] battery: - align-self: right - position: absolute - right: 4% - top: 4% - color: >- [[[ if (states["sensor.2109119dg_battery_level"].state <= 30) return "#e45649"; if (states["sensor.2109119dg_battery_level"].state <= 50) return "#ffa229"; else return "#50A14F"; ]]] custom_fields: location: | [[[ if (states["person.mimi"].state == "not_home") return ` ` if (states["person.mimi"].state == "Work") return ` ` else return ` ` ]]] battery: | [[[ return `${states['sensor.2109119dg_battery_level'].state}%` ]]] style: | ha-card { background: rgba(10, 10, 10, 0) } - type: custom:swipe-card cards: - type: custom:vertical-stack-in-card cards: - type: markdown content: Wohnzimmer style: | ha-card { background: rgba(0,0,0,0); box-shadow: none; } - type: custom:stack-in-card mode: horizontal cards: - type: custom:button-card entity: light.dekolicht tap_action: action: toggle hold_action: action: more-info icon: mdi:led-strip name: Dekolicht style: | ha-card { background: rgba(0,0,0,0); } - type: custom:button-card entity: media_player.sony_kd_55x8507c tap_action: action: toggle icon: mdi:television name: Fernseher style: | ha-card { background: rgba(0,0,0,0); } - type: custom:button-card entity: light.wohnzimmerlicht tap_action: action: toggle icon: mdi:ceiling-light-outline name: Licht style: | ha-card { background: rgba(0,0,0,0); } style: | ha-card { background: rgba(0,0,0,0); } - type: custom:stack-in-card mode: horizontal cards: - type: custom:button-card entity: switch.steckdose_socket tap_action: action: toggle icon: mdi:floor-lamp-outline name: Stehlampe style: | ha-card { background: rgba(0,0,0,0); height: 110px; } - type: custom:button-card entity: light.couchtisch tap_action: action: toggle icon: mdi:led-strip-variant name: Couchtisch style: | ha-card { background: rgba(0,0,0,0); height: 110px; } - type: custom:button-card entity: switch.pc icon: mdi:monitor name: PC style: | ha-card { background: rgba(0,0,0,0); height: 110px; } style: | ha-card { background: rgba(0,0,0,0); height: 110px; } style: | ha-card { font-size: 25px; } - type: custom:vertical-stack-in-card cards: - type: markdown content: Küche style: | ha-card { background: rgba(0,0,0,0); box-shadow: none; font-size: 25px } - type: custom:stack-in-card mode: horizontal cards: - type: custom:button-card entity: light.kuche_lichtleiste name: Lichtleiste tap_action: action: toggle state: - value: 'off' color: rgba(0,0,0,0.3) icon: mdi:led-strip style: | ha-card { background: rgba(0,0,0,0); } - type: custom:button-card entity: light.kuchenlicht tap_action: action: toggle icon: mdi:lightbulb name: Licht state: - value: 'off' color: rgba(0,0,0,0.3) style: | ha-card { background: rgba(0,0,0,0); } - type: custom:button-card entity: binary_sensor.hue_motion_bewegungsmelder_occupancy name: Bewegungsmelder icon: mdi:motion-sensor state: - value: 'off' color: rgba(0,0,0,0.3) style: | ha-card { background: rgba(0,0,0,0); } style: | ha-card { background: rgba(0,0,0,0); } - type: custom:stack-in-card mode: horizontal cards: - type: custom:button-card entity: switch.shelly1_e8db84d7c89b tap_action: action: toggle state: - value: 'off' color: rgba(0,0,0,0.3) icon: mdi:coffee-maker name: Kaffeemaschine style: | ha-card { background: rgba(0,0,0,0); height: 110px; } - type: custom:button-card entity: sensor.hue_motion_bewegungsmelder_battery state: - value: null color: rgba(0,0,0,0.3) icon: null name: Akku style: | ha-card { background: rgba(0,0,0,0); height: 110px; } style: | ha-card { height: 110px; background: rgba(0,0,0,0); } style: | ha-card { font-size: 25px; } - type: custom:vertical-stack-in-card cards: - type: markdown content: Bad style: | ha-card { background: rgba(0,0,0,0); font-size: 25px } - type: custom:stack-in-card mode: horizontal cards: - type: custom:button-card entity: light.badlicht name: Licht tap_action: action: toggle state: - value: 'off' color: rgba(0,0,0,0.3) icon: mdi:lightbulb style: | ha-card { background: rgba(0,0,0,0); } - type: custom:button-card entity: binary_sensor.gruppe_bewegungsmelder_bad name: Bewegungsmelder icon: mdi:motion-sensor state: - value: 'off' color: rgba(0,0,0,0.3) style: | ha-card { background: rgba(0,0,0,0); } style: | ha-card { background: rgba(0,0,0,0); } - type: custom:vertical-stack-in-card cards: - type: markdown content: Schlafzimmer style: | ha-card { background: rgba(0,0,0,0); font-size: 25px } - type: custom:stack-in-card mode: horizontal cards: - type: custom:button-card entity: light.nachttisch name: Nachttisch tap_action: action: toggle state: - value: 'off' color: rgba(0,0,0,0.3) icon: mdi:lamp-outline style: | ha-card { background: rgba(0,0,0,0); } - type: custom:button-card entity: light.schlafzimmerlicht tap_action: action: toggle icon: mdi:lightbulb name: Licht state: - value: 'off' color: rgba(0,0,0,0.3) style: | ha-card { background: rgba(0,0,0,0); } style: | ha-card { background: rgba(0,0,0,0); } style: | ha-card { font-size: 25px; } - type: custom:swipe-card cards: - type: custom:vertical-stack-in-card cards: - type: markdown content: Rollo Alle style: | ha-card { background: rgba(0,0,0,0); } - type: horizontal-stack cards: - type: custom:button-card tap_action: action: toggle entity: script.rollo_auf icon: mdi:curtains name: Rollo Auf style: | ha-card { box-shadow: none; background: rgba(10, 10, 10, 0); height: 110px; } - type: custom:button-card tap_action: action: toggle entity: script.rollo_zu icon: mdi:curtains-closed name: Rollo Zu style: | ha-card { box-shadow: none; background: rgba(10, 10, 10, 0); height: 110px; } style: | ha-card { font-size: 25px; } - type: custom:vertical-stack-in-card cards: - type: markdown content: Rollo Einzeln style: | ha-card { background: rgba(0,0,0,0); } - type: horizontal-stack cards: - type: custom:button-card entity: cover.rollo_links tap_action: action: toggle icon: mdi:curtains name: Rollo Links style: | ha-card { box-shadow: none; background: rgba(10, 10, 10, 0); height: 110px; } - type: custom:button-card entity: cover.rollo_mitte tap_action: action: toggle icon: mdi:curtains name: Rollo Mitte style: | ha-card { box-shadow: none; background: rgba(10, 10, 10, 0); height: 110px; } - type: custom:button-card entity: cover.rollo_rechts tap_action: action: toggle icon: mdi:curtains name: Rollo Rechts style: | ha-card { box-shadow: none; background: rgba(10, 10, 10, 0); height: 110px; } style: | ha-card { font-size: 25px; } - type: vertical-stack cards: - type: horizontal-stack cards: - type: custom:swipe-card parameters: effect: coverflow cards: - type: custom:stack-in-card mode: vertical cards: - type: markdown content: >- Wetter Straubing style: | ha-card { background: url("/local/google-nest-logo-transparent-png.png"); background-repeat: no-repeat; background-position: right; background-size: 15%; background-color: rgba(0,0,0,0); font-size: 25px; box-shadow: none; margin: 0px 25px 0px 0px; } - type: custom:weather-card entity: weather.straubing_hourly number_of_forecasts: '5' name: null current: true details: false forecast: true hourly_forecast: true style: | ha-card { background: rgba(0,0,0,0); } - type: custom:vertical-stack-in-card cards: - type: markdown content: >- Wetter täglich style: | ha-card { background: rgba(10, 10, 10, 0); font-size: 25px; } - type: custom:weather-card entity: weather.straubing_daily number_of_forecasts: '5' name: null current: true details: false forecast: true hourly_forecast: false style: | ha-card { background: rgba(0,0,0,0); } - type: horizontal-stack cards: - type: custom:swipe-card parameters: effect: coverflow cards: - type: custom:vertical-stack-in-card cards: - type: markdown content: Time style: | ha-card { background-color: rgba(0,0,0,0); font-size: 25px; } - type: custom:digital-clock style: | ha-card { box-shadow: none; background: rgba(10, 10, 10, 0); font-size: 30px; height: 190px; } - type: custom:vertical-stack-in-card cards: - type: markdown content: >- Weather - {{ state_attr('weather.home','temperature') }} °F style: | ha-card { background: rgba(10, 10, 10, 0); font-size: 25px; } - type: custom:weather-card entity: weather.home number_of_forecasts: '5' current: false hourly_forecast: false details: false style: | ha-card { background: rgba(10, 10, 10, 0); height: 152px; box-shadow: none; font-size: 20px; } - type: custom:swipe-card parameters: effect: coverflow cards: - type: custom:vertical-stack-in-card cards: - type: horizontal-stack cards: - type: custom:button-card tap_action: action: toggle entity: script.kaffeemaschine icon: mdi:coffee name: Kaffee style: | ha-card { background: rgba(0,0,0,0); box-shadow: none; height: 120px; } - type: custom:button-card tap_action: action: toggle entity: script.schlafenszeit icon: mdi:bed name: Schlafenszeit style: | ha-card { background: rgba(0,0,0,0); box-shadow: none; height: 120px; } - type: custom:button-card tap_action: action: toggle entity: script.waschmaschine_benachrichtigungen_loschen icon: mdi:washing-machine-off name: Ring löschen style: | ha-card { background: rgba(0,0,0,0); box-shadow: none; height: 120px; } - type: vertical-stack cards: - type: custom:swipe-card parameters: effect: coverflow cards: - type: custom:stack-in-card mode: vertical cards: - type: markdown content: Heizung style: | ha-card { background: url("/local/google-nest-logo-transparent-png.png"); background-repeat: no-repeat; background-position: right; background-size: 15%; background-color: rgba(0,0,0,0); font-size: 25px; box-shadow: none; margin: 0px 25px 0px 0px; } - type: custom:simple-thermostat entity: climate.better_thermostat_wohnzimmer header: name: Heizung Wohnzimmer icon: null decimals: 0 step_size: 1 control: false layout: step: row style: | ha-card { --st-font-size-title: 18px; background: rgba(10, 10, 10, 0); box-shadow: none; } - type: custom:simple-thermostat entity: climate.better_thermostat_schlafzimmer header: name: Heizung Schlafzimmer icon: null decimals: 0 step_size: 1 control: false layout: step: row style: | ha-card { --st-font-size-title: 18px; background: rgba(10, 10, 10, 0); box-shadow: none; margin: 0px 0px 16px 0px; } - type: custom:stack-in-card mode: vertical cards: - type: markdown content: Wohnzimmer style: | ha-card { background: url("/local/google-nest-logo-transparent-png.png"); background-repeat: no-repeat; background-position: right; background-size: 15%; background-color: rgba(0,0,0,0); font-size: 25px; box-shadow: none; margin: 0px 25px 0px 0px; } - type: custom:better-thermostat-ui-card entity: climate.better_thermostat_wohnzimmer name: null style: | ha-card { --st-font-size-title: 18px; background: rgba(10, 10, 10, 0); box-shadow: none; margin: 0px 0px 16px 0px; } - type: custom:stack-in-card mode: vertical cards: - type: markdown content: Schlafzimmer style: | ha-card { background: url("/local/google-nest-logo-transparent-png.png"); background-repeat: no-repeat; background-position: right; background-size: 15%; background-color: rgba(0,0,0,0); font-size: 25px; box-shadow: none; margin: 0px 25px 0px 0px; } - type: custom:better-thermostat-ui-card entity: climate.better_thermostat_schlafzimmer name: null style: | ha-card { --st-font-size-title: 18px; background: rgba(10, 10, 10, 0); box-shadow: none; margin: 0px 0px 16px 0px; } - type: vertical-stack cards: - type: custom:swipe-card parameters: effect: coverflow cards: - type: custom:vertical-stack-in-card cards: - type: markdown content: FireTV style: | ha-card { font-size: 25px; box-shadow: none; background: rgba(0, 0, 0, 0); } - type: custom:stack-in-card mode: horizontal cards: - type: custom:firemote-card entity: media_player.fire_tv_192_168_178_25 device_family: amazon-fire device_type: fire_tv_cube_third_gen compatibility_mode: default defaultRemoteStyle_override: AL1 app_launch_1: magenta-tv app_launch_2: plex app_launch_4: prime-video app_launch_5: youtube app_launch_6: spotify style: > ha-card { background: 'center / cover no-repeat url("/local/images/original-homekit-wallpaper.png") fixed; } scale: '105' name_position: hidden app_launcher_relative_size: 0 - type: custom:vertical-stack-in-card cards: - type: markdown content: Fernbedienung style: | ha-card { font-size: 25px; box-shadow: none; background: rgba(10, 10, 10, 0); } - type: custom:stack-in-card mode: horizontal cards: - type: custom:firemote-card entity: media_player.fire_tv_192_168_178_25 device_family: amazon-fire device_type: fire_tv_4_series compatibility_mode: default defaultRemoteStyle_override: AL2 app_launcher_relative_size: '-25' scale: '60' - theme: Backend-selected title: Fire TV Plex path: media type: custom:grid-layout layout: grid-template-columns: calc( 100% - 8px ) grid-template-rows: auto grid-template-areas: '"info"' grid-column-gap: 16px margin: 0 16px icon: mdi:plex badges: [] cards: - type: custom:auto-entities filter: include: - domain: media_player state: playing options: type: custom:decluttering-card template: metro_media_player_page variables: - entity: media_player.plex_plex_for_android_tv_aftr - domain: media_player state: paused options: type: custom:decluttering-card template: metro_media_player_page variables: - entity: media_player.plex_plex_for_android_tv_aftr exclude: [] sort: method: friendly_name reverse: false show_empty: true card: type: custom:swipe-card parameters: slidesPerView: 1 card_param: cards view_layout: grid-area: info - title: test path: test icon: mdi:test-tube-empty badges: [] cards: - type: custom:layout-card layout_type: custom:masonry-layout layout: {} cards: [] decluttering_templates: metro_media_player_page: card: type: vertical-stack card_mod: style: | ha-card {background: red;} cards: - type: custom:button-card entity: '[[entity]]' color_type: card size: 20px show_state: true show_label: true show_icon: false state_display: '[[[ return entity.attributes.media_title ]]]' label: |- [[[ if (entity.attributes.media_content_type == "music") { return entity.attributes.media_album_name + "
" + entity.attributes.media_artist + "" } else if (entity.attributes.media_content_type == "tvshow") { return entity.attributes.media_series_title } ]]] custom_fields: picture: ' ' space: ' ' color: transparent styles: card: - aspect-ratio: 5/2 - padding: 16px grid: - grid-template-areas: | "picture space" "picture n" "picture s" "picture l" - grid-template-columns: calc( 40% - 16px ) 1fr - grid-template-rows: 1fr min-content min-content min-content name: - font-size: 12pt - font-weight: 500 - letter-spacing: .05em - padding: 16px 0 8px 0 - white-space: normal - text-align: left - justify-self: start - align-self: end - text-transform: uppercase - opacity: 0.67 state: - font-size: 48pt - justify-self: start - padding: 0 0 8px 0 - font-weight: 500 - align-self: start - text-overflow: clip - white-space: normal - line-height: 1.1 - text-align: left label: - font-size: 24pt - justify-self: start - padding: 0 0 32px 0 - align-self: start - white-space: normal - text-align: left - height: 100% custom_fields: picture: - background: |- [[[ if (entity.attributes.entity_picture != '') { return "url(" + entity.attributes.entity_picture + ")" } else if (entity.attributes.entity_picture_local != '') { return "url(" + entity.attributes.entity_picture_local + ")" } ]]] - background-size: cover - xbackground-position: center center - height: calc( 100% - 32px ) - aspect-ratio: 1/1 - position: relative - xwidth: 100% - type: media-control entity: '[[entity]]' card_mod: style: > ha-card { background: none; } .media-info, .top-info, .background { display: none !important; } .title-controls { padding: 0 !important; } .player { padding-top: 0 !important; color: rgb(255,255,255) !important;} mwc-linear-progress { --mdc-theme-primary: inherit !important; } ```

[PRProd]

@dropdennisdead - THANK YOU for the yaml!

Would it be possible to also get a copy of these two files:

/local/images/original-homekit-wallpaper.png
/local/google-nest-logo-transparent-png.png

[PRProd]

@dropdennisdead - News!

I published a pre-release that I would like for you to try out. Please download version v2.3.10-b1 and add the following line into the appropriate Firemote section(s) of your YAML config:

use_theme_background: true

Please let me know if this works as desired. If so, I'll add it to the next official release. If not, I'll keep working at it until you're happy! :smile:

-Doug

[jrspowers]

@dropdennisdead - News!

I published a pre-release that I would like for you to try out. Please download version v2.3.10-b1 and add the following line into the appropriate Firemote section(s) of your YAML config:

use_theme_background: true

Please let me know if this works as desired. If so, I'll add it to the next official release. If not, I'll keep working at it until you're happy! :smile:

-Doug

very nice and handy function this one is now even tighter with the theme 😊

[PRProd]

@dropdennisdead - I'm not sure if you had an opportunity to try the pre-release to see if it worked for you, but our friend @jrspowers said that it was working well so I just published it in the latest official release v2.3.10

If this doesn't do what you were hoping, please let me know. Thanks!

-Doug

[dropdennisdead]

@PRProd sorry for the late reply. I just got version v2.3.10 and the clear background works! The update removes the entire background of a map. How would it be possible to keep the outer frame of a card? Thank you in advance for your great work! Greetings Dennis

[dropdennisdead]

[PRProd]

@dropdennisdead

Are you asking for something that looks like this instead? (this image is a mock-up, not made from actual code)

If that's the case, then I will get back to work on it. Also, I will still need a copy (for testing) of these two files that live on your Home Assistant instance:

/local/images/original-homekit-wallpaper.png
/local/google-nest-logo-transparent-png.png

[dropdennisdead]

Yes, that's what I meant. (Sorry for my bad explanation) The two files were old links to special Homekit and Google backgrounds, which are currently no longer needed. I forgot to delete them from the YAML file.

[PRProd]

@dropdennisdead - I'M SO SORRY FOR TAKING SO LONG TO GET BACK TO THIS!!!

I got stuck trying to reproduce your environment, and I still didn't manage to succeed. However, I did find a different way to try, and I'd like for you to test it out for me. Please download pre-release version v3.0.3b1 and let me know if that works any better for you.

Also, @jrspowers - Since you are using this too, can you take a look at it and make sure the v3.0.3b1 version still does what you expect?

Thanks!

[PRProd]

I ended up pushing this into production today. I REALLY hope that this does what you wanted, @dropdennisdead, Please let me know.

[PRProd]

@dropdennisdead - I'm going to close this issue for now, hoping that I've accomplished what you are looking for.

Feel free to reply back in this thread if it's not quite right, and I'll be happy to take another look.