Jey @rhysb, can you tell me why this happens to me?
Is it possible to override the color of a media card, or the color change based on entity state? I have a bunch of Echo Dots that remain in âstandbyâ even when music is playing through them. This results in the media card colors always appearing grayed out:
What integration do you use ? The state shouldnât be âstandbyâ by âplayingâ.
Iâm playing music to a group through the line-in on an Echo Link Amp. This doesnât change the state of the device(s).
hallo thank you this just same as my code here my code
/* Make card sticky at top of page */
:host {
position: sticky;
z-index: 9;
top: 0px;
}
/* Pseudo element to hide card styling when at top */
ha-card:after {
content: "";
/* Make fixed so element scrolls up */
position: fixed;
top: 0px;
Hello friends, when I try to add the
ha-card {` card-mod
, the animation breaks. But I really wanted to remove the background of the box.
https://paste.debian.net/1277901/
Use stack-in-card
type: custom:stack-in-card
card_mod:
style: |
ha-card {
box-shadow: none;
background: rgba(0,0,0,0);
text-align: center;
}
cards:
- type: custom:mushroom-template-card
primary: Robot
icon: mdi:robot-outline
icon_color: deep-purple
entity: input_boolean.room_hall
card_mod:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: tilt 4s steps(1) infinite, blink 4s infinite;
transform-origin: 50% 92%;
}
@keyframes tilt {
0%, 100% { transform: rotate(0deg); }
33% { transform: rotate(8deg); }
66% { transform: rotate(-8deg); }
}
@keyframes blink {
0%, 20%, 30%, 45%, 55%, 70%, 80%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 100% 0, 100% 53%, 25% 52%, 24% 77%, 75% 77%, 76% 52%, 100% 52%, 100% 100%, 0 100%); }
50% { clip-path: polygon(0 0, 100% 0, 100% 53%, 51% 54%, 51% 76%, 76% 77%, 75% 53%, 100% 52%, 100% 100%, 0 100%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 53%, 24% 53%, 24% 77%, 47% 77%, 47% 52%, 100% 52%, 100% 100%, 0 100%); }
}
I feel like this must have been asked a hundred times, but in 6400 posts - I couldnât find the answer⌠Sorry if this a repeat -
How can I increase the spacing in between cards, when using a theme?
I see padding/spacing on Titles, Chips - but how to increase the spacing in between ALL cards?
Thanks
I was previously suppressing all of the borders of mushroom cards via themes, but I just updated to 2023.4.X and theyâre back. Does a different mushroom theme variable than before need to be changed now?
No, ha-card-border-width: 0 still works. Has there been an update of your theme?
How to solve the light temp button issue?
I modified the card a little bit to fit my needs better but I have problems with the card width. I would love it to be more dynamic and to center in the middle of the card. Iâm using it with the custom:swipe-card.
- type: custom:mushroom-template-card
primary: Klimat
secondary: >-
{{ states('sensor.temperatur_inomhus_medelvarde_min') | round(0) }}-{{
states('sensor.temperatur_inomhus_medelvarde_max') | round(0) }}°
multiline_secondary: true
icon_type: icon
layout: horizontal
icon: mdi:home-thermometer
icon_color: var(--mush-rgb-teal)
tap_action:
action: navigate
navigation_path: klimat
card_mod:
style: |
ha-card {
height: 40px !important;
width: 120px !important;
--secondary-text-color: var(--disabled-text-color);
--primary-text-color: var(--primary-text-color);
border-radius: 25px;
}
:host {
--mush-icon-size: 22px;
--mush-icon-symbol-size: 22px;
--mush-card-secondary-font-weight: normal;
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 12px;
--mush-card-primary-line-height: 12px;
--mush-card-secondary-line-height: 12px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
Now I know this is not the place for swiper card questions but is there any tweaks that can be done to have it just flow like it does in the iOS app (first gif)? If I set slidesPerView: to auto it will just show one card per slide⌠I would want it to just flow with a specific space between the cards.
type: custom:swipe-card
parameters:
freeMode: true
iOSEdgeSwipeDetection: true
slideToClickedSlide: true
slidesPerView: 3
spaceBetween: 50
cards:
âproblems with the card widthâ ??? whatâs with the width ?, âmore dynamicâ ? in what way ?, i.e. px is px, ⌠and content is in the middle of the card, but maybe itâs the text only you want in center of the card ⌠or is this question related to swiper-card, or the card which you have your mushroom-template-cards in ?
Yes, maybe some is better to ask in swipe-card , and card_mod also have its own Topic( and as mentioned, i have no idea howto âaddressâ the space between icon-content)
In general, margin and padding is used
PS: anyhow, when it comes to IOS , im out 
Yeah I meant that the swiper does not take to account the width of the cards in it, only how many. So I could go the route making all cards the same size even though the text lenght in them varies. But as the mush template card is set to horizontal (default) the content will appear to the left and not in the center of the card itself.
I assume you mean right ? ⌠Icon is left - Content(text) is right
Anyway, if you increase the width of the card( so there are margins ), you can move icon-content any direction you want ( so it appears centered )
EDIT: beside âwhat you haveâ and âwhat you wantâ is same same, âcontent(icon+text) is centeredâ , Text is not, obviously as it have an icon in-front!, and various length of text after
I do see a total absent of padding|margin in your CSS(i wonder why) , so i canât tell what you tried/think/want
PS: Did this little row disturb you, or you didnât like the result, or thoughts of modify it ?
margin: 0 auto;
1 Like
hello together, i need a little bit of help or idea how i can achieve better what i want
at the moment, i am using conditional card together with an input_boolean to get a drop-down of different informations - when i need them.
the problem with this approach is, the boolean stores the open info - so next the data shown an i have to close it manually
is there a better to accomplish something like that?
Does anyone know how to do a double line? As you can see the words âDoor Unlockedâ and â2 Person Homeâ are cut off, so would make sense to make them double lined to prevent that.
Hereâs the card:
- type: grid
square: false
cards:
- type: custom:mushroom-template-card
secondary: >-
{{ states(config.entity) | replace('_only', '') | replace('_', '/') |
title }}
icon: none
entity: climate.3family_room
layout: vertical
icon_color: ''
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Climate
size: normal
content:
type: custom:stack-in-card
cards:
- type: custom:thermostat-dark-card
title: Bedroom
entity: climate.3family_room
chevron_size: '100'
ambient_temperature: sensor.3family_room_temperature
hvac:
states:
idle: idle
cooling: cool
heating: heat
heat_cool: heat_cool
step: '0.5'
pending: '3'
idle_zone: '2'
- type: custom:mushroom-climate-card
entity: climate.3family_room
show_temperature_control: true
hvac_modes:
- heat_cool
- heat
- cool
- fan_only
layout: horizontal
primary_info: none
secondary_info: none
collapsible_controls: false
fill_container: true
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-button-group$: |
.container {
justify-content: center !important;
}
card_mod:
style:
mushroom-shape-icon$: |
.shape:after {
content: "{{ state_attr(config.entity, 'current_temperature') | round(0) }}°";
position: absolute;
font-size: var(--card-primary-font-size);
font-weight: bolder;
{% set status = state_attr('climate.3family_room','hvac_action')
%}
{% if status == 'off' %}
color: grey
{% elif status == 'cooling' %}
color: blue
{% elif status == 'heating' %}
color: red
{% else %}
color: grey
{% endif %}
}
.shape {
box-shadow: var(--ha-card-box-shadow) !important;
}
.: |
ha-card {
--ha-card-background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
mushroom-shape-icon {
--shape-color: white !important;
}
- type: custom:mushroom-template-card
secondary: >-
{% if is_state("lock.front_door", "unlocked")
%}
Door Unlocked
{% else %}
Door Locked
{% endif %}
icon: >-
{% if is_state("lock.front_door", "unlocked")
%}
mdi:lock-open
{% else %}
mdi:lock
{% endif %}
entity: lock.front_door
layout: vertical
icon_color: >-
{% if is_state("lock.front_door", "unlocked")
%}
red
{% else %}
green
{% endif %}
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape:after {
position: absolute;
font-size: var(--card-primary-font-size);
font-weight: bolder;
.shape {
box-shadow: var(--ha-card-box-shadow) !important;
}
.: |
ha-card {
--ha-card-background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
mushroom-shape-icon {
--shape-color: white !important;
}
- type: custom:mushroom-template-card
secondary: |-
{{ states(config.entity) }}
Persons Home
icon: mdi:account-supervisor-circle
entity: zone.home
layout: vertical
icon_color: orange
primary: ''
tap_action:
action: call-service
service: browser_mod.popup
target: {}
data:
dismissable: true
autoclose: false
content:
type: grid
square: false
cards:
- type: custom:mushroom-person-card
entity: person.davidnestico
icon_type: entity-picture
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-person-card
entity: person.dad
icon_type: entity-picture
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-person-card
entity: person.vally
icon_type: entity-picture
hold_action:
action: none
double_tap_action:
action: none
fill_container: false
- type: custom:mushroom-person-card
entity: person.esther
icon_type: entity-picture
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-person-card
entity: person.mom
icon_type: entity-picture
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-entity-card
entity: zone.home
layout: horizontal
hold_action:
action: none
double_tap_action:
action: none
columns: 2
style: >-
background-color: {{ states('input_text.dark_nav_bar_color') }}
!important;
card_mod:
style:
mushroom-shape-icon$: |
.shape:after {
position: absolute;
font-size: var(--card-primary-font-size);
font-weight: bolder;
}
.shape {
box-shadow: var(--ha-card-box-shadow) !important;
}
.: |
ha-card {
--ha-card-background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
mushroom-shape-icon {
--shape-color: white !important;
}
- type: custom:mushroom-template-card
secondary: |-
{{ states(config.entity) }}
Lights On
icon: hue:bulb-group-classic-3-alt
entity: sensor.current_lights_on
layout: vertical
icon_color: orange
hold_action:
action: more-info
tap_action:
action: navigate
navigation_path: /homekit-infused/menu/
card_mod:
style:
mushroom-shape-icon$: |
.shape:after {
position: absolute;
font-size: var(--card-primary-font-size);
font-weight: bolder;
.shape {
box-shadow: var(--ha-card-box-shadow) !important;
}
.: |
ha-card {
--ha-card-background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
mushroom-shape-icon {
--shape-color: white !important;
}
columns: 4
That did it. I must have accidentally deleted it. Thanks.
1 Like
Hello everybody,
How i can change the background-color of the icon, if is on green, and if is off red.
type: custom:stack-in-card
mode: horizontal
style: |
ha-card {
background: #ebebeb;
border: none;
}
cards:
- type: custom:mushroom-light-card
entity: light.controller_rgbw_f4f553
hold_action:
action: navigate
navigation_path: quarto-marco-and-fatima
style: |
ha-card {
border: none;
}
- type: custom:mushroom-light-card
entity: light.leds_armario
style: |
ha-card {
border: none;
}
- type: custom:mushroom-media-player-card
entity: media_player.lg_webos_tv_9496
hold_action:
action: navigate
navigation_path: sala
style: |
ha-card {
border: none;
}
