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!
@Dino-Tech we’re working on updating the Home Assistant demo on the website and would love to include parts of your config. Would you want to contribute the config of 2 or 3 tabs for the demo? Instructions how to contribute can be found here https://github.com/home-assistant/home-assistant-polymer/wiki/Contributing-a-Lovelace-config-for-the-demo
1 Like
Would be honored. I’ll follow up on this today. 
Just started working on some new style views thanks to @thomasloven’s layout card and card-modder . Switching background and card images with input_select and I’ll try to automate that randomly. I’d like to randomly have them change when view is clicked or a set timer.
Automated now…
Have been working on this simple and easy *NO custom cards view:
Use with Darkest-Nightz theme as main HA theme and use Clear-Nightz-II theme for the view.
Code:
title: radar_view
theme: Clear-Nightz-II
background: center / cover no-repeat url("/local/backgroundz/Purple-fractals.jpg") fixed
icon: mdi:weather-partlycloudy
cards:
- type: vertical-stack
cards:
- type: entities
title: 'Dark Sky Summary'
show_header_toggle: false
entities:
- sensor.dark_sky_summary
- sensor.dark_sky_minutely_summary
- sensor.dark_sky_hourly_summary
- sensor.dark_sky_daily_summary
- type: divider
- sensor.dark_sky_temperature
- sensor.dark_sky_apparent_temperature
- type: iframe
url: https://embed.windy.com/embed2.html
aspect_ratio: 72%
- type: vertical-stack
cards:
- type: weather-forecast
entity: weather.covington_forecast
- type: entities
entities:
- type: divider
- type: entities
entities:
- sensor.dark_sky_daytime_high_temperature_0
- sensor.dark_sky_overnight_low_temperature_0
- sensor.dark_sky_precip_intensity
- sensor.dark_sky_precip_probability
- sensor.dark_sky_humidity
- sensor.dark_sky_dew_point
- sensor.dark_sky_pressure
- sensor.dark_sky_wind_speed
- type: vertical-stack
cards:
- type: history-graph
title: 'Outside Conditions'
entities:
- entity: sensor.outside_ht_temp
name: Patio Temp
unit_of_measurement: F
- entity: sensor.outside_ht_humidity
name: Patio Humidity
- entity: sensor.dark_sky_temperature
name: Outside Temp
unit_of_measurement: F
- entity: sensor.dark_sky_humidity
name: Outside Humidity
- entity: sensor.garage_smoke_temp
name: Garage Temp
unit_of_measurement: F
- type: markdown
content: >
##
Local Radar
- type: horizontal-stack
cards:
- type: picture-entity
entity: camera.local_radar
camera_image: camera.local_radar
show_state: false
show_name: false
- type: picture-entity
entity: camera.new_orleans_radar
camera_image: camera.new_orleans_radar
show_state: false
show_name: false
3 Likes
Okay. I got this working, but not the way I want…yet. Live camera feeds as background image. Haven’t seen this yet, but it has potential. Just pulling random input selections for images for now. Would like to have PIR detection designate the camera feed displayed. I know this has been done with the custom : surveillance-card, but would like help if anyone has an idea of how to accomplish.
horrible hardware here, but good enough to get the idea…