I’ve asked that before, but I am still getting some sort of issues with the code you post, even with UI Minimalist installed.
What should I look into not the specific case below but in general?
Last question.
Which entity did you use for health?
I do see the binary for security status but non for health?
In this case doesnt look like the issue is theme. You have a badge that doesnt have its z-index set so the badge is behind the graph.
Try and add this.
.: |
mushroom-state-info {
z-index: 1;
}
mushroom-badge-icon {
z-index: 1;
}
I notice that i missed the badge existing in my first response. Ill update my initial response to include it 
1 Like
Thank you!
1 Like
I have a idea about something but before trying to create what i have in mind I would like to know if it is even possible with Mushroom cards?
Basscily it’s a normal card with all the bells and whissles but with a vertical bar next to it that can be used as a slider to set level or in worst case indicate the current level?
/edit:
Looks like i found my answer in the Bar card topic using stack-in-card + card-mod or the layout card it should be doable…
Can someone confirm?
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