So putting it in the ui-lovelace.yaml instead of the template like this would be better then? 
- type: 'custom:button-card'
template: navigation_card_with_sensor
triggers_update: sensor.door_and_alarm
variables:
navigate_name: DĂžr og alarm
navigate_path: alarm
navigate_sensor: "sensor.door_and_alarm"
icon: mdi:alarm-panel
Yes, this is another solution. Simply overwrite triggers_update with the explict entity. But keep in mind there are cards with multiple entities. In this case you have to put all together in a list under the triggers_update section or you simply take the entity that gets the most updates.
I like the design of the cards, if youâre interested, I can help you optimize your js. Thereâs some holes in places and some of the cards could support devices classes for proper display.
Of course. Any help is welcome here And Iâm always interested in new ideas.
Hi, thanks for the help. I tried it with a mod-card, but since overflow is shown now my whole screen is horizontally swipeable up to the the width of the last card.
Iâll give it another try tomorrow.
I have this :
old naming convention
I am curious.
Could you give an example?
Did anyone already implement a card for Locks?
The current script card is not enough because you need to send a different service call depending on the state of the lock.
And the image should also change like the cover card.
Iâm pretty happy with my mobile setup for this one now. Has anyone set this up for iPad and want to share some pics for inspiration?
So for my startpage I wanted to try and make some conditional cards - for a quick way to access buttons when they would be needed. I tried setting it up like this:
- cards:
- type: custom:button-card
template: edge
- type: 'custom:button-card'
template: title
name: Forslag
- type: custom:button-card
template: edge
type: horizontal-stack
- cards:
- type: custom:button-card
template: edge
- type: grid
cards:
- type: conditional
conditions:
- entity: input_boolean.lock
state: 'on'
card:
type: 'custom:button-card'
template: card_door
entity: input_boolean.lock
name: InngangsdĂžr
- type: conditional
conditions:
- entity: input_boolean.kl_22_04
state: 'on'
card:
type: 'custom:button-card'
template: card_lys
entity: light.nattbord_andre
name: Nattbord André
- type: conditional
conditions:
- entity: input_boolean.kl_22_04
state: 'on'
card:
type: 'custom:button-card'
template: card_lys
entity: light.nattbord_martine
name: Nattbord Martine
columns: 2
- type: custom:button-card
template: edge
type: horizontal-stack
But Iâm not happy about how it turned out:
When none of the conditions are met:
When door is open:
When door is open, and its evening and I want bedside lights available aswell:
Where does all the extra spacing come from in the last picture?
And is there a way to minimize the open space when no conditions are met?
Well, havenât thought of that, sorry. I dont have that much chips at the moment, if so i wouldnât missed that.
I will have a look at it again on the weekend.
You should put the conditionel cards around all the other cards
I tried that, but then would the template:edge screw things up.
But when I looked closer at the grid card, I saw that it defaults to «square: true». Adding square: false fixed all the extra spacing
- type: grid
square: false
cards:
I ended up setting a couple of different conditional cards.
One for time of day - so that when evening comes the bedside lights are shown.
One for the door - so whenever the door is unlocked - its quick to get to.
One for Alarm - if both are away, and the alarm hasnât been armed, a button will show to arm it.
And probably more as I find myself needing a button quick 
Can you share how you use auto-entities in combination with generic cards with sensors (optionally in a horizontal-stack card?)
I want to try them for my garbage collection, so only part of the sensors should be visible, not all of them. I donât set the property âentityâ, but in return I just get an empty card. What am I missing? Any ideas?
For me the theme doesnt hide the header / app-toolbar. I have card-mod installed and it works for other cards. Is there another trick to make the header disapear?
I think i had to add this to the theme:
card-mod-root: |
app-toolbar {
display: none;
}
minimalist-mobile:
# Journal
state-icon-color: 'rgb(var(--color-theme))'
border-radius: '20px'
error-color: 'var(--google-red)'
warning-color: 'var(--google-yellow)'
success-color: 'var(--google-green)'
info-color: 'var(--google-blue)'
divider-color: 'rgba(var(--color-theme),.12)'
accent-color: 'var(--google-yellow)'
card-mod-theme: minimalist-mobile
card-mod-root: |
app-toolbar {
display: none;
}
I have these two sensors set up to be shown in my navigation card. But somehow one of the sensors are centered. Both cards have the same template, so Iâ guessing it must be something with the sensor. But I canât see what?
- platform: template
sensors:
climate:
value_template: "{{ states.climate.vent_vsr500.attributes.temperature }}°C <br> {{ states.input_select.modus_vtr.state }}"
- platform: template
sensors:
door_and_alarm:
friendly_name: "DĂžr og alarm"
icon_template: "mdi:shield"
value_template: >
{% if (is_state('input_boolean.lock', 'off') and is_state('alarm_control_panel.sector_alarmpanel_01232552', 'armed_away'))%}
DÞr lÄst. <br>Alarm aktivert
{% elif (is_state('input_boolean.lock', 'off') and is_state('alarm_control_panel.sector_alarmpanel_01232552', 'disarmed'))%}
DÞr lÄst. <br>Alarm deaktivert
{% elif (is_state('input_boolean.lock', 'on') and is_state('alarm_control_panel.sector_alarmpanel_01232552', 'disarmed'))%}
DÞr ulÄst. <br>Alarm deaktivert
{% elif (is_state('input_boolean.lock', 'on') and is_state('alarm_control_panel.sector_alarmpanel_01232552', 'armed_away'))%}
DÞr ulÄst. <br>Alarm aktivert
{%else%}
Utilgjengelig
{%endif%}
Template:
navigation_card_with_sensor:
#triggers_update: all
color: var(--google-grey)
show_icon: true
show_label: true
show_name: true
styles:
icon:
- color: 'rgba(var(--color-blue),1)'
label:
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
- color: 'rgba(var(--color-blue-text),1)'
name:
- align-self: end
- justify-self: start
- font-weight: bold
- font-size: 14px
- margin-left: 12px
- color: 'rgba(var(--color-blue-text),1)'
state:
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
img_cell:
- background-color: 'rgba(var(--color-blue), 0.2)'
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
grid:
- grid-template-areas: '"i n" "i l"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content min-content
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
- background-color: 'rgba(var(--color-background-blue), var(--opacity-bg))'
size: 20px
name: '[[[ return variables.navigate_name ]]]'
label: '[[[ return states[variables.navigate_sensor].state ]]]'
tap_action:
action: navigate
navigation_path: '[[[ return variables.navigate_path ]]]'
Have it like this. Reload themes and apply but no success.
Itâs more about the logic applied in the cards. I was mainly speaking to the thread owner. One example off the top of my head is the battery card doesnât support binary_sensor batteries. Also the logic behind the percentage icon can be greatly reduced
I was thinking of changing the battery card a bit, to let me know if something is charging.
I was thinking about using the unavailable exclemation part for it.
How can I have this check if sensor.andre_sin_ipad_battery_state = charging instead of entity.state = unavailable?
custom_fields:
notification: >
[[[
if (entity.state =='unavailable'){
return `<ha-icon icon="mdi:exclamation" style="width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon>`
}
]]]
Iâve tried a couple of things but Iâm just getting thrown errors