Will you share the images you are using as background?
Thanks…
there are many weather backgrounds that are available in Google search. I just look for the darker images so the text shows up better. Thanks!
1 Like
Will have code posted shortly. Thanks!
not perfect, but the top left and right icons are device trackers and middle is garage door, but could be used for whatever you need. Just added colors to show states
title: home_mobile_view
# theme: Dark-Nightz
# background: center / cover no-repeat url("/local/backgroundz/rainy-day.jpg") fixed
icon: mdi:cellphone-android
cards:
- id: d2ea36757487473184313782aac6fa3d # Automatically created id
type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:card-modder
style:
background-color: rgba(0,0,0,0.5)
border-radius: 90px
card:
type: picture-entity
entity: input_boolean.darren_home
show_state: false
show_name: false
tap_action:
action: toggle
state_image:
"on": /local/icons/round/darren_home.png
"off": /local/icons/round/darren_away.png
- type: custom:card-modder
style:
background-color: rgba(0,0,0,0.5)
border-radius: 90px
card:
type: picture-entity
entity: switch.garage_door
show_state: false
show_name: false
tap_action:
action: toggle
state_image:
"on": /local/icons/round/garage_open.png
"off": /local/icons/round/garage_closed.png
- type: custom:card-modder
style:
background-color: rgba(0,0,0,0.5)
border-radius: 90px
card:
type: picture-entity
entity: input_boolean.donna_home
show_state: false
show_name: false
tap_action:
action: toggle
state_image:
"on": /local/icons/round/donna_home.png
"off": /local/icons/round/donna_away.png
- type: horizontal-stack
cards:
- type: custom:card-modder
style:
background-color: rgba(0,0,0,0.5)
border-radius: 90px
card:
type: picture
image: /local/icons/round/round_listen.png
tap_action:
action: navigate
navigation_path: /lovelace/13?kiosk
- type: custom:card-modder
style:
background-color: rgba(0,0,0,0.8)
background-image: url("/local/icons/thermo.png")
background-repeat: no-repeat
background-position: center
background-size: 100% 100%
border: solid 1.5px rgba(0,0,0,1.3)
border-radius: 90px
card:
type: picture-entity
entity: climate.living_room
tap_action: more_info
show_state: false
show_name: false
image: /local/icons/clear.bubble.png
- type: custom:card-modder
style:
background-color: rgba(0,0,0,0.5)
border-radius: 90px
card:
type: picture
image: /local/icons/round/round_tv.png
tap_action:
action: navigate
navigation_path: /lovelace/13?kiosk
- type: horizontal-stack
cards:
- type: custom:card-modder
style:
background-color: rgba(0,0,0,0.5)
border-radius: 90px
card:
type: picture-entity
entity: input_boolean.disable_notifications
tap_action:
action: toggle
show_state: false
show_name: false
image: /local/icons/round/round_notify.png
- type: custom:card-modder
style:
background-color: rgba(0,0,0,0.5)
border-radius: 90px
card:
type: picture
image: /local/icons/round/round_sun.png
tap_action:
action: navigate
navigation_path: /lovelace/20?kiosk
- type: custom:card-modder
style:
background-color: rgba(0,0,0,0.5)
border-radius: 90px
card:
type: picture
image: /local/icons/round/round_camera.png
tap_action:
action: navigate
navigation_path: /lovelace/1?kiosk
- type: horizontal-stack
cards:
- type: custom:card-modder
style:
background-color: rgba(0,0,0,0.5)
border-radius: 90px
card:
type: picture
image: /local/icons/round/round_config.png
tap_action:
action: navigate
navigation_path: /lovelace/11?kiosk
- type: custom:card-modder
style:
background-color: rgba(0,0,0,0.5)
border-radius: 90px
card:
type: picture
image: /local/icons/round/round_shield.png
tap_action:
action: navigate
navigation_path: /lovelace/19?kiosk
- type: custom:card-modder
style:
background-color: rgba(0,0,0,0.5)
border-radius: 90px
card:
type: picture
image: /local/icons/round/round_users.png
tap_action:
action: navigate
navigation_path: /lovelace/21?kiosk
- type: horizontal-stack
cards:
- type: custom:card-modder
style:
background-color: rgba(0,0,0,0.5)
border-radius: 90px
card:
type: picture
image: /local/icons/round/round_option.png
tap_action:
action: navigate
navigation_path: /lovelace/10?kiosk
- type: custom:card-modder
style:
background-color: rgba(0,0,0,0.5)
border-radius: 90px
card:
type: picture
image: /local/icons/round/round_close.png
tap_action:
action: navigate
navigation_path: /lovelace/0?kiosk
- type: custom:card-modder
style:
background-color: rgba(0,0,0,0.5)
border-radius: 90px
card:
type: picture
image: /local/icons/round/round_redo.png
tap_action:
action: navigate
navigation_path: /lovelace/18?kiosk
- type: custom:compact-custom-header
notification: true
menu: true
options: false
voice: false
clock: notification
clock_format: 12
clock_am_pm: true
header: false
background_image: true
tabs: false
Custom cards:
# custom cards used
resources:
- url: /local/custom-lovelace/thermostat-card.js?v=0.1.1
type: module
- url: /local/custom-lovelace/vertical-stack-in-card.js?v=0.0.9
type: js
- url: /local/custom-lovelace/alarm_control_panel-card.js?v=0.4.0
type: js
- url: /local/custom-lovelace/bignumber-card.js?v=0.0.1
type: js
- url: /local/card-tools.js?v=445b68
type: js
- url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v0
type: js
- url: /local/custom-lovelace/card-modder.js?v=35eb37
type: js
- url: /local/kiosk.js?v=0
type: js
Here is the link for the icons used: The Spherical icon set
A few different mobile screens:
- id: 23
title: spotify_mobile_view
theme: Clear-Nightz-II
background: center / cover no-repeat url("/local/mobile_backz/stoneWall.jpg") fixed
icon: mdi:spotify
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:card-modder
style:
background-image: url("/local/mobile_backz/diamondPlate.jpg")
background-repeat: repeat
background-size: 100% 100%
border-radius: 25px 25px 0px 0px
color: rgb(102, 255, 51)
card:
type: entities
show_header_toggle: false
entities:
- type: custom:bignumber-card
entity: sensor.time
scale: 14px
color: rgb(102, 255, 51)
- type: custom:mini-media-player
entity: media_player.spotify
name: Spotify Player
artwork: full-cover-fit
hide_icon: true
power_color: true
idle_view: true
volume_stateless: true
replace_mute: stop
toggle_power: turn_off
show_progress: true
group: true
- type: horizontal-stack
cards:
- type: custom:card-modder
style:
background-image: url("/local/mobile_backz/diamondPlate2.jpg")
background-repeat: no-repeat
background-size: 100% 100%
border-radius: 0px 0px 0px 25px
card:
type: picture
image: /local/icons/round/1mp.png
tap_action:
action: call-service
service: media_player.media_previous_track
service_data:
entity_id: media_player.spotify
- type: custom:card-modder
style:
background-image: url("/local/mobile_backz/diamondPlate2.jpg")
background-repeat: no-repeat
background-size: 100% 100%
card:
type: picture
image: /local/icons/round/4mp.png
tap_action:
action: call-service
service: media_player.media_play_pause
service_data:
entity_id: media_player.spotify
- type: custom:card-modder
style:
background-image: url("/local/mobile_backz/diamondPlate2.jpg") # backgroundz/BlackStainless3
background-repeat: no-repeat
background-size: 100% 100%
card:
type: picture
image: /local/icons/round/5mp.png
tap_action:
action: call-service
service: media_player.media_play
service_data:
entity_id: media_player.spotify
- type: custom:card-modder
style:
background-image: url("/local/mobile_backz/diamondPlate2.jpg")
background-repeat: no-repeat
background-size: 100% 100%
card:
type: picture
image: /local/icons/round/6mp.png
tap_action:
action: call-service
service: media_player.media_stop
service_data:
entity_id: media_player.spotify
- type: custom:card-modder
style:
background-image: url("/local/mobile_backz/diamondPlate2.jpg")
background-repeat: no-repeat
background-size: 100% 100%
border-radius: 0px 0px 25px 0px
card:
type: picture
image: /local/icons/round/8mp.png
tap_action:
action: call-service
service: media_player.media_next_track
service_data:
entity_id: media_player.spotify
- type: horizontal-stack
cards:
- type: custom:card-modder
style:
background-color: rgba(0,0,0,0.0) #"var(--dark-primary-color)"
border-radius: 90px
card:
type: picture
image: /local/icons/round/round_home.png
tap_action:
action: navigate
navigation_path: /lovelace/18?kiosk
- type: custom:card-modder
style:
background-color: rgba(0,0,0,0.0)
border-radius: 90px
card:
type: picture
image: /local/icons/round/round_close.png
tap_action:
action: navigate
navigation_path: /lovelace/0?kiosk
- type: custom:card-modder
style:
background-color: rgba(0,0,0,0.0) #"var(--dark-primary-color)"
border-radius: 90px
card:
type: picture
image: /local/icons/round/round_redo.png
tap_action:
action: navigate
navigation_path: /lovelace/23?kiosk
2 Likes
Is there a way to set a specific Mobile/PC view to a device?
Awesome views btw, keep it up!
1 Like
Thanks! Can be done this way: Thanks to @maykar https://github.com/maykar/compact-custom-header but I prefer using different views for mobile, mainly because of wallpaper size and the different display properties for mobile vs. desktop & tablet. I have a specific view for each button on mobile home_view(shown above) and the buttons are set to navigate to the view intended. Unfortunately, I have currently 24 views and over 4k in code. Plan on revising and cutting back a bit.I will be moving the mobile_home_view to /lovelace/0 position(initial view) and adding a button to send to PC or tablet views section soon.
Great, thanks… will you be so kind to share also the background images?
1 Like
Is the github still available? I only see a 404.
He was making changes to repo I think. Checked and edited link. Should work now
I do not own the rights to these images, but the images can be found here: https://pngtree.com/free-backgrounds and many more and 2 per day can be downloaded. The image size needed depends on device you are using to view. Example: on my device, Pixel 2XL, the screen size is 2880x1440, so I resize my mobile backgrounds to that size for optimal viewing and no stretching or distortion.
1 Like
I have been trying to figure out how to create a black on black theme and all of the text be visible. I was told it wasn’t possible due to the way HA theme is designed. Well…good enough for me!
Darkest-Nightz:
dark-primary-color: "#4d4d4d"
disabled-text-color: "#5e5e6e"
light-primary-color: "#a2a2a9"
paper-card-background-color: "#121317"
paper-grey-200: "#acacb9"
paper-item-icon-color: "#c8c8d0"
paper-listbox-background-color: "#0b0e0f"
primary-background-color: "#0b0e0f"
primary-color: "4d4d4d" # # # # # # # # # <<---- DO NOT CHANGE # # #
primary-text-color: "#f2f2f2"
secondary-text-color: "#babac4"
text-primary-color: "#d6d6dc"
secondary-background-color: "#737373"
sidebar-text_-_background: "#66757f"
paper-card-header-color: "var(--paper-item-icon-color)"
paper-item-icon-active-color: "#e4da00"
paper-item-icon_-_color: "var(--primary-text-color)"
paper-listbox-color: "var(--primary-text-color)"
paper-grey-50: "var(--primary-text-color)"
paper-slider-active-color: "var(--light-primary-color)"
paper-slider-knob-color: "var(--paper-item-icon-color)"
paper-slider-knob-start-color: "var(--secondary-background-color)"
paper-slider-pin-color: "var(--secondary-background-color)"
paper-slider-secondary-color: "var(--dark-primary-color)"
paper-toggle-button-checked-ink-color: "var(--dark-primary-color)"
paper-toggle-button-checked-button-color: "#e4da00"
paper-toggle-button-unchecked-button-color: "var(--table-row-background-color)"
paper-toggle-button-checked-bar-color: "var(--paper-item-icon-color)"
paper-toggle-button-unchecked-bar-color: "var(--paper-item-icon-color)"
table-row-background-color: "#22232b"
table-row-alternative-background-color: "var(--paper-card-background-color)"
sidebar-icon-color: "#838395"
sidebar-text-color: "#F1F1F1"
sidebar-selected-background-color: "var(--primary-background-color)"
sidebar-selected-icon-color: "#b3b3b3"
sidebar-selected-text-color: "var(--sidebar-selected-icon-color)"
divider-color: 'hsl(220, 5%, 38%)'
dark-divider-opacity: '0.5'
light-divider-opacity: '0.1'
shadow-elevation-2dp_-_box-shadow: 'inset 0px 0px 0px 4px hsl(220, 5%, 27%)'
shadow-elevation-16dp_-_box-shadow: 'inset 0px 0px 0px 4px hsl(220, 5%, 38%)'
paper-font-headline_-_letter-spacing: '-0.2px'
paper-font-headline_-_font-weight: '500'
paper-font-body1_-_font-weight: '500'
label-badge-red: 'hsla(0, 0%, 0%, 0)'
label-badge-border-color: 'var(--label-badge-red)'
label-badge-background-color: 'var(--paper-card-background-color)'
label-badge-text-color: 'var(--primary-text-color)'
primary-font-family: "Verdana"
paper-font-common-base_-_font-family: "var(--primary-font-family)"
paper-font-common-code_-_font-family: "var(--primary-font-family)"
paper-font-body1_-_font-family: "var(--primary-font-family)"
paper-font-subhead_-_font-family: "var(--primary-font-family)"
paper-font-headline_-_font-family: "var(--primary-font-family)"
paper-font-caption_-_font-family: "var(--primary-font-family)"
paper-font-title_-_font-family: "var(--primary-font-family)"
google-red-500: "#cc0000"
google-blue-500: "#0033cc"
google-green-500: "#00cc00"
google-yellow-500: "#ffff66"
Let me know what you think.
6 Likes
Awesome! Looks really good!
1 Like
minor adjustment if you prefer a darker green as I do…
google-green-500: "#13eb13"
trying to get rounded corners but, looks like it doesn’t work with picture-elements card. I am getting a square picture on top of rounded box
1 Like
Have you tried overflow:hidden
2 Likes
trying to make mini graph card semi transparent (like you did for office temp/humidity, etc). transparency seems to work but the image is not appearing from beneath. please see below the relevant code.
- card:
cards:
- card:
detail: 2
height: 50
entity: >-
sensor.philio_technology_corporation_phpab01eu_micromodule_energy_meter_power
hide:
- icon
- state
name: Power Usage
type: 'custom:mini-graph-card'
style:
background-color: rgba(0,0,0,0.3)
background-size: 100% 100%
border-radius: 15px 15px 0px 0px
type: 'custom:card-modder'
type: 'custom:vertical-stack-in-card'
id: powerusage
style:
background-image: url('/local/images/powerMeter.jpg') fixed
background-size: 100% 100%
border-radius: 15px
type: 'custom:card-modder'Can you please post image so I can see what is displaying. Thanks
what I am doing is little different to what you did above though. I am trying to set a back ground at the vertical stack level (yours goes all the way down). please see below the sample code. Thanks for looking into this.
- card:
cards:
- card:
entities:
- light.ceiling_light_front_room_2
- light.front_room_light
- switch.plug_stair_lights
- switch.plug_tv_light_strip
title: top1Card
type: entities
style:
background-size: 100% 100%
border-radius: 15px 15px 0px 0px
background-color: rgba(0,0,0,0)
type: 'custom:card-modder'
- card:
entities:
- light.ceiling_light_front_room_2
- light.front_room_light
- switch.plug_stair_lights
- switch.plug_tv_light_strip
title: top2Card
type: entities
style:
background-size: 100% 100%
border-radius: 0px 0px 15px 15px
background-color: rgba(0,0,0,0)
type: 'custom:card-modder'
id: rooms
type: custom:vertical-stack-in-card
style:
background-size: 100% 100%
border-radius: 15px
background-image: url('/local/images/bg3.jpg')
type: 'custom:card-modder'I need to see what it is displaying so I can try to help. Thanks!