I opted for a dashboard with a single view. To keep and use only one menu bar on my entire dashboard.
I chose to use local-conditional-card to do this.
It also allows me to easily manage which cards are shown or hidden.
Result:
Here is the full code for my top bar:
Is there anyway to change the colors of the alarm card icon? The normal alarm card uses blue for disarmed and green for armed. Iād like to make it green for disarmed, and red for armed, but I donāt see options in the visual editor or looking over the options on github. Iām guessing Iād have to use a template card, but I also want the arm/disarm buttons at the bottom of the card.
This is how I want it to look, just the colors of the icon different.
Any suggestions?
Can you make a version of this with ātype: custom:search-cardā if you have it, please? Thanks.
I replaced the first card with it and doesnāt look right for me so maybe you can style it better.
something like thisā¦
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state('xxxx', 'on') %}
--shape-color: rgba(var(--rgb-red), 0.25);
--icon-color: rgba(var(--rgb-white), 1);
{% else %}
--shape-color: rgba(var(--rgb-green), 0.25);
--icon-color: rgba(var(--rgb-white), 1);
{% endif %}
}
Thank you, that worked perfectly. I hadnāt thought about using a card mod, and honestly, Iād never used one before to know how to do that even if I had. I really appreciate it.
Hi,
Iām facing an issue where I canāt get nested mushroom template chips (combined with different mushroom cards in a vertical-stack-in-card) to be visible in chrome or edge browser on e.g. desktop/tablet or the companion app on my phone.
However, it is working when showing the same view on my mobile in brave browser or opera on my desktop. And I can also see those conditional mushroom chips in edit mode, every time.
Is there anybody who has an idea, why that is the case? I canāt seem to figure out, why this is behaving so inconsistently.
Iāve already been playing around and tested different approaches (for the conditional visibility). I tried the āoriginalā approach, from the code example I started with, with the conditional card and also tried to achieve a similar behaviour with only a conditional if-clause in the icon-value.
I also played around with different margins and sizes in general. But it was never consistently showing in all contexts (except for the mentioned contexts where it always works, e.g. edit mode).
My current approach is using conditional if-clauses in the icon parameter value, instead of conditional cards. Hereās a code example.
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: sensor.lights_currently_turned_on
icon: mdi:lightbulb-group
icon_color: |
{% if states('sensor.lights_currently_turned_on') == '0' %}
grey
{% else %}
#f39c12
{% endif %}
primary: Licht
secondary: |
{% if states('sensor.lights_currently_turned_on') == '0' %}
aus
{% else %}
{{ states('sensor.lights_currently_turned_on') }} eingeschaltet
{% endif %}
layout: horizontal
tap_action:
action: navigate
navigation_path: /dashboard-start/lichtsteuerung
double_tap_action:
action: navigate
navigation_path: /dashboard-start/lichtsteuerung
hold_action:
action: toggle
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 14px !important;
position: relative;
top: -50px;
left: -160px;
overflow: visible !important;
white-space: normal !important;
}
.secondary {
position: relative;
overflow: visible !important;
top: -52px;
left: -160px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -50px;
top: 45px;
}
.: |
:host {
--mush-icon-size: 146px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: media_player.player
icon: >-
{% if is_state('media_player.player', 'on') or
is_state('media_player.player_zone_2', 'on') %}
{% if is_state('media_player.player', 'on') and (is_state_attr('media_player.player', 'source',
'strm-box') or
is_state_attr('media_player.player', 'source',
'video1') or
is_state_attr('media_player.player', 'source',
'video2') or
is_state_attr('media_player.player', 'source',
'video3') or
is_state_attr('media_player.player', 'source',
'video4') or
is_state_attr('media_player.player', 'source',
'video5') or
is_state_attr('media_player.player', 'source',
'video6')) %}
mdi:television-play
{% else %}
mdi:music
{% endif %}
{% else %}
{% endif %}
icon_color: blue
content_info: none
card_mod:
style:
.: |
ha-card {
width: 66px;
margin-left: 75%;;
top: -70px;
background: none;
--chip-border-width: 0;
}
:host {
--mush-icon-size: 20px;
--mush-chip-spacing: -2.9px;
}
The result remains the same.
In card-editor view the āconditional mushroom chipsā work like a charm.
In most contexts the āconditional mushroom template chipsā can only be seen, if the whole browser/app was stopped and re-run. Sometimes those chips become visible. But after some time it stops working again and needs a new restart-cycle, to maybe become visible again.
I dont suppose anyone has got a card that you can add a google calendar event ?
I want to choose the date, time and name and pick the calendar I would like to add it to.
The service for this isnt the friendliest, so was hoping there was a card or way to do this
Thanks
Put this code in your configuration.yaml
binary_sensor:
- platform: template
sensors:
general_high_temperature_alert sensation:
friendly_name: "Kitchen high temperature warning."
value_template: "{{ states('sensor.media_thermal_sensation') | float > 25 }}"
general_low_temperature_alert sensation:
friendly_name: "Kitchen low temperature warning."
value_template: "{{ states('sensor.media_thermal_sensation') | float < 15 }}"
This will create the necessary sensors to work in friend code, Iāve changed the names to my language, feel free to customize. The principle will be the same.
About the sensor.nightstate, I didnāt use it, I preferred to put an entity that shows humidity, but if you want:
sensor:
- platform: template
sensors:
night_state:
friendly_name: "State of the Night"
value_template: >
{% if is_state('sun.sun', 'below_horizon') %}
Night
{% else %}
Day
{% endif %}
Sorry for any translation errors, Iām using google.
How can I make it work vertically to increase and decrease using the mouse
- type: grid
columns: 1
cards:
- type: custom:mushroom-number-card
entity: input_number.set_temperatura
fill_container: false
secondary_info: none
icon_type: none
primary_info: state
icon_color: red
card_mod:
style:
mushroom-state-info$: |
.primary {
position: absolute;
top: 35px !important;
left: 200px !important;
}
.: |
ha-card {
top: 100px!important;
width: 300px !important;
transform: rotate(-90deg);
background: transparent !important;
box-shadow: none !important;
}
Iām sure this is another simple fix, but Iām trying to get Chips to align closer together. They look ok if you have several with a bunch of text, but Iām trying to have a Menu Chip, Back Chip, and a Navigation Chip all together in a Horizontal Stack. How can I move them closer together to the left side of the Stack?
Add a āspacerā as the last āchipā
That worked, I had to add a bunch to get them moved over where I wanted them, but it solved the issue. Thanks!!!
Can something help please
Is there any way to change entity card height?
Thatās not the best practice, youāll get more control using this, you can put them in a cell and specify how far across they go.
Good afternoon
How to remove this color transition strip? Transition between colors black and gray?
type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: sensor.aloe_soil_moisture
primary_info: state
secondary_info: name
name: Humidity
icon_color: blue
card_mod:
style: |
ha-card {
z-index: 1;
--ha-card-border-width: 0;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.aloe_soil_moisture
name: Humidity
color: var(--blue-color)
height: 60
hours_to_show: 24
line_width: 3
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
thank you in advance!
The layout card works also, but the chips in the layout card are not aligned to the left side the same as the others. You can see in the screenshot, the Title and Layout Cards are aligned (card 1 and 3) but the two horizontal stack cards arenāt (card 2 and 4). How do I get the Layout card aligned with cards 2 and 4?
Disregard, I looked deeper into the GitHub instructions and found the margin setting. Setting that to -3px, seems to do the trick.
Does it go if you take this out?
Yes. but so the overlay on the icon