@rhysb spot on! Thanks again, you are a CSS ninja!
.ninja {
color: black;
visibility: hidden;
animation-duration: 0.000001s;
}
1 Like
How did you get the chips in line with Server vs under uptime as in Sparkydaves card above?
wow this is an active threadā¦
back with some more on the printer cartridges:
- entity: sensor.epson_ink_level_black
color: black
<<: &card
type: tile
icon: mdi:water
name: ' '
vertical: true
tap_action:
action: more-info
card_mod:
style:
ha-tile-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%,
transparent calc(60% + 1px)),
conic-gradient(var(--tile-color) {{ states(config.entity)}}% 0%,
var(--card-background-color) 0% 100%);
}
# ha-tile-info$: |
# .secondary {
# visibility: hidden;
# }
# .secondary:before {
# visibility: visible;
# content: "{{ states(config.entity)}}% 0%";
# }
this fixed the numbers/% like @rhysb instructed.
As you can see I also commented the complete ha-tile-info$: | mod and tbh, I am puzzled what that would do in the first place, as it has no consequence. taking that out gives me a nice:
albeit still flickering, have to find what is causing that.
also, back to the color name: any thoughts why magenta wont work? In Mushroom that is.
using:
- entity: sensor.epson_ink_level_magenta
icon_color: magenta #pink
<<: *card
result in:
1 Like
Yeah, you can just ignore ha-tile-info stuff. I added it for completeness of the example. You can use it to replace/template the primary and secondary info if required.
Mushroom has itās own color scheme, now added to HA, and doesnāt support other named colors. You can use hex or RGB colors like this:
type: custom:mushroom-entity-card
entity: switch.coffee_machine
icon_color: '#ff00ff'
or
type: custom:mushroom-entity-card
entity: switch.coffee_machine
icon_color: '255,0,255'
1 Like
thanks for explaining! On both accounts.
on the colors: that makes it a bit less obvious really. Seems a system default like html color names would have to be supported by any card, core or custom.
1 Like
what is the code above?
can you share it please
Thanks.
I think it was a design decision of Paulās, wanting to have simple color selection in the UI.
Here you go:
type: custom:mushroom-template-card
primary: Status
secondary: >-
{{states((entity)) | title }} ā¢ {{
states('sensor.mfc_9340cdw_page_counter') }} p
icon: mdi:printer
entity: sensor.mfc_9340cdw_status
icon_color: '{{ ''disabled'' if is_state((entity), ''sleep'') else ''blue'' }}'
badge_icon: >-
{{ 'mdi:clock-time-five-outline' if is_state((entity), 'sleep') else
'mdi:file-document' if is_state((entity), 'printing') }}
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
This is from UI Lovelace Minimalist no?
thank youā¦
Hi everyone?
How can I make the icon blink when the days are 0?
type: custom:mushroom-template-card
icon: mdi:cat
primary: Frontline
icon_color: orange
secondary: '{{ (states(entity) | as_datetime | as_local - now()).days + 1 }} Tag(e)'
hold_action:
action: call-service
service: script.frontline_reminder
data: {}
target: {}
entity: input_datetime.frontline_reminder
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ ((states(config.entity) | as_datetime | as_local - now()).days + 1) / 30 * 100 }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: 50%;
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
1 Like
Hey @rhysb, sorry to bother you again mate. Hoping to seek your assistance again with another issue.
Might it be possible to integrate the dropdown from the select card into the template card, so that the templating for the icon, badges and text can be preserved?
EDIT:
Sorry! Ignore me, solved it:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: Pet Flap
secondary: >-
{{ states(entity) }} ā¢ {{ state_attr('sensor.pet_flap_battery_level',
'battery_level') }} %
icon: |-
{% if is_state('input_select.pet_flap_lock', 'Unlocked') %}
mdi:lock-open
{% elif is_state('input_select.pet_flap_lock', 'Locked') %}
mdi:lock
{% elif is_state('input_select.pet_flap_lock', 'Locked Out') %}
mdi:home-export-outline
{% elif is_state('input_select.pet_flap_lock', 'Locked In') %}
mdi:home-import-outline
{% endif %}
entity: input_select.pet_flap_lock
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
icon_color: |-
{% if is_state('input_select.pet_flap_lock', 'Unlocked') %}
green
{% elif is_state('input_select.pet_flap_lock', 'Locked') %}
red
{% elif is_state('input_select.pet_flap_lock', 'Locked Out') %}
orange
{% elif is_state('input_select.pet_flap_lock', 'Locked In') %}
yellow
{% endif %}
badge_icon: ''
- type: custom:mushroom-select-card
entity: input_select.pet_flap_lock
primary_info: none
secondary_info: none
icon: None
layout: horizontal
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
mushroom-shape-icon {
display: none
}
card_mod:
style: |
ha-card {
overflow: visible !important;
}
6 Likes
Hi
About is_state and attribute for an entity.
If looking at an entity state you can use:
{% if is_state(config.entity, 'on') %}
But what if itās the attribute for an entity I need to look at, what do I write?
{% if is_state(media_player.bluesound_mini.attributes.media_title, 'P4 Midt og vest') %}
Or, itās not working as I hopedā¦
Can you share your group section pls? Thx!
{{ if state_attr('vacuum.james', 'fan_speed') == āsomethingā }}
To get state attribute you write that 
Working, THX.
{% if state_attr('media_player.bluesound_mini', 'media_title') == 'P4 Midt og vest' %}
Ah, I have no idea! Theyāre very visually similar so very possible! If soā¦ does anyone have this replicated in mushroom? Perhaps itās not possible in mushroom?
Thatās a Minimalist UI card. Not sure someone have hacked it into Mushroom.
https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_esh_room/
Horizontal view.
atm. I have these 4 radio buttons, and itās working.
Then one selected have color and is playing.
What I want now, is to add a background image to the player, if I have selected āskalaā radio like now.
And how can I align the 4 buttons horizontal and not vertical like now?
square: false
columns: 1
type: grid
cards:
- type: custom:mini-media-player
entity: media_player.bluesound_mini
artwork: full-cover
- type: custom:text-divider-row
text: Spotify Musik
- type: custom:mushroom-template-card
primary: Dansk
secondary: ''
icon: ''
fill_container: false
multiline_secondary: false
tap_action:
action: call-service
service: spotcast.start
data:
spotify_device_id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
uri: spotify:playlist:3QE1nbYEMEyF0wWCAwQzmC
random_song: true
shuffle: true
target: {}
- type: custom:text-divider-row
text: Radio
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: ''
layout: vertical
fill_container: false
multiline_secondary: false
picture: /local/image/radio/p4.png
tap_action:
action: call-service
service: script.start_spotify_playlist1
data: {}
target: {}
entity: script.start_spotify_playlist1
card_mod:
style: |
:host {
{% if state_attr('media_player.bluesound_mini', 'media_title') == 'P4 Midt og vest' %}
{% else %}
filter: grayscale(100%);
{% endif %}
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color), 0.8);
--mush-icon-size: 50px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: ''
layout: vertical
fill_container: false
multiline_secondary: false
picture: /local/image/radio/nova.jpg
tap_action:
action: call-service
service: script.start_spotify_playlist2
data: {}
target: {}
entity: script.start_spotify_playlist2
card_mod:
style: |
:host {
{% if state_attr('media_player.bluesound_mini', 'media_title') == 'nova' %}
{% else %}
filter: grayscale(100%);
{% endif %}
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color), 0.8);
--mush-icon-size: 50px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: ''
layout: vertical
fill_container: false
multiline_secondary: false
picture: /local/image/radio/skala.jpg
tap_action:
action: call-service
service: script.start_spotify_playlist3
data: {}
target: {}
entity: script.start_spotify_playlist3
card_mod:
style: |
:host {
{% if state_attr('media_player.bluesound_mini', 'media_title') == 'skala.fm' %}
{% else %}
filter: grayscale(100%);
{% endif %}
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color), 0.8);
--mush-icon-size: 50px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: ''
layout: vertical
fill_container: false
multiline_secondary: false
picture: /local/image/radio/voice.jpg
tap_action:
action: call-service
service: script.start_spotify_playlist4
data: {}
target: {}
entity: script.start_spotify_playlist4
card_mod:
style: |
:host {
{% if state_attr('media_player.bluesound_mini', 'media_title') == 'the voice' %}
{% else %}
filter: grayscale(100%);
{% endif %}
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color), 0.8);
--mush-icon-size: 50px;
}
Ah youāre right, sadly 
Iāve had a go myself but my CSS skills arenāt the best with this card stuff so the spacing between āKitchenā and icons is too much and Iāll need to find out how to make the light icon a bit wider. Iāll keep trying!
