Thanks for the code, the cards look awesome.
Awesome work.
I wish to have another part more in part 2.
There is Spotify and TV.
I wish to have a home page and 3 button
One home, one Spotify, one TV.
If i select home it will replace the dog.
Can you point me to where put that code and wich part to copy.
Thanks in advance
Continuing the discussion from Mushroom Cards - Build a beautiful dashboard easily 
:
any help is welcome, i am not able to change background-blend-mode from lighten to darken when is set dark mode, i know that is the second time when i ask but iām lostā¦
type: custom:mushroom-template-card
primary: |-
{% set time = now().hour %}
{% if (time >= 18) %}
BunÄ Seara, {{user}}!
{% elif (time >= 12) %}
BunÄ Ziua, {{user}}!
{% elif (time >= 5) %}
BunÄ DimineaČa, {{user}}!
{% else %}
Salut, {{user}} !
{% endif %}
secondary: >-
AfarÄ sunt {{states("sensor.familia_vlad_outdoor_temperature")| round(1)}}Ā°C
Či este{% set condition = states('sensor.aemet_condition') %} {% set
conditions = {'clear-night': 'o noapte seninÄ', 'cloudy': 'Ć®nnourat',
'exceptional': 'exceptionellt', 'fog': 'ceaČÄ', 'hail': 'hagel', 'lightning':
'fulgere', 'lightning-rainy': 'ploaie cu fulgere', 'partlycloudy': 'parČial
noros', 'pouring': 'ƶsregn', 'rainy': 'ploie', 'snowy': 'ninsoare',
'snowy-rainy': 'lapoviČÄ', 'sunny': 'soare', 'windy': 'vĆ¢nt', 'windy-variant':
'blƄsigt'} %} {{ conditions[condition] }}
Ćn casÄ sunt {{states('sensor.temperatura_medie')}}Ā°C
icon: ''
fill_container: true
multiline_secondary: true
card_mod:
style: |
{%if is_state('sensor.aemet_condition','cloudy')%}
ha-card {
height: 100px !important;
border: solid #A9A9A9;
box-shadow: 0px 0px 9px 1px #808080;
background-image: url('/local/cloudy.webp'),linear-gradient(to left, transparent, rgba(var(--rgb-card-background-color)) 50% );
background-size: 50%, 100%;
background-color: rgba(0, 0, 0, 0.1);
background-position: right;
background-repeat: no-repeat;
background-blend-mode: lighten;
--primary-text-color: #447FA6;
--secondary-text-color: #447FA6;
--card-primary-font-size: 20px;
--card-secondary-font-size: 11px
}
{% elif is_state('sensor.aemet_condition','partlycloudy')%}
ha-card {
height: 100px !important;
border: solid #A9A9A9;
box-shadow: 0px 0px 9px 1px #808080;
background-image: url('/local/partlycloudy.jpg'),linear-gradient(to left, transparent, rgba(var(--rgb-card-background-color)) 50% );
background-size: 50%, 100%;
background-color: rgba(0, 0, 0, 0.1);
background-position: right;
background-repeat: no-repeat;
background-blend-mode: lighten;
--primary-text-color: #447FA6;
--secondary-text-color: #447FA6;
--card-primary-font-size: 20px;
--card-secondary-font-size: 11px
}
{% elif is_state('sensor.aemet_condition','sunny')%}
ha-card {
height: 100px !important;
border: solid #A9A9A9;
box-shadow: 0px 0px 9px 1px #808080;
background-image: url('/local/sunny.jpg'),linear-gradient(to left, transparent, rgba(var(--rgb-card-background-color)) 50% );
background-size: 50%, 100%;
background-color: rgba(0, 0, 0, 0.1);
background-position: right;
background-repeat: no-repeat;
background-blend-mode: lighten;
--primary-text-color: #447FA6;
--secondary-text-color: #447FA6;
--card-primary-font-size: 20px;
--card-secondary-font-size: 11px
}
{% elif is_state('sensor.aemet_condition','clear-night')%}
ha-card {
height: 100px !important;
border: solid #A9A9A9;
box-shadow: 0px 0px 9px 1px #808080;
background-image: url('/local/clearnight.jpg'),linear-gradient(to left, transparent, rgba(var(--rgb-card-background-color)) 50% );
background-size: 50%, 100%;
background-color: rgba(0, 0, 0, 0.1);
background-position: right;
background-repeat: no-repeat;
background-blend-mode: lighten;
--primary-text-color: #447FA6;
--secondary-text-color: #447FA6;
--card-primary-font-size: 20px;
--card-secondary-font-size: 11px
}
{% elif is_state('sensor.aemet_condition','fog')%}
ha-card {
height: 100px !important;
border: solid #A9A9A9;
box-shadow: 0px 0px 9px 1px #808080;
background-image: url('/local/fog.jpg'),linear-gradient(to left, transparent, rgba(var(--rgb-card-background-color)) 50% );
background-size: 50%, 100%;
background-color: rgba(0, 0, 0, 0.1);
background-position: right;
background-repeat: no-repeat;
background-blend-mode: lighten;
--primary-text-color: #447FA6;
--secondary-text-color: #447FA6;
--card-primary-font-size: 20px;
--card-secondary-font-size: 11px
}
{% elif is_state('sensor.aemet_condition','lightning-rainy')%}
ha-card {
height: 100px !important;
border: solid #A9A9A9;
box-shadow: 0px 0px 9px 1px #808080;
background-image: url('/local/heavy-rain-thunderstorm.jpg'),linear-gradient(to left, transparent, rgba(var(--rgb-card-background-color)) 50% );
background-size: 50%, 100%;
background-color: rgba(0, 0, 0, 0.1);
background-position: right;
background-repeat: no-repeat;
background-blend-mode: lighten;
--primary-text-color: #447FA6;
--secondary-text-color: #447FA6;
--card-primary-font-size: 20px;
--card-secondary-font-size: 11px
}
{% elif is_state('sensor.aemet_condition','lightning')%}
ha-card {
height: 100px !important;
border: solid #A9A9A9;
box-shadow: 0px 0px 9px 1px #808080;
background-image: url('/local/lightning.jpg'),linear-gradient(to left, transparent, rgba(var(--rgb-card-background-color)) 50% );
background-size: 50%, 100%;
background-color: rgba(0, 0, 0, 0.1);
background-position: right;
background-repeat: no-repeat;
background-blend-mode: lighten;
--primary-text-color: #447FA6;
--secondary-text-color: #447FA6;
--card-primary-font-size: 20px;
--card-secondary-font-size: 11px
}
{% elif is_state('sensor.aemet_condition','rainy')%}
ha-card {
height: 100px !important;
border: solid #A9A9A9;
box-shadow: 0px 0px 9px 1px #808080;
background-image: url('/local/rainny.jpg'),linear-gradient(to left, transparent, rgba(var(--rgb-card-background-color)) 50% );
background-size: 50%, 100%;
background-color: rgba(0, 0, 0, 0.1);
background-position: right;
background-repeat: no-repeat;
background-blend-mode: lighten;
--primary-text-color: #447FA6;
--secondary-text-color: #447FA6;
--card-primary-font-size: 20px;
--card-secondary-font-size: 11px
}
{% elif is_state('sensor.aemet_condition','snowy')%}
ha-card {
height: 100px !important;
border: solid #A9A9A9;
box-shadow: 0px 0px 9px 1px #808080;
background-image: url('/local/snowy.jpg'),linear-gradient(to left, transparent, rgba(var(--rgb-card-background-color)) 50% );
background-size: 50%, 100%;
background-color: rgba(0, 0, 0, 0.1);
background-position: right;
background-repeat: no-repeat;
background-blend-mode: lighten;
--primary-text-color: #447FA6;
--secondary-text-color: #447FA6;
--card-primary-font-size: 20px;
--card-secondary-font-size: 11px
}
{% elif is_state('sensor.aemet_condition','snowy-rainy')%}
ha-card {
height: 100px !important;
border: solid #A9A9A9;
box-shadow: 0px 0px 9px 1px #808080;
background-image: url('/local/snowyrain.jpg'),linear-gradient(to left, transparent, rgba(var(--rgb-card-background-color)) 50% );
background-size: 50%, 100%;
background-color: rgba(0, 0, 0, 0.1);
background-position: right;
background-repeat: no-repeat;
background-blend-mode: lighten;
--primary-text-color: #447FA6;
--secondary-text-color: #447FA6;
--card-primary-font-size: 20px;
--card-secondary-font-size: 11px
}
{% elif is_state('sensor.aemet_condition','windy')%}
ha-card {
height: 100px !important;
border: solid #A9A9A9;
box-shadow: 0px 0px 9px 1px #808080;
background-image: url('/local/windy.jpg'),linear-gradient(to left, transparent, rgba(var(--rgb-card-background-color)) 50% );
background-size: 50%, 100%;
background-color: rgba(0, 0, 0, 0.1);
background-position: right;
background-repeat: no-repeat;
background-blend-mode: lighten;
--primary-text-color: #447FA6;
--secondary-text-color: #447FA6;
--card-primary-font-size: 20px;
--card-secondary-font-size: 11px
}
{% endif %}
Have a look here:
Thank youā¦it work flawlessly
1 Like
@rhysb ā¦ you are one of those people i have seen who can solve most of the css queriesā¦almost all of themā¦ can you help me on thisā¦
not that the gap affects somethingā¦ but looks better if the gap is uniform all roundā¦ and i found it can be achieved with the display: none optionā¦ but i dont know how to apply this onto the yaml code. Not able to understand how to point onto the correct item. (layout-card)
1 Like
Your room card is great!
If it is possible, I would like to add a light chip to the room card that will always be displayed.
Could you please assist me?
1 Like
oh thanks @rhysb, I finally got it!
Now I have a big problem:
- I use the minimalist theme to hide the top navigation bar, but that doesnāt make the sticky player work for me.
I also tried to change the theme but to no avail
1 Like
Can some one suggest some article / post / website ā¦
- Where I can learn how to navigate webpage & get the selectors
- Use them to manipulate items using CSS
- How to implement that in the YAML code in home assistantā¦
I need to get the above query doneā¦
1 Like
hey lads,
quick question, Iām using the numbers card a bit āout of the boxā to display some percentages
iāve disabled all the tap actions, but is there a way to ādisableā the slider too? so itās a purely visual thing?
2 Likes
Is it possible to do a dual text chip somehow? Like iOS is doing it 
Try here:
Someday I need to compile a searchable list of all the tweaks you share on here. Absolutely fantastic! Thanks!
4 Likes
Hi, Iād like to center horizontally the number of lights on in this element created using chip card, but without sucess. Any advice? Thanx
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
background-color: var(--nav-link-background);
margin: 0px 0px -4px -4px;
}
cards:
- type: custom:mushroom-template-card
primary: Lights
secondary: ''
icon: mdi:lightbulb-group
layout: horizontal
tap_action:
action: navigate
navigation_path: /main-control/lights
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
margin: 0px -100px 0px 0px;
}
mushroom-shape-icon {
--icon-color: var(--light-icon-color) !important;
}
- type: custom:mushroom-chips-card
alignment: end
chips:
- type: conditional
conditions:
- entity: sensor.lights_on_all
state_not: '0'
chip:
type: template
entity: sensor.lights_on_all
content: '{{states(entity)}}'
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
style: |
ha-card {
--chip-height: 20px;
--chip-border-radius: 0.3em;
--chip-padding: 0.2em 0.2em !important;
margin: 22px 12px 0px 0px;
--text-color: var(--button-on-background-secondary);
--chip-background: var(--button-background-secondary);
--chip-font-size: 12px;
--chip-font-weight: 600;
justify-self: center !important;
}
Anyone have a chance to look at this?
Can someone help me center the +/- buttons pls?
Here is my code I tried but it aināt working.
- type: custom:mushroom-climate-card
entity: climate.3family_room
show_temperature_control: true
hvac_modes:
- heat_cool
- heat
- cool
- fan_only
layout: horizontal
primary_info: none
secondary_info: none
collapsible_controls: false
fill_container: true
card_mod:
style: |
mushroom-climate-temperature-control$:
mushroom-input-number$: |
#container {
background: none;
padding: 0px;
flex-direction: row !important;
justify-content: center !important;
}
#container .button {
height: 100%;
width: 30%;
}
#container .button:nth-child(1) {
background: rgba(var(--rgb-blue), 0.2);
}
#container .button:nth-child(3) {
background: rgba(var(--rgb-red), 0.2);
}
mushroom-shape-icon {
--card-mod-icon:
{% if is_state(config.entity, 'heat_cool') %}
mdi:autorenew
{% elif is_state(config.entity, 'heat') %}
mdi:fire
{% elif is_state(config.entity, 'cool') %}
mdi:snowflake
{% elif is_state(config.entity, 'dry') %}
mdi:water-percent
{% elif is_state(config.entity, 'fan_only') %}
mdi:fan
{% else %}
mdi:air-conditioner
{% endif %};
display: flex;
{% if is_state(config.entity, 'fan_only') %}
animation: rotation 1s linear infinite;
{% endif %}
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
You can center the temperature controls like this:
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-button-group$: |
.container {
justify-content: center !important;
}
1 Like