resolved!
correct link is:
I dont see how you would have space for it on a mobile dashboard, but like this:
type: custom:stack-in-card
cards:
- type: custom:mushroom-climate-card
entity: climate.bedroom_heating
hvac_modes: []
show_temperature_control: true
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:thermometer
entity: climate.bedroom_heating
content: '{{state_attr(config.entity,''current_temperature'')}}'
- type: template
icon: mdi:water
entity: sensor.bedroom_temperature_humidity_humidity
content: '{{states(config.entity)}}'
- type: template
icon: mdi:thermometer
entity: climate.bedroom_heating
content: '{{state_attr(config.entity,''current_temperature'')}}'
- type: template
icon: mdi:thermometer
entity: climate.bedroom_heating
content: '{{state_attr(config.entity,''current_temperature'')}}'
alignment: end
card_mod:
style: |
ha-card {
position: absolute;
top: 12px;
right: 12px;
--chip-spacing: 0px !important;
}
You could maybe have the chips overlap slightly by changing the --chip-spacing to a negative number. Just to make it fit.
type: custom:stack-in-card
cards:
- type: custom:mushroom-climate-card
entity: climate.bedroom_heating
hvac_modes: []
show_temperature_control: true
name: Heating
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:thermometer
entity: climate.bedroom_heating
content: '{{state_attr(config.entity,''current_temperature'')}}'
- type: template
icon: mdi:water
entity: sensor.bedroom_temperature_humidity_humidity
content: '{{states(config.entity)}}'
- type: template
icon: mdi:thermometer
entity: climate.bedroom_heating
content: '{{state_attr(config.entity,''current_temperature'')}}'
- type: template
icon: mdi:thermometer
entity: climate.bedroom_heating
content: '{{state_attr(config.entity,''current_temperature'')}}'
alignment: end
card_mod:
style: |
ha-card {
position: absolute;
top: 12px;
right: 12px;
--chip-spacing: -8px !important;
}
2 Likes
THANKS! I am thrilled every time what you can conjure up here.
Since yesterday I am so taken by the Mushroom Cards that I want to convert as much as possible.
The Mush-Climate looks now already really great and ales important what I need to see.
Inn this area is now only the top navigation menu and the info buttons below no Mushroom.
i´m also intrested to the site 
Any luck yet, I have also been trying to figure this out, sometimes I just don’t want a purple slider!
Easy with card mod. Check the light card section of my guide:
But you can of course also just change the color in the card itself to what you want:
type: custom:mushroom-light-card
entity: light.lounge_corner_lamp
layout: horizontal
show_brightness_control: true
icon_color: cyan
Hey guys,
I am trying to create a weather card, and i have a problem with the secondary text, see the photo below. I want it in the center under icon and primary text.
Code
cards:
- type: custom:mushroom-template-card
primary: '{{states(''sensor.wu_temperature_rafina'')}}°C'
icon: |-
{% set current_hour = now().hour %}
{% set is_night = current_hour >= 20 or current_hour < 6 %}
{% if is_state('weather.openweathermap_2','clear-day') %}
mdi:weather-sunny
{% elif is_state('weather.openweathermap_2','clear-night') %}
mdi:weather-night
{% elif is_state('weather.openweathermap_2','rain') %}
mdi:weather-rainy
{% elif is_state('weather.openweathermap_2','snow') %}
mdi:weather-snowy
{% elif is_state('weather.openweathermap_2','fog') %}
mdi:weather-fog
{% elif is_state('weather.openweathermap_2','sleet') %}
mdi:weather-partly-snowy-rainy
{% elif is_state('weather.openweathermap_2','wind') %}
mdi:weather-windy
{% elif is_state('weather.openweathermap_2','cloudy') %}
mdi:weather-cloudy
{% elif is_state('weather.openweathermap_2','partlycloudy') %}
{{ 'mdi:weather-night-partly-cloudy' if is_night else 'mdi:weather-partly-cloudy' }}
{% elif is_state('weather.openweathermap_2','hail') %}
mdi:weather-hail
{% elif is_state('weather.openweathermap_2','lightning') %}
mdi:weather-lightning
{% elif is_state('weather.openweathermap_2','thunderstorm') %}
mdi:weather-lightning-rainy
{% endif %}
secondary: |2-
{% set en = states('weather.openweathermap_2') %}
{% set conditions = ['clear-night:Καθαρός',
'cloudy:Συννεφιασμένος',
'fog:Ομιχλώδες',
'hail:Χαλαζόπτωση',
'lightning:Αστραπές',
'lightning-rainy:Βροχερός με αστραπές',
'partlycloudy:Τοπικές νεφώσεις',
'pouring,rainy:Βροχερός',
'snowy:Χιονόπτωση',
'snowy-rainy:Χιονόνερο',
'sunny:Λιακάδα',
'windy:Ανεμώδης',
'windy-variant:Θυελλώδης',
'exceptional:Ιδιαίτερος'] %}
{{ conditions
| select('search', en)
| map('regex_replace', '.*:')
| list
| default([''], true)
| first }}
card_mod:
style:
mushroom-state-info$: |
.primary {
font-weight: 400 !important;
margin-left: 5px;
margin-top: 70px;
}
.secondary {
font-weight: 400 !important;
margin-right: 100px;
margin-top: 30px;
}
.container {
--card-secondary-font-size: 15px;
--card-primary-font-size: 35px;
}
mushroom-shape-icon$: |
.shape {
--shape-color: transparent;
}
.: |
ha-state-icon {
--icon-symbol-size: 60px;
color: #487aff;
}
ha-card {
background-color: none;
border-width: 0px;
margin-left: 20px;
border-radius: 25px !important;
border-width: 0px;
}```
dimitri.landerloos i did try to fix it and i came with this result. ( picture )
My problem now is when the secondary text is changing when the condition change the text its not centered.
Code
primary: '{{states(''sensor.wu_temperature_rafina'')}}°C'
icon: |-
{% set current_hour = now().hour %}
{% set is_night = current_hour >= 20 or current_hour < 6 %}
{% if is_state('weather.openweathermap_2','clear-day') %}
mdi:weather-sunny
{% elif is_state('weather.openweathermap_2','clear-night') %}
mdi:weather-night
{% elif is_state('weather.openweathermap_2','rain') %}
mdi:weather-rainy
{% elif is_state('weather.openweathermap_2','snow') %}
mdi:weather-snowy
{% elif is_state('weather.openweathermap_2','fog') %}
mdi:weather-fog
{% elif is_state('weather.openweathermap_2','sleet') %}
mdi:weather-partly-snowy-rainy
{% elif is_state('weather.openweathermap_2','wind') %}
mdi:weather-windy
{% elif is_state('weather.openweathermap_2','cloudy') %}
mdi:weather-cloudy
{% elif is_state('weather.openweathermap_2','partlycloudy') %}
{{ 'mdi:weather-night-partly-cloudy' if is_night else 'mdi:weather-partly-cloudy' }}
{% elif is_state('weather.openweathermap_2','hail') %}
mdi:weather-hail
{% elif is_state('weather.openweathermap_2','lightning') %}
mdi:weather-lightning
{% elif is_state('weather.openweathermap_2','thunderstorm') %}
mdi:weather-lightning-rainy
{% endif %}
secondary: |2-
{% set en = states('weather.openweathermap_2') %}
{% set conditions = ['clear-night:Καθαρός',
'cloudy:Συννεφιασμένος',
'fog:Ομιχλώδες',
'hail:Χαλαζόπτωση',
'lightning:Αστραπές',
'lightning-rainy:Βροχερός με αστραπές',
'partlycloudy:Τοπικές νεφώσεις',
'pouring,rainy:Βροχερός',
'snowy:Χιονόπτωση',
'snowy-rainy:Χιονόνερο',
'sunny:Λιακάδα',
'windy:Ανεμώδης',
'windy-variant:Θυελλώδης',
'exceptional:Ιδιαίτερος'] %}
{{ conditions
| select('search', en)
| map('regex_replace', '.*:')
| list
| default([''], true)
| first }}
card_mod:
style:
mushroom-state-info$: |
.primary {
font-weight: 400 !important;
margin-right: 20px;
margin-top: 45px;
}
.secondary {
font-weight: 700 !important;
margin-top: 20px;
margin-right: 25px;
--secondary-text-color: primary;
}
.container {
--card-secondary-font-size: 18px;
--card-primary-font-size: 35px;
align-items: end;
}
mushroom-shape-icon$: |
.shape {
--shape-color: transparent;
}
.: |
ha-state-icon {
--icon-symbol-size: 60px;
color: #487aff;
margin-left: 50px;
margin-bottom: 25px;
}
ha-card {
background-color: none;
border-width: 0px;
}```
I would put the card itself into vertical mode and the use a pseudo element instead for the actual temperature.
type: custom:mushroom-template-card
primary: ''
icon: |-
{% set current_hour = now().hour %}
{% set is_night = current_hour >= 20 or current_hour < 6 %}
{% if is_state('weather.openweathermap','clear-day') %}
mdi:weather-sunny
{% elif is_state('weather.openweathermap','clear-night') %}
mdi:weather-night
{% elif is_state('weather.openweathermap','rain') %}
mdi:weather-rainy
{% elif is_state('weather.openweathermap','snow') %}
mdi:weather-snowy
{% elif is_state('weather.openweathermap','fog') %}
mdi:weather-fog
{% elif is_state('weather.openweathermap','sleet') %}
mdi:weather-partly-snowy-rainy
{% elif is_state('weather.openweathermap_2','wind') %}
mdi:weather-windy
{% elif is_state('weather.openweathermap','cloudy') %}
mdi:weather-cloudy
{% elif is_state('weather.openweathermap','partlycloudy') %}
{{ 'mdi:weather-night-partly-cloudy' if is_night else 'mdi:weather-partly-cloudy' }}
{% elif is_state('weather.openweathermap','hail') %}
mdi:weather-hail
{% elif is_state('weather.openweathermap','lightning') %}
mdi:weather-lightning
{% elif is_state('weather.openweathermap','thunderstorm') %}
mdi:weather-lightning-rainy
{% endif %}
secondary: |2-
{% set en = states('weather.openweathermap') %}
{% set conditions = ['clear-night:Καθαρός',
'cloudy:Συννεφιασμένος',
'fog:Ομιχλώδες',
'hail:Χαλαζόπτωση',
'lightning:Αστραπές',
'lightning-rainy:Βροχερός με αστραπές',
'partlycloudy:Τοπικές νεφώσεις',
'pouring,rainy:Βροχερός',
'snowy:Χιονόπτωση',
'snowy-rainy:Χιονόνερο',
'sunny:Λιακάδα',
'windy:Ανεμώδης',
'windy-variant:Θυελλώδης',
'exceptional:Ιδιαίτερος'] %}
{{ conditions
| select('search', en)
| map('regex_replace', '.*:')
| list
| default([''], true)
| first }}
layout: vertical
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 15px;
--card-primary-font-size: 35px;
}
mushroom-shape-icon$: |
.shape {
--shape-color: transparent;
}
.: |
ha-state-icon {
--icon-symbol-size: 60px;
color: #487aff;
}
ha-state-icon::after {
content: '{{states('sensor.lounge_downstairs_temperature')}}°C';
position: relative;
display: flex;
justify-content: center !important;
top: 32px;
left: 5px;
color: var(--primary-text-color) !important;
font-size: 35px;
}
ha-card {
background-color: none;
border-width: 0px;
margin-left: 20px;
border-radius: 25px !important;
border-width: 0px;
}
Your are great! Thanks.
How can i add card width : 250 and height : 150 and center them?
Sorry not sure what you mean? I wouldnt modify the size of the card anymore no, since the centering would be done by the card itself instead now.
I am using it in a custom grid layout with collums 250px kai rows 150
Like i asked you initially. Post the full grid card then.
Cant help unless i know what you have.
1 Like
Use layout card. You can then define the column sizes like this:
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-template-card
primary: ''
icon: |-
{% set current_hour = now().hour %}
{% set is_night = current_hour >= 20 or current_hour < 6 %}
{% if is_state('weather.openweathermap','clear-day') %}
mdi:weather-sunny
{% elif is_state('weather.openweathermap','clear-night') %}
mdi:weather-night
{% elif is_state('weather.openweathermap','rain') %}
mdi:weather-rainy
{% elif is_state('weather.openweathermap','snow') %}
mdi:weather-snowy
{% elif is_state('weather.openweathermap','fog') %}
mdi:weather-fog
{% elif is_state('weather.openweathermap','sleet') %}
mdi:weather-partly-snowy-rainy
{% elif is_state('weather.openweathermap_2','wind') %}
mdi:weather-windy
{% elif is_state('weather.openweathermap','cloudy') %}
mdi:weather-cloudy
{% elif is_state('weather.openweathermap','partlycloudy') %}
{{ 'mdi:weather-night-partly-cloudy' if is_night else 'mdi:weather-partly-cloudy' }}
{% elif is_state('weather.openweathermap','hail') %}
mdi:weather-hail
{% elif is_state('weather.openweathermap','lightning') %}
mdi:weather-lightning
{% elif is_state('weather.openweathermap','thunderstorm') %}
mdi:weather-lightning-rainy
{% endif %}
secondary: |2-
{% set en = states('weather.openweathermap') %}
{% set conditions = ['clear-night:Καθαρός',
'cloudy:Συννεφιασμένος',
'fog:Ομιχλώδες',
'hail:Χαλαζόπτωση',
'lightning:Αστραπές',
'lightning-rainy:Βροχερός με αστραπές',
'partlycloudy:Τοπικές νεφώσεις',
'pouring,rainy:Βροχερός',
'snowy:Χιονόπτωση',
'snowy-rainy:Χιονόνερο',
'sunny:Λιακάδα',
'windy:Ανεμώδης',
'windy-variant:Θυελλώδης',
'exceptional:Ιδιαίτερος'] %}
{{ conditions
| select('search', en)
| map('regex_replace', '.*:')
| list
| default([''], true)
| first }}
layout: vertical
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 15px;
}
mushroom-shape-icon$: |
.shape {
--shape-color: transparent;
}
.: |
ha-state-icon {
--icon-symbol-size: 60px;
color: #487aff;
}
ha-state-icon::after {
content: '{{states('sensor.lounge_downstairs_temperature')}}°C';
position: relative;
display: flex;
justify-content: center !important;
top: 32px;
left: 5px;
color: var(--primary-text-color) !important;
font-size: 35px;
}
ha-card {
background-color: none;
border-width: 0px;
border-radius: 25px !important;
border-width: 0px;
}
layout:
grid-template-columns: 50% 50%
grid-template-rows: auto
max_cols: 2
1 Like
I will use it. Thanks for your help. Need to study the changes that you made in the card to understant better what the options do. I will write again if i have any problem and share what i made. Thanks again.
Birthday Card
Page Properties:
- Displays 4 upcoming birthdays. The number can also be increased further with the help of a swiper card
- Shows the remaining time for birthdays.
- Ready for White and Dark Theme.
- Highlights the birthday person in a white frame.
- Birthday icon at the very first card let’s HA to remind you the birthday in various ways. In my example a notification through telegram.
- Full screen tablet version
- Info on creating a sensor that displays multiple birthdays
- Info on creating the template sensors from the UI
- Info on how to shorten state attribute messages.
- Info on creatşng full screen pages on tablet and pc view.
- Full code explanation line by line
4 Likes
- type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.eetplaats
icon: |-
{{ iif(is_state('climate.eetplaats', 'cool'), 'mdi:air-conditioner','mdi:air-conditioner' ) }}
icon_color: >
{% if is_state('climate.eetplaats', 'heat') %}
rgb(235,194,194)
{% elif is_state('climate.eetplaats', 'cool') %}
rgb(0,255,255)
{% else %}
rgb(84,84,84)
{% endif %}
The color of the icon does not change, what is wrong with the code ?
Try instead of rgb(235,194,194) just writting 235,194,194
Mushroom doesnt accept straight css terminology. You could do rgb(235,194,194) if you use card mod for example:
type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.eetplaats
icon: |-
{% if is_state('climate.eetplaats', 'cool') %}
mdi:air-conditioner
{% else %}
mdi:air-conditioner
{% endif %}
card_mod:
style: |
ha-card {
{% if is_state(config.entity,'heat') %}
--color: rgb(235, 194, 194);
{% elif is_state(config.entity, 'cool') %}
--color: rgb(0, 255, 255);
{% else %}
--color: rgb(84, 84, 84);
{% endif %}
}
config.entity is a substitution instead of writting the entity name used in the card every time 
1 Like