For my horizontal smartphone dashboard I have this custom side navigation which is displayed above the entire content:
- type: custom:mod-card
card_mod:
style: |
ha-card {
background: black;
border-radius: 100px;
position: fixed;
left: 10px;
top: 50%;
transform: translateY(-50%);
padding: 15px 10px;
z-index: 1;
width: 70px;
box-shadow: 0 0 40px #000000 !important;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
card:
type: vertical-stack
cards:
- type: custom:button-card
icon: mdi:home
tap_action:
action: navigate
navigation_path: /dash-base/home
styles:
icon:
- width: 30px
- color: '#E1BA2F'
img_cell:
- width: 50px
- height: 50px
- justify-content: center
card:
- background: '#222'
- padding: 0
- border: 0
- border-radius: 100px
- width: 50px
- height: 50px
- display: flex
- align-items: center
- justify-content: center
- type: custom:button-card
icon: mdi:printer-3d
tap_action:
action: navigate
navigation_path: /dash-base/base-2
styles:
icon:
- width: 30px
- color: grey
img_cell:
- width: 50px
- height: 50px
- justify-content: center
card:
- padding: 0
- border: 0
- border-radius: 100px
- background: none
- width: 50px
- height: 50px
- display: flex
- align-items: center
- justify-content: center
- type: custom:button-card
icon: mdi:power
tap_action:
action: navigate
navigation_path: /dash-base/base-3
styles:
icon:
- width: 30px
- color: grey
img_cell:
- width: 50px
- height: 50px
- justify-content: center
card:
- padding: 0
- border: 0
- border-radius: 100px
- background: none
- width: 50px
- height: 50px
- display: flex
- align-items: center
- justify-content: center
How can I just move the entire underlaying content like 100 px to the right?
Add margin? Add invisible 100px section?
You’ll need to provide at least the weather card code with the sidebar code you already posted.
Here is the full code:
kiosk_mode:
kiosk: '[[[ is_state("input_boolean.kiosk_base", "on") ]]]'
views:
- title: Home
sections:
- type: grid
cards:
- show_current: true
show_forecast: true
type: weather-forecast
entity: weather.family_home
forecast_type: daily
name: Lübben
- type: custom:stack-in-card
variables:
active_color: green
inactive_color: red
cards:
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- show_name: false
type: custom:button-card
entity: binary_sensor.rack_pc_boot_pc5_led
icon: mdi:microsoft-windows
tap_action:
action: call-service
service: script.basement_p1
target: {}
styles:
icon:
- color: |
[[[
if (entity.state == "on") return states["input_text.active_color"].state;
return states["input_text.inactive_color"] ? states["input_text.inactive_color"].state : "red";
]]]
card:
- height: 60px
- border-color: >-
[[[ return
states['input_text.active_color'].state ]]]
- border-width: |
[[[
if (states["input_text.basement_active_pc"].state == "Workstation") return "3px";
return "0px";
]]]
card_mod:
style: |
ha-card {
background: #262626 !important;
border-radius: 10px !important;
}
- show_name: false
show_icon: true
type: custom:button-card
entity: switch.wol_nuc
tap_action:
action: call-service
service: script.basement_p3
target: {}
icon: mdi:set-top-box
styles:
icon:
- color: |
[[[
if (entity.state == "on") return states["input_text.active_color"].state;
return states["input_text.inactive_color"] ? states["input_text.inactive_color"].state : "red";
]]]
card:
- height: 60px
- border-color: >-
[[[ return
states['input_text.active_color'].state ]]]
- border-width: |
[[[
if (states["input_text.basement_active_pc"].state == "Dad") return "3px";
return "0px";
]]]
card_mod:
style: |
ha-card {
background: #262626 !important;
border-radius: 10px !important;
}
- show_name: false
show_icon: true
type: custom:button-card
entity: binary_sensor.mac_ethernet
tap_action:
action: call-service
service: script.office_p2
target: {}
icon: mdi:apple
styles:
icon:
- color: |
[[[
if (entity.state == "on") return states["input_text.active_color"].state;
return states["input_text.inactive_color"] ? states["input_text.inactive_color"].state : "red";
]]]
card:
- height: 60px
- border-color: >-
[[[ return
states['input_text.active_color'].state ]]]
- border-width: |
[[[
if (states["input_text.office_active_pc"].state == "Mac") return "3px";
return "0px";
]]]
card_mod:
style: |
ha-card {
background: #262626 !important;
border-radius: 10px !important;
}
- show_name: false
show_icon: true
type: custom:button-card
entity: switch.wol_hp
tap_action:
action: call-service
service: script.office_p4
target: {}
icon: mdi:set-top-box
styles:
icon:
- color: |
[[[
if (entity.state == "on") return states["input_text.active_color"].state;
return states["input_text.inactive_color"] ? states["input_text.inactive_color"].state : "red";
]]]
card:
- height: 60px
- border-color: >-
[[[ return
states['input_text.active_color'].state ]]]
- border-width: |
[[[
if (states["input_text.office_active_pc"].state == "Mom") return "3px";
return "0px";
]]]
card_mod:
style: |
ha-card {
background: #262626 !important;
border-radius: 10px !important;
}
card_mod:
style: |
ha-card {
padding-bottom: 10px;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
}
column_span: 1
- type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-title-card
title: '{{ now().strftime(''%H:%M'') }}'
card_mod:
style: |
ha-card {
margin-top: -10px;
margin-left: 5px;
}
- type: custom:mushroom-chips-card
chips:
- type: action
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.kiosk_base
icon: mdi:arrow-expand-vertical
card_mod:
style: |
ha-card {
#padding-top: 10px;
#padding-right: 20px;
color: #555555 !important;
border-radius: 10px !important;
background: #000000 !important;
}
- type: entity
entity: switch.cmf_phone_1_office_screen
icon: mdi:card-bulleted-off-outline
use_entity_picture: false
content_info: name
tap_action:
action: call-service
service: switch.turn_off
service_data:
entity_id: switch.cmf_phone_1_office_screen
name: 'OFF'
card_mod:
style: |
ha-card {
#padding-top: 10px;
#padding-right: 20px;
border-radius: 10px !important;
background: #000000 !important;
color: #F55555 !important;
--icon-color: #F55555;
--text-color: #F55555;
}
alignment: end
card_mod:
style: |
ha-card {
padding-top: 10px;
padding-right: 15px;
border-radius: 10px !important;
}
- type: horizontal-stack
cards:
- type: custom:button-card
show_name: false
entity: binary_sensor.rack_pc_boot_pc5_led
icon: mdi:microsoft-windows
tap_action:
action: call-service
service: script.basement_p1
target: {}
styles:
icon:
- color: |
[[[
if (entity.state == "on") return states["input_text.active_color"].state;
return states["input_text.inactive_color"] ? states["input_text.inactive_color"].state : "red";
]]]
card:
- height: 100px
- font-size: 25px
- show_name: false
show_icon: true
type: custom:button-card
tap_action:
action: call-service
service: pi_hole.disable
data:
duration: '00:15'
target:
device_id: bb45d600a17b1749e4c7ea55e3b49c92
entity: switch.docker_pihole
name: piHole
icon: fab:raspberry-pi
styles:
card:
- height: 100px
- font-size: 25px
icon:
- height: 50%
- type: conditional
conditions:
- condition: state
entity: switch.office_desk_controller_led_relay
state: 'on'
card:
show_name: false
show_icon: true
type: custom:button-card
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.office_off
name: Warm
icon: mdi:fire
styles:
card:
- height: 100px
- font-size: 25px
icon:
- color: '#E1BA2F'
- type: conditional
conditions:
- condition: state
entity: switch.office_desk_controller_led_relay
state: 'off'
card:
show_name: false
show_icon: true
type: custom:button-card
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.office_warm
name: Warm
icon: mdi:fire
styles:
card:
- height: 100px
- font-size: 25px
icon:
- color: '#44739E'
grid_options:
columns: 12
rows: 2
column_span: 1
- type: custom:mod-card
card_mod:
style: |
ha-card {
background: black;
border-radius: 100px;
position: fixed;
left: 10px;
top: 50%;
transform: translateY(-50%);
padding: 15px 10px;
z-index: 1;
width: 70px;
box-shadow: 0 0 40px #000000 !important;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
card:
type: vertical-stack
cards:
- type: custom:button-card
icon: mdi:home
tap_action:
action: navigate
navigation_path: /dash-base/home
styles:
icon:
- width: 30px
- color: '#E1BA2F'
img_cell:
- width: 50px
- height: 50px
- justify-content: center
card:
- background: '#222'
- padding: 0
- border: 0
- border-radius: 100px
- width: 50px
- height: 50px
- display: flex
- align-items: center
- justify-content: center
- type: custom:button-card
icon: mdi:printer-3d
tap_action:
action: navigate
navigation_path: /dash-base/base-2
styles:
icon:
- width: 30px
- color: grey
img_cell:
- width: 50px
- height: 50px
- justify-content: center
card:
- padding: 0
- border: 0
- border-radius: 100px
- background: none
- width: 50px
- height: 50px
- display: flex
- align-items: center
- justify-content: center
- type: custom:button-card
icon: mdi:power
tap_action:
action: navigate
navigation_path: /dash-base/base-3
styles:
icon:
- width: 30px
- color: grey
img_cell:
- width: 50px
- height: 50px
- justify-content: center
card:
- padding: 0
- border: 0
- border-radius: 100px
- background: none
- width: 50px
- height: 50px
- display: flex
- align-items: center
- justify-content: center
type: sections
max_columns: 3
icon: mdi:home
cards: []
path: home
background:
image: /api/image/serve/a2d9560843b2767a6f9dc525a6b3af34/original
- type: sections
max_columns: 3
title: Test
path: base-2
sections:
- type: grid
cards:
- type: heading
heading: New section
- type: custom:mod-card
card_mod:
style: |
ha-card {
background: black;
border-radius: 100px;
position: fixed;
left: 10px;
top: 50%;
transform: translateY(-50%);
padding: 15px 10px;
z-index: 1;
width: 70px;
box-shadow: 0 0 40px #000000 !important;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
card:
type: vertical-stack
cards:
- type: custom:button-card
icon: mdi:home
tap_action:
action: navigate
navigation_path: /dash-base/home
styles:
icon:
- width: 30px
- color: grey
img_cell:
- width: 50px
- height: 50px
- justify-content: center
card:
- padding: 0
- border: 0
- border-radius: 100px
- background: none
- width: 50px
- height: 50px
- display: flex
- align-items: center
- justify-content: center
- type: custom:button-card
icon: mdi:printer-3d
tap_action:
action: navigate
navigation_path: /dash-base/base-2
styles:
icon:
- width: 30px
- color: '#E1BA2F'
img_cell:
- width: 50px
- height: 50px
- justify-content: center
card:
- background: '#222'
- padding: 0
- border: 0
- border-radius: 100px
- width: 50px
- height: 50px
- display: flex
- align-items: center
- justify-content: center
- type: custom:button-card
icon: mdi:power
tap_action:
action: navigate
navigation_path: /dash-base/base-3
styles:
icon:
- width: 30px
- color: grey
img_cell:
- width: 50px
- height: 50px
- justify-content: center
card:
- padding: 0
- border: 0
- border-radius: 100px
- background: none
- width: 50px
- height: 50px
- display: flex
- align-items: center
- justify-content: center
cards: []
background:
image: /api/image/serve/a2d9560843b2767a6f9dc525a6b3af34/original
Thought you may have had Kiosk Mode installed
What did work was to add this to the weather card as well as the one below:
card_mod:
style: |
ha-card {
margin-left: 100px !important;
}
But I was looking for a solution were I do not have to add this to each element in the first section.
dcapslock
October 25, 2025, 12:34pm
6
Card-mod v4 beta allows for styling grid sections. Also with v4 cards like vertical stack which use hui-card now no longer need mod-card so you should be able to clean up your config a bit
2 Likes
I will look out for that!
1 Like
@LiQuid_cOOled Did you come up with a way to do this?
That info helps!