Oki, so phone only…
Would be nice, to be able to turn off the “Sticky headers” when on a device with multi column (Tablets and web)
1 Like
Good idea, I’ll look to add that.
1 Like
Try using a Template Chip:
type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.countdown
content: '{{ states(entity) }}'
icon: mdi:timer-outline
@rhysb hhhmm seems that I cannot mix styles for two different things or did I am missing something? In the below code I am trying to remove the borders from all chips but also to animate the fan but is not working, any advice? 
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
card_mod:
style: |
ha-card {
position: absolute;
left: 0%;
transform: translateX(-0%);
}
- type: template
entity: light.office
icon: '{{ ''mdi:lightbulb-on'' if is_state(entity, ''on'') else ''mdi:lightbulb'' }}'
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
tap_action:
action: toggle
- type: template
entity: fan.office
content: >
{% if is_state('fan.office', 'on') %}
{{ state_attr('fan.office', 'percentage') }}%
{% endif %}
icon: '{{ ''mdi:fan'' if is_state(entity, ''on'') else ''mdi:fan-off'' }}'
icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''grey'' }}'
- type: template
entity: input_boolean.firewall_status
icon: mdi:network
tap_action:
action: toggle
hold_action:
action: none
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-border-width: 0;
}
.chip-container :nth-child(3)$: |
ha-icon {
{{ 'animation: spin 1s linear infinite;' if is_state('fan.office', 'on') }}
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
Hey, do I get a badge or something for triggering Marius? 
1 Like
You will need to use .: to navigate up from the shadow root $.
card_mod:
style:
.chip-container :nth-child(3)$: |
ha-icon {
{{ 'animation: spin 1s linear infinite;' if is_state('fan.office', 'on') }}
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-border-width: 0;
}
1 Like
If it’s Mushroom related, then yep, ask away. Otherwise, send me a message 
.
1 Like
here you go:
1 Like
Hi, why doesn’t I show the borders of the card at the top?
The suggestion of @rhysb I’m replying to goes back a long way, but I’m having trouble getting the following to work. It’s at the beginning of my theme file, and I want all the Mushroom entity cards to “pop” when tapped. I had the appropriate card-mod code embedded in the yaml of every Mushroom entity card, but would rather this be handled by the theme. Can anyone spot what might be wrong? The “pop” just isn’t happening.
Also, I want all my Title card text to always be white, hence the code in my theme. But this also requires custom code in the yaml of every Title card, and I’d like this handled by the theme too, if possible.
steve_theme:
card-mod-theme: "steve_theme"
card-mod-card: |
.type-custom-mushroom-entity-card:active {
transform: scale(0.85);
transition: 0s;
}
card-mod-card-yaml: |
mushroom-title-card$: |
h1 {
--primary-text-color: white;
}
h2 {
--secondary-text-color: white;
}
Cannot figure out how to do this. I have the general theme settings done for removing borders But I would really like to remove the chip borders in this stacked card. (eg. around Casa). Does someone know how to do this?
type: custom:vertical-stack-in-card
horizontal: true
view_layout:
grid-area: header
cards:
- type: custom:mushroom-chips-card
alignment: justify
chips:
- type: menu
card_mod:
style: |
ha-card {
padding-top: 8px;
--chip-height: 60px;
--chip-background: none;
}
- type: template
content: Casa
card_mod:
style: |
ha-card {
padding-top: -15px;
--chip-height: 80px;
--chip-background: rgba(var(--rgb-green), 0.0);
}
- type: entity
entity: input_button.dummy
icon: mdi:magnify
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: ' '
size: fullscreen
content:
type: custom:search-card
max_results: 50
hold_action:
action: fire-dom-event
browser_mod:
service: browser_mod.sequence
data:
sequence:
- service: browser_mod.navigate
data:
path: '?disable_km'
- service: browser_mod.refresh
browser_id: THIS
content_info: none
card_mod:
style: |
ha-card {
padding-top: 8px;
--chip-height: 60px;
--chip-background: none;
}
card_mod:
style: |
ha-card {
--ha-card-border-radius: 0px;
margin-right: -10px;
margin-left: -10px;
margin-top: -10px;
height: 70px !important;
}
:host {
z-index: 999;
position: sticky;
position: -webkit-sticky;
top: 0;
}
–-chip-border-width: 0px; does not seem to work
Use Mushroom Shadows on the device and this will sort it
I am using that, but as you can see, it works on my menu cards on the left. However the cards on top (for menu and icons on the right, it is not working.
5 Likes
Not sure where to post this, but I finally got sticky headers working around a custom:layout-card in grid mode. (And the grid does masonry!), quick overview here: GitHub - tbrasser/config
2 Likes
I think you need to add it in a vertical stack card like below as it works in this
Start it like this
type: custom:vertical-stack-in-card
square: false
columns: 1
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon_color: ''
icon: mdi:menu
You can change the --primary-text-color and --secondary-text-color in your theme like this:
primary-text-color: white
secondary-text-color: white
Unfortunately you won’t be able to target mushroom-title-card using card-mod in your theme as it needs mod-card.
Your other Mushroom Entity card-mod theme looks ok and works for me.
unfortunatly cannot get it to work
Try this:
style: |
ha-card {
border: 0px !important;
box-shadow: none !important;
padding-top: 8px;
--chip-height: 60px;
--chip-background: none;
}
1 Like
That did the trick! Thank you!