Hello, I’m using the media player card to make a volume bar. I was wondering if there’s a way to make another bar which control the playback position/progress of the media player?
type: custom:mushroom-media-player-card
volume_controls:
- volume_set
Check out the Mini-media-player You can add and hide a ton of features.
Using a stack card would make it easy to add to a Mushroom card if you are sticking with a particular style.
Hi guys, can you advise how can I add the " graus" and " min" after the value in mushroom-number-card ? I tried secondary but did not work. secondary: '{{ states(entity) }} graus'
This is one method
type: custom:mushroom-number-card
entity: input_number.apex
card_mod:
style:
mushroom-state-info$: |
.secondary:after {
content: "graus"; }
it does work you just haven’t added it correctly!
look at this guide
especially the
What the $ and .: | symbols do
I’m running into a problem, probably because I just don’t know how to do it.
I want to enhance my mushroom card.
Right now it always shows Heat for no reason at all, so I wanted to use the sensor to check if it’s heating and adjust the icon colour to match the intensity.
Any help would be welcome.
Thank you.
type: custom:mushroom-climate-card
entity: climate.kitchen
layout: horizontal
hvac_modes:
- auto
- heat
show_temperature_control: true
card_mod:
style: |
ha-card {
background: rgba(0, 0, 25, 0.45);
border: 0px;
box-shadow: none;
padding: 4px 5px !important;
}
cards:
- type: custom:button-card
entity: sensor.backdoor_thermostat_heating
show_name: true
name: |
[[[
const heatingPercent = parseFloat(states['sensor.backdoor_thermostat_heating'].state);
if (heatingPercent === 0) {
return 'Off';
} else {
return `${heatingPercent} % Heating`;
}
]]]
show_icon: true
icon: |
[[[
if (parseFloat(states['sensor.backdoor_thermostat_heating'].state) === 0) {
return 'mdi:radiator-disabled';
} else {
return 'mdi:radiator';
}
]]]
state:
- value: '0'
styles:
icon:
- color: white
- value: '1'
operator: '>='
styles:
icon:
- color: yellow
- value: '25'
operator: '>='
styles:
icon:
- color: orange
- value: '50'
operator: '>='
styles:
icon:
- color: red
For some reason when I am casting my dashboards my mushroom cards when casted are missing but they show up on my desktop and mobile mushroom cards are still showing up.
anyone going through something similar?
I cannot for the life of me get any card_mod settings to take effect; I am running version 3.6.2. I am using the following simple configuration:
type: custom:mushroom-cover-card
entity: cover.garage_doors
card_mod:
style: |
ha-card{
background: none !important;
}
…and here is a screenshot of the result:
I expect the card background to be transparent, but the card carries the default theme background color. Is there a trick to getting card_mod configurations to take?
make sure to clear browser cache
try
background: rgba(0,0,0,0);
I’ve organized my entities into separate cards for each room. Some rooms have too many entities to fit on a single card. Is there a way for these entities to automatically cycle through within their respective cards?
you could add a drop down list of entities that don’t fit on your card
will quote what I said before.
it’s not adding border: none because you haven’t added the ha-card correctly.
if you follow the forum guidelines and post your code with `` and not as a screenshot I could help you more
Still no change reflected in the browser after clearing cache and using the suggested value background: rgba(0,0,0,0);. Do I be on a version of mushroom before 3.6.2 for this to work??
When editing the ha-card DOM element directly in Chrome’s dev tools, I can set the background color as expected - so I am confident that ha-card is the element I want to target, however, I am almost certainly messing up element targeting in the yaml.
Based on the screenshot and if I understand the docs correctly, ha-card is in the shadow-root of mushroom-cover-card therefore, I should be using the following yaml configuration:
type: custom:mushroom-cover-card
entity: cover.garage_doors
card_mod:
style:
mushroom-cover-card$: |
ha-card {
background: rgba(0,0,0,0) !important;
}
the issue wouldn’t be mushroom it would be card_mod if anything.
can you try this.
this is my working title card
type: custom:mushroom-template-card
primary: 'r e m i n d e r s '
icon: ''
secondary: 'a l a r m s '
icon_color: blue
card_mod:
style: |
ha-card {
--card-primary-font-size: 1.5rem;
--card-secondary-color: var(--purple-color);
border: 1px;
box-shadow: none;
background: rgba(0,0,0,0);
margin-top: 1.5rem;
}
In your example, are you editing the yaml in the code editor for the card? When I copy paste your configuration into a brand new mushroom-template-card I still do not see any of the style changes reflected in the UI despite multiple reloads and cache clears.
I would suggest making a new post or ask for assistance in the card_mod thread.
sounds like you have an issue with that. abit out of scope for this mushroom thread.
Do you see a red background with this code?
If not have you reloaded card_mod?
Is card_mod working on other cards?
``
type: custom:mushroom-cover-card
entity: cover.your_device
card_mod:
style: |
ha-card {
background: red !important;
}
If not, please follow Frosty’s advice and open up a new thread for this specific issue.