There are semi-colons in-between !important too. I was still working on the code realizing it wasnāt right. Feel free to jump in.
1 Like
Yes, we should point a user at these errors, let him/her correct them. Allowing to learn is better than giving a ready solution)
1 Like
I 100% agree. I didnāt see them at first, was answering via my phone.
"Give a man a fish, and you feed him for a day; teach a man to fish and you feed him for a lifetime. ā
2 Likes
No, not using mushrooms (((
1 Like
Many thanks @LiQuid_cOOled and others for your help and tutelage! Only 2nd week after finding out about HA and I canāt get enough!
Here is the solution that gives me the card I was looking for (feel free to continue pointing out optimizationsā¦ and errors!)ā¦
- type: custom:mushroom-number-card
entity: input_number.energy_hours
layout: horizontal
display_mode: buttons
icon: none
icon_type: none
# icon_color: primary
fill_container: false
primary_info: name
secondary_info: none
name: "Hours:"
card_mod:
style:
mushroom-state-info$: |
.container {
align-items: end;
margin: 2px 6px 0px 0px;
}
mushroom-number-value-control$: |
mushroom-input-number {
--bg-color: transparent !important;
# --bg-color: red !important;
}
.: |
ha-card {
position: relative;
float: right;
width: 250px;
background: none !important;
border: none !important;
height: 20px !important;
--control-height: 26px;
padding: 0px !important;
}
1 Like
Check out both of these for Mushroom questions and answers. HA is definitely addicting!! Happy to have another member 
and
1 Like
Anyone have any idea why my statistics graph card wont change color?
chart_type: line
period: hour
type: statistics-graph
entities:
- sensor.mainpowermeter_current_phase_1
- sensor.mainpowermeter_current_phase_2
- sensor.mainpowermeter_current_phase_3
- sensor.heat_pump_phase_a_current
- sensor.heat_pump_phase_b_current
- sensor.heat_pump_phase_c_current
stat_types:
- mean
days_to_show: 1
card_mod:
style: |
ha-card {
--graph-color-1: #ff0000;
--graph-color-2: #ff0000;
--graph-color-3: #ff0000;
--graph-color-4: #ff0000;
--graph-color-5: #ff0000;
--graph-color-6: #ff0000;
}
try adding !important after your colors.
card_mod:
style: |
ha-card {
--graph-color-1: #ff0000 !important;
--graph-color-2: #ff0000 !important;
--graph-color-3: #ff0000 !important;
--graph-color-4: #ff0000 !important;
(tired) Have you checked 1st post ā link at the bottom?
this didnāt work for me for a horizontal stack card.
However this worked:
card_mod:
style: |
ha-state-icon {
--mdc-icon-size: 150% !important;
}
but now the icon is not aligned /centered anymore. can you help me to re-align/center the icon in the card? reply would be much appreciated. thank you
hi,Iāve been using cardmod for a while,
but recently i did my half anual HA upgrade:
and my āclockā changed from being perfecty readable to the image below,
anyone got an idea?
card_mod:
style: |
ha-card {
--ha-card-background: #4097AA;
--ha-card-border-radius: 5px ;
--primary-text-color: #F3DECA;
--card-primary-font-size: 60px;
font-family: "Lucida Console", "Courier New", monospace;
--ha-cardbox-shadow: 0px;
--ha-card-border-width: 4px;
--ha-card-border-color: #254669;
--icon-size: 40px;
max-height: 100%;
min-height: 235px;
width:100%;
}
EDIT: Iāve added the line-height now too and this fixed it, has their been any known change that would cause this?
Could you pls share your complete code.
IĀ“m not getting there with my copy/paste skills. 
Add
--card-primary-line-height: 60px;
card_mod:
style: |
ha-card {
--ha-card-background: #4097AA;
--ha-card-border-radius: 5px ;
--primary-text-color: #F3DECA;
--card-primary-font-size: 60px;
--card-primary-line-height: 60px;
font-family: "Lucida Console", "Courier New", monospace;
--ha-cardbox-shadow: 0px;
--ha-card-border-width: 4px;
--ha-card-border-color: #254669;
--icon-size: 40px;
max-height: 100%;
min-height: 235px;
width:100%;
}
1 Like
Hello,
I created several cards for my dashboard, but I would like to do something about the lines between each vertical.
Do you have any idea what I should do, to make the intermediate lines vanishing?
I assume it is possible with CSS, but I have less experience with that. Anyone can help me out please?
this is the yaml config:
type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: vertical-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:weather-card
entity: weather.openweathermap
forecast: true
details: true
current: true
hourly_forecast: false
- type: custom:apexcharts-card
apex_config:
chart:
height: 200px
annotations:
yaxis:
- 'y': 0.25
label:
style:
color: var(--secondary-text-color)
background: var(--secondary-background-color)
text: light
- 'y': 1
label:
style:
color: var(--secondary-text-color)
background: var(--secondary-background-color)
text: moderate
- 'y': 2.5
label:
style:
color: var(--secondary-text-color)
background: var(--secondary-background-color)
text: heavy
yaxis:
- decimals: 2
min: 0
max: ~0.5
apex_config:
tickAmount: 5
update_interval: 5m
graph_span: 2h
span:
start: minute
now:
show: true
color: var(--primary-text-color)
series:
- entity: sensor.neerslag_buienradar_regen_data
data_generator: >
return entity.attributes.data.split(' ').slice(0,
-1).map(item => {
return [moment(item.split('|')[1], 'HH:mm').valueOf(), Math.pow(10, ((parseInt(item.split('|')[0] - 109) / 32)))]
})
color: '#6e9bd4'
type: area
name: Buienradar
stroke_width: 2
group_by:
func: avg
duration: 10min
show:
legend_value: false
- entity: sensor.neerslag_buienalarm_regen_data
data_generator: >
return entity.attributes.data.precip.map((item, index) =>
{
return [moment.unix(entity.attributes.data.start).add(index*entity.attributes.data.delta, 's').valueOf(), item]
})
color: '#224179'
type: area
curve: smooth
stroke_width: 2
group_by:
func: avg
duration: 10min
name: Buienalarm
show:
legend_value: false
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ' {{ states("sensor.event_rain_rate") }} mm'
secondary: Vandaag
icon: mdi:weather-rainy
fill_container: true
entity: sensor.hourly_rain_rate
layout: vertical
icon_color: blue
- type: custom:mushroom-template-card
primary: ' {{ states("sensor.hourly_rain_rate") }} mm'
secondary: Afgelopen uur
icon: mdi:weather-rainy
fill_container: true
entity: sensor.daily_rain_rate
layout: vertical
icon_color: blue
- type: custom:mushroom-template-card
primary: ' {{ states("sensor.hourly_rain_rate") }} mm'
secondary: Gemiddeld mm/h
icon: mdi:weather-rainy
fill_container: true
entity: sensor.hourly_rain_rate
layout: vertical
icon_color: blue
- type: custom:stack-in-card
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
icon_color: light-green
entity: sensor.buiten_temperatuur
name: Buiten
- type: custom:mushroom-entity-card
icon: mdi:temperature-celsius
entity: sensor.gevoelstemperatuur
name: Gevoel
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.wind_gust
fill_container: true
icon_color: orange
icon: mdi:weather-windy-variant
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: cloudy 10s ease-in-out infinite, wind 5s infinite;
}
@keyframes cloudy {
0%, 100% { transform: translateX(3px); }
30% { transform: translateX(-1px); }
45% { transform: translateX(1.5px); }
75% { transform: translateX(-3.2px); }
}
@keyframes wind {
0%, 50%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: inset(0 0 37% 0); }
}
- type: custom:compass-card
indicator_sensors:
- sensor: sensor.wind_direction
- sensor: sun.sun
attribute: azimuth
indicator:
type: circle
value_sensors:
- sensor: sensor.wind_speed
language: nl
compass:
east:
show: true
west:
show: true
south:
show: true
north:
show: true
offset: 210
language: nl
- type: custom:mushroom-entity-card
entity: sensor.max_daily_gust
fill_container: true
icon_color: red
icon: mdi:weather-windy-variant
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: cloudy 10s ease-in-out infinite, wind 5s infinite;
}
@keyframes cloudy {
0%, 100% { transform: translateX(3px); }
30% { transform: translateX(-1px); }
45% { transform: translateX(1.5px); }
75% { transform: translateX(-3.2px); }
}
@keyframes wind {
0%, 50%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: inset(0 0 37% 0); }
}
- type: horizontal-stack
cards: []
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: |-
{% if is_state('binary_sensor.regensensor', 'on') %}
Het regent
{% else %}
Droog
{% endif %}
secondary: ''
icon: |2-
{% if is_state('binary_sensor.regensensor', 'on') %}
mdi:weather-rainy
{% elif is_state('sun.sun', 'above_horizon') %}
mdi:weather-sunny
{% else %}
mdi:moon-waning-crescent
{% endif %}
entity: binary_sensor.regensensor
icon_color: |-
{% if is_state('binary_sensor.regensensor', 'on') %}
blue
{% else %}
yellow
{% endif %}
fill_container: true
multiline_secondary: true
tap_action:
action: more-info
card_mod: null
style: |
ha-state-icon {
{{'animation: cloudy 10s ease-in-out infinite, rain 1.5s infinite;' if is_state(config.entity, 'on') }}
}
@keyframes cloudy {
0%, 100% { transform: translateX(3px); }
30% { transform: translateX(-1px); }
45% { transform: translateX(1.5px); }
75% { transform: translateX(-3.2px); }
}
@keyframes rain {
50% { clip-path: polygon(0 0, 100% 0, 100% 73%, 71% 73%, 50% 39%, 29% 73%, 0 73%); }
}
- type: custom:mushroom-template-card
primary: KNMI
secondary: '{{ ''Onveilig! '' if is_state(entity, ''on'') else ''Veilig'' }}'
icon: mdi:alert
entity: binary_sensor.knmi_huis_fam_otte_waarschuwing
icon_color: >
{% if
is_state('binary_sensor.knmi_huis_fam_otte_waarschuwing',
'on') %}
red
{% else %}
blue
{% endif %}
- type: custom:vertical-stack-in-card
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-entity-card
entity: sensor.buiten_temperatuur
primary_info: state
secondary_info: name
name: Temperatuur
icon_color: green
fill_container: true
- type: custom:mushroom-entity-card
primary_info: state
secondary_info: name
name: Luchtvochtigheid
icon_color: blue
fill_container: true
entity: sensor.humidity
- type: custom:mini-graph-card
entities:
- entity: sensor.buiten_temperatuur
name: Buiten temperatuur
- entity: sensor.humidity
name: Buiten luchtvochtigheid
- entity: sensor.gemiddelde_buiten_temperatuur
name: Gemiddelde Temperatuur
- color: gray
entity: sun.sun
name: Night
show_line: false
show_points: false
show_legend: false
y_axis: secondary
show:
labels: false
labels_secondary: false
state_map:
- value: below_horizon
label: Night
- value: above_horizon
label: Day
- type: vertical-stack
cards:
- type: custom:hourly-weather
entity: weather.huis_fam_otte_hourly
icons: true
colors: null
sunny: '#bbccee'
snowy-rainy: rgba(255, 255, 255, 0.8)
exceptional: red
name: Weer vandaag
offset: '1'
num_segments: '12'
show_precipitation_amounts: true
show_wind: 'false'
- show_state: false
show_name: false
camera_view: auto
type: picture-entity
image: https://demo.home-assistant.io/stub_config/bedroom.png
entity: camera.buienradar
camera_image: camera.buienradar
theme: Mushroom
name: Nederland
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ' {{ states("sensor.boom_pollen") }} ppm'
secondary: Boom
icon: mdi:tree
fill_container: true
layout: vertical
icon_color: brown
multiline_secondary: true
entity: sensor.boom_pollen
tap_action:
action: navigate
navigation_path: >-
/lovelace/title: My Awesome Home views: # View tab title.
- title: Example # Unique path for direct access
/lovelace/${path} path: example # Each view can have a
different theme applied. Theme should be defined in the
frontend. theme: dark-mode # The cards to show on this
view. cards: # The filter card will filter entities
for their state - type: entity-filter
entities: - device_tracker.paulus -
device_tracker.anne_there state_filter: -
'home' card: type: glance title:
People that are home # The picture entity card will
represent an entity with a picture - type:
picture-entity image:
https://www.home-assistant.io/images/default-social.png
entity: light.bed_light # Specify a tab icon if you want
the view tab to be an icon. - icon: mdi:home-assistant #
Title of the view. Will be used as the tooltip for tab icon
title: Second view cards: # Entities card will take
a list of entities and show their state. - type:
entities # Title of the entities card title:
Example # The entities here will be shown in the same
order as specified. # Each entry is an entity ID or a
map with extra options. entities: -
light.kitchen - switch.ac - entity:
light.living_room # Override the name to
use name: LR Lights # The markdown card
will render markdown text. - type: markdown title:
Dashboard content: > Welcome to your
**dashboard**.
- type: custom:mushroom-template-card
primary: ' {{ states("sensor.gras_pollen") }} ppm'
secondary: Gras
icon: mdi:grass
fill_container: true
layout: vertical
icon_color: green
entity: sensor.gras_pollen
multiline_secondary: true
- type: custom:mushroom-template-card
primary: ' {{ states("sensor.onkruid_pollen") }} ppm'
secondary: Onkruid
icon: mdi:cannabis
fill_container: true
layout: vertical
icon_color: orange
entity: sensor.onkruid_pollen
multiline_secondary: true
if anyone struggles with the same problem, i found a solution using the code inspector:
card_mod:
style: |
ha-state-icon {
width: 70% !important;
}
ha-state-icon + span {
margin-top: 0px !important;
}
the second part is not necessary for resizing purposes. it just moves the text closer to the icon
Iām not sure the second part modifies or adjusts anythingā¦
type: custom:mushroom-entity-card
icon: mdi:fan
entity: fan.bedroom_fan
card_mod:
style: |
ha-state-icon {
width: 0% !important;
margin-top: 10px !important;
}
width is controlling the distance between the icon and text
margin-top is controlling the position of the icon
Is it possible to put everything on the same row? I want the secondary info on the same row as the entity name.
This is my codeā¦
type: entities
entities:
- type: custom:multiple-entity-row
entity: sensor.viking_0203502038_d7_00_humidity
card_mod:
style:
hui-generic-entity-row $: |
.info.pointer .secondary ha-relative-time {
{% set last_updated = states[config.entity].last_updated %}
{% set time_difference = as_timestamp(now()) - as_timestamp(last_updated) %}
{% if time_difference > 25 %}
color: red;
font-size: 9px;
{% elif time_difference < 25 %}
color: blue;
font-size: 9px;
{% endif %}
}
:host {
color:
{% if states(config.entity) | int <= 32 %}
black
{% elif states(config.entity) | int <= 38 %}
orange
{% elif states(config.entity) | int <= 100 %}
red
{% endif %}
;
}
secondary_info: last-changed
that code gives me this:
But I want this, if it is possible:
How can I make this card react to a tap / double tap / hold action not only on the text itself but also the outer area (here white, basically everything except the toggle switch)?
type: custom:auto-entities
card:
type: entities
title: ''
state_color: true
show_header_toggle: false
card_mod:
style: |
ha-card {
text-align: center;
letter-spacing: 1px;
font-weight: bold;
border: 1px solid grey;
padding: 0px;
background: default;
}
filter:
include:
- entity_id: input_boolean.gui_global_details
options:
name: Z U R Ć C K | Alles zeigen
icon: mdi:home-circle
tap_action:
action: navigate
navigation_path: /lovelace/default_view
double_tap_action:
action: navigate
navigation_path: /lovelace/home
hold_action:
action: more-info
exclude: null
show_empty: false
unique: true
sort: []
Has anyone successfully styled the h1 tag in the vanilla Calendar Card? Iām trying to supply my own title via a stack-in-card/mushroom-title-card and want the calendarās h1 text, ie ā25 Feb ā 2 Mar 2024ā, to present like the usual h2 secondary information.
My CSS is a bit rusty, but I want to achieve 2 things in a Mushroom Template card:
- Make the heigth of the box bigger
- Change the font size
I can achieve both, but never at the same timeā¦ Can anyone point me to what I am doing wrong?
type: custom:mushroom-template-card
primary: '{{now().timestamp() | timestamp_custom("%H:%M")}}'
secondary: '{{now().timestamp() | timestamp_custom("%A %d %B")}}'
icon: mdi:home
fill_container: true
view_layout:
grid-area: tijd
card_mod:
style: |
mushroom-state-info$: |
.container {
--card-secondary-font-size: 20px;
--card-primary-font-size: 20px;
}
ha-card {
height: 300px !important;
}