Moin,
ich habe die Bubble-Card “Climate” an meine Bedürfnisse angepasst zur Nutzung mit Better-Thermostat. Für Interessierte nachfolgend der Code:
type: custom:bubble-card
card_type: climate
entity: climate.heizung_arbeitszimmer
sub_button:
main:
- name: Luftfeuchtigkeit
state_background: true
show_arrow: false
entity: sensor.temperatursensor_arbeitszimmer_humidity
show_state: true
show_attribute: false
show_name: false
sub_button_type: default
scrolling_effect: false
show_background: false
- name: Ventilstellung
entity: sensor.thermostat_az_position
select_attribute: hvac_modes
icon: ""
show_state: true
show_arrow: false
sub_button_type: default
scrolling_effect: false
show_background: false
show_attribute: false
- name: Aktuell
entity: climate.heizung_arbeitszimmer
show_state: false
show_icon: true
state_background: true
scrolling_effect: false
show_background: false
show_attribute: true
attribute: hvac_action
- name: Fenster
entity: climate.heizung_arbeitszimmer
icon: mdi:window-closed
show_state: false
show_arrow: false
sub_button_type: default
show_name: false
show_attribute: false
attribute: window_open
show_icon: true
state_background: false
scrolling_effect: false
show_background: false
content_layout: icon-right
bottom: []
state_color: false
card_layout: large-2-rows
show_state: false
show_attribute: true
icon: mdi:heating-coil
min_temp: 12
max_temp: 30
step: 0.5
attribute: current_temperature
name: IST-Temperatur
force_icon: false
main_buttons_full_width: true
main_buttons_alignment: end
grid_options:
columns: 12
rows: 2
show_icon: false
scrolling_effect: false
modules:
- "!default"
styles: |-
.bubble-container {
height: 120px !important;
border-radius: 0px !important;
# background: rgba(7, 189, 223, 0.15);
background-image: linear-gradient(180deg, rgba(206, 211, 234, 0.07) 0%, transparent 100%);
}
.bubble-climate-container {
--bubble-climate-border: rgba(255,255,255,0.1) solid 1px;
--bubble-climate-border-radius: 10px !important;
--bubble-climate-main-background-color: transparent !important;
--bubble-state-climate-heat-color: transparent !important;
}
.bubble-name-container {
position: absolute;
width: 100%;
top: 5%;
left: 0%;
margin-left: 0px;
align-items: center !important;
border-radius: 10px !important;
}
.bubble-state {
font-size: calc(1rem + (20 - 10) * ((100vw - 320px) / (1600 - 320)));
font-weight: 300;
line-height: 1.2;
}
.bubble-sub-button-container {
position: absolute;
place-items: center; !important;
justify-content: center !important;
bottom: -5%;
left: 0;
margin: 0px 0px 0px 0px !important;
grid-template-areas:
's1 s2 s3 s4';
grid-template-columns: 25% 25% 25% 25% !important;
}
.bubble-sub-button-1 {
grid-area: s1;
}
.bubble-sub-button-2 {
grid-area: s2;
}
.bubble-sub-button-3 {
grid-area: s3;
}
.bubble-sub-button-4 {
grid-area: s4;
icon-size: 50px !important;
}
.bubble-sub-button-icon {
--mdc-icon-size: 20px !important;
}
.bubble-sub-button-4 .bubble-name {
content: "";
display: none !important;
}
.bubble-sub-button-4::after {
content: "${hass.states[entity].attributes.window_open === false ? 'geschlossen' : 'offen'}";
}
.bubble-temperature-container {
position: absolute;
background: transparent;
height: 100%;
width: 100%;
top: 0%;
left: 0%;
border-radius: 0px;
}
.bubble-climate-minus-button {
position: absolute;
background: rgba(0,0,0,0.2);
height: 70%;
width: 20%;
top: 0%;
left: 0%;
border-radius: 0px;
border: rgba(255,255,255,0.1) solid 1px;
}
.bubble-climate-plus-button {
position: absolute;
background: rgba(0,0,0,0.2);
height: 70%;
width: 20%;
top: 0%;
right: 0%;
border-radius: 0px !important;
border: rgba(255,255,255,0.1) solid 1px;
}
.bubble-climate-temp-display {
position: absolute;
top: 55%;
font-size: 16px
}
.bubble-temperature-display {
color: ${hass.states[entity].attributes.temperature > hass.states[entity].attributes.current_temperature ? 'red' : 'var(--primary-text-color)'} !important;
}
${subButtonIcon[3].setAttribute("icon",
hass.states[entity].attributes.window_open === false ?
'mdi:window-closed-variant' : 'mdi:window-open-variant')}
${subButtonIcon[3].setAttribute("style",
hass.states[entity].attributes.window_open === false
? 'color: var(--primary-text-color);'
: 'color: red')}
hide_temperature: false
… hier v2
Layout ist etwas wo man sich richtig verlieren und Zeit versenken kann. Den 3D Effekt finde ich schön. 
