sorry, i forgot to about the update to them.yaml, (had this in there from a long time ago)
find this section
#################################################
# #
# SIDEBAR VERTICAL-STACK #
# #
#################################################
grid-layout$hui-vertical-stack-card$: |
#root {
background-color: rgba(0, 0, 0, 0.06);
border-radius: 0;
border-right: 0.1vw solid rgba(58, 69, 73, 0.2);
min-height: 100vh;
}
/* phone */
@media screen and (max-width: 800px) {
#root {
background-color: rgba(0,0,0,0);
border-right: none;
min-height: 100%;
margin-left: -0.8%;
margin-bottom: -6%;
}
}
add in display: none !important like so
#################################################
# #
# SIDEBAR VERTICAL-STACK #
# #
#################################################
grid-layout$hui-vertical-stack-card$: |
#root {
background-color: rgba(0, 0, 0, 0.06);
border-radius: 0;
justify-content: space-between;
border-right: 0.1vw solid rgba(58, 69, 73, 0.2);
min-height: 100vh;
}
/* phone */
@media screen and (max-width: 800px) {
#root {
display: none !important;
background-color: rgba(0,0,0,0);
border-right: none;
min-height: 100%;
margin-left: -0.8%;
margin-bottom: -6%;
}
}
I can also see that your grid is not correct, this might work
#phone
"(max-width: 800px)":
grid-gap: calc(var(--custom-layout-card-padding) * 1.7)
grid-template-columns: 0 1fr 0fr
grid-template-rows: 0 repeat(6, fit-content(100%)) 0fr
grid-template-areas: |
". . ."
". cuartos ."
". comedor ."
". extras ."
". encasa ."
". media ."
". entretenimiento ."
". . ."
the . are still columns so above is 3 columns and 8 rows the top and bottom rows should be 0 and the first and last columns should be 0
1 Like
what results do you get when you hit the Plex api?
the Plex url is at the bottom of this page , can you show me the results you get back?
# Troubleshooting:
### Follow the instructions below before posting an issue or asking for help on the forums. Be sure to indicate that you tried these steps and report your findings.
## Card:
* Whitelist your HA page in your adblocker, some ad blocking extensions are over cautious and will block any image with certain words in the url, like "banner".
* Make sure the card is not contained inside another card in your ui-lovelace.yaml. This will help rule out issues or conflicts with the containing card.
* Clear your browser's cache and make sure you're editing the version number in the resources section of ui-lovelace.yaml if you don't use HACS.
* Check that you installed the custom components & they are working correctly (more on components below). This card only works with the custom components linked at the top of the [readme](https://github.com/custom-cards/upcoming-media-card/blob/master/README.md).
## Components:
* Check that the components are reporting data. You can find this in your HA sidebar under developer tools. Click
the icon that looks like this <> or select "states" at the top. To help with troubleshooting always mention what you see here next to your sensor ("sensor.sonarr_upcoming_media", for example).
* "sensor.sonarr_upcoming" & "sensor.radarr_upcoming" are not the components for this card, they are the default HA components. The Sonarr and Radarr components for this card end in "media" and the links for them are in the [readme](https://github.com/custom-cards/upcoming-media-card/blob/master/README.md).
show original
Giblet
October 3, 2022, 4:11pm
3890
I have tested these commands, and they output a proper XML container
Rumlik
October 3, 2022, 7:45pm
3891
Hey there,
Thank you very much to all the smart souls.
karma
October 3, 2022, 8:54pm
3892
Hello everybody.@Mattias_Persson :
active: >
<b>
{% set lights = [
states.light.vardagsrum_tv,
states.light.badrum_vask_1,
states.switch.deltaco_sh_p01_socket
] %}
{% set devices = [
states.switch.imac,
states.switch.ps5_635_power,
states.switch.gosund_monitors_switch,
states.climate.ac
] %}
{% set lights_on = lights | selectattr('state','eq','on') | list %}
{% set lights_name = lights | selectattr('state','eq','on') | map(attribute='name') | join(', ') %}
{% set devices_on = devices | selectattr('state','search','(on|cool|fan_only|playing)') | list %}
{% set devices_name = devices_on | map(attribute='name') | join(', ') %}
{% if (lights_on | length == 0) and (devices_on | length > 0) %}
{{ devices_name | regex_replace(',([^,]*)$',' och\\1') }} är på
{% elif (lights_on | length == 1) and (devices_on | length == 1) %}
{{ lights_name }} och {{devices_name }} är på
{% elif (lights_on | length == 1) and (devices_on | length > 1) %}
{{ lights_name }}, {{ devices_name | regex_replace(',([^,]*)$',' och\\1') }} är på
{% elif (lights_on | length > 1) and (devices_on | length == 1) %}
{{ lights_on | length }} lampor och {{ devices_name }} är på
{% elif (lights_on | length > 1) and (devices_on | length > 1) %}
{{ lights_on | length }} lampor, {{ devices_name | regex_replace(',([^,]*)$',' och\\1') }} är på
{% elif (lights_on | length == 1) and (devices_on | length == 0) %}
{{ lights_name }} är på
{% elif (lights_on | length > 1) and (devices_on | length == 0) %}
{{ lights_on | length }} lampor är på
{% else %}
<font color='#6a7377'>Allt är avstängt</font>
{% endif %}
</b>
That is, I do not want the name of the lights on to appear, but in numbers.
Thanks for the help. It looks much better but underneath you can see part of a card that shouldn’t be there. taking into account that the configuration does not contemplate it.
@Giblet the link that you sent is broken, no page loads. can you see in the results from Plex anything about the recently added content? see this screenshot, correct values
@Pablo_Gustavo_Fiscel CSS Grid Layout CSS Media Queries
Giblet
October 4, 2022, 3:43pm
3895
It shows er perfectly fine xml, with some items I have recently added, looks exactly as I would expect
You’d have to replace the title with a custom:button-card
Ok I had a stab at it anyway, and I found a way to do it
It’s not perfect, but maybe someone can help make it better.
For my resolution it’s very close to Mattias’ work, just a few pixels different, but maybe for other resolutions it won’t work as well
EDIT: I changed some things, and it look pretty much perfect now
EDIT2: Ok, so let’s make a template, and show how to add a lights group
EDIT3: An important addendum, if you want to replace the title of a swipe-card, your browser will go bana…
this is not my code and you didn’t post that partreturn entity.state.length > 0 ? "block" : "none"
track it down and remove that line
I’m trying to figure out why you’d want that but here:
type: button
...
card_mod:
style:
ha-state-icon$ha-svg-icon$: |
svg > g > path {
d: path("M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z") !important;
}
1 Like
Yes, but the title would be static. Name it something generic like “Rooms”
remove lights_name and devices_name
there’s many conditions to parse it nicer but if you want to keep it simple
{{ lights_on | length }} lights on and {{ devices_on | length }} devices are connected
I can have a look too if you pm me
Hello people,
here is my code:
- type: grid
title: Wohnzimmer
view_layout:
grid-area: wohnzimmer
columns: 2
cards:
- type: custom:button-card
entity: light.group_wohnzimmer
name: Lampen
template:
- light
- icon_hue
- type: custom:button-card
entity: light.stehlampe_wohnzimmer
name: Stehlampe
template:
- light
- icon_shade
- type: custom:button-card
entity: media_player.philipstv_2
name: TV
# old state
# state_display: >
# [[[
# if (states['media_player.tv_wohnzimmer_3'].state === 'playing') {
# return states['media_player.tv_wohnzimmer_3'].attributes.app_name;
# }
# if (states['media_player.tv_wohnzimmer_3'].state === 'idle') {
# return states['media_player.tv_wohnzimmer_3'].attributes.media_title;
# }
# ]]]
state_display: >
[[[
if (states['media_player.tv_wohnzimmer_3'].state === 'playing') {
return `
<div style='display: flex;
padding: 0px 5px 0px 5px;
align-items: center;
background: transparent;
marquee-speed: slow
animation: marquee 20s linear infinite;'>
<marquee>
<span>
${states['media_player.tv_wohnzimmer_3'].attributes.app_name} 
</span>
</marquee>
</div>
`;
}
if (states['media_player.tv_wohnzimmer_3'].state === 'idle') {
return `
<div style='display: flex;
padding: 0px 5px 0px 5px;
align-items: center;
background: transparent;
marquee-speed: slow;'>
<marquee>
<span>
${states['media_player.tv_wohnzimmer_3'].attributes.media_title} 
</span>
</marquee>
</div>
`;
}
]]]
custom_fields:
c1: |
[[[
if (states['media_player.tv_wohnzimmer_3'].attributes.app_name === 'YouTube') {
return "<ha-icon icon='mdi:youtube'></ha-icon>";
}
if (states['media_player.tv_wohnzimmer_3'].attributes.app_name === 'Netflix') {
return "<ha-icon icon='mdi:netflix'></ha-icon>";
}
if (states['media_player.tv_wohnzimmer_3'].attributes.app_name === 'Disney+') {
return `
<svg fill="#000000" viewBox="0 0 24 24">
<path d="M10.896 13.837c.013.002.016.002.029.004.216.029.429.068.591.141.151.067.239.151.32.301.123.228.131.546.02.788-.083.18-.264.33-.43.41-.172.084-.342.123-.537.146-.34.037-.708-.033-1.015-.181-.181-.089-.403-.241-.514-.437-.082-.144-.079-.331.02-.468.159-.218.5-.266.757-.257.196.008.548.068.734.134.052.019.242.093.275.127.023.024.038.058.028.09-.042.13-.358.198-.449.212-.244.037-.371-.055-.648-.165-.069-.027-.161-.057-.231-.063-.126-.012-.278.023-.302.161-.012.071.071.137.135.165.149.064.27.087.416.089.433.007.919-.064 1.273-.315.048-.035.096-.085.097-.149.002-.129-.224-.208-.224-.208-.238-.099-.679-.148-.906-.166-.238-.021-.613-.051-.703-.065-.093-.013-.193-.032-.274-.068-.081-.036-.159-.118-.183-.208-.041-.163.011-.362.102-.492.237-.34.791-.469 1.204-.52.401-.05 1.048-.049 1.442.16.061.033.092.063.079.128-.026.122-.117.2-.228.235-.117.037-.358.052-.463.058-.474.027-1.048.013-1.499.136-.035.01-.097.027-.116.049-.071.077.131.099.175.107.013.003.015.004.029.005L10.896 13.837M8.074 11.722c0 0 .077-.116.142-.204.118-.16.331-.382.491-.519.049-.042.107-.089.107-.089s-.091.009-.142.02c-.122.024-.3.142-.389.219-.147.126-.309.331-.236.513C8.057 11.688 8.074 11.722 8.074 11.722M8.892 11.941c.232-.016.45-.083.653-.195.199-.111.491-.328.461-.583-.009-.083-.063-.145-.131-.174-.089-.038-.135-.032-.248.001-.082.024-.119.039-.197.083-.228.133-.551.416-.727.642-.041.053-.082.113-.114.154-.02.025-.036.048-.034.055C8.561 11.95 8.801 11.947 8.892 11.941M8.3 12.376c-.024.025-.049.087-.076.131-.014.024-.04.054-.057.066-.061.044-.112.047-.17-.005-.082-.072-.129-.185-.133-.294-.002-.048.006-.1-.003-.14-.015-.068-.083-.137-.119-.202-.043-.076-.078-.209-.082-.295-.015-.268.126-.514.31-.709.185-.197.426-.36.689-.471.248-.105.612-.176.885-.081.089.03.212.106.275.185.013.016.024.034.037.043.012.008.044.011.069.015.087.015.212.081.263.125.103.089.159.173.185.296.052.247-.09.519-.253.684-.278.284-.552.484-.908.623-.156.061-.399.118-.576.102-.055-.005-.112-.019-.165-.023-.027-.002-.127-.028-.138-.035C8.32 12.381 8.303 12.372 8.3 12.376M8.617 12.924c.011.002.028.007.042.012.125.047.176.163.207.289.071.294.101.945.113 1.2C8.988 14.617 8.992 14.805 9 14.994c.007.16.02.373-.014.523-.012.054-.048.117-.1.149-.059.038-.194.041-.268.025-.182-.038-.242-.155-.268-.335-.062-.431-.032-1.276.004-1.632.012-.118.056-.495.118-.653C8.495 13.017 8.539 12.909 8.617 12.924M3.067 13.641c0 0-.272.019-.458.04-.238.026-.685.103-.942.195-.077.028-.234.093-.248.173-.014.082.037.147.094.214.033.039.219.218.271.261.219.183.663.465.99.601.112.046.298.113.298.113s-.014-.529-.011-1.05C3.061 13.913 3.067 13.641 3.067 13.641M8.046 13.851c.016.142-.021.411-.027.446-.012.082-.073.27-.083.293-.05.115-.099.208-.151.302-.089.16-.301.414-.426.523-.467.404-1.191.634-1.812.71-.421.051-.905.043-1.351-.039-.154-.028-.382-.081-.382-.081s.001.091-.007.156c-.004.029-.026.107-.038.132-.032.067-.086.102-.163.116-.094.017-.193.023-.279-.014-.142-.06-.193-.192-.218-.345-.02-.122-.041-.335-.041-.335s-.106-.05-.195-.094c-.272-.134-.53-.296-.756-.463-.063-.047-.331-.272-.391-.328-.166-.158-.316-.315-.43-.517-.089-.158-.114-.297-.047-.464.093-.233.426-.408.655-.508.168-.074.689-.244.905-.276.102-.015.261-.043.271-.049.004-.003.007-.006.01-.009C3.094 13 3.103 12.77 3.101 12.686c-.002-.083.061-.627.082-.742.011-.062.058-.302.106-.365.031-.042.087-.039.132-.011.248.154.324.69.342.962.011.166.017.416.017.416s.285-.008.46-.003c.17.004.358.031.534.059.226.036.667.132.92.261.208.106.403.283.466.472.059.173.05.292-.039.448-.1.176-.29.307-.483.317-.057.003-.273-.025-.34-.077-.026-.02-.025-.057-.006-.083C5.299 14.33 5.4 14.277 5.46 14.245c.03-.016.055-.034.078-.055.049-.044.094-.092.089-.148-.007-.073-.084-.118-.158-.147-.345-.137-1.035-.251-1.368-.271-.13-.008-.316-.014-.316-.014l.039 1.839c0 0 .153.029.274.049.069.011.363.037.441.039.594.016 1.258-.038 1.803-.295C6.583 15.13 6.802 14.99 6.969 14.8c.219-.251.334-.595.304-.955-.033-.392-.309-.858-.53-1.142-.583-.749-1.582-1.366-2.46-1.727-.897-.369-1.784-.581-2.736-.616-.245-.009-.781.003-1.051.078-.039.011-.078.024-.113.032-.028.007-.073.026-.085.036-.007.005-.014.013-.014.013s.017.009.033.016c.029.013.149.02.212.031.056.011.114.04.137.081.022.039.025.07-.002.102-.061.075-.292.062-.394.046-.106-.017-.237-.049-.261-.141-.028-.108.023-.214.079-.313.112-.196.272-.298.506-.362.333-.092.752-.155 1.067-.167.711-.027 1.384.097 2.072.307.394.119.91.319 1.288.501.271.131.698.371.938.528.076.05.518.375.587.433.143.117.331.286.467.421.263.261.59.66.749.977.038.076.068.151.117.239.017.03.09.21.102.263.012.052.029.127.032.13C8.015 13.637 8.048 13.791 8.046 13.851M16.982 13.444c-.333.077-1.208.119-1.208.119l-.11.346c0 0 .437-.037.756-.004 0 0 .103-.012.115.117.004.12-.01.249-.01.249s-.007.078-.117.098c-.12.02-.943.052-.943.052l-.133.451c0 0-.05.104.061.074.103-.028.965-.189 1.078-.166.12.03.254.19.215.337-.046.181-.906.73-1.43.692 0 0-.275.018-.508-.354-.217-.354.082-1.025.082-1.025s-.137-.313-.038-.419c0 0 .059-.054.231-.066l.211-.436c0 0-.24.017-.383-.16-.133-.168-.144-.245-.042-.291.109-.054 1.11-.236 1.798-.213 0 0 .239-.023.447.392C17.052 13.236 17.152 13.404 16.982 13.444M14.392 15.122c-.088.208-.321.429-.611.291-.286-.138-.741-1.07-.741-1.07s-.173-.347-.206-.338c0 0-.037-.068-.06.312-.024.378.005 1.115-.146 1.231-.143.116-.316.07-.406-.066-.082-.134-.115-.452-.071-1.011.052-.56.182-1.156.349-1.341.166-.184.299-.05.351-.002 0 0 .222.201.588.792l.065.109c0 0 .333.558.367.557 0 0 .027.026.051.007.035-.01.021-.189.021-.189s-.069-.608-.373-1.638c0 0-.046-.128-.015-.249.031-.122.153-.065.153-.065s.47.237.699 1.002C14.634 14.222 14.482 14.913 14.392 15.122M19.455 14.664c-.214.374-.819 1.156-1.622.971-.265.643-.488 1.294-.616 2.268 0 0-.028.189-.185.124-.156-.055-.413-.314-.465-.672-.056-.471.154-1.267.582-2.18-.125-.203-.21-.493-.137-.907 0 0 .108-.767.878-1.459 0 0 .092-.08.146-.055.059.025.032.274-.015.396-.049.121-.392.715-.392.715s-.214.401-.154.718c.404-.622 1.323-1.875 1.893-1.48.191.137.28.435.28.756C19.648 14.139 19.581 14.439 19.455 14.664M19.289 13.679c0 0-.032-.247-.273.025-.208.23-.583.66-.884 1.245.317-.036.622-.207.714-.295C18.995 14.521 19.345 14.16 19.289 13.679M23.88 13.623h-1.472c-.029-.5-.09-.988-.185-1.49-.01-.052-.055-.09-.108-.09h-.339c-.03 0-.058.013-.077.036-.019.024-.027.053-.021.083.096.486.158.964.188 1.461H20.45c-.066 0-.12.053-.12.119v.306c0 .066.054.12.12.12h1.437c.001.076.002.143.002.207 0 .441-.019.805-.064 1.215-.004.032.007.063.028.087.021.023.051.037.082.037h.315c.061 0 .112-.046.119-.107.043-.413.061-.781.061-1.231 0-.063-.001-.131-.002-.207h1.452c.066 0 .12-.054.12-.12v-.306C24 13.677 23.946 13.623 23.88 13.623M4.193 9.521C4.172 9.552 4.167 9.59 4.179 9.625 4.192 9.661 4.219 9.688 4.254 9.7l.264.089C4.534 9.794 4.55 9.797 4.565 9.797c.049 0 .095-.024.122-.065.865-1.27 2.035-2.328 3.384-3.058 1.393-.754 2.971-1.153 4.565-1.153 1.925 0 3.781.568 5.37 1.642 1.55 1.048 2.754 2.509 3.481 4.226.022.051.072.085.128.085h.315c.036 0 .07-.018.091-.049.021-.03.025-.069.011-.103-.75-1.847-2.019-3.421-3.669-4.552C16.674 5.612 14.693 5 12.636 5 9.234 5 6.078 6.69 4.193 9.521"/>
</svg>
`;
}
]]]
styles:
custom_fields:
c1:
- top: '-5%'
- left: 55%
- width: 50%
- position: absolute
template:
- base
- icon_tv_ambilight
- loader
3 Likes
thanks. I’m not good with css. I’ll see if I can get it to work. Thank you
I was seeing that it is not a size problem because if I remove the code from the sidebar and the weather from the yaml code it fits into two columns. But I can’t do something generic that shows some cards on a tablet and others on a cell phone. The solution in my case was to make two dashboards. But it is not the best because I have to apply each change to both files. Thanks for the help
@Pablo_Gustavo_Fiscel would you share the code from these Spotify buttons? These buttons are awesome. thx
