Thank you 
1 Like
You can do it like this:
type: custom:mushroom-chips-card
chips:
- type: alarm-control-panel
entity: alarm_control_panel.home_alarm
icon: mdi:shield-home-outline
card_mod:
style:
mushroom-alarm-control-panel-chip:nth-child(1)$: |
ha-icon:after {
content: '';
border: solid rgb(var(--rgb-blue));
border-left-color: transparent;
animation: spin 1s linear infinite;
border-radius: 50%;
width: 20px;
height: 20px;
top: 6px;
left: 6px;
position: absolute;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
1 Like
Try this
{{ as_timestamp(states.your_entity.last_changed) | timestamp_custom(’ %H:%M’,true | int) }}
Greetings
Moss
I am really struggling to use card mod on a mushroom light card. can someone help me see what i’m missing? I have a custom color for the slider bar and background of slider bar. i’m trying to figure out how to get a custom color for the icon of a light card. my current code is:
- type: custom:mushroom-light-card
card_mod:
style:
mushroom-card .actions mushroom-light-brightness-control$: |
mushroom-slider {
--main-color: teal !important;
--bg-color: #d1eced !important;
}
mushroom-shape-icon {
--icon-color-disabled: green;
--shape-color-disabled: rgba(var(--rgb-red), 0.2);
--icon-color: red !important;
--shape-color: blue !important;
}
I have a feeling i’m missing something really obvious but i’ve tried this a thousand ways based on this thread and what i can try to understand from the documentation, but no luck. can someone point me in the right direction?
Try like this:
type: custom:mushroom-light-card
entity: light.family_room_light
show_brightness_control: true
card_mod:
style:
mushroom-light-brightness-control$: |
mushroom-slider {
--main-color: teal !important;
--bg-color: #d1eced !important;
}
.: |
mushroom-shape-icon {
--icon-color-disabled: green;
--shape-color-disabled: rgba(var(--rgb-red), 0.2);
--icon-color: red !important;
--shape-color: blue !important;
}
Is this the sort of thing you wanted?
type: custom:mushroom-template-card
primary: Mushroom
secondary: Cards
icon: mdi:mushroom
icon_color: red
card_mod:
style:
mushroom-state-info$: |
.primary {
border-bottom: solid rgba(var(--rgb-disabled), 0.4);
}
3 Likes
omg you are a genius. how do i know when to include the “.” like that?
1 Like
Oh one more question. The colors are customised successfully but when I cast to my best hub the colours are back to default. Is there some limitation for card mod and casting a Lovelace view?
Is it possible to get the state to display to the right much like this? 
It’s one of my custom button cards but I’m no developer and feels like it get’s hard to master all them templates. I wonder if I can get something similar with Mushroom.
Yes! 
Many many thanks, is also possible to change the length?
Best regards
Thekholm
1 Like
It almost worked!
How to I change so the line is between two template cards in the same box?
Like this but with Mushroom.
Thanks
Thekholm
My Home Assistant News page. Created with using mushroom,css and rss services. Everything is controlled from one single page. You can easily navigate between news sources with the help of chips. There is also a main page with swipe function between the sources. You can also switch between news categories in the top menu. There are related news sources under each category.
The magazine photo at the top gives you the opportunity to return to the main page.
On the pages that are opened to read news, it opens inside the home assistant and can be read ad-free thanks to safari. When you finish reading, you can switch to the next news by closing the page.
The code for the page is down below on my github but be aware that there are lots of helpers and automations used in this page to function properly. For now you can find the code but the wiki part will be added later.
3 Likes
How would the code for this “lights, vertical slider” look?
Anyone? (I suck at this coding stuff…)
From the top left; The card I want to create, followed by the card as it looks today, and then on the lower left is a “thin version” of the card I would like to create.
1 Like
Very cool!
Any chance this card might also receive a charts card (e.g. like apex) and support auto-entities in the UI editor?
1 Like
Hi. Is it possible to change the container sizes, so the volume slider is spanning more?
See the screenshots for explanations.
Hi again,
How can I get the icons to look like Mushrooms icon (with color ring around the icon) in my entities list?
Best regars
Thekholm
Nice can you share code pleas ?
Hallo nice can you share you person card pleas ?
Can this be fixed?
I want the arrow to be on the left side and the icons on the right!
type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
alignment: end
chips:
- type: back
card_mod: null
style: |-
ha-card {
top: 3px;
--chip-background: none;
--chip-box-shadow: none;
}
- type: template
entity: binary_sensor.smartthings_vision_motion
icon: mdi:motion-sensor-off
icon_color: '{{ ''black'' if is_state(entity, ''on'') else ''grey'' }}'
tap_action:
action: more-info
hold_action: None
card_mod: null
style: |-
ha-card {
top: 3px;
--chip-background: none;
--chip-box-shadow: none;
}
- type: template
entity: binary_sensor.lumi_lumi_sensor_magnet_aq2_d6b67507_on_off
icon: mdi:square-off
icon_color: '{{ ''black'' if is_state(entity, ''on'') else ''grey'' }}'
tap_action:
action: more-info
card_mod:
style: |-
ha-card {
top: 3px;
--chip-background: none;
--chip-box-shadow: none;
}
- type: template
entity: binary_sensor.vattensensor_matrum_ias_zone
icon: mdi:water-off
icon_color: '{{ ''black'' if is_state(entity, ''on'') else ''grey'' }}'
tap_action:
action: more-info
card_mod:
style: |-
ha-card {
top: 3px;
--chip-background: none;
--chip-box-shadow: none;
}
- type: custom:gap-card
height: 6
- type: picture-entity
image: https://demo.home-assistant.io/stub_config/kitchen.png
entity: light.matrum
show_state: false
show_name: false
camera_view: auto
aspect_ratio: '3'
tap_action:
action: toggle
theme: Mushroom
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 33px
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
primary: Matrum
secondary: Släckt
icon: mdi:lightbulb-group
entity: light.matrum
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
fill_container: false
multiline_secondary: false
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:mushroom-template-card
entity: input_boolean.mushroom_matrum
primary: ''
secondary: ''
icon: >-
{{ 'mdi:chevron-up' if is_state(entity, 'on') else 'mdi:chevron-down'
}}
icon_color: disabled
hold_action:
action: none
card_mod:
style: |
ha-card {
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: conditional
conditions:
- entity: input_boolean.mushroom_matrum
state: 'on'
card:
type: entities
entities:
- entity: light.matrum
secondary_info: null
name: Matrum
- type: divider
- entity: light.matrum
name: Takspots
- type: divider
- entity: light.matrum
name: Bänk
- type: divider
- entity: light.matrum
name: Utomhus
state_color: true
show_header_toggle: false
card_mod:
style: |
ha-card {
box-shadow: none !important;
--paper-item-icon-active-color: #2196f3;
--paper-item-icon-color: #6f6f6f;
}
1 Like
Why not use the layout card or a horizontal grid to have two chips cards? The first can be left aligned and just have the arrow, the second can be right aligned with your remaining chips.