thanks you for reply and help
In the following code, is it possible to use JS and make an if-statement for vacuum.roborock_q5_pro === ‘docked’ to somehow make it inactive unless state is changed?
- type: custom:button-card
entity: sensor.roborock_q5_pro_nuvarande_rum
name: Vardagsrum
template:
- base_livingroom
- icon_livingroom
tap_action:
action: call-service
service: vacuum.send_command
data:
command: app_segment_clean
params:
- 16
entity_id: vacuum.roborock_q5_pro
Edit: Made a hack and set up an additional room in the Roborock app for the space where the dock is, not a pretty hack but atleast it works for now.
You can be inspired like my vacuum button. When it’s in the cleaning state. Then the name is renamed to cleaning, and the state is dynamic according to the room it is in.
Im trying to set up the sidebar, but I cannot get the weather to work… I get a Null. Is there any fix or am I missing something?
Weather entity no longer has forecast as an attribute. You have to create a separate sensor for forecast…
hello i have a error gain please help me i want to use this dashboard on the phone it gave me this error which addons for integration can i download
Just to close the loop on this. It was my own error. I had another template with a name of test.yaml that I forgot about. The name at the top of the actual code was “circle”, so I was getting conflicts. I removed it and everything is working the way I want now.
I have been truing to install this dashboard for a couple of days now. Only to things I cannot get to work:
1: The weather, I have no idea how to create a forecast template. Also not that important.
2: The conditional media card. When my plex client is playing conditional card does not change to the player, stays blank. Also, i cannot get plex_recently_added to connect to my Plex server, I get 401 code.
Edit: I managed to get Media card to work, plex network settings.
Hello everybody. Today I wanted to use a Nexus 7 2013 7" tablet and apply the same design that I have on the Samsung A7 10" tablet. However, how do I make all the icons visible on this 7" tablet? I’ve tried changing values but without success… even if they become slightly smaller it doesn’t matter… Any help? Thanks
views:
- type: custom:grid-layout
title: Home
layout:
#default
margin: 0
grid-gap: var(--custom-layout-card-padding)
# grid-gap: 2.7vw
grid-template-columns: repeat(4, 1fr) 0
grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar . . ."
"sidebar quarto cozinha ."
"sidebar sala segurança ."
"sidebar footer footer ."
mediaquery:
#phone
"(max-width: 800px)":
grid-gap: calc(var(--custom-layout-card-padding) * 1.7)
grid-template-columns: 0 repeat(2, 1fr) 0
grid-template-rows: 0 repeat(5, fit-content(100%)) 0fr
grid-template-areas: |
". . . ."
". . . ."
". quarto cozinha ."
". sala segurança ."
". footer footer ."
". . . ."
#portrait
"(max-width: 1200px)":
grid-gap: var(--custom-layout-card-padding)
# grid-gap: 2.7vw
grid-template-columns: repeat(3, 1fr) 0
grid-template-rows: 0 repeat(3, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar . . ."
"sidebar quarto cozinha ."
"sidebar sala segurança ."
"sidebar footer footer ."
"sidebar . . ."
cards:
@VietNgoc hello I like your dashboard! I try to test your currently_playing template (tpl_media.yaml) but don’t find a file (overlay.svg) on your repo :
media_card_speaker:
card:
type: picture-elements
image: /local/img/svg/overlay.svg
card_mod:
style: |
ha-card {
–ha-card-background: none !important;
}
Can you share the file or tell me where i can find this file ?
edit :
I think ive got my answer : Touchy - Touch friendly media player card (combination of cards) - #79 by ASNNetworks
hi i have a problem i want to change my dashboard of the home assistant it show me this problem it do this please look this video help me thanks everyone
has anybody used css-swipe-card with this dashboard. when i use it i get the following
bottom is cut off, and font style of room name is different.
why doesnt the motionSensor update on value change. I’ve added triggers-update: all. and still no go. its update only with refresh page
- type: custom:button-card
variables:
tempsensor: sensor.c3_aio_temperature
humidsensor: sensor.c3_aio_humidity
motionSensor: switch.bathroom_fan_upstairs
fontSize: 1.4rem
motionIconSize: 16px
triggers_update:
- '[[[ return variables.motionSensor; ]]]'
entity: switch.bathroom_fan_upstairs
name: Light
template:
- lightt
- icon_spot
state_display: >
[[[
function findFirstH1Above(element) {
let currentElement = element;
while (currentElement) {
if (currentElement.shadowRoot) {
const shadowH1 = currentElement.shadowRoot.querySelector('h1');
if (shadowH1) return shadowH1;
}
const lightH1 = currentElement.querySelector('h1');
if (lightH1) return lightH1;
currentElement = currentElement.getRootNode().host;
if (!currentElement) break;
}
return null;
}
let parentElement = this.getRootNode().host;
let headerTitle = findFirstH1Above(parentElement);
if (headerTitle && !headerTitle.dataset.processed) {
const tempSensor = parseFloat(states[variables.tempsensor]?.state);
const humidSensor = parseFloat(states[variables.humidsensor]?.state);
const positionSensor = parseFloat(states[variables.positionSensor]?.state);
const motionState = states[variables.motionSensor]?.state;
const motionIcon = motionState === 'on' ? 'mdi:motion-sensor' : 'mdi:motion-sensor-off';
const fontSize = variables.fontSize || '14px';
const motionIconSize = variables.motionIconSize || '20px';
let currentTitle = headerTitle.innerText;
headerTitle.style.display = 'flex';
headerTitle.style.width = '100%';
headerTitle.style.justifyContent = 'space-between';
headerTitle.style.alignItems = 'center';
headerTitle.style.paddingInline = 'inherit';
const formattedTemp = !isNaN(tempSensor) ?
(tempSensor % 1 === 0 ? tempSensor.toFixed(0) : tempSensor.toFixed(1)).replace('.', ',') + '°C' : '';
const formattedHumid = !isNaN(humidSensor) ? humidSensor.toFixed(0) + '%' : '';
const formattedPosition = !isNaN(positionSensor) ? positionSensor.toFixed(0) + '%' : '';
let sensorValues = [];
if (formattedTemp) sensorValues.push(formattedTemp);
if (formattedHumid) sensorValues.push(formattedHumid);
if (formattedPosition) sensorValues.push(formattedPosition);
const sensorDisplay = sensorValues.join(' / ');
const motionIconHTML = states[variables.motionSensor]
? `<ha-icon icon="${motionIcon}" style="margin-left: 5px; --mdc-icon-size: ${motionIconSize};"></ha-icon>`
: '';
headerTitle.innerHTML = `
<div>${currentTitle}</div>
<div style="font-size: ${fontSize}; display: flex; align-items: center;">
${sensorDisplay}
${motionIconHTML}
</div>
`;
headerTitle.dataset.processed = true;
}
]]]
I know this is an old post. But I remembered it when I recently updated the update install template. If you don’t have a solution yet, I have an update install button like this…
1 Like
nice!
thanks for sharing 
Does the new update 2025.5.1 break this theme?
Partially, yes. The custom font no longer seems to work, and the light icon colors are affected as well. I haven’t had time to look into it in detail yet, though.
I’ve no idea how long this has been happening, or if it’s really an ‘issue’ as such, but while reviewing my long standing dashboard based upon this thread, I noticed some errors happening in Dev Tools in my browser. When clicking any of my custom button cards on my dashboard, which load a popup, everything works fine, however when clicking the ‘X’ to close my popup, an error is generated twice in the browser console:
card-mod.js:1 Uncaught (in promise) TypeError: Failed to execute ‘observe’ on ‘MutationObserver’: parameter 1 is not of type ‘Node’.
at s. (card-mod.js:1:51355)
at d (card-mod.js:1:2813)
at Generator. (card-mod.js:1:4159)
at Generator.next (card-mod.js:1:3242)
at y (card-mod.js:1:8728)
at a (card-mod.js:1:8931)
at card-mod.js:1:8990
at new Promise ()
at s. (card-mod.js:1:8871)
at s. (card-mod.js:1:51503)
This only happens on pop up’s that I have created and styled. It doesn’t happen when using the tap_action of the custom button card to simply launch the default more-info window, and then closing it with the ‘X’ button. Any ideas how this can be resolved? It may not be worth digging into seeing as my dashboard behaves correctly on the surface, but just curious, as ‘an error is an error’
Hi, I also had this error. I guess you also have a different theme for the dashboard than for the HA system. I found that there is a conflict in the styles for browser mod popup and card_mod. I found the solution by using card_mod styles in the content element. Browser mod styles config is only for css variables… something like this…
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Viet Ngoc
style: >
--popup-max-width: 400px;
content:
type: custom:mod-card
card_mod: !include ../snippets/style-person-popup.yaml
card:
type: vertical-stack
cards:
- type: entities
Take a look at my popup configuration.
1 Like