Where I can download icons for climate?
Sadly, haven’t got time to fiddle more. I made more basic, mushroom based UI for Nspanel Pros, but I was never really happy with the performance so I replaced them with non-pro NSPanels and wait for more time to fiddle again with pro-models.
Would be nice to see 
Sure the Pro lags a bit, especially showing live camera streams, and Lovelace can be heavy, depending on installed frontend plugins and amount of devices on dashboard 
If you updated the Webview it becomes a bit faster, better than the stock OS, but still not the fastest kid on the block.
Same, the climate folder doesnt get generated on figma it seems
There are no suitable emoji for climate Thermostat Emojis | 🌡️🕛🌡🎚️ | Copy & Paste
I used random, snowflake for cool, fire for heat - let me know if you find any more useful and ill add them: GitHub - microsoft/fluentui-emoji: A collection of familiar, friendly, and modern emoji from Microsoft
Thank you for the fast reply, I made the folder myself.
Still trying to get this main animated dynamic screensaver running, and mine comes out looking like those above me with box outline, but not much else.
I can’t seem to get the lights card to work.
I changed the group name but nothing shows up on my dashboard. Did I miss something that should be changed?
Hi all,
I am new with ha i tried to create this dashboard on the nspanel pro but i got a message template: nspanel missing.
How can i create this?
thanks
You need to do card-mod and put the card-mod templates in the resources.
However, I’ve done everything, and am getting the results that others have posted (Blank black boxes, single weather icon in top left corner.
At this time I haven’t seen anyone successfully pull main dashbaord off, except OP
Update:
Media one works great although it is the simplest.
I tried doing lights, and this is what I am ending up with, it seems like there is something wrong with the CSS somehow, but I do not know too much CSS.
And I got the icon and fonts to change color on the main one:
Lets debug this together. 
0. Assuming you have completed all the steps listed here and above/below, all the plugins are installed and sensors are configured.
1. You have a dashboard
2. your dashboard has a view
2.1 - view type is panel or grid, so the following covers the whole page
3. you have a card
4. your card has cards
Try:
- in that code editor you have pasted the yaml in my post
- delete cards one by one and check the live preview for changes
5. to test if is your sensors giving error, use this code
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: markdown
content: >-
<img id="weatherblur" src="https://veli.ee/favicon.svgz" height="48"
width="48">
card_mod:
style: |
:host {
}
ha-card{
background: transparent;
display:flex;
align-items: center;
justify-content: center;
}
ha-card>ha-markdown{
border-radius: 100%;
background:transparent;
padding: 0 !important;
line-height:0;
display:flex;
align-items: center;
justify-content: center;
overflow:hidden;
{% set time = now().hour %}
{% set brightness = ((5 - ((time/24*10) | round(0) -5 ) | abs)/10 + 0.5) | float %}
opacity:{{brightness}};
{% set time = now().hour %}
{% set top = ( (time - 12)*1 ) %}
transform:scale(5) translateY({{top}}px) translateX(-48px);
{% set blur = ((((((time/24))-0.5)|abs)*5)|round(0)|int)+5 %}
filter:blur({{blur}}px);
}
ha-markdown>ha-markdown-element{
}
view_layout:
grid-column: 1
grid-row: 1
- type: markdown
content: >-
<img id="weatherblur" src="https://veli.ee/favicon.svgz" height="48"
width="48">
card_mod:
style: |
:host {
overflow:hidden;
}
ha-card{
background: transparent;
display:flex;
align-items: center;
justify-content: center;
overflow:hidden;
{% set time = now().hour %}
{% set sun = 10 %}
{% set sunpos = ((((( -16 - (sun | int ) - 8)) / 32 * 100) | round(0) ) * 24 / 100) | round(0) %}
{% set left = ((5 - ((time/24*10) | round(0) -5 ) | abs) * 24 ) | int - 240 %}
{% set top = ( (time - 12)*2 ) %}
transform: scale(5) translateX(-48px) translateY({{top}}px);
}
ha-card>ha-markdown
background:transparent;
padding: 0 !important;
line-height:0;
display:flex;
align-items: center;
justify-content: center;
overflow:hidden;
}
ha-markdown>ha-markdown-element{
}
view_layout:
grid-column: 1
grid-row: 1
- type: markdown
content: >-
<img id="weatherblur" src="https://veli.ee/favicon.svgz" height="48"
width="48">
card_mod:
style: |
:host {
overflow:hidden;
}
ha-card{
background: transparent;
display:flex;
align-items: center;
justify-content: center;
{% set sun = 10 %}
transform:scale(2.5) translateY({{ ((-((((( -16 - (sun | int ) - 8)) / 32 * 100) | round(0) ) *24 / 100) ) * 2) | round(0) }}px) translateX({{ ((-((((( -16 - (sun | int ) - 8)) / 32 * 100) | round(0) ) *24 / 100) ) * 2) | round(0) }}px);
{% set time = now().hour %}
{% set brightness = ((5 - ((time/24*10) | round(0) -5 ) | abs)/10 + 0.5) | float %}
}
ha-card>ha-markdown{
transform:scale(0.5) translateY(150%) translateX(-100%);
background:transparent;
padding: 0 !important;
line-height:0;
display:flex;
align-items: center;
justify-content: center;
overflow:hidden;
}
ha-markdown>ha-markdown-element{
}
view_layout:
grid-column: 1
grid-row: 1
layout:
grid-gap: 0
margin: 0
padding: 0
height: 100%
width: 100%
card_mod:
style: |
ha-card{
height:100%;
background:red;
}
:root{
overflow:hidden;
height:100%;
}
layout-card, grid-layout{
overflow: hidden;
height:100%;
transform:scale(3);
}
view_layout:
grid-column: 1 / span 6
grid-row: 1 / span 6
- type: markdown
content: ' '
card_mod:
style: |
:host{
overflow:hidden;
width:100%;
height: 100%;
padding:0;
margin:0
}
ha-card{
box-sizing:border-box;
{% set time = now().hour %}
{% set hue = (time/24*360 | round(2) ) | int %}
{% set hue2 = ((time/24*360 | round(2) ) | int) - 45 %}
{% set hue3 = ((time/24*360 | round(2) ) | int) - 30 %}
background: radial-gradient( transparent, hsla({{hue3}},100%,50%,0.0), hsla({{hue2}},100%,50%,0.0), hsla({{hue}},100%,50%,0), hsla({{hue}},100%,50%,0));
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: top center;
backdrop-filter: blur(10px);
display: flex;
align-items: end;
justify-content: left;
font:var(--h3-font);
color: var(--accent-text-color);
border-radius: 100%;
{% set time = now().hour %}
{% set left = ((5 - ((time/24*10) | round(0) -5 ) | abs) * 24 ) | int - 120 %}
{% set top = ((5 - ((time/24*10) | round(0) -5 ) ) * -24 ) | int + 240 %}
/*transform: translateX({{ left }}px) translateY({{top}}px);*/
transform: translateX(-50%) translateY(50%);
position:relative;
}
ha-card .card-header{
font-size:1rem;
}
ha-card > ha-markdown{
padding:0 !important;
}
view_layout:
grid-column: 1 / span 6
grid-row: 1 / span 6
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: markdown
content: >-
<img id="weatherblur" src="https://veli.ee/favicon.svgz" height="48"
width="48">
card_mod:
style: |
:host {
overflow:hidden;
}
ha-card{
background: transparent;
display:flex;
align-items: center;
justify-content: center;
{% set sun = 10 %}
transform:scale(1.5) translateY({{ ((-((((( -16 - (sun | int ) - 8)) / 32 * 100) | round(0) ) *24 / 100) ) * 2) | round(0) }}px) translateX({{ ((-((((( -16 - (sun | int ) - 8)) / 32 * 100) | round(0) ) *24 / 100) ) * 2) | round(0) }}px);
{% set time = now().hour %}
{% set brightness = ((5 - ((time/24*10) | round(0) -5 ) | abs)/10 + 0.5) | float %}
}
ha-card>ha-markdown{
transform:scale(0.5) translateX(-200%);
background:transparent;
padding: 0 !important;
line-height:0;
display:flex;
align-items: center;
justify-content: center;
overflow:hidden;
}
ha-markdown>ha-markdown-element{
}
view_layout:
grid-column: 1
grid-row: 1
- type: markdown
content: >-
<img id="weatherblur" src="https://veli.ee/favicon.svgz" height="48"
width="48">
card_mod:
style: |
:host {
overflow:hidden;
}
ha-card{
background: transparent;
display:flex;
align-items: center;
justify-content: center;
{% set sun = 10 %}
transform:scale(2.5) translateY({{ ((-((((( -16 - (sun | int ) - 8)) / 32 * 100) | round(0) ) *24 / 100) ) * 2) | round(0) }}px) translateX({{ ((-((((( -16 - (sun | int ) - 8)) / 32 * 100) | round(0) ) *24 / 100) ) * 2) | round(0) }}px);
{% set time = now().hour %}
{% set brightness = ((5 - ((time/24*10) | round(0) -5 ) | abs)/10 + 0.5) | float %}
}
ha-card>ha-markdown{
transform:scale(0.5) translateY(150%) translateX(-100%);
background:transparent;
padding: 0 !important;
line-height:0;
display:flex;
align-items: center;
justify-content: center;
overflow:hidden;
}
ha-markdown>ha-markdown-element{
}
view_layout:
grid-column: 1
grid-row: 1
- type: markdown
content: >-
<img id="weatherblur" src="https://veli.ee/favicon.svgz" height="48"
width="48">
card_mod:
style: |
:host {
overflow:hidden;
}
@keyframes float{
0% {transform:translateY(-0.5em)}
50% {transform:translateY(0.5em)}
100% {transform:translateY(-0.5em)}
}
ha-card{
background: transparent;
display:flex;
align-items: center;
justify-content: center;
{% set sun = 10 %}
transform:scale(2.5) translateY({{ ((-((((( -16 - (sun | int ) - 8)) / 32 * 100) | round(0) ) *24 / 100) ) * 2) | round(0) }}px) translateX({{ ((-((((( -16 - (sun | int ) - 8)) / 32 * 100) | round(0) ) *24 / 100) ) * 2) | round(0) }}px);
{% set time = now().hour %}
{% set brightness = ((5 - ((time/24*10) | round(0) -5 ) | abs)/10 + 0.5) | float %}
}
ha-card>ha-markdown{
animation: 5s ease-out infinite alternate float;
background:transparent;
padding: 0 !important;
line-height:0;
display:flex;
align-items: center;
justify-content: center;
overflow:hidden;
}
ha-markdown>ha-markdown-element{
}
view_layout:
grid-column: 1
grid-row: 1
layout:
grid-gap: 0
margin: 0
padding: 0
height: 100%
width: 100%
card_mod:
style: |
ha-card{
height:100%;
background:red;
}
:root{
overflow:hidden;
height:100%;
}
layout-card, grid-layout{
overflow: hidden;
height:100%;
transform:scale(3);
}
view_layout:
grid-column: 1 / span 6
grid-row: 1 / span 6
- type: markdown
content: veli<span class="minutes">:veli</span>
card_mod:
style: |
ha-markdown span{
color:green !important;
background:red;
}
ha-card > span {
border: 3px dotted magenta;
padding: 0px;
display: unset;
}
ha-card{
background:transparent;
display: flex;
align-items: center;
justify-content: right;
font: var(--h1-font);
font-weight: 500;
letter-spacing:-0.05em;
{% set time = now().hour %}
{% set int = ((5 - ((time/24*10) | round(0) -5 ) | abs)/10 + 0.5) | float %}
font-size: calc(var(--h1-font-size)*3*{{int}} );
transform: translateX({{ -((((( -16 - (100 ) - 8)) / 32 * 100) | round(0) ) * 24 / 100) | round(0)}}px);
mix-blend-mode:difference;
}
ha-card > ha-markdown{
padding:0 !important;
margin:0 !important;
{% set hue = (now().hour*15 + ((now().minute/60*100)/100) | round(2)*15 ) | int | abs %}
{% set hue2 = (((now().hour*15 + ((now().minute/60*100)/100) | round(2)*15 ) | int) - 45) | abs %}
{% set hue3 = ((now().hour*15 + ((now().minute/60*100)/100) | round(2)*15 ) | int) - 90 | abs %}
{% set time = now().hour %}
{% set br1 = ((5 - ((time/24*10) | round(0) -5 ) | abs)/10 + 0.5) | float %}
{% set br2 = ((5 - ((time/24*10) | round(0) -5 ) | abs)/10 ) | float %}
{% set brightness = ((5 - ((time/24*10) | round(0) -5 ) | abs) * 10 ) | int + 25 %}
background: linear-gradient(45deg, hsl({{hue}},100%,{{brightness}}%), hsl({{hue2}},100%,{{brightness}}%));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/*mix-blend-mode:difference;*/
/*color:hsla({{hue}},100%,50%,{{brightness}});*/
/*text-shadow: 0 3px 3px hsla({{hue }},100%,50%,0.5), 0 3px 10px hsla({{hue }},100%,50%,1);*/
}
ha-card > .card-header, .card-header {
background-color: var(--background-color-off);
color: var(--text-color-off);
font-size:10px;
}
view_layout:
grid-column: 1 / span 5
grid-row: 2 / 4
- type: markdown
content: veli
card_mod:
style: |
ha-card{
background: transparent;
display: flex;
align-items: flex-end;
justify-content: right;
text-align:right;
font: var(--card-title-font);
line-height: 0.8em;
color: var(--primary-color);
mix-blend-mode:difference;
}
ha-card > ha-markdown{
padding:0 1rem !important;
}
view_layout:
grid-row: 4 / 5
grid-column: 4 / 7
- type: markdown
content: veli
card_mod:
style: |
ha-card{
background: transparent;
display: flex;
align-items: center;
justify-content: right;
font:var(--h3-font);
color:var(--accent-text-color);
mix-blend-mode: lighten;
{% set hue = (25/20*360) | int %}
{% set time = now().hour %}
{% set br1 = ((5 - ((time/24*10) | round(0) -5 ) | abs)/10 + 0.5) | float %}
{% set brightness = ((5 - ((time/24*10) | round(0) -5 ) | abs) * 10 ) | int + 25 %}
color: hsl({{hue}},100%,{{brightness}}%);
/*mix-blend-mode:difference;*/
/*color:hsla({{hue}},100%,50%,{{brightness}});*/
/*text-shadow: 0 3px 3px hsla({{hue }},100%,50%,0.5), 0 3px 10px hsla({{hue }},100%,50%,1);*/
}
ha-card > ha-markdown{
padding:0 1rem !important;
}
view_layout:
grid-row: 1
grid-column: 3 / 7
- type: markdown
content: veli
card_mod:
style: |
ha-card{
background:transparent;
display: flex;
align-items: center;
justify-content: left;
font: var(--h3-font);
color: var(--accent-color);
mix-blend-mode: difference;
}
ha-card > ha-markdown{
padding:0 1rem !important;
}
view_layout:
grid-column: 1 / span 4
grid-row: 1
- type: markdown
content: veli
card_mod:
style: |
:host {
}
ha-card{
background: transparent;
display: flex;
align-items: center;
justify-content: right;
text-align:right;
font: var(--body-font);
color: var(--accent-text-color);
mix-blend-mode: difference;
font-size: 1rem;
}
ha-card > ha-markdown{
padding:0 1rem !important;
}
view_layout:
grid-row: 4
grid-column: 2 / 7
- type: markdown
content: veli
card_mod:
style: |
ha-card{
box-sizing:border-box;
background: transparent;
display: flex;
align-items: center;
justify-content: left;
font:var(--h3-font);
color: var(--accent-text-color);
mix-blend-mode: screen;
{% set wefer = 25 %}
{% set hue = 180-((((wefer)*10)) | int) %}
{% if hue <= 0 %}
{% set hue = 0 %}
{% elif hue >=360 %}
{% set hue = 360 - hue %}
{% else %}
{% endif %}
{% set time = now().hour %}
{% set br1 = ((5 - ((time/24*10) | round(0) -5 ) | abs)/10 + 0.5) | float %}
{% set brightness = ((5 - ((time/24*10) | round(0) -5 ) | abs) * 10 ) | int + 25 %}
color: hsl({{hue}},100%,{{brightness}}%);
}
ha-card > ha-markdown{
padding:0 1rem !important;
}
view_layout:
grid-column: 1 / span 3
grid-row: 6
- type: markdown
content: veli
card_mod:
style: |
ha-card{
background: transparent;
display: flex;
align-items: center;
justify-content: right;
color:var(--secondary-text-color);
font: var(--body-font);
}
ha-card > ha-markdown{
padding:0 1rem !important;
}
view_layout:
grid-column: 2 / span 5
grid-row: 6
layout:
grid-template-columns: repeat(6, minmax(60px, 1fr))
grid-template-rows: repeat(6, minmax(60px, 1fr))
grid-gap: 0.5em
margin: 0
padding: 0
height: 100vh
min-height: 480px
overflow: hidden
card_mod:
style: |
:host{
--card-header-font-size:1px;
}
:host > ha-card > .card-header{
display:none;
}
ha-card{
width:100%;
height:100vh;
}
:root{
overflow:hidden;
height:100vh;
}
layout-card{
overflow: hidden;
height:100vh;
}
5.1 you should be greeted with this image, all me
6.1 - If you dont see this or similar: go to step 0 and post your screenshot.
6.2 if you do: go to step 5 - and change any instance of “veli” to any of your values you want to show. instead
Yes, as the developers release new versions and change the more-info design with each update, it breaks the injected css which needs to match selectors, classes, shadow dom structure…
- So my lights are almost ok
- but climate is useless…
- not using it much more than the screensaver, so CBA to update it at the moment.
- if you want quicker updates, i apologise in advance for being a beggar, you can sponsor me so i dont have to work so much and can do more HA stuff…
Hi,
thanks for the nice job!
It took me hours to figure out why I couldn’t get weather screensaver to work with the correct font sizes.
You are using non-standard font and color variables:
font:var(--h3-font);
color:var(--accent-text-color);
To have this layout properly working, additional theme is needed from: GitHub - Madelena/Metrology-for-Hass: 🎨 Give your Home Assistant a modern and clean facelift. 🟥🟧🟩🟦🟪 24 Variations with 2 Styles + 6 Colors (Magenta Red / Orange / Green / Blue / Purple) + 🌞 Light and 🌚 Dark modes included. Based on Metro and Fluent UI Design Systems from Microsoft Windows..
Without this, all fonts will be in small default size.
It took me also a moment to find out, that sun elevation in sun integration is disabled by default in HA.
1 Like
By enabling sun elevation I’ve gotten much further it seemed this was a major issue preventing many items from showing. I am still combing through the rest of the code to see if anything else was missed
Also I notice sensor.solar is looking for a file called ‘clear-night.svg’ in ‘weather’ but this does not exist
1 Like
Also I notice sensor.solar is looking for a file called ‘clear-night.svg’ in ‘weather’ but this does not exist
it should replace it with sensor.moon_phase at night…
<template TemplateState(<state sensor.solar=🌘; entity_picture=/local/emoji/moon/waning_crescent.svg, weather_picture=/local/emoji/weather/cloudy.svg, weather_emoji=☁️, solar_picture=/local/emoji/solar/Midnight.svg, solar_emoji=🌘, moon_picture=/local/emoji/moon/waning_crescent.svg, moon_emoji=🌘, solar_moon_picture=/local/emoji/moon/waning_crescent.svg, random_picture=/local/pea/mint.png, icon=mdi:moon-waning-crescent, friendly_name=Midnight>
new climate card
- as swipe card this time, since the new more-info popup looks nice, but wont fit more than 1. Also pretty hard to grasp the shadow doms…
type: custom:auto-entities
card:
type: custom:swipe-card
parameters:
loop: true
preloadImages: true
cssMode: true
resistance: true
focusableElements: .controls
noSwipingClass: .controls
pagination:
type: bullets
clickable: true
hideOnClick: false
dynamicBullets: false
scrollbar:
draggable: true
card_mod:
style:
$: |
ha-card{
background: red;
height: 100vh;
}
.swiper-container{
background: red;
height: 100%;
width: 100%;
}
.swiper-scrollbar{
background: green !important;
}
.swiper-pagination-bullet{
bottom:0 !important;
background: red !important;
}
.swiper-scrollbar{
background: green !important;
}
.swiper-scrollbar .swiper-scrollbar-drag{
background: green !important;
}
layout_type: custom:grid-layout
layout:
grid-template-columns: repeat(auto-fit,minmax(clamp(100%/(3), 15rem,100%),1fr))
grid-template-rows: auto
align-items: stretch
margin: 0
padding: 0
height: 100%
grid-gap: 1em
box-sizing: border-box
card_param: cards
filter:
include:
- domain: climate
options:
type: custom:more-info-card
entity: this.entity_id
card_mod:
style:
$: |
ha-card{
background: transparent;
height: 100vh;
}
ha-card state-card-content{
display:none;
}
ha-card more-info-content{
height: 100%;
}
ha-card more-info-climate{
height: 100%;
}
ha-card ha-attributes{
display:none;
}
.card-header {
sdisplay:none !important;
padding: 0 !important;
text-align: center;
font-size: var(--h5-font-size) !important;
color: var(--secondary-text-color) !important;
font-weight: bold !important;
}
more-info-card{
background:red;
}
.: |
more-info-card{
background:red;
height:100vh;
}
.card-header {
display:none !important;
}
.swiper-container{
background: green;
}
.card-content {
padding: 0;
margin: 0;
display:flex;
flex-direction: column;
box-sizing:border-box;
justify-content: center;
height: calc( 100% - calc( var(--h5-font-size, 2rem) * 2) );
--mdc-select-ink-color: var(--accent-color);
--mdc-select-label-ink-color: var(--secondary-text-color);
--mdc-select-dropdown-icon-color: var(--primary-color);
--mdc-select-idle-line-color: var(--secondary-background-color);
}
ha-card{
box-sizing:border-box;
min-height: 100%;
padding: 0;
background: transparent;
height: 100vh;
}
ha-card state-card-content{
flex: 0;
}
ha-card state-card-climate{
display:flex;
display:none;
flex-direction: column;
justify-content: center;
box-sizing:border-box;
height: 100%;
border-radius: var(--ha-card-border-radius);
--mdc-icon-size: 1.5rem;
}
ha-card more-info-content{
flex: 4;
display:flex;
flex-direction: column;
justify-content: center;
box-sizing:border-box;
height: 100%;
}
ha-card more-info-climate{
display:flex;
flex-direction: column;
justify-content: center;
box-sizing:border-box;
padding:0;
margin: 0;
height: 100%;
}
state-card-climate:
$: |
.current{
background:red !important;
position: absolute;
}
ha-climate-state{
overflow:hidden;
position:relative;
font:var(--card-title-font);
color: var(--primary-color);
flex:1;
}
state-info{
font:var(--card-title-font) !important;
flex:1;
}
.: |
div.name{
background: blue;
}
state-card-climate$state-info:
$: |
div.name{
color:var(--secondary-text-color);
}
state-card-climate$ha-climate-state:
$: |
div.target{
display:none;
}
div.current{
color:var(--primary-text-color);
margin-left:100%;
position: absolute;
}
div.current .label{
display:none;
}
div.unit{
position: absolute;
right: 0;
left: auto;
text-align: center;
color: var(--secondary-text-color);
}
.: |
div{
}
more-info-climate$ha-more-info-climate-temperature:
$: |
.label-container{
background: red;
display:none !important;
}
more-info-climate:
$: |
div.container-temperature > div > div:first-child{
display:none;
}
div:first-child:not(.controls){
display:flex;
flex-direction: column;
justify-content: center;
box-sizing:border-box;
width: 100%;
display:grid;
grid-template-columns: repeat(auto-fit,minmax(clamp(100%/(2 + 1) + 0.1%,125px,100%),1fr));
grid-template-rows: repeat(auto-fit,1fr);
grid-column-gap: 1rem;
margin: 0;
padding: 0;
}
div:first-child:not(.auto) .value{
position: absolute;
top: 30%;
width: 100%;
color: var(--secondary-text-color);
}
div:first-child:not(.auto) .label{
display:none;
}
div:not(.controls){
display: flex;
align-items: flex-end;
justify-content: center;
}
ha-climate-control, .container-temperature{
grid-column: span 2;
display: flex;
align-items: center;
box-sizing:border-box;
}
.container-temperature ha-climate-control{
--mdc-theme-on-primary: red !important;
--mdc-theme-text-disabled-on-light: red !important;
--mdc-icon-size: 3rem !important;
}
more-info-climate$ha-climate-control:
$: |
div#target_temperature{
font:var(--h2-font);
flex: 1;
text-align:center;
}
div.control-buttons{
flex: 1;
display:flex;
flex-direction: row;
color:var(--primary-color);
}
div.control-buttons div{
flex: 1;
align-items: center;
justify-content:center;
text-align:center;
}
div.control-buttons div:first-child{
color:var(--state-climate-heat-color);
}
div.control-buttons div:last-child{
color:var(--state-climate-auto-color);
}
.: |
div#target_temperature{
background:green;
}
ha-card .header__icon {
color:
{% set mode = states('climate.livingroom') %} {% if mode == 'off' %} grey {% elif mode =='auto' %} green {% elif mode == 'heat' %} red{% else %} grey {% endif %};
}
exclude:
- group: /*/
- state: /un/
- hidden_by: /user|integration/
card_mod:
style: |
:host{
height: 100%;
}
.card-content{
height: 100%;
}
ha-card, swipe-card, auto-entities{
height: 100% !important;
background: red;
}
.swiper-pagination-bullet{
bottom:0 !important;
background: red !important;
}
.swiper-scrollbar{
background: green !important;
}
.swiper-scrollbar .swiper-scrollbar-drag{
background: green !important;
}
.swiper-container{
background: red;
height: 100vh;
}
lights
- new more-info looks very nice
type: custom:auto-entities
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: repeat(auto-fit,minmax(clamp(100%/(8 + 1) + 0.1%, 3rem,50%),1fr))
grid-template-rows: repeat(auto-fit,1fr)
align-items: stretch
padding: 0
margin: 0
grid-gap: 1rem
box-sizing: border-box
width: 100%
height: 100%
card_param: cards
filter:
include:
- domain: /light/
group: light.areas
options:
entity_id: this.entity_id
type: custom:more-info-card
card_mod:
style:
$: |
ha-card{
background: red;
height: 100vh;
}
.card-header {
font: var(--h5-font) !important;
padding: 1rem 0 !important;
text-align:center;
}
ha-more-info-control-select-container{
display:none;
}
.: |
.card-content {
height: 100%;
padding: 0;
margin: 0;
}
ha-card{
background: transparent;
height: 100vh;
}
ha-card state-card-content{
display:none;
}
ha-card more-info-content{
height: 100%;
}
ha-card more-info-light{
height: 100%;
}
ha-card ha-attributes{
display:none;
}
more-info-light:
$: |
ha-attributes{
display:none;
}
.controls{
flex: 4;
height: 100%;
margin: 0;
}
ha-more-info-control-select-container{
display:none;
}
ha-attributes{
background: red;
display:none !imortant;
opacity:0.5;
height:0px;
overflow:hidden;
}
ha-icon-button-group > *:nth-child(2),
ha-icon-button-group > *:nth-child(3),
ha-icon-button-group > *:nth-child(4),
ha-icon-button-group > *:nth-child(5){
display:none;
}
ha-more-info-light-brightness, ha-more-info-toggle{
flex: 5;
width: 100%;
margin: 0 !important;
}
.buttons{
flex:0 1 1rem;
padding: 0 !important;
margin: 0 !important;
}
.buttons > *{
margin: 0 !important;
--md-sys-color-outline: var(--primary-background-color);
--md-sys-color-on-surface-variant: var(--primary-color);
}
.buttons ha-button-menu md-outlined-icon-button{
--md-sys-color-outline: var(--primary-background-color);
--md-sys-color-on-surface-variant: var(--state-light-inactive-color);
}
.buttons > md-outlined-icon-button:nth-child(2){
display:none;
}
.: |
ha-attributes{
background: blue;
display: none !important;
}
.controls{
background: red !important;
}
more-info-light$md-outlined-icon-button:
$: |
md-outlined-icon-button{
background: red !important;
}
md-outlined-icon-button$ha-button-menu:
$: |
md-outlined-icon-button{
background: red !important;
}
more-info-light$ha-more-info-light-brightness:
$: |
ha-control-slider{
--control-slider-border-radius:1rem !important;
width:100% !important;
height: 100% !important;
max-height: none !important;
}
more-info-light$ha-more-info-toggle:
$: |
ha-control-switch{
--control-slider-border-radius:1rem !important;
height: 100% !important;
width: 100% !important;
max-height: none !important;
}
more-info-light$ha-more-info-state-header:
$: |
.name{
font:var(--h5-font) !important;
text-overflow:ellipsis;
overflow:hidden;
white-space: nowrap;
padding: 0 0 1rem 0;
margin: 0 !important;
}
.state, .last-changed{
display:none;
}
more-info-cover$ha-more-info-state-header:
$: |
.name{
font:var(--h5-font) !important;
text-overflow:ellipsis;
overflow:hidden;
white-space: nowrap;
padding: 0 0 1rem 0;
margin: 0 !important;
}
.state, .last-changed{
display:none;
}
more-info-cover:
$: |
ha-attributes{
display:none;
}
.controls{
flex: 4;
height: 100%;
margin:0;
}
.main-control{
margin:0 !important;
width: 100%;
}
ha-more-info-cover-position, ha-more-info-toggle{
flex: 5;
width: 100%;
height: 100%;
margin: 0 !important;
}
.buttons{
flex:0 1 1rem;
padding: 0 !important;
margin: 0 !important;
}
.buttons > *{
margin: 0 !important;
--md-sys-color-outline: var(--primary-background-color);
--md-sys-color-on-surface-variant: var(--primary-color);
}
.buttons ha-button-menu md-outlined-icon-button{
--md-sys-color-outline: var(--primary-background-color);
--md-sys-color-on-surface-variant: var(--accent-color);
}
.buttons > md-outlined-icon-button:nth-child(2){
display:none;
}
more-info-cover$ha-more-info-cover-position:
$: |
ha-control-slider{
--control-slider-border-radius:1rem !important;
width:100% !important;
height: 50vh !important;
max-height: none !important;
}
more-info-cover$ha-more-info-cover-position$ha-control-slider:
$: |
.slider{
height:100vh;
background: var(--secondary-background-color);
}
more-info-light$ha-more-info-light-brightness$ha-control-slider:
$: |
.slider{
height:100vh;
background: var(--secondary-background-color);
}
ha-more-info-toggle:
$: |
ha-control-switch{
height: 100%;
width: 100%;
}
.: |
ha-control-switch{
height: 100%;
}
ha-more-info-toggle$ha-control-switch:
$: |
:root{
background: red;
}
exclude:
- hidden_by: /user|integration/
- state: /unknown|unavailable/
- entity_id: '*ceiling_*'
sort:
method: name
numeric: true
reverse: true
card_mod:
style:
$: |
:root{
min-height:100%;
}
i’ve the same result, how do you solve it
I am having untold issues with this.
Most if not all of the type: custom cards return card not found but I have card mod installed and working
Can not find the correct entity for solar, it looks like it should be sun.sun but when I replace all sensor.solar with sun.sun or vice versa it still doesn’t work.
I am not good with yaml at the best of times, maybe this is too advanced but a start to finish step by step would be really nice
Update: I have gotten pretty far after a lot of trial and error
Attached showing most of my sensors working, except I expect the weather forecast. Although I do now see clouds.
Now trying to deal with the host of issues in the logs 
Possibly solved by this:NSPanel Pro UI Design with Lovelace - #55 by podly
Or if you place this in 
what errors does it give?