I finally figured it out. Didn’t see the code is different for the Entity card compared to the Entities card.
EDIT: Would still love to see your code when you get a chance. Your padding and layout looks perfect!
1 Like
Thank you!
Of course most of this won’t apply because everyone has different devices, but here goes…
configuration.yaml
default_config:
wake_on_lan:
tts:
- platform: google_translate
cloud:
group: !include groups.yaml
automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml
frontend:
themes: !include_dir_merge_named themes
webostv:
- name: LG Upstairs TV
host: 192.168.10.202
#other settings
turn_on_action:
service: wake_on_lan.send_magic_packet
data:
mac: "40-2F-86-9A-91-54"
broadcast_address: 192.168.10.255
customize:
sources:
- HDMI 2
- Netflix
- Disney+
- Plex
- YouTube
- Amazon Prime Video
- name: LG PC TV
host: 192.168.10.250
#other settings
turn_on_action:
service: wake_on_lan.send_magic_packet
data:
mac: "24-e8-53-76-60-7e"
broadcast_address: 192.168.10.255
customize:
sources:
- HDMI 4
- Netflix
- Disney+
- Plex
- YouTube
- Amazon Prime Video
light: !include config_lights2021.yaml
input_select:
led_color:
name: Kitchen LED Quick Colors
options:
- red
- orange
- yellow
- green
- blue
- indigo
- violet
- white
initial: blue
lovelace:
mode: yaml
resources:
- url: /local/slider-entity-row.js
type: module
- url: /local/mini-media-player-bundle.js
type: module
- url: /local/card-mod.js
type: module
- url: /local/simple-thermostat.js
type: module
dashboards:
lovelace-generated: # Needs to contain a hyphen (-)
mode: yaml
filename: ref-lovelace.yaml
title: Family Hub
icon: mdi:fridge-variant
show_in_sidebar: true
require_admin: false
alarm_control_panel:
platform: alarmdotcom
username: ####
password: ####
Note, that I have the .js files in my \config\www\ directory
Then config_lights2021.yaml
#light:
- platform: template
lights:
kitchen_relay:
friendly_name: "Kitchen Crown"
value_template: >-
{{ is_state('switch.kitchen_strip_light_relay','on') }}
turn_on:
service: switch.turn_on
entity_id: switch.kitchen_strip_light_relay
turn_off:
service: switch.turn_off
entity_id: switch.kitchen_strip_light_relay
- platform: group
name: kitchen Crown
entities:
- light.kitchen_relay
- light.wled_kitchen
- platform: group
name: PC Lights
entities:
- light.asus_aura_dram_1
- light.asus_aura_dram_2
- light.asus_aura_dram_3
- light.asus_aura_dram_4
- light.asus_rog_maximus_xi_formula_5
- light.asus_rog_maximus_xi_formula_addressable_6
- light.asus_aura_addressable_7
- light.asus_aura_motherboard_5
I have two dashboards, the regular one:
ui-lovelace.yaml
title: Bishops House
views:
# View tab title.
- title: main
icon: 'mdi:home-circle'
cards:
# The markdown card will render markdown text.
- type: vertical-stack
cards:
- type: entities
title: Outside
card_mod: !include lovelace/cardmod1.yaml
entities: !include lovelace/2022-lights-outside.yaml
- type: entities
title: Main Floor
card_mod: !include lovelace/cardmod1.yaml
entities: !include lovelace/2022-lights-main.yaml
- type: entities
# title: Christmas
card_mod: !include lovelace/cardmod1.yaml
entities: !include lovelace/2022-lights-xmas.yaml
- type: vertical-stack
cards:
- type: entities
title: Garage
card_mod: !include lovelace/cardmod1.yaml
entities: !include lovelace/2022-lights-garage.yaml
- type: entities
title: Upstairs
card_mod: !include lovelace/cardmod1.yaml
entities: !include lovelace/2022-lights-upstairs.yaml
- type: entities
title: Basement
card_mod: !include lovelace/cardmod1.yaml
entities: !include lovelace/2022-lights-basement.yaml
- type: vertical-stack
cards:
- type: entities
title: Media
card_mod: !include lovelace/cardmod1.yaml
entities: !include lovelace/2022-media.yaml
- type: vertical-stack
cards:
- type: alarm-panel
name: Security
entity: alarm_control_panel.alarm_com
card_mod: !include lovelace/cardmod1.yaml
- type: entities
# title: Sensors
show_header_toggle: false
card_mod: !include lovelace/cardmod1.yaml
entities:
- entity: lock.front_deadbolt
- type: weblink
name: Camera Feeds
url: https://####
icon: mdi:video-outline
- type: entities
# title: Thermostats
show_header_toggle: false
card_mod: !include lovelace/cardmod1.yaml
entities:
- entity: climate.main_floor
card_mod: !include lovelace/cardmod1-90.yaml
type: custom:simple-thermostat
layout:
step: row
control:
- preset: false
- operation: true
- entity: climate.my_main_ac
card_mod: !include lovelace/cardmod1-75.yaml
type: custom:simple-thermostat
layout:
step: row
- entity: climate.my_midea_ac
card_mod: !include lovelace/cardmod1-75.yaml
type: custom:simple-thermostat
layout:
step: row
and the refrigerator dashboard, which is almost the same, but with a horizontal stack and 50% zoom cardmods:
ref-lovelace.yaml
title: Bishops House
views:
# View tab title.
- title: main
icon: 'mdi:home-circle'
cards:
# The markdown card will render markdown text.
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: entities
title: Outside
card_mod: !include lovelace/cardmod1-50.yaml
entities: !include lovelace/2022-lights-outside.yaml
- type: entities
title: Main Floor
card_mod: !include lovelace/cardmod1-50.yaml
entities: !include lovelace/2022-lights-main.yaml
- type: entities
# title: Christmas
card_mod: !include lovelace/cardmod1-50.yaml
entities: !include lovelace/2022-lights-xmas.yaml
- type: vertical-stack
cards:
- type: entities
title: Garage
card_mod: !include lovelace/cardmod1-50.yaml
entities: !include lovelace/2022-lights-garage.yaml
- type: entities
title: Upstairs
card_mod: !include lovelace/cardmod1-50.yaml
entities: !include lovelace/2022-lights-upstairs.yaml
- type: entities
title: Basement
card_mod: !include lovelace/cardmod1-50.yaml
entities: !include lovelace/2022-lights-basement.yaml
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: entities
title: Media
card_mod: !include lovelace/cardmod1-50.yaml
entities: !include lovelace/2022-media.yaml
- type: vertical-stack
cards:
- type: alarm-panel
name: Security
entity: alarm_control_panel.alarm_com
card_mod: !include lovelace/cardmod1-50.yaml
- type: entities
# title: Sensors
show_header_toggle: false
card_mod: !include lovelace/cardmod1-50.yaml
entities:
- entity: lock.front_deadbolt
- type: weblink
name: Camera Feeds
url: https://####
icon: mdi:video-outline
- type: entities
# title: Thermostats
show_header_toggle: false
card_mod: !include lovelace/cardmod1.yaml
entities:
- entity: climate.main_floor
card_mod: !include lovelace/cardmod1-45.yaml
type: custom:simple-thermostat
layout:
step: row
control:
- preset: false
- operation: true
- entity: climate.my_main_ac
card_mod: !include lovelace/cardmod1-35.yaml
type: custom:simple-thermostat
layout:
step: row
- entity: climate.my_midea_ac
card_mod: !include lovelace/cardmod1-35.yaml
type: custom:simple-thermostat
layout:
step: row
Then the for !include files in the lovelace directory…
the cardmod1.yaml, cardmod1-50.yaml, cardmod1-35.yaml etc. are all identical but with different zoom levels:
cardmod1-50.yaml
style:
.: |
#states > * {
margin: -1px 0px !important;
}
ha-card {
background: rgba(120, 200, 255, .1);
background-image: linear-gradient(to bottom, rgba(120,200,255,.1), rgba(120,200,255,0));
border: 1px solid rgba(120,200,255,.3);
font-variant: small-caps;
zoom: 0.5;
}
.card-header {
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid rgba(120,200,255,.3);
color: rgba(120,200,255,.8);
}
.card-content {
padding-top: 8px;
padding-bottom: 8px;
}
2022-lights-garage.yaml
- entity: light.garage_landing_lights
name: Garage Landing
toggle: true
type: 'custom:slider-entity-row'
- entity: switch.garage_main_lights
name: Garage Main
2022-lights-main.yaml
- entity: switch.living_room_main_lights
name: Living Room
- entity: light.laundry_room_lights
name: Laundry Room
toggle: true
type: 'custom:slider-entity-row'
- type: divider
style:
background: rgba(120,200,255,.3)
- entity: light.kitchen_main_lights
name: Kitchen Main
toggle: true
type: 'custom:slider-entity-row'
- entity: light.kitchen_crown
name: Kitchen Crown
toggle: true
hide_when_off: true
icon: mdi:led-strip-variant
type: 'custom:slider-entity-row'
- entity: light.kitchen_sink_light
name: Sink
toggle: true
type: 'custom:slider-entity-row'
- entity: light.countertop_2
name: Counter
toggle: true
type: 'custom:slider-entity-row'
- entity: light.cabinet
name: Cabinet
toggle: true
type: 'custom:slider-entity-row'
- type: divider
style:
background: rgba(120,200,255,.3)
- entity: light.dining_room
name: Dining Room
toggle: true
type: 'custom:slider-entity-row'
- entity: light.bathroom_main_lights
name: Bathroom
toggle: true
type: 'custom:slider-entity-row'
- entity: light.back_entry_main_lights
name: Back Entry
toggle: true
type: 'custom:slider-entity-row'
2022-lights-outside.yaml
- entity: light.exterior_porch_lights
name: Porch
toggle: true
type: 'custom:slider-entity-row'
- entity: light.driveway_main_light
name: Driveway
toggle: true
type: 'custom:slider-entity-row'
2022-lights-upstairs.yaml
- entity: light.master_bedroom_lights
name: Master Bedroom
toggle: true
type: 'custom:slider-entity-row'
- entity: light.caelan_bedroom_main_lights
name: Caelan Bedroom
toggle: true
type: 'custom:slider-entity-row'
- entity: light.upstairs_hallway_light
name: Stairwell
toggle: true
type: 'custom:slider-entity-row'
2022-lights-basement.yaml
- entity: light.basement_stairs_main_lights
name: Stairwell
toggle: true
type: 'custom:slider-entity-row'
- entity: light.theatre_main_lights
name: Theatre
toggle: true
type: 'custom:slider-entity-row'
- type: divider
style:
background: rgba(120,200,255,.3)
- entity: light.downstairs_hallway_main_lights
name: Hallway
toggle: true
type: 'custom:slider-entity-row'
- entity: light.downstairs_hallway_main_lights
name: Bathroom
toggle: true
type: 'custom:slider-entity-row'
- entity: light.downstairs_hallway_main_lights
name: Bathroom Hallway
toggle: true
type: 'custom:slider-entity-row'
- type: divider
style:
background: rgba(120,200,255,.3)
- entity: light.skyler_bedroom_lights
name: Skyler Bedroom
toggle: true
type: 'custom:slider-entity-row'
- entity: light.karissa_bedroom_main_lights
name: Karissa Bedroom
toggle: true
type: 'custom:slider-entity-row'
- entity: light.playroom_main_lights
name: Playroom
toggle: true
type: 'custom:slider-entity-row'
2022-media.yaml
- entity: media_player.lg_upstairs_tv
type: 'custom:mini-media-player'
icon: 'mdi:television'
name: LG Upstairs TV
group: true
hide:
power_state: false
volume: true
prev: true
next: true
shortcuts:
columns: 6
buttons:
- icon: 'mdi:arrow-left'
type: service
id: webostv.button
data:
entity_id: media_player.lg_upstairs_tv
button: LEFT
- icon: 'mdi:arrow-up'
type: service
id: webostv.button
data:
entity_id: media_player.lg_upstairs_tv
button: UP
- icon: 'mdi:arrow-down'
type: service
id: webostv.button
data:
entity_id: media_player.lg_upstairs_tv
button: DOWN
- icon: 'mdi:arrow-right'
type: service
id: webostv.button
data:
entity_id: media_player.lg_upstairs_tv
button: RIGHT
- icon: 'mdi:location-enter'
type: service
id: webostv.button
data:
entity_id: media_player.lg_upstairs_tv
button: ENTER
- icon: 'mdi:undo-variant'
type: service
id: webostv.button
data:
entity_id: media_player.lg_upstairs_tv
button: BACK
- entity: media_player.stereo
type: 'custom:mini-media-player'
icon: 'mdi:speaker'
name: Stereo
group: true
hide:
power_state: false
volume_level: false
sound_mode: false
shortcuts:
columns: 4
buttons:
- icon: 'mdi:netflix'
id: script.media_upstairs_on
type: script
data:
stereo: "TV Audio"
tv: "Netflix"
- image: '/local/disney2.svg'
id: script.media_upstairs_on
type: script
data:
stereo: "TV Audio"
tv: "Disney+"
- icon: 'si:amazon'
id: script.media_upstairs_on
type: script
data:
stereo: "TV Audio"
tv: "Amazon Prime Video"
- icon: 'mdi:plex'
id: script.media_upstairs_on
type: script
data:
stereo: "TV Audio"
tv: "Plex"
- icon: 'mdi:keyboard-variant'
id: script.media_upstairs_on
type: script
data:
stereo: "PC"
tv: "HDMI 2"
- icon: 'mdi:nintendo-switch'
id: script.media_upstairs_on
type: script
data:
stereo: "Nintendo"
tv: "HDMI 2"
- icon: 'mdi:close-box-multiple-outline'
id: script.media_off_upstairs
type: script
- entity: media_player.heos_stereo
type: 'custom:mini-media-player'
name: Group Play
artwork: cover
group: true
hide:
controls: true
icon: true
power: true
power_state: false
source: true
volume: true
speaker_group:
platform: heos
show_group_count: true
entities:
- entity_id: media_player.heos_stereo
name: Stereo
- entity_id: media_player.heos_home_theater
name: Home Theater
- type: divider
style:
background: rgba(120,200,255,.3)
- entity: media_player.downstairs_tv
type: 'custom:mini-media-player'
name: Home Theatre TV
icon: 'mdi:television'
group: true
hide:
power_state: false
controls: true
volume: true
- entity: media_player.home_theater
type: 'custom:mini-media-player'
name: Home Theatre
icon: 'mdi:speaker'
group: true
hide:
power_state: false
shortcuts:
columns: 4
buttons:
- icon: 'mdi:netflix'
id: script.media_downstairs_on
type: script
data:
stereo: "TV Audio"
tv: "Netflix"
- image: '/local/disney2.svg'
id: script.media_downstairs_on
type: script
data:
stereo: "TV Audio"
tv: "Disney+"
- icon: 'si:amazon'
id: script.media_downstairs_on
type: script
data:
stereo: "TV Audio"
tv: "Prime Video"
- icon: 'mdi:plex'
id: script.media_downstairs_on
type: script
data:
stereo: "TV Audio"
tv: "Plex"
- icon: 'mdi:disc'
id: script.media_downstairs_on
type: script
data:
stereo: "Blu-ray"
tv: "HDMI-1"
- icon: 'mdi:sony-playstation'
id: script.media_downstairs_on
data:
stereo: "PS4"
tv: "HDMI-1"
- icon: 'mdi:close-box-multiple-outline'
id: script.media_off_downstairs
type: script
- type: divider
style:
background: rgba(120,200,255,.3)
- entity: media_player.lg_pc_tv
type: 'custom:mini-media-player'
icon: 'mdi:television'
name: PC Monitor 48
group: true
hide:
power_state: false
volume: true
prev: true
next: true
shortcuts:
columns: 5
buttons:
- icon: 'mdi:netflix'
id: script.media_pc_on
type: script
data:
tv: "Netflix"
- image: '/local/disney2.svg'
id: script.media_pc_on
type: script
data:
tv: "Disney+"
- icon: 'si:amazon'
id: script.media_pc_on
type: script
data:
tv: "Amazon Prime Video"
- icon: 'mdi:plex'
id: script.media_pc_on
type: script
data:
tv: "Plex"
- icon: 'mdi:keyboard-variant'
id: script.media_pc_on
type: script
data:
tv: "HDMI 4"
- entity: light.pc_lights
name: PC Lighting
toggle: true
type: 'custom:slider-entity-row'
This is tighter on screen from my first pic because I have added
.: |
#states > * {
margin: -1px 0px !important;
}
to the cardmod section to reduce the space between entities.
This is how it looks now:
1 Like
thanks for the tips on cardmod and the zoom. I have made some dashboards for mobile using mushroom, and now creating a fridge only dashboard, and the zoom and border px mod is going to be sweet. some images so far. I would love to get rid of the menu bar, will keep working on that.
kiosk mode worked well to block the access to the HA menus.
Lookin good!
How did you get the custom cards to show up?
If you just “scroll” up the browser menu should disappear.
The cards are 99% mushroom cards and seem to just work. Plus a couple of native climate cards.
The scrolling doesn’t work and you get the url at the top and the browser buttons at the bottom all the time but I can live with that. Shame you can’t force a full screen browser. There must be a way to override what it’s doing but it’s a little beyond me.
I thought the samsung integration didn’t work anymore? A while ago it just stopped showing the image inside.
Are you having repeat issues from the lawsuit with those new fridges?
I am a total newbie to css and I tried following the instructions to create a dashboard with the appropriate zoom.
Here is my code:
views:
- title: Home
cards:
- type: todo-list
entity: todo.anylist_grocery_list
title: Grocery
style:
.: >
#states > * {
margin: -1px 0px !important;
}
ha-card {
background: rgba(120, 200, 255, .1);
background-image: linear-gradient(to bottom, rgba(120,200,255,.1),
rgba(120,200,255,0));
border: 1px solid rgba(120,200,255,.3);
font-variant: small-caps;
zoom: 0.5;
}
.card-header {
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid rgba(120,200,255,.3);
color: rgba(120,200,255,.8);
}
.card-content {
padding-top: 8px;
padding-bottom: 8px;
}
- initial_view: dayGridDay
style:
.: >
#states > * {
margin: -1px 0px !important;
}
ha-card {
background: rgba(120, 200, 255, .1);
background-image: linear-gradient(to bottom, rgba(120,200,255,.1),
rgba(120,200,255,0));
border: 1px solid rgba(120,200,255,.3);
font-variant: small-caps;
zoom: 0.5;
}
.card-header {
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid rgba(120,200,255,.3);
color: rgba(120,200,255,.8);
}
.card-content {
padding-top: 8px;
padding-bottom: 8px;
}
type: calendar
entities:
- calendar.family
- calendar.justin_bennett_calendar_canvas
title: Today
- type: entities
entities:
- entity: light.kitchen_island_lights_2
- entity: light.kitchen_table_light_2
- entity: light.kitchen_main_lights
title: Lights
style:
.: >
#states > * {
margin: -1px 0px !important;
}
ha-card {
background: rgba(120, 200, 255, .1);
background-image: linear-gradient(to bottom, rgba(120,200,255,.1),
rgba(120,200,255,0));
border: 1px solid rgba(120,200,255,.3);
font-variant: small-caps;
zoom: 0.5;
}
.card-header {
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid rgba(120,200,255,.3);
color: rgba(120,200,255,.8);
}
.card-content {
padding-top: 8px;
padding-bottom: 8px;
}
- type: gauge
entity: sensor.bennett_range
unit: mi
theme: iOS Theme
min: 0
max: 200
needle: true
severity:
green: 130
yellow: 85
red: 0
style:
.: >
#states > * {
margin: -1px 0px !important;
}
ha-card {
background: rgba(120, 200, 255, .1);
background-image: linear-gradient(to bottom, rgba(120,200,255,.1),
rgba(120,200,255,0));
border: 1px solid rgba(120,200,255,.3);
font-variant: small-caps;
zoom: 0.5;
}
.card-header {
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid rgba(120,200,255,.3);
color: rgba(120,200,255,.8);
}
.card-content {
padding-top: 8px;
padding-bottom: 8px;
}
title: 'Refrigerator '
The resulting dashboard (on my Mac appears to work)
But on the family hub, it is still large:
Also the loading time of the page is horrible (TIZEN 3.0)
I had mine setup for a year or so using the zoom: 0.5; and worked fine. Recently it seems to be ignoring the zoom command…
Your code looks correct. Anyone else having this issue?
Not yet, but the rollout of updates on these seems kinda random.
I should say I have an older hub Tizen 3
This is apparently an issue with a recent update to the Card-Mod HACS front end add-on. Info is being discussed in the issues section of the GitHub page. Options seem to be restore a previous HA backup from prior to Card-Mod 3.3 being released or wait for the next Card-Mod update.
1 Like
Just a quick question. I see you are using local url to access HA in your browser. Did you try to find a way to cast it to the screen straight?
I was able to cast it flawlessly on nest hub and nest hub max and even the tv but unable to do the same on fridge display. However, I am able to cast other apps like spotify or anything else to spotify.
Please give me a shout if you look in to it and are able to find anything. If it works the cast way then it will be a lot better in terms of performance.
Cheers
Hi, I am totally new to HA - and to yaml/css… I tried on a very simple card - to implement this zoom 0.5 - but without any luck. No errors - but also no change in display size. Not on desktop - not on the family hub. Any idea what is wrong in my code?
views:
- title: Home
cards:
- type: entities
entities:
- entity: sensor.restmull_4_wochig
name: Restmüll
- entity: sensor.bio
- entity: sensor.papier_8_wochig
name: Papier
- entity: sensor.gelbe_sack
- type: entities
entities:
- cover.az_ost
- cover.az_sud
state_color: true
title: Beschattung
card_mod:
style: |
ha-card {
zoom: 0.5;
}
- type: entities
entities:
- sensor.inverter_active_power
- title: Küche
path: kueche
icon: mdi:stove
type: panel
subview: true
badges: []
cards: []
Looks correct to me. Do you have Card Mod installed through HACS?
Yes, i’m displaying it on my family hub using the local URL.
Something has changed recently. My card mod zoom no longer works properly on the fridge now. The adjustments appear to be working when I test in my PC’s browser but on the fridge the font is still huge even when zoom is set to 0.2. Not sure if this changed on the Samsung side or HA side.
Now with the latest Card-Mod update - everything works fine 
Just any idea how to hide the browser link address from tizen OS browser on the fridge? Or is there any chance of a full screen mode? Fully Kiosk unfortunatly is not supported…