square: false
type: custom:button-card
type: horizontal-stack
type: custom:stack-in-card
type: custom:mushroom-template-card
type: custom:mushroom-template-card
type: custom:mushroom-template-card
type: custom:mushroom-template-card
Not sure if Iâm the only one, but since it has been implemented in the main post code.
Even when:
ha-fab {
margin-bottom: 200px;
}
1 Like
Is anyone able to help me out with this please?
I solved the font issue, but I still have huge gaps between my cards in the grid for whatever reason. It actually occurs for every card I have in each row, no matter the card.
Itâs wrecking the look of my dashboard
Moss
March 16, 2023, 7:27am
88
card-mod-theme: Rounded
card-mod-view-yaml: |
/* General changes */
ha-card {
transition: none !important;
font-family: 'custom font, otherwise remove this line', 'Roboto', sans-serif !important;
}
You must also change the font-name under âGeneral changesâ too
Have anybody a good working Thermostat Card for this theme?
1 Like
I had the same issue. You need to set square: false inside your grid card:
- type: grid
square: false
cards:
- type: custom:button-card
...
remcovdwal
March 16, 2023, 10:06pm
91
The font he uses doesnt show⌠anyone a solution for this ?
I have created a Thermostat Card, where you can toggle More-info
Here is the code:
type: custom:button-card<ha-icon icon="mdi:thermometer" style="width: 23px; height: 23px; color: black;"> </ha-icon><span><span style="color: var(--text-color-sensor);">${states['sensor.wohnbereich_temperatur'].state}°</span></span><ha-icon icon="mdi:radiator" style="width: 1px; height: 1px; color: white;"> </ha-icon><span><span style="color: var(--text-color-sensor);">${states['climate.eve_thermo_bild'].state}</span></span>
value: âonâ
value: âoffâ
But i have a problem to geht the Card more rounded, have anyone a Solution?
Moss
March 17, 2023, 10:44am
94
it is really a cramp with unformatted codes
For more rounding just adjust this value
- border-radius: 6%
RaA11
March 17, 2023, 4:15pm
95
type: custom:button-card
entity: climate.eve_thermo_bild
icon: mdi:thermostat
name: Bild
styles:
card:
- background-color: var(âred)
- border-radius: 6%
- width: 400x
- height: 100px
- padding: 10%
- color: black
- font-size: 26px
- text-transform: capitalize
grid:
- grid-template-areas: ââi tempâ ân nâ âstate stateâ âram ramâ âsd sdââ
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 13px
- align-self: middle
- justify-self: start
- padding-bottom: 0px
- padding-left: 6px
img_cell:
- justify-content: start
- align-items: start
- margin-top: null
- margin-left: â-40%â
icon:
- color: black
- width: 100%
- margin-top: â-5%â
- margin-left: 0%
custom_fields:
temp:
- align-self: start
- justify-self: end
- entity: sensor.eve_thermo_bild_current_temperature
state:
- padding-bottom: 0px
- align-self: start
- justify-self: start
- padding-left: 6px
- font-size: 10px
custom_fields:
temp: |
[[[
return <ha-icon icon="mdi:thermometer" style="width: 23px; height: 23px; color: black;"> </ha-icon><span><span style="color: var(--text-color-sensor);">${states['sensor.wohnbereich_temperatur'].state}°</span></span>
]]]
state: |
[[[
return <ha-icon icon="mdi:radiator" style="width: 1px; height: 1px; color: white;"> </ha-icon><span><span style="color: var(--text-color-sensor);">${states['climate.eve_thermo_bild'].state}</span></span>
]]]
state:
value: âonâ
styles:
card:
- background: var(âred)
value: âoffâ
styles:
state:
- color: white
name:
- color: white
icon:
- color: white
temp:
- color: white
card:
- color: white
- filter: opacity(50%)
- background: black
@Manen123 , can you please fix the syntex?
Thank You
Wow, that was it! Thank you, thatâs kinda annoying that it does that by defaultâŚ
Thanks, I used your code to solve it
1 Like
RaA11
March 18, 2023, 2:32pm
99
great
you can post the code here by using ``` befor and after the code
like this:
type: custom:button-card
entity: climate.eve_thermo_bild
icon: mdi:thermostat
name: Bild
styles:
card:
- background-color: var(--red)
- border-radius: 10%
- width: 400x
- height: 100px
- padding: 10%
- color: black
- font-size: 26px
- text-transform: capitalize
grid:
- grid-template-areas: '"i temp" "n n" "state state" "ram ram" "sd sd"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 13px
- align-self: middle
- justify-self: start
- padding-bottom: 0px
- padding-left: 6px
img_cell:
- justify-content: start
- align-items: start
- margin-top: null
- margin-left: '-40%'
icon:
- color: black
- width: 100%
- margin-top: '-2%'
- margin-left: 0%
custom_fields:
temp:
- align-self: start
- justify-self: end
- entity: sensor.eve_thermo_bild_current_temperature
state:
- padding-bottom: 0px
- align-self: start
- justify-self: start
- padding-left: 6px
- font-size: 10px
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 23px; height: 23px; color: black;">
</ha-icon><span><span style="color: var(--text-color-sensor);">${states['sensor.wohnbereich_temperatur'].state}°</span></span>`
]]]
state: |
[[[
return `<ha-icon
icon="mdi:radiator"
style="width: 1px; height: 1px; color: white;">
</ha-icon><span><span style="color: var(--text-color-sensor);">${states['climate.eve_thermo_bild'].state}</span></span>`
]]]
state:
- value: 'on'
styles:
card:
- background: var(--red)
- value: 'off'
styles:
state:
- color: white
name:
- color: white
icon:
- color: white
temp:
- color: white
card:
- color: white
- filter: opacity(50%)
- background: black
And here is the Code for the room Card:
âââtype: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:sofa
entity: light.wohnzimmer_beleuchtung
icon_color: var(--black)
primary: Wohnzimmer
secondary: >-
{{(states('sensor.wohnbereich_temperatur')) }} °C | {{
(states('climate.eve_thermo_esstisch')) }}
layout: horizontal
tap_action:
action: navigation
navigation_path: null
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 15px !important;
position: relative;
top: -30px;
left: -75px;
overflow: visible !important;
color: black;
font-weight: bold;
text-overflow: ellipsis;
}
.secondary {
font-size: 11px !important;
position: relative;
overflow: visible !important;
top: -35px;
left: -75px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
border-radius: 0px !important;
}
.: |
ha-card {
margin-top: 10px;
--primary-text-color: black;
--secondary-text-color: black;
background: none;
}
:host {
--mush-icon-size: 80px;
}
- type: custom:mushroom-template-card
icon_color: |-
{% set state=states(entity) %}
{% if state=='on' %}
black
{% elif state=='off' %}
white
{% else %}
gray
{% endif %}
icon: |-
{% if is_state(entity, 'on') %}
mdi:lightbulb-group
{%else%}
mdi:lightbulb-group-off
{% endif %}
entity: light.wohnzimmer_beleuchtung
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 10px;
height: 10px;
}
.: |
ha-card {
width: 55px;
margin-left: 70%;
top: -118px;
background: none;
}
:host {
--mush-icon-size: 22px;
}
- type: custom:mushroom-template-card
entity: binary_sensor.eve_door_esstisch
tap_action:
action: more-info
icon: |-
{% if is_state(entity, 'on') %}
mdi:window-open-varian
{%elif is_state(entity, 'off') %}
mdi:window-closed-variant
{% endif %}
icon_color: |-
{% set state=states(entity) %}
{% if state=='on' %}
black
{% elif state=='off' %}
white
{% else %}
gray
{% endif %}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 10px;
height: 10px;
}
.: |
ha-card {
width: 15px;
margin-left: 70%;
top: -138px;
background: none;
}
:host {
--mush-icon-size: 22px;
}
- type: custom:mushroom-template-card
entity: media_player.sonos_wohnzimmer_2
tap_action:
action: more-info
icon: |-
{% set state=states(entity) %}
{% if state=='playing' %}
mdi:speaker-play
{% elif state=='off' %}
mdi:speaker-pause
{% else %}
mdi:speaker-off
{% endif %}
icon_color: |-
{% set state=states(entity) %}
{% if state=='playing' %}
black
{% elif state=='off' %}
white
{% else %}
white
{% endif %}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 10px;
height: 10px;
}
.: |
ha-card {
width: 15px;
margin-left: 70%;
top: -158px;
background: none;
}
:host {
--mush-icon-size: 22px;
}
card_mod:
style: |
ha-card {
height: 90px !important;
width: 175px !important;
background-color: var(--red)
}```
1 Like
And I have created the light Card with a label.
Here is the code:
name: Wohnzimmer
icon: mdi:lightbulb-group
show_label: true
label: |
[[[
var bri = (Math.round(states['light.wohnzimmer_beleuchtung'].attributes.brightness / 2.55));
return ' ' + (bri ? bri : '0') + '%';
]]]
entity: light.wohnzimmer_beleuchtung
tap_action:
action: toggle
haptic: medium
hold_action:
action: more-info
haptic: medium
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: light.wohnzimmer_beleuchtung
colorMode: brightness
styles:
container:
- background: none
- border-radius: 100px
- overflow: visible
card:
- height: 16px
- padding: 0 8px
- background: |
[[[
if (entity.state == "on") return "linear-gradient(90deg, rgba(255,255,255, 0.3) 0%, rgba(255,255,255, 1) 100%)";
else return "var(--contrast4)";
]]]
track:
- overflow: visible
- background: none
progress:
- background: none
thumb:
- background: |
[[[
if (entity.state == "on") return "var(--black)";
if (entity.state == "off") return "var(--contrast20)";
else return "var(--contrast8)";
]]]
- top: 2px
- right: '-6px'
- height: 12px
- width: 12px
- border-radius: 100px
styles:
grid:
- grid-template-areas: '"i" "n" "l" "slider"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- font-family: In case of a custom font, otherwise you can remove this line
- background: var(--contrast2)
- padding: 16px
- '--mdc-ripple-press-opacity': 0
img_cell:
- justify-self: start
- width: 24px
icon:
- width: 24px
- height: 24px
- color: var(--contrast8)
name:
- justify-self: start
- font-size: 14px
- margin: 4px 0 12px 0
- color: var(--contrast8)
label:
- justify-self: end
- margin-top: '-30%'
state:
- value: 'on'
styles:
card:
- background: var(--yellow)
icon:
- color: var(--black)
name:
- color: var(--black)
label:
- color: var(--black)
- value: 'off'
styles:
icon:
- color: var(--contrast20)
name:
- color: var(--contrast20) ```
3 Likes
Thank you! Now i got. it:-)
tfc87
March 18, 2023, 11:07pm
103
I like your dark-styling of the light cards where the icon only changes color when turned on. Do you mind sharing your code? FunnyâŚI had also added mushroom chips to the title card to make use of the space.
LE0N
March 20, 2023, 5:07pm
104
Loving all the helpful comments btw!!
@CM000n @nkkfs @PaNiCo @remcovdwal The font Iâm using is a paid font called HK Nova . Hence I didnât include it within the guide. But honestly, there are plenty of awesome free Google fonts available.
@acesyde This is awesome! I canât help you code it but if you need any help regarding feedback or something else, let me know!
1 Like
thank you!
