Forgive me this possible stupid question, but how can I increase the size of the new badges? They are very small and I can not read them on my tablet, without standing exactly in front of it.
Already in this thread. You should always first search an read a little bit. Only possible via mod card ot theme or forked card mod at the moment. e.g. (with some other formatings)
type: custom:mod-card
card:
type: custom:hui-entity-badge
show_name: false
show_state: true
show_icon: true
entity: sensor.processor_use_percent
color: amber
card_mod:
style:
.: |
hui-entity-badge {
--ha-card-background: grey;
}
hui-entity-badge:
$:
.: |
ha-state-icon {
--mdc-icon-size : 28px;
}
state-display {
font-size: 14px;
}
ha-badge:
$: |
.badge {
border: red 2px solid !important;
}
There is a feature request to have theme variables for this from Marius. Would be good to search and vote for it as well.
1 Like
Hello,
is it possible to create a single edit point (a āmasterā style section or an external css file) and attach it to a specific dashboard?
Because (see the link below), what I am trying to do, is create a dashboard with a many customized room-cards.
'till now it works, but is a mess to maintain and, on the codeās side, it is not very clean/optimal since there are tons of duplicate lines.
https://community.home-assistant.io/t/custom-card-room-card/393846/576?u=crc-error79
Hi guys, after the last update I canāt change the fontsize of my custom banner cards anymore.
style:
ha-tile-info$: |
.primary {
font-size: 1.55em !important;
padding-bottom: 8px !important;
}
If there is already an answer to be found anywhere here, please donāt hang me.
Edit: What I just found out: it seems to be only within a vertical stack card together with some custom button cardsā¦
I just solved adding a card-mod theme
configuration.yaml
frontend:
themes: !include_dir_merge_named themes
then I create a theme folder and I added my theme with just the css for the room-card
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);
/* inizio css */
overflow: hidden;
min-height: 220px;
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 4px 12px;
min-height: 1em;
line-height: normal;
background: var(--rp-card-header-bg);
font-weight: 300;
position: relative;
.title {
line-height: 56px;
overflow-wrap: normal;
word-break: normal;
white-space: normal;
opacity: 0.9;
float: left;
}
.entities-info-row {
min-height: 52px;
padding: 4px 0 0 0;
height: 100%;
align-items: stretch;
position: relative;
float: right;
top: 0px;
right: 0px;
div {
margin: 0px 0px 0px 6px;
padding: 0px;
}
.state {
margin: 0px 0px 0 10px;
display: inline-block;
padding: 0px;
font-size: 18px;
opacity: 0.9;
}
.icon-entity {
width: 36px;
height: 36px;
background-color: var(--rp-content-main-ico-bg);
border: 1px solid var(--rp-content-main-entity-brd);
border-radius: 19px;
margin: 0px;
padding: 0px;
display: flex;
justify-content: center;
align-items: center;
}
.icon-small {
width: 24px;
height: 24px;
line-height: normal;
color: var(--rp-content-main-ico-antifurto);
}
}
}
.content-main {
margin: 10px 0px;
padding: 0 20px 10px 20px;
box-sizing: border-box;
z-index: 2;
.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: 62px;
height: 124px;
width: 124px;
margin: 0 -24px -32px 0;
position: absolute;
right: 0;
bottom: 0;
padding: 0px;
z-index: 1;
background-color: white;
}
.content-icon-box {
background-size: 64px auto;
border-radius: 62px;
height: 124px;
width: 124px;
margin: 0 -24px -32px 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: 64px auto;
border-radius: 62px;
width: 100%;
height: 100%;
margin: auto;
padding: 0px;
justify-content: center;
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: 8px 0 0 0;
padding: 0px;
font-size: 24px;
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);
}
}
}
}
so, after a quick HA restart, I added the theme to the dashboard where the cards are
Finally I modded the cards just with the relevant information, here an example:
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: center
- entities:
- entity: sensor.luci_accese_camera_roberto
show_name: true
show_icon: false
show_state: true
name:
template: return 'luci accese';
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: binary_sensor.hue_motion_sensor_camera_roberto_occupancy
show_icon: true
hide_if:
conditions:
- condition: equals
value: "off"
- entity: sensor.hue_motion_sensor_camera_roberto_temperature
format: precision1
then the resultā¦ ok is still in progressā¦ so dont judge 
here with light theme
Not the best but even not the worst css code I ever wroteā¦
If someone would improve it I will be very happy 
1 Like
Hello, is it possible to make the individual movies of the upcoming media card clickable via card mod, for example to open the movie description?
Thank you and best regards
Stefan
no idea what that would beā¦
First of all, thanks for your help. Here is the custom card
And here is the sensor which provides the card with the last movies of Emby
This is what the card looks like and I would like to click on the picture to open the movie description.
ok, but isnt that something you should ask in the repo of that card? seems like a regular more-info functionality.
why use card_mod for that
Hello everyone!
First of all, a big thanks to the creator of the card_mod addon and everyone else participating in this making it better every day!
Now, I have a problemā¦ For me a problem, for someone hopefully just a challengeā¦
I need to resize a thermostat card.
Just to elaborate the issue and the situationā¦
I have a lovelace grid-layout. I one grid area I have another grid with one column. In that one I have a swipe-card which should contain two slides.
First slide again contains a grid 2X2 with mini-graph-cards, and the second should contain a mentioned thermostat.
The issue is that when I try to resize th thermo card, the container remains the same size as before and stretches the 2X2 graph height.
This is how it looks:
Situation 1 (Left): No thermostat card
Situation 2: Thermostat card on second slide with no card-mod (Right)
From the next pic you can see that it is stretched as much as needed for the thermo card:
Situation 3: Thermostat card on second slide with card-mod ātransform: scale(0.8)ā added - graphs remain stretched
This is mostly the code for it:
views:
- type: custom:grid-layout
title: Home
layout:
#default
margin: 0
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(4, 1fr) 0
grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar . . . ."
"sidebar living_room kitchen balcony ."
"sidebar ambi test test2 ."
- type: grid
title: Ambient & AC
view_layout:
grid-area: ambi
columns: 1
cards:
- type: custom:swipe-card
parameters:
speed: 550
spaceBetween: 40
threshold: 5
cards:
- type: custom:layout-card
layout_type: grid
layout:
height: 100%
grid-template-columns: 47% 47%
grid-template-rows: repeat(2, auto)
margin: 0 0 0 0
padding: 0
card_margin: 0
grid-column-gap: 13px
grid-row-gap: 13px
cards:
- type: custom:mini-graph-card
name: Living room1
hour24: true
font_size: 80
font_size_header: 12
height: 250
points_per_hour: 6
hours_to_show: 36
line_width: 2
smoothing: true
align_state: center
entities:
- entity: sensor.living_room_temperature_2
unit: Ā°C
show_state: true
color_thresholds:
- value: 22
color: '#0b78e6'
- value: 23
color: '#0ba1e6'
- value: 24
color: '#30e60b'
- value: 25
color: '#fcbe49'
- value: 26
color: '#fa3232'
show:
icon: false
labels: false
labels_secondary: false
points: false
fill: fade
card_mod:
style: |
ha-card .header.flex .name.flex {
margin-top: -10px;
}
ha-card .states.flex {
margin-top: -10px;
font-weight: bold;
padding-bottom: 0px;
}
ha-card .graph .graph__container {
height: 100%;
}
ha-card .graph .graph__container__svg {
height: 100%;
}
- type: custom:better-thermostat-ui-card
entity: climate.living_room_ac
name: Living room
disable_window: true
disable_summer: true
disable_eco: true
disable_heat: true
disable_off: false
disable_menu: false
disable_battery_warning: true
set_current_as_main: false
disable_buttons: true
card_mod:
style: |
ha-card {
transform: scale(0.8);
}
I excluded extra mini-graph-cards code as they are the same.
I would really appreciate if someone has an idea how to fit the thermo card on the second slide without distorting the graphs.
Just an info: this should look right on a landscape 1280X800 resolution
Thanks!
Quick question Ildar : is there a way to disable the toggle for a set duration, say for eg. 20 seconds?
Thanks!
Assuming that you can use jinja in card-mod:
disable the toggle based on some entity (input_boolean) - and then provide a corr logic for setting this entity.
Hello 
can somebody help me to figure out how to style the div class=āhorizontal justified layoutā
I have tried many different things i found here but nothing seems to work.
I really would like to understand how card_mod is working.
cards:
- type: custom:more-info-card
entity: climate.test
card_mod:
style:
- type: gauge
entity: sensor.ds923__real
name: Space
tap_action:
action: none
needle: true
Hey gang, with the new Sections style dashboard, should this still work? Specifically I am trying to replicate when I used on my Masonry card but now there is a new āHeaderā option. The formatting is difference as it doesnāt have ācard at the beginningā. Is this compatible? Inserted my card_mod cost used on a card into this āheader sectionā below. Thanks
I guess a second question, assuming the āheaderā section cant be modified. Here is what I have now using a grid card. Anyway to move the chips so they are down at the same level as the title and also right aligned? Thanks!!
>
> square: false
> type: grid
> cards:
> - square: false
> type: grid
> cards:
> - type: custom:mushroom-title-card
> title: Kitchen
> alignment: start
> subtitle: ""
> card_mod:
> style: |
> ha-card {
> --title-font-size: 25px !important;
> height: 50px !important;
> }
> - type: custom:mushroom-chips-card
> chips:
> - type: entity
> entity: fan.winix_kitchen
> alignment: end
> - type: custom:mushroom-chips-card
> chips:
> - type: entity
> entity: sensor.winix_kitchen_air_qvalue
> alignment: end
> - type: custom:mushroom-chips-card
> chips:
> - type: entity
> entity: sensor.living_room_temperature
> alignment: end
> columns: 4
> columns: 1
> grid_options:
> columns: 12
> rows: auto
Hello, thanks for your great Mod!
I have a little problem, i use the custom mod: Custom Sidebar, and works great too. But when i install the Card Mod, my Sidebar changes. I donāt know why, have you a idea? Thanks
Before Mod:
After Mod:
exactly what change are your referring to?
donāt make us go find / seek
header, (as the element of a card) or type: heading?
both can be modified though, but you need to find the correct element to modify. check the .container.
Can even use a card-mod class and still add via card_mod style:
- type: heading
heading: Aanwezigheid
heading_style: title
card_mod:
class: class-section-heading-no-color
style: |
.container {
{% set thuis = is_state('binary_sensor.familie_thuis','on') %}
background: {{'green' if thuis else 'dimgray'}};
--ha-heading-card-title-color:
{{'var(--active-color)' if thuis else 'black'}} !important;
}
there are several more examples already in this thread/community
again, that is a false assumption.
I dont use the mushroom title card, so cant help you there (there is a dedicated mushroom style guid in the community so be sure to check that out)
suppose you want to modify the individual badges in the heading? thatās also possible, check Ildars post on that subject
(as always, 1 post here, scroll to the bottom, Fantastic post) and then find the relevant post in that link
Sorry!! Iām referring to the boxes of each element, they are rounded. And to the Element: Developer Tools, the text is out of line and not everything is displayed.
A yes, I see now
what settings do you use in card_mod pertaining the sidebar? Any variables you are changing?
or, in card-mod theming for that matter?
The non-wrapping of the developer tools name might be an issue in the plugin, did you already post it in the Repo of custom-sidebar? Elchininet is very active, so will probably catch that for you very promptly