This one by @ingo.niehues is really nice. but it will not be a slider, just the current level.
There are a lot of others on this thread in general. just browse through it 
1 Like
Hi!
I’m trying to get the Mushroom Template Card styled the same as the HA Tile card.
This is from the HA Frontend source (ha-tile-info.ts):
.primary {
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.1px;
color: var(--primary-text-color);
}
.secondary {
font-weight: 400;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.4px;
color: var(--primary-text-color);
}
I’ve got my Mushroom Template Card styled as follows:
card_mod:
style: |
ha-card {
--icon-size: 40px;
--card-primary-font-size: 14px;
--card-primary-font-weight: 500;
--card-primary-line-height: 20px;
--primary-text-color: rgb(var(--primary-text-color));
--card-secondary-font-size: 12px;
--card-secondary-font-weight: 400;
--card-secondary-line-height: 16px;
--secondary-text-color: rgb(var(--primary-text-color));
}
The only thing missing are the letter-spacings. Does anybody know how I can set the primary letter-spacing to 0.1px and the secondary to 0.4px? I’ve tried ‘–card-primary-letter-spacing’ but that does not work. Adding ‘letter-spacing: 0.1px’ works but that is for the entire card.
Thanks!
Tinus
Hey,
i want to use the select card to select the fan speed of my vacuum but it is not an entity it is the vacuum entity. Is there a way to get these in the select card?
1 Like
it is not possible to use the attribute of an entity as the entity in a card. you have to have an input_select entity for the select card.
I would create an input_select helper. add your fan speeds to it, and use that in the input select card.
you will then need to create and automation that checks if you changed the input_select and if you did, changes the fan attribute of your vacuum to what was selected in the input_select. and i would also add to your automation the opposite so when you change the vacuum fan state manually it would change the input_select to the correct fan speed as well. just to ensure that it doesnt go out of sync.
1 Like
Yes you are correct. But there is one important matter. When you do not use this host, the cards may fly around during the first loading of the card.
Can you give an example of this behaviour? I have been entirely unable to use anything that changes location and/or size of the card through :host
If you check the last line of this code you will see that
margin-left: 30px !important;
margin-right: 30px !important;
Has been used inside host. You can also achieve this through ha-card. But this time chips start to float like this:
type: custom:vertical-stack-in-card
cards:
- type: conditional
conditions:
- entity: input_boolean.live_tiles_topbar_hide
state: 'on'
card:
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
card_mod:
style: |
:host {
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
--ha-card-background: white;
}
ha-card {
--chip-icon-size: 20px;
--chip-background: none;
--chip-border: none !important;
--chip-box-shadow: none;
--chip-font-size: 14px;
--chip-spacing: 2px;
}
chips:
- type: template
icon: phu:aqara-temperature
icon_color: >
{% set state =
states('sensor.aqara_outdoor_temperature')|float(-1)
%} {%if state>= 29 %} red {% elif state>=26 %}
red {% elif state>=23 %} green {% elif state>= 20
%} green {% elif state>= 18 %} green {% elif state>=
16 %} blue {% else %} grey {% endif %}
content: '{{ states(''sensor.aqara_outdoor_temperature'') }}°C'
- type: template
icon: mdi:home-thermometer
icon_color: >
{% set state = states('sensor.genel_sicaklik')|float(-1)
%} {%if state>= 29 %} red {% elif state>=26 %}
red {% elif state>=23 %} green {% elif state>= 22
%} green {% elif state>= 20 %} blue {% elif state>= 18
%} green {% elif state>= 16 %} blue {% else %}
grey {% endif %}
content: '{{ states(''sensor.genel_sicaklik'') }}°C'
- type: template
entity: entity.entity
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: custom:vertical-stack-in-card
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Offline Devices
picture: /local/png/offline.png
secondary: >
{{ states('sensor.unavailable_entities')
}}
card_mod:
style: |
ha-card {
background: none;
margin-left: 0px;
--icon-size: 98px;
--primary-text-color: rgb(var(--rgb-amber));
--secondary-text-color: rgb(var(--rgb-white));
--card-primary-font-weight: 500;
--card-primary-font-size: 15px;
--card-secondary-font-weight: 500;
--card-secondary-font-size: 14px;
- type: custom:hui-element
card_type: markdown
content: >
{%- if
states('sensor.unavailable_entities')|lower
not in ['unknown','unavailable','none']
-%}
{%- if states('sensor.unavailable_entities')|int == 0 -%}
No unavailable entities.
{%- else -%}
{%- for entity in state_attr('sensor.unavailable_entities','entities') -%}
- {{ entity }}{%- if not loop.last -%}{{ '\n' }}{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- endif -%}
card_mod:
style: |
ha-card {
background: none;
margin-top: -20px;
margin-left: 0px;
--icon-size: 98px;
--card-primary-font-weight: 500;
--card-primary-font-size: 15px;
--card-secondary-font-weight: 500;
--card-secondary-font-size: 14px;
card_mod:
style: |
ha-card {
background: black;
style: |
--popup-background-color: black;
--popup-border-radius: 0px;
--popup-padding-x: 30px;
--popup-padding-y: 30px;
right_button: Kapat
icon: >
{% set state=states(entity) %} {% if state=='0' %}
mdi:audio-video {% else %} mdi:audio-video-off {% endif
%}
icon_color: |-
{% set state=states(entity) %}
{% if state=='0' %}
grey
{% else %}
red
{% endif %}
content: '{{ states(''sensor.unavailable_entities'') }}'
- type: template
entity: light.all_house_lights
content: |
{{ states('sensor.open_light_and_switches_total') }}
icon: |-
{% set state=states(entity) %}
{% if state=='off' %}
mdi:lightbulb-off-outline
{% elif state=='on' %}
mdi:lightbulb
{% else %}
mdi:door
{% endif %}
icon_color: |-
{% set state=states(entity) %}
{% if state=='off' %}
grey
{% elif state=='on' %}
amber
{% else %}
grey
{% endif %}
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.live_tiles_room_cards
double_tap_action:
action: call-service
service: light.turn_off
data: {}
target:
entity_id: light.all_house_lights
alignment: justify
card_mod:
style: |
ha-card {
background: black;
margin-top: 0px;
margin-bottom: 0px;
width: auto;
background-color: none;
border-radius: 15px !important;
height: auto;
box-shadow: none !important;
}
:host {
--mush-icon-size: 75px;
background-color: black;
margin-top: 0px !important;
margin-bottom: 5px !important;
margin-left: 30px !important;
margin-right: 30px !important;
height: 40px !important;
border-radius: 15px !important;
}
card_mod:
style: |
ha-card {
box-shadow: 10px;
border-radius: 10px;
height: auto;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
width: auto;
}
1 Like
I see what you mean now.
Top through ha-card bottom through :host.
Likely not encountered this because i try and avoid using margin.
I do always have the floating in because i style size and position through ha-card. But i see the benefit of :host with margin, but since it doesnt work for any other type of movement it seems a bit limited 
1 Like
i want to use your card but as soon i add an icon to the rooms the chips are not even anymore. Is there a way to fix this?
I use margin a lot in my designs. ha-card messes up everything but host is fine. It doen’t float around. But unfortunately it does not work under all circumstances. :host also works with height and some others too if I am not wrong.
I cant get height to work at all with :host which would definitely make me use it more if i could 
It does work. As you can see in the last line of the code :
:host {
height: 250px;
padding-right: 5px;
padding-left: 5px;
--mush-icon-size: 75px;
background: none;
}
type: custom:vertical-stack-in-card
cards:
- type: conditional
conditions:
- entity: input_boolean.live_tiles_topbar_hide
state: 'on'
card:
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
secondary: >
{% if is_state('binary_sensor.sonoff_sokak_kapi_sensor',
'on') %}
open
{% elif is_state('binary_sensor.sonoff_sokak_kapi_sensor',
'off') %}
closed
{% else %} {% endif %}
primary: Door is
entity: entity.entity
icon: null
icon_color: red
fill_container: false
multiline_secondary: false
layout: horizontal
picture: null
tap_action:
action: navigate
navigation_path: /dashboard-homekit/heating
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 16px !important;
position: relative;
overflow: visible !important;
margin-top: -39px;
margin-left: 0px;
--primary-text-color: rgb(var(--rgb-white));
font-weight: bold;
text-overflow: ellipsis;
text-align: left;
width: 70px;
text-indent: 5px;
border-radius: 0px;
}
.secondary {
font-size: 16px !important;
position: relative;
margin-top: -24px;
margin-left: 61px;
overflow: visible !important;
--secondary-text-color: var(--amber-color);
}
.: |
ha-card {
box-shadow: none !important;
background-color: none;
height: 100px !important;
}
- type: custom:mushroom-template-card
secondary: >
{% if is_state('alarm_control_panel.ha_alarm', 'disarmed')
%}
disarmed
{% elif is_state('alarm_control_panel.ha_alarm',
'armed_away') %}
loaded
{% elif is_state('alarm_control_panel.ha_alarm', 'arming')
%}
arming
{% else %}
check
{% endif %}
primary: Alarm is
entity: entity.entity
icon: null
icon_color: red
fill_container: false
multiline_secondary: false
layout: horizontal
picture: null
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 16px !important;
position: relative;
overflow: visible !important;
margin-top: -39px;
margin-left: -13px;
--primary-text-color: rgb(var(--rgb-white));
font-weight: bold;
text-overflow: ellipsis;
text-align: left;
width: 70px;
text-indent: 5px;
border-radius: 0px;
}
.secondary {
font-size: 16px !important;
position: relative;
margin-top: -24px;
margin-left: 58px;
width: auto;
overflow: visible !important;
--secondary-text-color: var(--amber-color);
}
.: |
ha-card {
box-shadow: none !important;
background-color: none;
height: 100px !important;
}
:host {
--mush-icon-size: 75px;
width: -10px;
}
- type: custom:mushroom-template-card
secondary: |
{% if is_state('input_boolean.trv_close_open', 'on') %}
on
{% elif is_state('input_boolean.trv_close_open', 'off') %}
closed
{% else %} {% endif %}
primary: Heating is
entity: entity.entity
icon: null
icon_color: red
fill_container: false
multiline_secondary: false
layout: horizontal
picture: null
tap_action:
action: navigate
navigation_path: /dashboard-homekit/heating
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 16px !important;
position: relative;
overflow: visible !important;
margin-top: -39px;
margin-left: 0px;
--primary-text-color: rgb(var(--rgb-white));
font-weight: bold;
text-overflow: ellipsis;
text-align: left;
width: 70px;
text-indent: 5px;
border-radius: 0px;
}
.secondary {
font-size: 16px !important;
position: relative;
margin-top: -24px;
margin-left: 85px;
overflow: visible !important;
--secondary-text-color: var(--amber-color);
}
.: |
ha-card {
box-shadow: none !important;
background-color: none;
height: 100px !important;
}
:host {
--mush-icon-size: 75px;
}
card_mod:
style: |
ha-card {
background: none;
margin-right: 0px;
margin-bottom: 0px;
width: auto;
border-radius: 0px !important;
}
:host {
height: 250px;
padding-right: 5px;
padding-left: 5px;
--mush-icon-size: 75px;
background: none;
}
card_mod:
style: |
ha-card {
box-shadow: 10px;
border-radius: 10px;
height: auto;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
width: auto;
}
Works kind off. If you apply directly to template card you get very different results with ha-card vs :host
both height 200px
I can certainly see the benefit of :host but ill need to get in the habit of saving my changes before judging whether it works i guess.
I am too used to seeing my changes happen in editor which doesnt happen with :host
Sorry I didn’t get that. You can preview :host changes in the editor. You don’t have to save in order to see it.
And as you can see in my previous example I applied the card directly into vertical-stack card but it can also be applied to mushroom template card. The hint here is, if you gonna apply it to a template card you must avoid using that template card under a conditional card.
Look at my example above. Only thing done to each is height: 200px !important;
ha-card
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
card_mod:
style: |
ha-card {
height: 200px !important;
}
:host
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
card_mod:
style: |
:host {
height: 200px !important;
}
No result in editor:
Once saved reserves 200px of space. But doesnt make the card itself 200px like
ha-card does.
there is a card under here which isnt shown in the screenshot
1 Like
It can be applied like that. And you can see changes in the editor.
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
card_mod:
style:
.: |
:host {
height: 200px !important;
}Hi, I’m working in a custom sidebar, and I want to modify a mushroom-template-card as you can see in the red box
So far I have it this way.
When the view is active, the template card should light up as you can see.
I share the code with you.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Control Lights
icon: mdi:lightbulb-group
tap_action:
action: navigate
navigation_path: kiosk
icon_color: white
fill_container: true
layout: horizontal
card_mod:
style: |
:host([dark-mode]) {
background: #2D2D2D;
}
:host {
background: #E0E4FD;
--mush-icon-size: 60px;
}
mushroom-shape-icon {
--shape-color: transparent !important;
}
ha-card {
padding: 3px !important;
}
card_mod:
style: |
ha-card {
border-radius: 30px;
}
ha-card:active {
transform: translatey(1.5px);
transition: 0s;
box-shadow: 0px 0.5px 2px 0px rgba(0, 0, 0, 0.16);
}
I am having problems with the text and icon alignment, and also as you can see, the padding doesn’t look very good
Could you please help me out?
1 Like
I tried to use this card but somehow the bar itself isn’t displayed, i only get text.
Any ideas, wrong sensor format maybe?
Did you install the custom bar-card ?
Edit:
You probably did.
The issue is with the color of the bar.
replace: color: rgb(var(–mush-green)) with
color: lightgreen for example
Thanks that fixed it indeed 
Maybe you also know or anyone else?
Can you add volume control to template card?
Searched this thread, github page and via google but cound’t find an answer other then it probably is not possible with the template card itself.