Does anyone know if I can get icon and text aligned left in a vertical layout of the template card like these on iOS?
2 Likes
You can add the battery icon using the first template card, just need to add this small section
badge_icon: |+
{% set battery_level = (states(entity) | int / 10) | round(0) | int * 10 %}
{% if battery_level == 100 %}
mdi:battery
{% elif battery_level > 0 %}
mdi:battery-{{ battery_level }}
{% else %}
mdi:battery-alert-variant-outline
{% endif %}
badge_color: |-
{% set battery_level = states(entity) | int %}
{% if battery_level > 90 %}
green
{% elif battery_level > 60 %}
light-green
{% elif battery_level > 50 %}
lime
{% elif battery_level > 40 %}
yellow
{% elif battery_level > 30 %}
amber
{% elif battery_level > 20 %}
orange
{% elif battery_level > 10 %}
deep-orange
{% else %}
red
{% endif %}
tap_action:
action: more-info
entity: sensor.front_door_battery
Full card code w/ battery icon
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Front Door
secondary: >-
{% if is_state('lock.front_door','unlocked') and
is_state('binary_sensor.front_door_alarm_sensor','on') %}
Open and Unlocked
{% elif is_state('binary_sensor.front_door_alarm_sensor','on') %}
Door Open
{% elif is_state('lock.front_door','unlocked') %}
Unlocked
{% else %}
Locked
{% endif%}
icon: >-
{% if is_state('lock.front_door','unlocked') and
is_state('binary_sensor.front_door_alarm_sensor','on') %}
mdi:door-open
{% elif is_state('binary_sensor.front_door_alarm_sensor','on') %}
mdi:door-open
{% elif is_state('lock.front_door','unlocked') %}
mdi:lock-open
{% else %}
mdi:lock
{% endif%}
layout: vertical
icon_color: >-
{% if is_state('lock.front_door','locked') and
is_state('binary_sensor.front_door_alarm_sensor','off') %}
green
{% else %}
red
{% endif%}
badge_icon: |+
{% set battery_level = (states(entity) | int / 10) | round(0) | int * 10 %}
{% if battery_level == 100 %}
mdi:battery
{% elif battery_level > 0 %}
mdi:battery-{{ battery_level }}
{% else %}
mdi:battery-alert-variant-outline
{% endif %}
badge_color: |-
{% set battery_level = states(entity) | int %}
{% if battery_level > 90 %}
green
{% elif battery_level > 60 %}
light-green
{% elif battery_level > 50 %}
lime
{% elif battery_level > 40 %}
yellow
{% elif battery_level > 30 %}
amber
{% elif battery_level > 20 %}
orange
{% elif battery_level > 10 %}
deep-orange
{% else %}
red
{% endif %}
tap_action:
action: more-info
entity: sensor.front_door_battery
- type: custom:mushroom-lock-card
entity: lock.front_door
name: Laundry Room Door
primary_info: none
secondary_info: none
icon_type: none
layout: vertical
card_mod:
style: |
ha-card {
{% if is_state('lock.front_door','locked') and
is_state('binary_sensor.front_door_alarm_sensor','off') %}
background: rgba(101,170,91,0.2);
{% else %}
background: rgba(226,84,66,0.2);
{% endif %}
}
11 Likes
Thank you very much. Yes I am using feedparser and list cards. Depending on the source of rss xml feeds they are quite reliable for displaying rss.
Everything I have done in creating this page, including the codes and the wiki is explained here. You can find step by step installation process.
2 Likes
Thank you! I think I just found what I will spend my day working on. 
1 Like
Yup that fixed it, thank you!
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: Front Door
secondary: >-
{% if is_state('lock.door_lock_2','unlocked') and
is_state('binary_sensor.front_door_sensor_access_control_window_door_is_open','on')
%}
Open and Unlocked
{% elif
is_state('binary_sensor.front_door_sensor_access_control_window_door_is_open','on')
%}
Door Open
{% elif is_state('lock.door_lock_2','unlocked') %}
Unlocked
{% else %}
Locked
{% endif%}
icon: >-
{% if is_state('lock.door_lock_2','unlocked') and
is_state('binary_sensor.front_door_sensor_access_control_window_door_is_open','on')
%}
mdi:door-open
{% elif
is_state('binary_sensor.front_door_sensor_access_control_window_door_is_open','on')
%}
mdi:door-open
{% elif is_state('lock.door_lock_2','unlocked') %}
mdi:lock-open
{% else %}
mdi:lock
{% endif%}
icon_color: >-
{% if is_state('lock.door_lock_2','locked') and
is_state('binary_sensor.front_door_sensor_access_control_window_door_is_open','off')
%}
green
{% else %}
red
{% endif%}
badge_icon: >-
{% set battery_level = (states('sensor.front_door_sensor_battery_level') |
int / 10) | round(0) | int * 10 %} {% if battery_level == 100 %}
mdi:battery {% elif battery_level > 0 %} mdi:battery-{{ battery_level }}
{% else %} mdi:battery-alert-variant-outline {% endif %}
badge_color: >-
{% set battery_level = states('sensor.front_door_sensor_battery_level') |
int %}
{% if battery_level > 90 %} green
{% elif battery_level > 60 %} light-green
{% elif battery_level > 50 %} lime
{% elif battery_level > 40 %} yellow
{% elif battery_level > 30 %} amber
{% elif battery_level > 20 %} orange
{% elif battery_level > 10 %} deep-orange
{% else %} red
{% endif %}
tap_action:
action: none
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:lock-smart
icon_color: disabled
badge_icon: |-
{% set battery_level = (states('sensor.door_lock_battery_level_2') |
int / 10) | round(0) | int * 10 %}
{% if battery_level == 100 %} mdi:battery
{% elif battery_level > 0 %} mdi:battery-{{ battery_level }}
{% else %} mdi:battery-alert-variant-outline
{% endif %}
badge_color: >-
{% set battery_level = states('sensor.door_lock_battery_level_2') |
int %}
{% if battery_level > 90 %} green
{% elif battery_level > 60 %} light-green
{% elif battery_level > 50 %} lime
{% elif battery_level > 40 %} yellow
{% elif battery_level > 30 %} amber
{% elif battery_level > 20 %} orange
{% elif battery_level > 10 %} deep-orange
{% else %} red
{% endif %}
tap_action:
action: navigate
navigation_path: keypad-front_door
card_mod:
style: |
ha-card {
--icon-border-radius: 12px;
}
- type: custom:mushroom-lock-card
entity: lock.door_lock_2
name: Front Door
primary_info: none
secondary_info: none
icon_type: none
card_mod:
style: |
ha-card {
margin-top: -12px;
margin-left: -52px;
}
card_mod:
style: |
ha-card {
{% if is_state('lock.door_lock_2','locked') and
is_state('binary_sensor.front_door_sensor_access_control_window_door_is_open','off') %}
background: rgba(101,170,91,0.2);
{% else %}
background: rgba(226,84,66,0.2);
{% endif %}
}
4 Likes
Rookie question here 
I have a chip on my dashboard where I show available updates to Home Assistant core, OS and supervisor (or any other for that matter).
{% if is_state('update.home_assistant_core_update', 'on')
or is_state('update.home_assistant_operating_system_update', 'on')
or is_state('update.home_assistant_supervisor_update', 'on')
%}
red
{% endif %}
Three related questions to this:
- Say two updates are available how can I show ‘2’ on the chip?
- Would it be possible for me to have a tap action going to a list showing where the 2 updates (above example) come from?
- (optional) Say I have a core update and an OS update; would it be possible for me to trigger the update from the list in point 2?
I can see further applications to this; e.g. at 10pm every night I check ‘security related’ evants - e.g. unlocked doors, open windows, open garage door etc. and show the number of events on the above chip.
Another application is battery monitoring; show the number of devices where the battery level is below a certain threshold etc.
You welcome. Would love to see outcome when you finish.
Not sure if this has been shared here before but I made the navigation buttons on my page sticky. This way if you scroll down a page the nav button follows. Any chips placed in this card should stick to the header as you scroll
type: custom:mushroom-chips-card
chips:
- type: action
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: home
- type: entity
entity: media_player.andrews_desk_speakers
icon_color: red
icon: mdi:remote-tv
tap_action:
action: navigate
navigation_path: andrews-tv-remote
content_info: none
alignment: justify
card_mod:
style: |
:host {
z-index: 999;
position: sticky;
position: -webkit-sticky;
top: var(--header-height);
}
ha-card {
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
}
16 Likes
Not quite as pretty as yours but it gets the job done.
Westham for the Mrs, Forest for me, and Liverpool because she watched with her best friend.
3 Likes
That’s very pretty, can you share how you achieve the click to open scenes panel please? I’ve been fiddling around for a few days searching how to do that!
I’ve just applied your sticky chips technique - that’s really neat - thanks!
EDIT: Also… which temperature card are you using that lets you do the multiple overlays of sensors?
1 Like
I see some of you have a nice overlay on the whole card instead of only the icon, when its activated. How is this done? Theme variables, or in the cards?
Hello,
Is it possible somehow change only the border color of a icon? I am trying to do simple weather card with the template card, I would like to change the icon based on the weather condition (icon color white) AND icon border color.
For example: Weather is sunny, icon changes to sunny and icon color is white, but the border color is Yellow. When it is cloudy, icon color stays white but icon changes to cloudy, icon border changes to blue.
I can only find the icon color option which changes both icon and icon border color.
Edit: And to specify: I mean by icon border color the circle around the icon.
Yea no worries! Both cards were shared earlier but I couldn’t find the link for the scenes card
Scenes Card
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 33px
margin: '-4px -4px -8px -4px'
cards:
- type: custom:mushroom-template-card
primary: Scenes
secondary: All
icon: mdi:home-roof
icon_color: grey
tap_action:
action: toggle
entity: input_boolean.andrews_scenes
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:mushroom-template-card
entity: input_boolean.andrews_scenes
primary: ''
secondary: ''
icon: >-
{{ 'mdi:chevron-down' if is_state(entity, 'off') else 'mdi:chevron-up'
}}
icon_color: disabled
hold_action:
action: none
card_mod:
style: |
ha-card {
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: conditional
conditions:
- entity: input_boolean.andrews_scenes
state: 'on'
card:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:desk
icon_color: grey
layout: vertical
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.andrew_s_room_casual
secondary: Ambient
- type: custom:mushroom-template-card
icon: mdi:movie-open
icon_color: grey
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.andrews_room_video_editing
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
secondary: Video Editing
- type: custom:mushroom-template-card
layout: vertical
entity: script.1590801199735
icon: mdi:lightbulb-on
icon_color: grey
tap_action:
action: call-service
service: light.turn_off
service_data: {}
target:
entity_id: light.andrews_room
double_tap_action:
action: none
hold_action:
action: none
secondary: 'Off'
style: |
ha-card {
box-shadow: none;
border-radius: 12px;
background: none;
}
card_mod:
style: |
ha-card {
background: rgba(155,155,155,0.05);
}
Temperature card
1 Like
Is there a way to combine different cards (other than stacking)? E.g. I’d like to use the templated badge_icon on a cover card.
Generally, I am curious about what the reason is that not every card is basically a template card with all the same fields and then some additional stuff, like the cover slider in this case? I.e. why don’t all cards allow templating?
Perfect!!! Well done. It looks nice and clean.
Did you also use the automations ?
No, just pretty basic pages. Navigation under the banner. Atomic Revive Calendar as appropriate on each page. Using @iantrich 's Feedparser and List Card to display news for each team (and overall on the EPL page). News is updated hourly. Pulling from a variety of sources since none provided adequate results overall.
Here’s an example of one of the pages:
views:
- title: Home
cards:
- type: custom:mushroom-title-card
title: Football
subtitle: Liverpool
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: back
- type: template
icon: mdi:home
tap_action:
action: navigate
navigation_path: /lovelace-phone
- type: template
picture: /local/football/epl.png
content: EPL
tap_action:
action: navigate
navigation_path: /phone-footie
- type: template
picture: /local/football/westham.png
content: Westham
tap_action:
action: navigate
navigation_path: /phone-westham
- type: template
picture: /local/football/forest.png
content: Forest
tap_action:
action: navigate
navigation_path: /phone-forest
- type: template
picture: /local/football/liverpool.png
content: Liverpool
tap_action:
action: navigate
navigation_path: /phone-liverpool
alignment: center
- type: custom:atomic-calendar-revive
name: Football Calendar
entities:
- calendar.liverpool
enableModeChange: true
showWeekDay: true
firstDayOfWeek: 1
maxDaysToShow: 7
refreshInterval: 60
- type: custom:list-card
entity: sensor.liverpool
title: News
row_limit: 10
feed_attribute: entries
columns:
- title: ''
type: image
add_link: link
field: media_thumbnail
- title: Title
field: title
- title: Description
field: summary
Nice one mate.
I have now started to work on my news page. I will also publish it on github when I complete.
By the way I have also added Tips and Tricks to the end of my wiki for better reading the contents without ads and on a fullscreen page. Anyone interested may check it out.
Hi Sdomotica
Can you share your code ? I just started working on a new page but I am struggling to place news horizontally just like you did in the picture.
You can use overflow: hidden; like this:
card_mod:
style: |
:host {
--mush-icon-size: 130px;
height: 100px;
background: url('https://img.freepik.com/free-vector/terrace-with-mountain-lake-view-home-villa-hotel-area-with-sofa-ottoman-stand-wooden-patio-with-scenery-nature-landscape-background-with-rocks-water-pond-cartoon-vector-illustration_107791-11419.jpg?t=st=1658807264~exp=1658807864~hmac=8ec279678398cc8813f10112ecb27e57af9e4d4da6e42611c78c0a6e290e0946&w=1380') center;
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color), 0.9);
margin-left: -33px !important;
overflow: hidden;
}
As for learning CSS, a good place to start is W3 Schools
1 Like