Hello,
After several hours of troubleshooting with ChatGPT, I hope to have a bit more luck here because whatever ChatGPT tries, nothing works.
I just started creating a dashboard that is displayed on a tablet that I mounted on the wall, I use 3 main components at the moment, sidebar, bubble-card and weather card.
I made 2 pop-up buttons on the bottom of the screen, there is some gradient effect behind it, the issue is, this effect also goed over the sidebar and weather card, I would like to place the weather card on top of the bubble card so the gradient effect won’t effect weather card.
My code look likes this:
title: Home
sidebar:
width:
mobile: 0
tablet: 20
desktop: 17
digitalClock: true
date: true
style: |
:host {
--sidebar-background: {{ 'black' if states('sun.sun') == 'below_horizon' else 'white' }}!important;
--sidebar-text-color: {{ 'white' if states('sun.sun') == 'below_horizon' else 'black' }}!important;
--face-color: {{ 'black' if states('sun.sun') == 'below_horizon' else 'white' }};
--face-border-color: {{ 'black' if states('sun.sun') == 'below_horizon' else 'white' }};
--clock-hands-color: {{ 'white' if states('sun.sun') == 'below_horizon' else 'black' }};
--clock-seconds-hand-color: #FF4B3E;
--clock-middle-background: {{ 'black' if states('sun.sun') == 'below_horizon' else 'white' }};
--clock-middle-border: {{ 'white' if states('sun.sun') == 'below_horizon' else 'black' }};
}
.digitalClock {
text-align: center;
color: var(--sidebar-text-color)!important;
}
.date {
font-size: 32px;
text-align: center;
color: var(--sidebar-text-color)!important;
}
.sidebarMenu li {
font-weight: 200!important;
background-color: var(--sidebar-background)!important;
color: var(--sidebar-text-color)!important;
}
.sidebarMenu li.active {
font-weight: 400!important;
background-color: var(--sidebar-background)!important;
color: var(--sidebar-text-color)!important;
}
/* Sidebar achtergrond verwijderen */
ha-sidebar {
background: var(--sidebar-background)!important;
opacity: 1!important; /* Voorkomt transparantie */
}
ha-sidebar::before {
background: none!important;
}v
bottomCard:
type: weather-forecast
cardOptions:
name: Soesterberg
show_forecast: true
entity: weather.forecast_thuis
cardStyle: |
:host {
width: 100%;
position: relative;
bottom: 0;
left: 0;
}
ha-card {
font-weight: 200;
padding: none;
width: 110%;
border: none;
overflow: hidden !important;
box-shadow: none !important;
ha-card-border-radius: 0px;
margin-top: -16px;
margin-right: -10px;
margin-left: -10px;
background: var(--sidebar-background)!important;
color: var(--sidebar-text-color)!important;
}
views:
- title: Home
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#dreameRobot'
button_type: name
entity: sensor.dreamebot_x20_pro_plus_status
name: Robot
icon: mdi:robot-vacuum
sections:
- type: grid
cards:
- type: heading
heading: null
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#tuin'
button_type: name
name: Tuin
icon: mdi:flower
- type: custom:bubble-card
card_type: separator
name: Voortuin
- type: custom:bubble-card
card_type: separator
name: Achtertuin
- type: custom:bubble-card
card_type: separator
name: Serre
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#BG'
button_type: name
name: Begane grond
icon: mdi:home-floor-g
sub_button: []
auto_close: '15000'
- type: custom:bubble-card
card_type: separator
name: Woonkamer
- type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.dreamebot_x20_pro_plus_state
name: Robot
icon: mdi:robot-vacuum
show_state: true
sub_button:
- tap_action:
action: call-service
target:
entity_id: vacuum.dreamebot_x20_pro_plus
service: VACUUM.START
show_state: false
show_last_changed: false
show_attribute: false
icon: mdi:play
name: start
show_name: false
- entity: sensor.dreamebot_x20_pro_plus_state
name: pause
icon: mdi:pause
tap_action:
action: call-service
target:
entity_id: vacuum.dreamebot_x20_pro_plus
service: vacuum.pause
- name: home
icon: mdi:home
tap_action:
action: call-service
target:
entity_id: vacuum.dreamebot_x20_pro_plus
service: vacuum.return_to_base
- entity: switch.dreamebot_x20_pro_plus_child_lock
tap_action:
action: toggle
target:
entity_id: vacuum.dreamebot_x20_pro_plus
service: VACUUM.RETURN_TO_BASE
name: lock
- type: custom:bubble-card
card_type: horizontal-buttons-stack
1_link: '#BG'
1_name: BG
highlight_current_view: false
1_icon: mdi:home-floor-g
2_link: '#tuin'
2_name: Tuin
2_icon: mdi:flower
subview: true
kiosk_mode:
non_admin_settings:
kiosk: true
Here are some picture how it looks at the moment:
Whatever ChatGPT tries, the card will disappear when it tries to fix it. Who knows the answer to this issue?