Oh that came out well. I think you have doubled it but its working. How about the background in this case?
I doubled to ensure it would work on a second chip. That is where modding chips get interesting. Give me a few to generate that code.
1 Like
Cool thanks. Used one instance.
type: custom:mushroom-chips-card
chips:
- type: template
entity: weather.liverpool_hourly
tap_action:
action: navigate
navigation_path: "#Weather"
icon: |
{% set weather = states(config.entity) %}
{% if weather == 'clear-night' %} mdi:weather-night
{% elif weather == 'cloudy' %} mdi:weather-cloudy
{% elif weather == 'fog' %} mdi:weather-fog
{% elif weather == 'hail' %} mdi:weather-hail
{% elif weather == 'lightning' %} mdi:weather-cloudy
{% elif weather == 'lightning-rainy' %} mdi:weather-lightning
{% endif %}
icon_color: |
{% set weather = states(config.entity) %}
{% if weather == 'clear-night' %} red
{% elif weather == 'cloudy' %} green
{% elif weather == 'fog' %} blue
{% endif %}
card_mod:
style: |
ha-card {
--chip-background:
{% set weather = states(config.entity) %}
{% if weather == 'clear-night' %} rgba(6, 148,148, 1)
{% elif weather == 'cloudy' %} rgba(6, 148,148, 1)
{% elif weather == 'fog' %} rgba(6, 148,148, 1)
{% elif weather == 'hail' %} rgba(6, 148,148, 1)
{% elif weather == 'lightning' %} mrgba(6, 148,148, 1)
{% elif weather == 'lightning-rainy' %} rgba(6, 148,148, 1)
{% endif %}
All the colors you have in the chip background code are the same?
2 Likes
Man kudos to you. It just works. Yeah meant to change colors etc once I get all of it working.
Now just gotta make sure not you use same colors for background and icons…
1 Like
Appreciate it…Throw me a like or two on our posts. Thanks for being easy to communicate with!
3 Likes
Have another quick one if I may?
Have this button on tablet dash and wanted to add a space between the fan state and the timer if possible
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: switch.bathroom_ixl_l1
icon: mdi:fan
icon_color: yellow
primary: Bathroom Fan
secondary: >
{{states('switch.bathroom_ixl_l1') }}
{% set f = state_attr('timer.bathroom_fan', 'finishes_at') %} {{ "" if f
== None else (as_datetime(f) - now()).total_seconds() |
timestamp_custom('%H:%M:%S', false) }}
card_mod:
style: |
ha-card {
padding-bottom: 10px !important;
}
Like this?
card_mod:
style:
mushroom-state-info$: |
.secondary {
margin-left: 30px;
}
.: |
ha-card {
padding-bottom: 10px !important;
}
1 Like
No meant between the state and timer
this is what I have now
Need to add room between the off and the timer it self
Try it this way
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: switch.bathroom_ixl_l1
icon: mdi:fan
icon_color: yellow
primary: Bathroom Fan
secondary: |
{{states('switch.bathroom_ixl_l1') }}
card_mod:
style:
mushroom-state-info$: |
.secondary::after {
content: "{% set f = state_attr('timer.bathroom_fan', 'finishes_at') %} {{ "" if f
== None else (as_datetime(f) - now()).total_seconds() |
timestamp_custom('%H:%M:%S', false) }}";
position: absolute;
top:29px;
left: 90px;
color: lime;
display: flex;
}
.: |
ha-card {
padding-bottom: 10px !important;
}
Getting a timer to update on a Mushroom or Tile card is an issue if I remember correctly.
I have used a button card to see the timer countdown.
For example:
The card on the left is a Mushroom card and updates only on dashboard interaction.
1 Like
Oh man that works well. The space helps a lot. Yes the updating is an issue but at least saves me from having to check the timer.
So what do you recommend? What’s on the right there?
It is also a combo of Button and Mushroom cards. I’ll put an example together for since you are already using custom Button and Mushroom cards.
1 Like
Can’t thank you enough man
Happy to assist!!
Just realized when the fan is off the icon does not go back to default color.
I am working on multiple threads. Can you post the code? It helps me expedite a resolution. 
1 Like
oh I meant the code you added the space for the timer. I completely missed that it does not go back to default. So expecting this
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: switch.bathroom_ixl_l1
icon: mdi:fan
icon_color: yellow
primary: Bathroom Fan
secondary: |
{{states('switch.bathroom_ixl_l1') }}
card_mod:
style:
mushroom-state-info$: |
.secondary::after {
content: "{% set f = state_attr('timer.bathroom_fan', 'finishes_at') %} {{ "" if f
== None else (as_datetime(f) - now()).total_seconds() |
timestamp_custom('%H:%M:%S', false) }}";
position: absolute;
top:29px;
left: 90px;
color: lime;
display: flex;
}
.: |
ha-card {
padding-bottom: 10px !important;
}
This should do it…
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: switch.bathroom_ixl_l1
icon: mdi:fan
icon_color: |
{{ 'yellow' if is_state(config.entity, 'on') else 'grey' }}
primary: Bathroom Fan
secondary: |
{{states(config.entity) }}
card_mod:
style:
mushroom-state-info$: |
.secondary::after {
content: "{% set f = state_attr('timer.bathroom_fan', 'finishes_at') %} {{ "" if f
== None else (as_datetime(f) - now()).total_seconds() |
timestamp_custom('%H:%M:%S', false) }}";
position: absolute;
top:29px;
left: 90px;
color: lime;
display: flex;
}
.: |
ha-card {
padding-bottom: 10px !important;
}
1 Like
@LiQuid_cOOled after our discussion yesterday I have updated:
Thanks for the new style of template, much easier to follow.
THEMES FOR STICKY FLOATING NAVIGATION MENU - All Devices - Mushroom Chips Card
FULL CODE FOR CARD IS AVAILABLE FROM THIS LINK
CARD-MOD COLOURED PEBBLE
- No Transparency
CARD-MOD COLOURED GLASS
- Allows to see through buttons and any information they may be blocking
INNER GLOW
- Allows to see through buttons and any information they may be blocking
INNER GLOW OUTLINE
- Allows to see through buttons and any information they may be blocking
DASHBOARD MUSHROOM THEME SELECTOR IS HERE
- custom:mushroom-select-card
- Add to dashboard via GUI
- Change themes right from the dashboard
Awesome. Any reason why this button shows on/off as opposed to On/Off like my other buttons?
Regular button
type: custom:mushroom-light-card
entity: switch.bathroom_ixl_l1
icon: mdi:lightbulb-on
name: Bathroom Light
icon_color: yellow
as opposed to
