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.
1 Like
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;}
}
1 Like
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ā¦
1 Like
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
silly me, I should just have added
max_columns: 1
to the sections viewā¦
so fixed, and definitely not card-mod, moving out here
Yeah, could you please share your code, Iām trying to do the exact same thing.
Thanks
Side note ranting: And Iām pretty sure many will also want to do the same since all this stem from the fact that the thermostat state icon color is based on its state, which will be the mode (cooling, heating, etc.) it is in and not the action (havc_action) it is currently doing. I understand the logic for HAVCs, but for normal thermostat, thatās completely useless as we all know its only mode is āheatingā. So now, because of that, if we want the actual color to be whether it is heating or not, we all have to figure out what you apparently succeeded doing.
still tryingā¦
Goal: to get
ha-badge:
$: |
.badge {
border: red 2px solid;
}
to work, and remove the
card_mod:
style:
.: |
ha-card {
border: 2px solid {{'var(--success-color)' if
is_state('binary_sensor.werkdag','off') else
'var(--warning-color)'}};
because that border is not the correct border I need to target.
see below badge, where the red is on the .badge set in Inspector, and the orange is the one on the ha-card I use for the time being (I hope)
I cant find the right so Dom element though, so seek assistance here.
please have a look with me if it can be done?
path: mod-card//ha-card/hui-entity-badge//ha-badge//div
Hi, is it possible to use in customize ? Like that:
homeassistant:
customize_domain:
cover:
card_mod:
style: |
:host {
--card-mod-icon:
{% set position = state_attr(config.entity, 'position') | int(100) %}
{% if position == 0 %} custom-shutter:shutter-4
{% elif position < 33 %} custom-shutter:shutter-3
{% elif position < 66 %} custom-shutter:shutter-2
{% elif position < 100 %} custom-shutter:shutter-1
{% else %} custom-shutter:shutter-0
{% endif %};
}
no not possible, you need card_mod to do that in the right spot, not in customize
(you can use custom-ui to do that with JS templates, but you didnt hear me say that 
)
ācard_modā is not an attribute of an entity.