Correct. The transparency is done by mushroom dynamically when you select a color if you override this color with card mod you have to add transparency back yourself.
You only need to use .: | if you have previously entered the shadow-root of an object, using $. If you dont do that you dont have to use .: | at all. Take a look at the section in the top post called
Its not easy to theme for specific entity types, and i am not too experienced with themes honestly.
I think for what you want to do its probably best to look into the Decluttering card. You can define templates and then use them across multiple cards.
Faecon
May 11, 2024, 5:50pm
699
so I have the
type: custom:mushroom-chips-card
and I want the card centered
- type: custom:mushroom-chips-card
chips:
card_mod:
style: |
ha-card {
justify-content: center;
}
but it looks it isnāt working
The chips centered within the card or the card itself?
Faecon
May 11, 2024, 6:11pm
701
I have 4 chips I want centered over the width of my mobile ā¦
Use the built in function:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:test-tube
icon_color: green
content: Test
- type: light
entity: light.bedroom_main_light
use_light_color: true
alignment: center
alignment: center
1 Like
joq3
May 13, 2024, 6:02am
703
Hereās the code (yes, I tried border-style: none too):
type: custom:state-switch
entity: group
states:
admin:
type: custom:mushroom-chips-card
chips:
- type: alarm-control-panel
entity: alarm_control_panel.54ef44cb9e98_alarm
content_info: none
- type: template
entity: binary_sensor.c88d1f270ec4_contact
content: >
{{ state_attr('sensor.nominal_change_history', 'changes')[entity] |
as_timestamp | timestamp_custom('%H:%M') }}
icon: mdi:door
icon_color: >
{% set ytterdorr = now() - state_attr('sensor.nominal_change_history',
'changes')[entity] | as_datetime | as_local %} {% if ytterdorr >
timedelta(minutes=180) and ytterdorr < timedelta(minutes=240) %}
orange
{% elif ytterdorr >= timedelta(minutes=240) %}
red
{%- else -%}
grey
{%- endif %}
tap_action:
action: more-info
- type: template
content: |2-
{% if states.light
| rejectattr('attributes.entity_id', 'defined')
| selectattr('state', 'eq', 'on')
| map(attribute='entity_id')
| list | count == 0 %}
{0}
{%else %}
{{states.light
| rejectattr('attributes.entity_id', 'defined')
| selectattr('state', 'eq', 'on')
| map(attribute='entity_id')
| list | count}}
{%- endif %}
icon: mdi:lightbulb
icon_color: |
{% if (states.light
| rejectattr('attributes.entity_id', 'defined')
| selectattr('state', 'eq', 'on')
| map(attribute='entity_id')
| list | count) >= 1 -%}
orange
{%- else -%}
grey
{%- endif %}
tap_action:
action: call-service
service: light.turn_off
data: {}
target:
entity_id: light.alla_utom_framsida
- type: template
entity: sensor.a4c1385c22dd_temperature
content: |
{{ states.sensor.a4c1385c22dd_temperature.state }} Ā°C
icon: mdi:thermometer
icon_color: >
{% set vardagsrum = states.sensor.a4c1385c22dd_temperature.state |
float(0) %} {% if vardagsrum > 20.0 and vardagsrum < 23.0 %}
light-green
{% elif vardagsrum >= 23.0 %}
red
{%- else -%}
light-blue
{%- endif %}
tap_action:
action: more-info
- type: spacer
- type: action
tap_action:
action: call-service
service: input_boolean.toggle
data: {}
target:
entity_id: input_boolean.kiosk_mode
icon: mdi:unfold-more-horizontal
card_mod:
style: |
ha-card {
--chip-background: none;
margin-top: 10px;
margin-left: 15px;
margin-right: 15px;
}
tomg1970
May 16, 2024, 6:06am
705
Hello, what am I doing wrong here? Why isnāt the icon flashing?
- type: conditional
conditions:
- condition: state
entity: switch.heizung
state: 'off'
card:
type: custom:mushroom-template-card
entity: switch.heizung
secondary: HZ
icon: mdi:fire
icon_color: red
layout: vertical
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 6px;
}
.: |
ha-card {
font-variant: small-caps;
background: none !important;
{% if is_state('switch.heizung','off') %}
ha-card { animation: blink 2s linear infinite; }
@keyframes blink { 100% {opacity: 0;} }
{%- endif %}
}
If I do the whole thing without changing the background, it works without any problems.
- type: conditional
conditions:
- condition: state
entity: switch.heizung
state: 'off'
card:
type: custom:mushroom-template-card
entity: switch.heizung
secondary: HZ
icon: mdi:fire
icon_color: red
layout: vertical
tap_action:
action: more-info
card_mod:
style: |
{% if is_state('switch.heizung','off') %}
ha-card { animation: blink 2s linear infinite; }
@keyframes blink { 100% {opacity: 0;} }
{%- endif %}
your code is very messy in general. try and keep it cleaner and it will be easy to tell what is wrong.
type: custom:mushroom-template-card
entity: switch.heizung
secondary: HZ
icon: mdi:fire
icon_color: red
layout: vertical
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 6px;
}
.: |
ha-card {
font-variant: small-caps;
background: none !important;
{% if is_state('witch.heizung','off') %}
animation: blink 2s linear infinite;
{% endif %}
}
@keyframes blink {
100% {opacity: 0;}
}
keyframes should always be outside the element. and its best to place your if statements inside elements around the specific thing you want to happen if something.
1 Like
try with these:
card_mod:
style: |
ha-card {
--chip-background: none;
margin-top: 10px;
margin-left: 15px;
margin-right: 15px;
--chip-box-shadow: none !important;
--chip-border-width: 0px !important;
}
Hello together, i am trying to get a liitle visual feedback when i touch the up/down button of my Cover Card.
type: custom:mushroom-cover-card
card_mod:
style:
mushroom-cover-buttons-control$:
mushroom-button:nth-child(2)$: |
.button ::slotted(*) {
--mdc-ripple-color: blue
--mdc-ripple-press-opacity: 0.5;
}
mushroom-button:nth-child(1)$: |
.button ::slotted(*) {
--mdc-ripple-color: blue
--mdc-ripple-press-opacity: 0.5;
}
mushroom-button$: |
.button ::slotted(*) {
--card-mod-icon: mdi:access-point;
}
entity: cover.buero
show_position_control: true
show_buttons_control: true
I found stuff like that in the Forum, but it doesnt work in my case.
hey can i add these code to any theme?
Tadies
May 20, 2024, 1:58pm
710
Dimitriā¦as i did msg You about somethingā¦
type: custom:mushroom-climate-card
entity: climate.tstat_f8cf07_t6_thermostat
name: Honeywell T6
hvac_modes:
- 'off'
show_temperature_control: true
collapsible_controls: true
layout: horizontal
icon_type: entity-picture
icon: mdi:fire
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
#container .button:nth-child(1) {
--control-icon-size: 15px;
}
#container .button:nth-child(3) {
--control-icon-size: 15px;
}
.value {
font-size: 12px;
}
#container {
height: 20px !important;
margin-top: 10px !important;
}
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 45px;
background: none !important;
}
mushroom-badge-icon$: |
.badge {
--badge-icon-size: 18px;
background: none !important;
}
.: |
ha-card {
height: 50px !important;
padding-top: 15px !important;
}
view_layout:
column: 3
Are You able to help out?
Here you go. it is certainly something that seems to be missing from the guide. was not aware that having HVAC Modes defined added another button to press.
type: custom:mushroom-climate-card
entity: climate.office_heating
name: Honeywell T6
hvac_modes:
- 'off'
- cool
- fan_only
show_temperature_control: true
collapsible_controls: true
layout: horizontal
icon_type: entity-picture
icon: mdi:fire
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
.button:nth-child(1) {
--control-icon-size: 15px;
}
.button:nth-child(3) {
--control-icon-size: 15px;
}
.value {
font-size: 12px;
}
#container {
height: 20px !important;
margin-top: 10px !important;
}
mushroom-climate-hvac-modes-control$:
mushroom-button:nth-child(1)$: |
.button {
--card-mod-icon: mdi:test-tube;
}
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 45px;
background: none !important;
}
mushroom-badge-icon$: |
.badge {
--badge-icon-size: 18px;
background: none !important;
}
mushroom-button$: |
.button {
--card-mod-icon: mdi:fire;
}
.: |
ha-card {
height: 50px !important;
padding-top: 15px !important;
}
the key bits being this:
mushroom-button$: |
.button {
--card-mod-icon: mdi:fire;
}
and this:
mushroom-climate-hvac-modes-control$:
mushroom-button:nth-child(1)$: |
.button {
--card-mod-icon: mdi:test-tube;
}
1 Like
Tadies
May 20, 2024, 6:58pm
712
Thank You Dimitri!
jeremyc
May 23, 2024, 8:10am
713
Continuing the discussion from Mushroom Cards Card Mod Styling/Config Guide :
Hi I have a problem using the suggestions here together with the new experimental sections dashboard. In my case I made a dashboard with the sections layout and then added an entity card to show the current time as a big clock. If I change the height of the entity mushroom card so that the text is shown, then the row fitting in āsectionsā doesnāt seem to work. Sections is experimental (I know) so it could be not ready for card_mod yet?
In my case the large clock does not get fitted properly by the sections page so the weather panel is on top.
Can anything be done? This problem only seems to happen if I change the height of the card.
type: custom:mushroom-entity-card
entity: sensor.current_time
layout: horizontal
primary_info: none
icon_type: none
secondary_info: state
hold_action:
action: none
double_tap_action:
action: none
fill_container: true
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 10em;
--card-secondary-line-height: 1.1em;
--card-primary-font-size: 20px;
align-items: center;
}
.: |
ha-card {
background: red;
height: fit-content !important;
}```
Is there any way to move horizontally right or left just the secondary text in a template card?
How did you move right only the right primary text from it original position?
I know itās not actually mushroom-card, but can someone please help me figure out whatās the selector logic to get this element?
Hell, I build websites and understand HTML/CSS, but I really canāt get the logic behind card-mod selectors.
Edit: I finally managed on my own.
card_mod:
style: |
clock-weather-card-today-right-wrap-bottom {
display: none!important;
}
iona
May 25, 2024, 10:33am
717
Does the Chip card support icon state colour, or do I need to use a template card?
Yannik
May 26, 2024, 5:36am
718
with ALT+0160 before the name. Unfortunately not a very nice solution.
