Although not mushroom, I like the custom:mini-graph-card. Install via HACS.
Use either one of these two custom_components:
As said above from @siwilson, mini-graph-card
or for all fancy graphics, the really, really cool, apex-charts-card
Do you mean the blue background of the icon?
If so does something like this work for you?
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 100px !important;
border-radius: 10px !important;
}
Yes, thatās exactly what Iām looking for!
Unfortunately this doesnāt seem to work for me.
This is the code Iām trying for this card:
type: custom:mushroom-template-card
primary: Home
secondary: ''
icon: mdi:arrow-left
icon_color: ''
tap_action:
action: navigate
navigation_path: /lovelace-mushroom/Home
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
box-shadow: 0px 0px;
border-radius: 20px;
margin-top: 5px;
}
mushroom-shape-icon$: |
.shape {
width: 100px !important;
border-radius: 10px !important;
}
Ah you need to do this:
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 100px !important;
border-radius: 10px !important;
}
.: |
ha-card {
box-shadow: 0px 0px;
border-radius: 20px;
margin-top: 5px;
}
Cant have 2 instances of | under eachother without splitting it with .:
Think of the .: as resetting yourself back to style where you can then drill further down into the elements.
4 Likes
This seemed to do the trick.
Thanks so much!
1 Like
Thanks @paddy0174 and @siwilson . Unfortuantely Iām stuck with the installation of this mini graph card.
Any tips?
I installed via HACS and missing resource reference. I add
resources:
- url: /local/mini-graph-card-bundle.js?v=0.11.0
type: module
to configuration.yaml but am getting errors.
Integration error: resources - Integration āresourcesā not found.
Integration error: type - Integration ātypeā not found.
Also tried the graphical editor method - but donāt know where to find Configuration ā lovelace dashboards and resources tab. Is this somehwere in HACS?
No, no need to add anything to configuration.yaml. Once installed via HACS it should appear as a choice when adding cards to a dashboard.
Awesome @siwilson - I was thinking too hard.
Challenge is that my sensor requires a different approach. Itās working for 50%. See NaN screenshot.
Iām using this code in a custom vcard to get it:
{{ state_attr(āclimate.bijkeukenā, ācurrent_temperatureā) }}Ā°C
Any ideaās on how to integrate that in the code of mini graph? The HVAC temp card also works without additional code when I set the temperator mode to on in the vcard.
type: custom:mini-graph-card
entities:
- entity: climate.thermostat
attribute: current_temperature
I would suggest you read the github page of content you install. It is within the first couple of sections on how to use the card.
1 Like
Thanks Dimitri this works. Will read the docs better next time.
1 Like
how did you do this āLiving Areadā in the same line can you give me the code?
Happy to share, not sure which bit it is that you like?
This is what my climate page looks like now. Itās a simple-thermostat card on the top for controlling the air, then each zone is done using a mushroom climate card. This is because of how my izone air conditioning controller handles individual room temperatures.
The code for the living area part is below, but thereās nothing tricky about that, so not sure itās what youāre asking for?
type: custom:mushroom-climate-card
entity: climate.living_area
fill_container: true
hvac_modes: []
show_temperature_control: true
collapsible_controls: true
icon: mdi:sofa-outline
hold_action:
action: more-info
layout: horizontal
1 Like
Hi, congrats on the cardsā¦
I also created everything with mushroom cardsā¦
But I canāt get the animations to workā¦
Can you help me?
Thank you
Hi,
i donāt see the notifications badge on the bell.
I used only one sensor group but itās not wok
the code below
type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: template
content: '{{ now().strftime("%A, %-d %B") }}'
card_mod:
style: |
/* Style date & time */
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-border-width: 0;
}
- type: template
entity: input_boolean.notifications
icon: mdi:bell
tap_action:
action: toggle
hold_action:
action: none
card_mod:
style: |
/* Notification indicator */
ha-card:after {
/* Turn on indicator if there is a notification */
{% set notifications = (expand(states.light.tutte_luci) | selectattr('state', 'eq', 'on') | list | count)
{% if notifications >= 0 %}
content: "";
{% endif %}
/* Position & style notification */
position: absolute;
background: rgb(var(--rgb-red));
border-radius: 50%;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
}
Post your yaml and we can help 
Home Assistant Unavailable Entities Chip
Page Properties:
- Displays the list of offline entites in the topbar(or anywhere you place it)
- Dynamic icon that changes with the number of unavailable entities. If nothing is offline the icon changes.
- Browser Mod support. If you click the icon a new page, containing the list of unsupported devices will appear.
- Number Display. You will see the number of the offline devices inside the chip.
You can find everything in my github page.
8 Likes
I dont believe that you can. but you can do something like this if you have card mod and stack in card installed.
type: custom:stack-in-card
cards:
- square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-climate-card
entity: climate.bedroom_heating
name: Thermostat
show_temperature_control: true
layout: horizontal
card_mod:
style: |
ha-card {
width: 300px
}
- type: custom:mushroom-entity-card
entity: sensor.bedroom_temperature_humidity_humidity
name: Humidity
card_mod:
style: |
ha-card {
width: 150px;
position: absolute;
right: 25px;
}
Could even do something like this that works on a smaller screens if you are ok with using the default layout instead.
type: custom:stack-in-card
cards:
- square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-climate-card
entity: climate.bedroom_heating
name: Thermostat
show_temperature_control: true
card_mod:
style: |
ha-card {
width: 380px
}
- type: custom:mushroom-entity-card
entity: sensor.bedroom_temperature_humidity_humidity
name: Humidity
card_mod:
style: |
ha-card {
width: 150px;
position: absolute;
right: 5px;
transform: scalex(-1);
}
mushroom-state-info {
transform: scalex(-1);
text-align: right;
}
3 Likes
Please read the FAQ.
Only english is supported.