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.
