Ofc:
type: custom:mod-card
card:
type: custom:hui-entity-badge
show_name: true
show_state: true
show_icon: true
entity: input_boolean.test_boolean
name: xxxx
card_mod:
style:
hui-entity-badge:
$: |
ha-state-icon {
{% if is_state(config.card.entity,'on') -%}
--mdc-icon-size: 28px;
{%- else -%}
--mdc-icon-size: 8px;
{%- endif %}
}
bingo! thx
style:
hui-entity-badge:
$: |
ha-state-icon {
--mdc-icon-size: 28px;
color: {{'var(--success-color)' if states(config.card.entity)|int(0) < 24
else 'var(--error-color)'}};
}
is what I was after
getting better nowā¦
only looking for the border element now
on that same .badge element
ehrmā¦
.: |
hui-entity-badge {
--ha-card-background: {{'var(--success-color)'
if is_state('binary_sensor.werkdag','off') else 'var(--card-background-color)'}};
border: 2px solid red;
}
how peculiar 
adding:
.: |
ha-card {
border: 2px solid red;
border-radius: 24px;
}
seems to work, but I had hoped to find the element so that I dont have to also set the border radius again
ha-card {
border: 2px solid purple;
border-radius: 24px;
--ha-card-background: green;
--primary-text-color: white;
--icon-primary-color: black;
}
all seem to work, and even --card-mod-icon-color: black; for that matter
a summary post, commented mods also work, but Iāve moved all except icon size to the generic ha-card, mainly because it is so much easier.
type: custom:mod-card
card:
type: custom:hui-entity-badge
entity: sensor.vandaag
card_mod:
style:
hui-entity-badge:
$: |
ha-state-icon {
--mdc-icon-size: 28px;
/*color: {{'var(--warning-color)'
if is_state('binary_sensor.werkdag','on')}};*/
}
state-display {
font-size: 24px;
/*color: {{'var(--warning-color)' if is_state('binary_sensor.werkdag','on')}};*/
}
.: |
/*hui-entity-badge {
--ha-card-background: {{'var(--success-color)'
if is_state('binary_sensor.werkdag','off') else 'var(--card-background-color)'}};
}*/
ha-card {
border: 2px solid {{'var(--success-color)' if
is_state('binary_sensor.werkdag','off') else
'var(--error-color)'}};
border-radius: 24px;
--ha-card-background: gray;
--primary-text-color: white;
--card-mod-icon-color: {{'var(--success-color)' if
is_state('binary_sensor.werkdag','off') else
'var(--error-color)'}}; /*--icon-primary-color:*/
}
but the border isnt right yet. Note the difference here:
the orange is set on the ha-card with the above card-mod, and the red inner border is set in Inspector, on the .badge element.
that would be my preference, because right now the oranges makes the card size go out of sync with others, and also has a different box-shadow
separate post for this:
because of the card_mod (with mod-card, idk) there is an ugly effect on reload of the view.
in my main theme I have a ha-card-border-radius: 0.
recently ha-badge-border-radius was added to the styles of the badges, and thatās great, because we can set the radius in our themes now.
I have ha-badge-border-radius: 24px in my main theme.
any badge in the dashboard that has any mod-card/card-mod set (and even without any mod itself), shows the squared border-radius 0 for a moment, and then loads the actual styling.
left 2 badges have a mod, the most right badge has notā¦
btw, same happens with the new type: heading when card-mod is set:
Check the Host system info
From where is this? And do you see a difference to address from there and not - as āstandardā - from card-mod-view-yaml?
card-mod-view-yaml: |
hui-sections-view:
$:
hui-view-badges:
$:
hui-entity-badge:
$:
.: |
ha-state-icon {
--mdc-icon-size : 24px;
}
ha-badge:
$: |
.content {
font-size: 14px !important;
}
This is a standard card-mod-themes thing.
Sorry, could you elaborate?
O.k. Only already did it coming from the view-level (see my lines of code) and not from badge as you did above.
Did you ever get a reply or solution for this?
Nope I just learnt to live with it.
I might log it officially on github.
ok so this might be a bit of a challenge, if at all possible
I like my card headers to show like
or
and with some conditional colors:
Ive configured a card_mod theme class with:
ha-card.class-header-margin .card-header {
background: var(--background-color-off);
font-weight: 400;
font-size: 20px;
color: var(--text-color-off);
padding: 0px 12px;
margin: 0px 0px 16px 0px;
}
I found my way to do this with apexcharts-card, using:
card_mod:
style: |
.wrapper div#header {
background: var(--background-color-off);
padding: 12px;
}
.wrapper div#header div#header__title {
font-weight: 400;
font-size: 20px;
color: var(--text-color-off);
}
a local mod in a card can be like
style:
$: |
.card-header {
background: var(--background-color-off);
font-weight: 400 !important;
font-size: 20px !important;
color: var(--text-color-off) !important;
padding: 0px 12px !important;
margin: 0px 0px 16px 0px !important;
}
.: |
.card-header ha-icon-button {
--card-mod-icon-color: var(--primary-color);
{{'display: none' if is_state('input_boolean.hide_history_graph_link','on')}};
}
the apexchart mod works fine with a simple header without states:
however, when states are shown, like here:
my mod has this effect:
the issue is obvious: the states are in the header and are inside the margins/paddingsā¦
would there be an obvious way to exclude those?
the only other way I could fix this would be to not show the header in the apex, and add it inside a stack/entities with a custom:button-cardā¦
eg
type: custom:mod-card
card_mod: !include /config/dashboard/card_mods/stack_card_gap.yaml
card:
type: vertical-stack
cards:
- type: heading
card_mod:
class: class-section-heading
heading: Energie verbruik
heading_style: title
tap_action:
action: navigate
navigation_path: /ui-data/energie
- type: custom:apexcharts-card
Functional, though awfully convoluted as you can see, so, for this challenge, Iād like to try the mod on the apex charts-card itself, and keep the card config to just the apexcharts with a mod
please have a look?
expanding the card_mod options for the new badge:
type: custom:mod-card
card:
type: custom:hui-entity-badge
entity: sensor.meteoalarm_brabant_headline
visibility:
- condition: state
entity: binary_sensor.meteoalarm_brabant
state: 'on'
card_mod:
style:
hui-entity-badge:
$: |
ha-state-icon {
--mdc-icon-size: 24px;
color: {{states('sensor.weer_alarm_kleur')}};
--card-mod-icon: {{states('sensor.meteoalarm_icon')}};
}
.: |
ha-card {
border: 2px solid {{states('sensor.weer_alarm_kleur')}};
border-radius: 24px;
}
--card-mod-icon also works on the ha-state-icon
alerting the meteoalarm color a bit more:
card_mod:
style:
hui-entity-badge:
$: |
ha-state-icon {
--mdc-icon-size: 24px;
--card-mod-icon: {{states('sensor.meteoalarm_icon')}};
}
.: |
hui-entity-badge {
--ha-card-background: {{states('sensor.weer_alarm_kleur')}}
}
ha-card {
border: 2px solid var(--primary-color);
border-radius: 24px;
animation: blink 2s ease infinite;
}
@keyframes blink {
50% {opacity: 0.2;}
}
Well, I am not using apexcharts.
Give me a SHORT example of this card to play with.
haha, yes, well, that is the thing, no such thing as a short apexcharts cardā¦
the show_states: true option. makes the states show in the header. maybe cut a few of them would make it shorter
type: custom:apexcharts-card
header:
title: Apexcharts
show: true
show_states: true
series:
- entity: sensor.luchtvochtigheid_woonkamer
- entity: sensor.temperatuur_woonkamer
suppose this could work for testing purposes
I checked this.
The āstatesā thing is a part of a āheaderā.
Do not see obvious simple ways to colorize a āheaderā except āstatesā.
Ofc there are ways like ādo not style the header, style the titleā - but this needs playing with many properties ā not worth it.
Suggest to use a separate header cardā¦
check, that was my solution too. either way, itās a lot of hassle really.
If not for the dynamic options of card-mod (templates) , I would consider doing away with all of those headers.
it is starting to be a burden on the frontend, especially with the modding of the badges now.
Views need a load and then settle, let all card-mods do their job, before ready for userā¦
Can anyone guide me on setting colors for light & dark mode? Iām missing a step or 2. Got it to work according to instructions above but not getting consistent results. Modifying the Metro theme but the background-color reference I created for off is (finally) behaving itself, on isnāt registering consistently at all. Using element inspector sometimes the color doesnāt change to the reference selected for on without reloading the page. If I color the card directly in yaml, the on color stays loaded in off mode for light or dark.
One set of lights:
type: custom:vertical-stack-in-card
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: markdown
content: |
### Master Bedroom
card_mod:
style: |
ha-card {
height: 100%;
width: 250%
}
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.security_booth_lights_l1
icon: mdi:lightbulb-group
show_name: false
show_icon: true
color_type: card
aspect_ratio: 1/1
styles:
grid:
- grid-template-areas: "\"i\" \"n\" \"s\""
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: start
name:
- justify-self: center
- font-weight: normal
state:
- justify-self: start
state:
- value: "off"
styles:
card:
- color: SlateGrey
- background-color: var(--switch-button-off-color) !important;
- value: "on"
styles:
card:
- color: White
- background-color: var(--switch-button-on-color) !important;
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
entity: switch.security_booth_lights_l2
icon: mdi:television-classic
show_name: false
show_icon: true
color: auto
color_type: card
aspect_ratio: 1/1
styles:
grid:
- grid-template-areas: "\"i\" \"n\" \"s\""
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: start
name:
- justify-self: center
- font-weight: normal
state:
- justify-self: start
state:
- value: "off"
styles:
card:
- color: SlateGrey
- background-color: var(--switch-button-off-color) !important;
- value: "on"
styles:
card:
- color: White
- background-color: var(--switch-button-on-color) !important;
- type: custom:button-card
entity: switch.security_booth_lights_l3
icon: mdi:air-conditioner
show_name: false
show_icon: true
color: auto
color_type: card
aspect_ratio: 1/1
styles:
grid:
- grid-template-areas: "\"i\" \"n\" \"s\""
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: start
name:
- justify-self: center
- font-weight: normal
state:
- justify-self: start
state:
- value: "off"
styles:
card:
- color: SlateGrey
- background-color: var(--switch-button-off-color) !important;
- value: "on"
styles:
card:
- color: White
- background-color: var(--switch-button-on-color) !important;
view_layout:
position: sidebar
card_mod:
style: |
ha-card {
background: transparent !important;
margin-top: 0px;
#margin-left: 15px;
#max-width: 450px;
}
Relevant part of theme yaml
light:
lovelace-background: var(--background-image)
background-image: "center / cover no-repeat fixed url('/local/Metro_day.svg')"
switch-button-off-color: "rgba(255,255,255,.55)"
switch-button-on-color: "rgba(255,193,7,.75)"
dark:
lovelace-background: var(--background-image)
background-image: "center / cover no-repeat fixed url('/local/Metro_night.svg')"
switch-button-off-color: "rgba(0,0,0,.55)"
switch-button-on-color: "rgba(255,193,7,.75)"
Hey guys,
I have been trying for some days to find out what the issue ist but I am not able to solve the problem. I hope some of you guys can help me out.
Iām trying to create a card with an icon on the left side of the card. Therefore, Iām using the card_mod to adjust the margin but on matter what Iām filling out nothing happens. Itās like something is overwriting it or the card_mod isnāt working at all.
Here is the code:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Lounge
secondary: "{{ states(\"sensor.wohnzimmer_dg_heizung\") | round(0) }} Ā°C"
icon: mdi:sofa
fill_container: false
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background-blend-mode: darken;
}
:host {
background-image: url('/local/lounge.jpg') , linear-gradient(to right, rgba(var(--rgb-card-background-color), 1), rgba(var(--rgb-card-background-color), 0));
background-size: 50% 100%;
background-position: right;
background-repeat: no-repeat;
--mush-icon-size: 76px;
height: 66px;
margin-left: -28px !important;
}
I have HA 2024.11.1 installed and also card-mod 3.4.3
not sure where this should go, but since I did pose the question myself, on whether we could limit the width of the badges section to 1 column with card_mod, please let me post this here too.
in the badges: section, entities with a longer name/state get the size of that length, and if you have a few, the width of the badges overflows the single column width I use in all my views, making that a bit of a top heavy section.
it made me want to look for an alternative way to group those new badges, but if you use the regular badge syntax, that doesnt work, as it will show a different card type when using type: entity
Butā¦ we have been card_modding the badges, and use the type: custom:hui-entity-badge
So I figured why not try to use that in the Sections section too, and have the Frontend pick the right card with that.
A single card will occupy the full column width, which looks silly of course.
However, a set of them inside a grid looks rather nice
and look what that does to the sizing (now controlled by the column number in the grid) and text word break.
can also have a less occupied grid, and the badges still show nicely organized
its not perfect, as badges with too long a txt will overflow on Mobileā¦ Iāve settled for columns: 3 in the grid and hope the state of those longer badge entities will abideā¦
sections:
- cards:
- type: grid
columns: 3
square: false
cards:
- !include /config/dashboard/badges/badge_meteoalarm_brabant.yaml
- !include /config/dashboard/badges/badge_meteoalarm_brabant.yaml
- type: custom:mod-card
card:
type: custom:hui-entity-badge
entity: weather.buienradar
<<: &badge_icon
card_mod:
style:
hui-entity-badge:
$: |
ha-state-icon {
--mdc-icon-size: 24px;
- type: custom:mod-card
card:
type: custom:hui-entity-badge
entity: weather.buienradar
<<: *badge_icon
- type: custom:mod-card
card:
type: custom:hui-entity-badge
entity: weather.buienradar
<<: *badge_icon
one could even add a few empty cards after the conditional alarm badges, so they are singled out on a row, getting even more attention, options galore.
Does anyone know how I can let the text of one card pass over the other card, so it doesnāt get cut-off?
Unfortunately, the primary and secondary got cut off due to stack-in-card
