-
Dont @ users here.
-
Use it without mod_card. Your reference from Thomas is really related to cards without it.
card_mod:
style: |
:host { height: 276px; }
-
Why are you saying not to mention (@) users here? I see it happen alot on this forum (even this specific topic) and it is common practice most elsewhere (github, slack, email, whatsapp, etc).
-
Thank you! Using
:hostworks and now I can remove thecard_modwrapper.:hostis not documented in card-mod, probably would be helpful to have that there
Hello,
Iâm trying to make my mushroom buttons pop when clicked; I used the below code:
- type: custom:mushroom-template-card
primary: HBO Max
secondary: ''
icon: phu:hbo-max
icon_color: |-
{% if is_state('script.hbo_max','on') %}
deep-purple
{% endif %}
badge_icon: |-
{% if is_state('script.hbo_max','on') %}
mdi:play
{% endif %}
badge_color: |-
{% if is_state('script.hbo_max','on') %}
green
{% endif %}
layout: vertical
entity: script.hbo_max
tap_action:
action: toggle
card_mod:
style: |
:host {
{% if is_state('script.delay','on') %}
transition: all .2s ease-in-out;
transform: scale(1.05);
{% endif %}
}
The issue with this code is that I would have to create a separate delay script for each individual button Iâm using, as using this syntax will just pop all the other button. I could use the script âhbo_maxâ, which changes the source to HBO on the TV; however this script takes a few seconds to execute and Iâd like the pop to be brief, for a few milliseconds.
Is there a way around it? Can I use another âifâ function with the condition that only the button card is pressed? Or is it possible to add a delay after these lines and then rever the values back to normal? Something like
{% if is_state('script.hbo_max','on') %}
transition: all .2s ease-in-out;
transform: scale(1.05);
delay 200ms
transform: scale(1.05);
{% endif %}
Thank you!
Arganto is right. Only @ someone if theyâve been part of your specific conversation already (by choice). Even better: Just reply directly to the relevant post or quote it (like I did here). âEverywhereâ is not a justification. Those are the forum rules here, and thereâs good reason for it.
Im trying to reduce the padding around a specific mushroom-title-card.
Iâve created it under a mod-card to have a ha-card element but I cant reduce the padding.
Here are the relevant elements:
The padding: 0px should be added to the div element (highlighted)
Iâve tried a few things, among:
card_mod:
style:
.: |
div {
padding: 0px;
}
mushroom-title-card$: |
div {
padding: 0px;
}
Also tried div.header but nothing changes.
Any thoughts?
Have you tried with !important?
Have you tried
card_mod:
style: |
ha-card div.header{
padding: 0px; ( or --padding: 0px; )
}
sorry, i just saw your in "mushroom-title-card _shadow-root
Try with
card_mod:
style:
.: |
div.header {
--padding: 0px;
}
and also as above add " !important "
, it took me awhile to find this post ( and a dozen attempt to Resize the SVG icon within the ".wrapper " in template-entity-row )
Is this really impossible ? , been sitting 1 day now, and tried dozen different ways.
- entity: sensor.moon_phase
name: []
type: custom:template-entity-row
state: >-
{% if is_state('sensor.moon_phase', 'new_moon')%} NyMĂ„ne {% else %} {%
if is_state('sensor.moon_phase', 'waxing_crescent')%} Tilltagande {%
else %} {% if is_state('sensor.moon_phase', 'first_quarter')%} HalvMĂ„ne
{% else %} {% if is_state('sensor.moon_phase', 'waxing_gibbous')%}
Tilltagande FullmÄne {% else %} {% if is_state('sensor.moon_phase',
'full_moon')%} FullMĂ„ne !!! {% else %} {% if
is_state('sensor.moon_phase', 'waning_gibbous')%} Avtagande FullmÄne {%
else %} {% if is_state('sensor.moon_phase', 'last_quarter')%} HalvMĂ„ne
{% else %} {% if is_state('sensor.moon_phase', 'waning_crescent')%}
Avtagande {% else %} away !!! {% endif %} {% endif %} {% endif %} {%
endif %} {% endif %} {% endif %} {% endif %} {% endif %}
card_mod:
style:
div#wrapper state-badge $ ha-state-icon $ ha-icon $: |
ha-svg-icon {
height: 36px; !important;
width: 36px; !important;
}
Above is latest attempt, with inspiration from the post you replied to ⊠Still no solution to this ?
Or is it me, who just canât figure out how to get in there ? ⊠i can change the size of the icon in browser_inspector ( as you see to the right in the pic. ), but how to get there with card-mod ?
What card are you using to include the row?
If I take you eample and put it in an entities card, then a. there is no ha-icon element and b. it is working as always
type: entities
entities:
- entity: sun.sun
name: []
type: custom:template-entity-row
card_mod:
style:
state-badge:
$:
ha-state-icon:
$: |
ha-svg-icon {
height: 36px !important;
width: 36px !important;
}
1 Like
header-cards
Edit: and Moon entity, Not sun.sun âŠit seems like itâs the âsensor.moon_phaseâ which is playing me
Yes, the ha-icon seems to come from the âsensor.moon_phaseâ, but still in header-cards itâs still, it doesnât play along
Thanks alot, for âloosen upâ my âdilemmaâ ⊠now the sensor.moon_phase/template-row is inside entities inside header-card âŠ
- type: entities
entities:
- entity: sensor.moon_phase
name: []
type: custom:template-entity-row
state: >-
{% if is_state('sensor.moon_phase', 'new_moon')%} NyMĂ„ne {% else %}
{% if is_state('sensor.moon_phase', 'waxing_crescent')%} Tilltagande
{% else %} {% if is_state('sensor.moon_phase', 'first_quarter')%}
HalvMĂ„ne {% else %} {% if is_state('sensor.moon_phase',
'waxing_gibbous')%} Tilltagande FullmÄne {% else %} {% if
is_state('sensor.moon_phase', 'full_moon')%} FullMĂ„ne !!! {% else %}
{% if is_state('sensor.moon_phase', 'waning_gibbous')%} Avtagande
FullmÄne {% else %} {% if is_state('sensor.moon_phase',
'last_quarter')%} HalvMĂ„ne {% else %} {% if
is_state('sensor.moon_phase', 'waning_crescent')%} Avtagande {% else
%} away !!! {% endif %} {% endif %} {% endif %} {% endif %} {% endif
%} {% endif %} {% endif %} {% endif %}
card_mod:
style:
state-badge:
$:
ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
height: 46px; !important;
width: 46px; !important;
}
So is it working or not there now as well? As Iâm not using the header-card, I can only test with entities. And there sun (without ha-cion) and moon (with) is working.
type: entities
entities:
- entity: sensor.moon_phase
name: []
type: custom:template-entity-row
card_mod:
style:
state-badge:
$:
ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
height: 36px !important;
width: 36px !important;
}
BTW There are wrong ; in your CSS before !important.
thanx again, it slipped my eyes ⊠yes itâs working now in header-card ⊠i actually also had some problems with the âmushroom-cardsâ in header-card, but so far everything looks as intention 
Card-mod in header:
Thought i would share my code for the Header ( Still under Construction ) , but so far it looks as below:
Itâs âa bitâ messy, and need some âfontâ trimming, and eventually i will try and âcleanâ the card-mod , thou still has to work in both Edge/Firefox
header_cards:
justify_content: start
cards:
- type: weather-forecast
entity: weather.forecast_home
name: []
show_current: true
show_cond:ition: false
show_forecast: false
card_mod:
style: |
ha-card {
padding-top: 0px;
padding-bottom: 0px;
padding-left: -30px
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: -60px;
font-size: 12pt;
border-radius: 0px;
icon-size: 45px; !important;
width: 160px !important;
}
ha-card div.content {
height: 40px !important;
width: 100px !important;
}
ha-card div.content div.icon-image svg {
--svg-icon-size: 45px;
width: 45px;
height: 45px
}
ha-card div.content div.info div.name-state div.state {
font-size: 14px
}
ha-card div.content div.info div.temp-attribute div.temp {
font-size: 14px
}
- type: custom:mushroom-template-card
primary: '{{ states(''sensor.home_wind_speed'') }} m/s '
secondary: '{{ states(''sensor.home_precipitation_amount'') }} mm'
icon: mdi:weather-windy
entity: sensor.annerstad_wind_speed
multiline_secondary: true
layout: horizontal
icon_color: blue
fill_container: false
card_mod:
style: |
ha-card {
ha-icon-size: 38px;
font-size: 18px;
border-radius: 0px;
height: 72px !important;
width: 60 !important;
margin-left: -20px;
}
- type: entities
card_mod:
style: |
ha-card {
border-radius: 0px;
font-size: 16px;
margin-right: 20px;
margin-left: -16px;
}
entities:
- entity: sensor.moon_phase
name: []
type: custom:template-entity-row
state: >-
{% if is_state('sensor.moon_phase', 'new_moon')%} NyMĂ„ne {% else %}
{% if is_state('sensor.moon_phase', 'waxing_crescent')%} Tilltagande
{% else %} {% if is_state('sensor.moon_phase', 'first_quarter')%}
HalvMĂ„ne {% else %} {% if is_state('sensor.moon_phase',
'waxing_gibbous')%} Tilltagande FullmÄne {% else %} {% if
is_state('sensor.moon_phase', 'full_moon')%} FullMĂ„ne !!! {% else %}
{% if is_state('sensor.moon_phase', 'waning_gibbous')%} Avtagande
FullmÄne {% else %} {% if is_state('sensor.moon_phase',
'last_quarter')%} HalvMĂ„ne {% else %} {% if
is_state('sensor.moon_phase', 'waning_crescent')%} Avtagande {% else
%} away !!! {% endif %} {% endif %} {% endif %} {% endif %} {% endif
%} {% endif %} {% endif %} {% endif %}
card_mod:
style:
state-badge:
$:
ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
height: 38px !important;
width: 38px !important;
color: yellow;
- type: custom:mushroom-entity-card
entity: sensor.electricity_price_somewhere
icon_type: icon
icon: mdi:lightning-bolt-circle
icon_color: green
card_mod:
style: |
ha-card {
icon-size: 38px;
font-size: 18px;
border-radius: 0px;
height: 72px !important;
width: 80 !important;
margin-right: 0px;
margin-left: -20px;
}
2 Likes
All,
I like to change the color of the icons in a glance card, of which the listed entities are generated by the auto-entities card.
Currently I have this:
==> love to change the color of the yellow icons (âBureauâ, âTV Hoekâ, âŠ)
Currently my code is this:
# --- Conditional Toggle All Lights On
# ------------------------------------
- type: conditional
conditions:
- entity: input_boolean.on_off_toggle_conditional_lights_on
state: 'on'
card:
type: custom:auto-entities
show-empty: false
filter:
include:
- domain: light
state: 'on'
options:
tap_action:
action: toggle
card:
type: glance
show_state: false
columns: 6
card_mod:
style:
.: |
ha-card {
border-radius: 12px;
font-family: Helvetica;
font-size: 11px;
}
.entities.no-header {
padding: 8px 0px 0px 0px !important;
}
.entity {
margin: 0px !important;
}
.entity:
$: |
state-badge {
margin: 0px 0px 4px !important;
}
I was successful in changing the icon colors, if I have a simple glance card with entities I list explicitely.
I am at a loss on how to change the icon colors, if the glance card entities are generated by auto-entities card.
Can a CSS guru please guide me ?
1 Like
filter:
include:
- domain: light
options
icon_color: yellow
I cannot get this to work.
Browsing the docs for auto-entities card and entities card, I cannot find any âicon_colorâ option.
Am I missing something ?
Maybe you are right, The âOptionsâ is applied to the âCardâ you choose to present the individual entities as, so if you chooses âentitiesâ(default) then itâs the configuration options for entities you can apply here.
I am im using custom:mushroom-entity.card( custom:auto-entities in grid, in a custom:fold-entity-row ), so thats where i got this âoptionâ from
Thou itâs also here âunder optionsâ you apply âoptionalâ card-mods to each(all) entities(the âentityâ-card)
card_param: cards
filter:
include:
- domain: device_tracker
options:
type: custom:mushroom-entity-card
icon_color: green
hide_state: true
style: |
ha-card {
--icon-size: 24px;
--card-height: 26px;
--font-size: 15px;
EDIT: I still wonder how your presented card-pic is made/function, as your description(code-snippet for conditional) puzzles me
Thx for the feedback.
The code I used displays a glance card (populated by auto-entities) only if a certain input_boolean is âonâ. That logic seems to work fine.
My query is how to change the icon color of the populated (light) entities in the glance cardâŠ