Wow!!! Willing to share your code?
Will share my hass-config via Github asap. I will make a new topic when finished 
. I will tag you in that topic. Thanks!
3 Likes
Thank you! I will try to test it.
hi… can someone please help me, i am trying to add my custom:atomic-calendar-revive to the sidebar, but I cannot get it right, the calendar goes on top of the sidebar, have grid-area set to sidebar, how du I make appear after the markdown??
I have two icons for my curtains. How can I make it change from one icon to the other when open or closed? I don’t need animation - just want it to change icon
I tried this in the switch.yaml but it gives me no icon at all:
- platform: template
switches:
rullegardin:
friendly_name: "Rullegardin"
value_template: '{{ is_state("cover.rullegardin", "open") }}'
turn_on:
- service: cover.open_cover
target:
entity_id: cover.rullegardin
turn_off:
- service: cover.close_cover
data:
entity_id: cover.rullegardin
icon_template: >-
{% if is_state('switch.rullegardin', 'on') %}
mdi:blinds-open
{% else %}
mdi:blinds
{% endif %}
In the lovelace it looks like this:
- type: custom:button-card
entity: switch.rullegardin #hue_group
name: Rullegardin
template:
- rullegardin
And the template looking like this:
rullegardin:
template:
- base
state_display: >
[[[ return variables.state === 'on' ? 'Åpen' : 'Lukket'; ]]]
icon: mdi:blinds-open
This is amazing!
Can I ask, how did you make the “tab” buttons across the top change to different screens?
Thank you!
Those are just navigation buttons ;-).
#################################################
#
# MAIN MENU
#
#################################################
type: 'custom:mod-card'
style: !include main_menu.styles.yaml
card:
type: 'horizontal-stack'
columns: 6
cards:
#################################################
# HOME
#################################################
- type: 'custom:button-card'
name: 'Home'
icon: 'mdi:home-assistant'
tap_action:
action: 'navigate'
navigation_path: '/hass-nolu/home'
template:
- main_menu_item
#################################################
# ROOMS
#################################################
....
At the moment I am working on a popup for my robomower.
Above the buttons at the bottom there is a line called “Pause für X Tag”. Which allows me to pause the mower for X days.
Below that, there are two buttons to increase or decrease this time. I am looking for a way to get both in one line. I dont need the slider. Only the text and the value.
Any ideas? I tried to pack it together with grid, but it doesnt look good.
action: fire-dom-event
browser_mod:
command: popup
title: Mähi
style:
hui-vertical-stack-card:
$hui-conditional-card>hui-grid-card$hui-horizontal-stack-card$: |
#root {
justify-content: space-evenly !important;
}
$hui-conditional-card>hui-grid-card$: |
hui-horizontal-stack-card {
padding: 0em 2em 0 2em !important;
height: 5.5em !important;
}
#root {
grid-gap: 0 !important;
}
card:
type: vertical-stack
cards:
- type: grid
columns: 1
square: false
cards:
- type: entities
entities:
- entity: sensor.maehroboter_status_lesbar
secondary_info: last-changed
icon: mdi:robot-mower
- type: custom:bar-card
width: 55%
height: 2em
decimal: 0
unit_of_measurement: "%"
positions:
icon: outside
indicator: "off"
name: outside
severity:
- color: "#303435"
from: 11
to: 100
- color: "#6d2525"
from: 0
to: 10
entity_row: true
entities:
- entity: sensor.maehroboter_batterie
name: Batterie
- entity: sensor.maehroboter_messerqualitaet
name: Messerqualität
- entity: sensor.maehroboter_fehlernachricht
- entity: sensor.maehroboter_wetterstop
- entity: input_number.maehroboter_pause
name: Pause für X Tage
- type: custom:hui-element
card_type: horizontal-stack
card_mod:
style: &horizontal2-style |
#root {
justify-content: flex-end;
margin: 1.7em -0.7em 0 0;
}
cards:
- type: custom:button-card
icon: mdi:plus
tap_action:
action: call-service
service: input_number.increment
target:
entity_id: input_number.maehroboter_pause
template: icon_name
- type: custom:button-card
icon: mdi:minus
tap_action:
action: call-service
service: input_number.decrement
target:
entity_id: input_number.maehroboter_pause
template: icon_name
- type: custom:hui-element
card_type: horizontal-stack
card_mod:
style: &horizontal-style |
#root {
justify-content: space-evenly;
margin: 1.7em -0.7em 0 0;
}
cards:
- type: custom:button-card
icon: mdi:autorenew
name: Auto
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.maehroboter
option: auto
template: icon_name
- type: custom:button-card
icon: mdi:home
name: Home
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.maehroboter
option: home
template: icon_name
- type: custom:button-card
icon: mdi:clock-check-outline
name: Feierabend
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.maehroboter
option: eod
template: icon_name
1 Like
Found a good way for me.
Need to work/learn more with custom:hui-element
action: fire-dom-event
browser_mod:
command: popup
title: Mähi
style:
hui-vertical-stack-card:
$hui-conditional-card>hui-grid-card$hui-horizontal-stack-card$: |
#root {
justify-content: space-evenly !important;
}
$hui-conditional-card>hui-grid-card$: |
hui-horizontal-stack-card {
padding: 0em 2em 0 2em !important;
height: 5.5em !important;
}
#root {
grid-gap: 0 !important;
}
card:
type: vertical-stack
cards:
- type: grid
columns: 1
square: false
cards:
- type: entities
entities:
- entity: sensor.maehroboter_status_lesbar
secondary_info: last-changed
icon: mdi:robot-mower
- type: custom:bar-card
width: 55%
height: 2em
decimal: 0
unit_of_measurement: "%"
positions:
icon: outside
indicator: "off"
name: outside
severity:
- color: "#303435"
from: 11
to: 100
- color: "#6d2525"
from: 0
to: 10
entity_row: true
entities:
- entity: sensor.maehroboter_batterie
name: Batterie
- entity: sensor.maehroboter_messerqualitaet
name: Messerqualität
- entity: sensor.maehroboter_fehlernachricht
name: Fehler
- entity: sensor.maehroboter_wetterstop
name: Wetterstop
- type: custom:hui-element
card_type: horizontal-stack
card_mod:
style: &horizontal2-style |
#root {
justify-content: flex-end;
margin: 1.7em -0.7em 0 0;
}
cards:
- type: custom:hui-element
card_type: markdown
# content: Pause für {{ states('input_number.maehroboter_pause')| round(0) }} Tage
content: >
{% if states('input_number.maehroboter_pause')|int == 1 %}
Pause für einen Tag
{% elif states('input_number.maehroboter_pause')|int > 1 %}
Pause für {{ states('input_number.maehroboter_pause')| round(0) }} Tage
{% else %}
Keine Pause
{% endif %}
- type: custom:button-card
icon: mdi:plus
tap_action:
action: call-service
service: input_number.increment
service_data:
entity_id: input_number.maehroboter_pause
template: icon_name
- type: custom:button-card
icon: mdi:minus
tap_action:
action: call-service
service: input_number.decrement
service_data:
entity_id: input_number.maehroboter_pause
template: icon_name
- type: custom:hui-element
card_type: horizontal-stack
card_mod:
style: &horizontal-style |
#root {
justify-content: space-evenly;
margin: 1.7em -0.7em 0 0;
}
cards:
- type: custom:button-card
icon: mdi:autorenew
name: Auto
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.maehroboter
option: auto
template: icon_name
- type: custom:button-card
icon: mdi:home
name: Home
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.maehroboter
option: home
template: icon_name
- type: custom:button-card
icon: mdi:clock-check-outline
name: Feierabend
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.maehroboter
option: eod
template: icon_name
1 Like
I have a strange problem when I am using some of the code.
my code for a light button is:
button_card_templates: !include ../button_card_templates_mattias.yaml
views:
- type: custom:grid-layout
path: 0
layout:
#default
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(4, 1fr) 0
grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar . . . ."
"sidebar vardagsrum studio sovrum ."
"sidebar media övrigt hemma ."
"sidebar footer footer footer ."
mediaquery:
#phone
"(max-width: 800px)":
grid-gap: calc(var(--custom-layout-card-padding) * 1.5)
grid-template-columns: 0 repeat(2, 1fr) 0
grid-template-rows: 0 repeat(5, fit-content(100%)) 0fr
grid-template-areas: |
". . . ."
". sidebar sidebar ."
". vardagsrum sovrum ."
". studio övrigt ."
". media hemma ."
". footer footer ."
". . . ."
#portrait
"(max-width: 1200px)":
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(3, 1fr) 0
grid-template-rows: 0 repeat(3, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar . . ."
"sidebar vardagsrum sovrum ."
"sidebar studio övrigt ."
"sidebar media hemma ."
"sidebar footer footer ."
"sidebar . . ."
cards:
- type: grid
title: Vardagsrum
view_layout:
grid-area: vardagsrum
columns: 2
cards:
- type: custom:button-card
entity: light.bedroom
name: Bedroom
template:
- light
- icon_hue
When I use the theme ‘tablet’ as you are using, I don’t get the button, but with another theme, I can see the button
If I remove grid card and directly use custom button card like below, I can see the button with tablet theme.
Anybody has any guess where I am doing mistake?
Hi, your style is amazing… can i ask you weather’s card codes?
thanks in advance.
EDIT: Added an open and closed mode =D Thanks @pedolsky for the tip!
styles:
custom_fields:
icon:
- width: 70%
- stroke: >
[[[ return variables.state === 'closed' ? '#3181b7' : '#9da0a2'; ]]]
custom_fields:
icon: >
[[[ if (entity.state === 'open') return '<svg viewBox="0 0 50 50">
<path d="M10 3v44.5M2 1.8v46.5M48 1.8v46.5M1 3h48m-6 44h6m-5.5-11.5v12.7M40 46h3.5m1-43v17.5M40 3v44.5M5.5 3v17.5m1 15l-.2 12.7M10 46H6.5m.5 1H1" stroke-width="2.5"/> </svg> ' ;
else return '<svg viewBox="0 0 50 50"> <path d="M2 3v44M48 3v44M.8 2.5h48.4M38 47.5h11.2M34.5 35v12m.5-.5h3M43.5 2v18M25 3v44M7.5 2v18m9 15v12m-.5-.5h-3m0 1H.8M38.5 32v15m-26-15v15m3.5.5h19M19.5 8v18m12-18v18" stroke-width="2.5"/> </svg>'; ]]]
Do it the same way as for state:
icon: >
[[[ return entity.state === 'on' ? 'mdi:blinds-open' : 'mdi:blinds'; ]]]
Did it =D
Not actually animated, but it has different icons for open and closed!
Thanks for the tip on how to accomplish it!
I’ve noticed the margins act weird when trying to add additional rows/tiles to a room…
When adding no more than 2 rows of tiles I do not observe the issue…
Any idea what might be the culprit here? Maybe some padding/margin?
Anyone encountered strangeness with the TV icon ? - Mine seems to work randomly… most of the time when the TV is on the blue ‘screen’ effect on the icon doesn’t appear, or its there but at a twisted angle.
Other times it shows up OK and looks fine! 
