Did you check, if decluttering-card could be a solution to avoid duplicate code?
sorry⊠whatâs that? another mod? 
I would not call it another mod, but in my case, itâs helping me a lot to avoid duplicate code.
Thanks I didnât know it
Anyway I solved adding a card-mod theme, so with 1 yaml file I can easily modify all 
link to the code đč Card-mod - Add css styles to any lovelace card - #8041 by crc-error79
Now I can start playing modding cards and adding other themes for mobile etc
Here a work-in-progress updated version
He all,
Does anyone have a room card that incorporates the simple thermostat card.
Would love some very simple like this.
And
This
In one card
Many thanks
hello , Would you be so kind if you can share the custom room card code?
Ciao, sure this is my theme (css)
you can find the instruction for the theme here: đč Card-mod - Add css styles to any lovelace card - #8041 by crc-error79
this is the code with last modifications
mercurio-theme:
card-mod-theme: mercurio-theme
card-mod-card: |
ha-card.type-custom-room-card {
/* varibili colore */
/*
--rp-card-ombra-testo: rgba(22, 22, 22, 0.2);
--rp-content-main-entity-brd: rgba(22, 22, 22, 0.1);
--rp-content-icon-box-entity-bg-luci-on: rgba(22, 22, 22, 0.2);
--rp-content-icon-box-bg: rgba(22, 22, 22, 0.2);
--rp-card-header-bg: rgba(212, 212, 212, 0.5);
--rp-card-bottom-bg: rgba(212, 212, 212, 0.3);
--rp-content-main-entity-bg: rgba(212, 212, 212, 0.1);
--rp-content-main-entity-bg-luci-on: rgba(212, 212, 212, 0.5);
--rp-content-main-entity-bg-antifurto-nok: rgba(212, 212, 212, 0.4);
*/
/* colore fisso */
--rp-content-icon-box-testo-luci-on: rgba(171, 145, 97, 1);
--rp-card-bg: rgba(234, 238, 246, 0.1);
--rp-content-main-testo: rgba(56, 56, 56, 1);
--rp-content-icon-box-bg-luci-on: rgba(255, 212, 132, 1.0);
--rp-content-main-ico-antifurto: rgba(190, 49, 68, 0.8);
--rp-content-main-ico-bg: rgba(252, 252, 252, 0.9);
--rp-content-main-ico-brd: rgba(212, 212, 212, 0.5);
/* override */
--mdc-icon-size: 100%;
--state-light-inactive-color: rgba(158, 158, 158, 1);
--state-switch-inactive-color: rgba(158, 158, 158, 1);
/* inizio css */
overflow: hidden;
min-height: 222px;
background-color: var(--rp-card-bg);
display: flex;
flex-direction: column;
.card-header {
/* text-shadow: 1px 1px 4px var(--rp-card-ombra-testo); */
padding: 4px 12px;
margin: 0px;
min-height: 52px;
line-height: normal;
background: var(--rp-card-header-bg);
font-weight: 300;
display: flex;
flex-direction: row;
align-items: flex-start;
position: relative;
.title {
overflow-wrap: normal;
word-break: normal;
white-space: normal;
opacity: 0.9;
padding: 0px;
display: flex;
flex-direction: column;
justify-content: center;
}
.entities-info-row {
display: flex;
top: 4px;
right: 0px;
position: relative;
margin: 0px 0px 0 auto;
padding: 0px;
flex-direction: column;
align-items: flex-end;
.entity {
font-size: 18px;
opacity: 0.9;
margin: 0px 0px 0 8px;
padding: 0px;
}
.icon-entity {
width: 24px;
height: 24px;
background-color: var(--rp-content-main-ico-bg);
border: 1px solid var(--rp-content-main-entity-brd);
border-radius: 51%;
display: flex;
justify-content: center;
}
.icon-small {
line-height: normal;
max-height: 20px;
color: var(--rp-content-main-ico-antifurto);
}
}
}
.content-main {
margin: 10px 0px;
padding: 0 20px 10px 20px;
box-sizing: border-box;
z-index: 1;
.entity {
background: var(--rp-content-main-entity-bg);
border: 1px solid var(--rp-content-main-entity-brd);
border-radius: 8px;
min-width: 108px;
margin: 10px 16px 0px 0;
min-height: 80px;
padding: 0px;
box-sizing: border-box;
span {
margin: 4px 0 2px 0;
display: inline-block;
padding: 0px;
font-size: 100%;
overflow-wrap: normal;
word-break: normal;
white-space: normal;
}
div {
padding: 4px;
margin: 4px auto 8px auto;
width: 60px;
height: 60px;
background-color: var(--rp-content-main-ico-bg);
border-radius: 32px;
border: 1px solid;
border-color: var(--rp-content-main-ico-brd);
display: flex;
box-sizing: border-box;
justify-content: center;
.icon-small {
height: auto;
width: 32px;
margin: auto;
justify-content: center;
}
}
}
}
.content-icon-box-bg {
border-radius: 51%;
height: 90px;
width: 90px;
margin: 0 -20px -28px 0;
position: absolute;
right: 0;
bottom: 0;
padding: 0px;
z-index: 1;
background-color: white;
}
.content-icon-box {
background-size: 48% auto;
border-radius: 51%;
height: 90px;
width: 90px;
margin: 0 -20px -28px 0;
position: absolute;
right: 0;
bottom: 0;
padding: 0px;
z-index: 1;
background-color: var(--rp-content-icon-box-bg);
background-repeat: no-repeat;
background-position: center;
/* luci accese */
.entity {
background-size: 48% auto;
border-radius: 51%;
width: 100%;
height: 100%;
margin: auto;
padding: 0px;
justify-content: center;
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 19A2.93 2.93 0 0 0 7.17 20H6A1 1 0 0 1 5 19V18H7M10 19A1 1 0 0 0 11 20H13A1 1 0 0 0 14 19V18H10M4 16A1 1 0 0 0 5 17H7V14.88A6.92 6.92 0 0 1 5 10A6.79 6.79 0 0 1 5.68 7A4 4 0 0 0 4 14.45M17 19A2.93 2.93 0 0 1 16.83 20H18A1 1 0 0 0 19 19V18H17M17 10A5 5 0 0 1 15 14V16A1 1 0 0 1 14 17H10A1 1 0 0 1 9 16V14A5 5 0 1 1 17 10M15 10A3 3 0 1 0 11 12.82V15H13V12.82A3 3 0 0 0 15 10M18.32 7A6.79 6.79 0 0 1 19 10A6.92 6.92 0 0 1 17 14.88V17H19A1 1 0 0 0 20 16V14.45A4 4 0 0 0 18.32 7Z" fill="rgba(45, 45, 45, 0.4)" /> </svg>');
background-color: var(--rp-content-icon-box-entity-bg-luci-on);
background-repeat: no-repeat;
background-position: center;
span:first-child {
margin: 0 0;
padding: 0px;
font-size: 0.92em;
width: 100%;
display: block;
position: absolute;
top: 24px;
main: 0px;
}
span {
margin: 6px 0 0 0;
padding: 0px;
font-size: 20px;
display: block;
width: 100%;
color: var(--rp-content-icon-box-testo-luci-on);
}
}
}
.content-alarm-box {
margin-top: auto;
width: 100%;
padding: 0px;
z-index: 0;
background-color: var(--rp-card-bottom-bg);
min-height: 20px;
.entity {
width: 80px;
margin: 0px;
padding: 4px 0 2px 0;
box-sizing: border-box;
span {
margin: 0px 4px;
line-height: normal;
display: inline-block;
font-size: 95%;
padding: 0px;
overflow-wrap: normal;
word-break: normal;
white-space: normal;
}
div {
padding: 0px;
margin: 0px auto;
width: 40px;
height: 40px;
background-color: var(--rp-content-main-ico-bg);
border-radius: 22px;
border: 1px solid;
border-color: var(--rp-content-main-ico-brd);
display: flex;
box-sizing: border-box;
justify-content: center;
align-items: center;
}
.icon-small {
width: 24px;
height: 24px;
line-height: normal;
color: var(--rp-content-main-ico-antifurto);
}
}
}
}
and this is the code for a card
type: custom:room-card
title: Cam. Roberto
icon: mdi:sofa-outline
show_icon: false
tap_action:
action: navigate
navigation_path: /dashboard-piano-primo/camera-roberto
card_mod:
style: |
ha-card {
/* varibili colore */
--rp-card-ombra-testo: rgba(22, 64, 77, 0.2);
--rp-content-main-entity-brd: rgba(22, 64, 77, 0.1);
--rp-content-icon-box-entity-bg-luci-on: rgba(22, 64, 77, 0.2);
--rp-content-icon-box-bg: rgba(22, 64, 77, 0.2);
--rp-card-header-bg: rgba(166, 205, 198, 0.5);
--rp-card-bottom-bg: rgba(166, 205, 198, 0.3);
--rp-content-main-entity-bg: rgba(166, 205, 198, 0.1);
--rp-content-main-entity-bg-luci-on: rgba(166, 205, 198, 0.5);
--rp-content-main-entity-bg-antifurto-nok: rgba(166, 205, 198, 0.5);
.content-icon-box {
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 14C8.66 14 10 12.66 10 11C10 9.34 8.66 8 7 8C5.34 8 4 9.34 4 11C4 12.66 5.34 14 7 14M7 10C7.55 10 8 10.45 8 11C8 11.55 7.55 12 7 12C6.45 12 6 11.55 6 11C6 10.45 6.45 10 7 10M19 7H11V15H3V5H1V20H3V17H21V20H23V11C23 8.79 21.21 7 19 7M21 15H13V9H19C20.1 9 21 9.9 21 11Z" fill="rgba(22, 64, 77, 0.6)" /> </svg>');
/* luci accese */
/*
.entity {
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 14C8.66 14 10 12.66 10 11C10 9.34 8.66 8 7 8C5.34 8 4 9.34 4 11C4 12.66 5.34 14 7 14M7 10C7.55 10 8 10.45 8 11C8 11.55 7.55 12 7 12C6.45 12 6 11.55 6 11C6 10.45 6.45 10 7 10M19 7H11V15H3V5H1V20H3V17H21V20H23V11C23 8.79 21.21 7 19 7M21 15H13V9H19C20.1 9 21 9.9 21 11Z" fill="rgba(45, 45, 45, 0.4)" /> </svg>');
}
*/
}
}
rows:
- entities:
- entity: null
show_name: false
show_icon: false
show_state: false
content_alignment: icon-box-bg
- entities:
- entity: sensor.luci_accese_camera_roberto
show_name: false
show_icon: false
show_state: true
styles:
template: |
if (entity.state > 0)
return 'background-color: var(--rp-content-icon-box-bg-luci-on)';
hide_if:
conditions:
- condition: below
value: 1
content_alignment: icon-box
- entities:
- entity: light.hue_luce_comodino_camera_roberto
show_icon: true
state_color: true
name: comodino
tap_action:
action: toggle
hold_action:
action: more-info
styles:
template: |
if (entity.state == 'on')
return 'background-color: var(--rp-content-main-entity-bg-luci-on)';
- entity: light.ikea_lampada_libreria_camera_roberto
show_icon: true
state_color: true
name: libreria
tap_action:
action: toggle
hold_action:
action: more-info
styles:
template: |
if (entity.state == 'on')
return 'background-color: var(--rp-content-main-entity-bg-luci-on)';
- entity: light.hue_luce_televisione_camera_roberto
show_icon: true
state_color: true
name: TV
tap_action:
action: toggle
hold_action:
action: more-info
styles:
template: |
if (entity.state == 'on')
return 'background-color: var(--rp-content-main-entity-bg-luci-on)';
- entity: light.hue_luce_letto_camera_roberto
show_icon: true
state_color: true
name: letto
tap_action:
action: toggle
hold_action:
action: more-info
styles:
template: |
if (entity.state == 'on')
return 'background-color: var(--rp-content-main-entity-bg-luci-on)';
- entity: light.hue_luce_scrivania_studio
show_icon: true
state_color: true
name: scrivania
tap_action:
action: toggle
hold_action:
action: more-info
styles:
template: |
if (entity.state == 'on')
return 'background-color: var(--rp-content-main-entity-bg-luci-on)';
- entity: light.scrivania_luci_tavolo
show_icon: true
state_color: true
name: tavolo
tap_action:
action: toggle
hold_action:
action: more-info
styles:
template: |
if (entity.state == 'on')
return 'background-color: var(--rp-content-main-entity-bg-luci-on)';
content_alignment: main
- entities:
- entity: binary_sensor.konnected_8d4324_konnected_sec_2_zona_11
name: porta finestra
show_icon: true
hide_if:
conditions:
- condition: equals
value: "off"
styles:
template: |
if (entity.state == 'on')
return 'background-color: var(--rp-content-main-entity-bg-antifurto-nok); --paper-item-icon-color: var(--rp-content-main-ico-antifurto);';
- entity: binary_sensor.konnected_8d4324_konnected_sec_2_zona_07
name: finestra bagno
show_icon: true
hide_if:
conditions:
- condition: equals
value: "off"
styles:
template: |
if (entity.state == 'on')
return 'background-color: var(--rp-content-main-entity-bg-antifurto-nok); --paper-item-icon-color: var(--rp-content-main-ico-antifurto);';
content_alignment: alarm-box
info_entities:
- entity: sensor.hue_motion_sensor_camera_roberto_temperature
format: precision1
- entity: binary_sensor.hue_motion_sensor_camera_roberto_occupancy
show_icon: true
hide_if:
conditions:
- condition: equals
value: "off"
this is the result (I did some updates)
