Just the built in editor my friend.
How the indenting is meant to look.
Its not huge but there is a definite difference 
Basically think of the fact that the .: | should start at the same place you would place any other entry under style: see how in my example the mushroom-shape-icon$: | and the .: | start at the same indentation?
I would love to see some guru post the sollution here, I’m also looking into this.
I’m no guru, but I was looking for this a few days ago to show when a door was opened/closed. I’m not sure if it’s what you’re looking for, but I put…
{% if is_state(config.entity, 'off') %}
Closed {{ relative_time(states.binary_sensor.basement_door_state.last_changed) }} ago
{%else%}
Opened {{ relative_time(states.binary_sensor.basement_door_state.last_changed) }} ago
{%endif%}
… in and it works for me.
MrGrey.
The following worked for me:
{{ relative_time(states.media_player.sony_kd_65ag8.last_updated) | replace("hours", "uur") | replace("minute", "minuut") | replace("minutes", "minuten") | replace("second", "seconde") | replace("seconds", "seconden") }} geleden
I needed some translations because the relative time comes from the back-end. Please edit to your needs.
Nice, I also posted my sollution below. Thanks for the reply.
Fyi @MrGrey & @remon1496
What you have both posted works just fine but isnt super accurate. For example i have a sensor that states last changed 2 days 1 hour 55m ago. With you templates it only gives me 2 days ago.
I prefer the below. While it is long it also gives better accuracy. But of course to each their own
{%- set time = (as_timestamp(now()) - as_timestamp(states.binary_sensor.bedroom_wardrobe_right_contact.last_changed)) | int %}
{%- set minutes = ((time % 3600) // 60) %}
{%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
{%- set hours = ((time % 86400) // 3600) %}
{%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
{%- set days = (time // 86400) %}
{%- set days = '{}d '.format(days) if days > 0 else '' %}
{{ 'Less than 1 min' if time < 60 else days + hours + minutes }}
You can then define however you want to call the days hours minutes. Right now it just does 2d 1h 55m.
They’re picture entity cards but when you touch one it opens a larger popup.
Thank you! This would come in handy in the future! Indeed, mine isn’t super accurate, but it’s good enough for my specific usecase (the state changes at least once a day).
Welp, that didn’t go according to plan. Please see the attached picture, using your code, I’m having issues with the image alignment:
Also: Don’t mind the black lines, they appear in my current firefox session only.
Thanks
Check out part 1 of updated ones here. This one hasnt changed but it was tested and works fine on my system (even firefox)
Oh wow this guide is a godsent, thanks man!
And your cameras are square or 4:3? Or did you change the aspect ratio or the CSS?
Its probably just something like this:
My Home Assistant configurationtype: grid
square: true
columns: 3
cards:
- type: picture-glance
camera_view: auto
image: >-
http://homeassistant:8123{{
states.camera.front_door_snapshot.attributes.entity_picture }}
entities:
- entity: camera.ring_doorbell
- entity: camera.front_door
camera_image: camera.ring_doorbell
hold_action:
action: none
entity: camera.ring_doorbell
aspect_ratio: '4:3'
- type: picture-glance
camera_view: auto
image: >-
http://homeassistant:8123{{
states.camera.front_door_snapshot.attributes.entity_picture }}
entities:
- entity: camera.ring_doorbell
- entity: camera.front_door
camera_image: camera.ring_doorbell
hold_action:
action: none
entity: camera.ring_doorbell
aspect_ratio: '4:3'
- type: picture-glance
camera_view: auto
image: >-
http://homeassistant:8123{{
states.camera.front_door_snapshot.attributes.entity_picture }}
entities:
- entity: camera.ring_doorbell
- entity: camera.front_door
camera_image: camera.ring_doorbell
hold_action:
action: none
entity: camera.ring_doorbell
aspect_ratio: '4:3'
You can set the aspect ratio of the picture glance card through the visual editor
humm. If I set camera_view to live the aspect ratio is reset to the original.
Is that how it is supposed to work?
can you share code ?
Yes unfortunately it does. It doesnt seem to know how to crop in on a live feed.
@dimitri.landerloos
Just need a quick fix since I can’t get my head around it despite many searches.
I am attaching current pictures and code for reference.
type: custom:stack-in-card
mode: vertical
square: false
cards:
- type: grid
columns: 2
square: true
cards:
- type: custom:mushroom-template-card
icon: mdi:lightbulb-fluorescent-tube
card_mod:
style: |
:host {
--mush-icon-size: 80px;
height: 66px;
margin-left: -15px !important;
margin-top: 5px !important;
background: none !important;
tap_action:
action: none
alignment: start
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.kitchen_cabinet_lights
use_light_color: true
alignment: end
- type: button
name: Cabinet
show_name: true
icon: mdi:lightbulb-fluorescent-tube
show_icon: false
card_mod:
style: |
ha-card {
height: 130px;
width: 130px;
background: none !important;
{% if states('light.kitchen_cabinet_lights') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.kitchen_cabinet_lights', 'on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
}
I want to remove the circular background behind the fluorescent tubelight icon. The chip where it toggles on and off should have a background as it does. I am happy with the text positioning also underneath. However, the icon should stand in a transparent background or if you have a better aesthetic suggestion. Also, if i can color the skin the same as the box shadow around the box when the light is turned on.
Unable to take out the background of the icon so far.
Dimitri…
How can i combine the icon shape an border shape
In the style?
card_mod:
style: |
ha-card {
{% if states('light.aanrecht') == 'on' %}
border: 2.5px outset blue
{% endif %}
}
And this one…
card_mod:
style:
mushroom-shape-icon$: |
.shape {
border: 2px outset green
}
Thank You!