Vinney
January 5, 2025, 6:29pm
7914
@Ildar_Gabdullin
iāve read to posts you have suggested - this is a far as i can get ā¦
Icon change = works
Where am i going wrong??
camera_view: auto
camera_image: camera.front_door_high_resolution_channel
type: picture-glance
title: Front Door
entities:
- entity: lock.front_door
tap_action:
action: call-service
service: lock.unlock
target:
entity_id: lock.front_door
state_color: false
card_mod:
style: |
ha-card .box {
background-color: rgba(0,255,0,0.5);
}
.box div:nth-child(2) div:nth-child(1) {
--card-mod-icon: mdi:car;
}
#states div:nth-child(2) div:nth-child(1) {
--paper-item-icon-color: {% if is_state("lock.front_door", "unlocked") %} red {% else %} green {% endif %};
}
Vinney
January 5, 2025, 8:40pm
7915
After hours of trial and error:
camera_view: auto
camera_image: camera.front_door_high_resolution_channel
type: picture-glance
title: Front Door
entities:
- entity: light.floodlight
icon: mdi:light-flood-down
- entity: light.front_spot
- entity: light.driveway
- entity: lock.front_door
state_color: false
tap_action:
action: call-service
service: lock.unlock
target:
entity_id: lock.front_door
- entity: camera.front_door_package_camera
icon: mdi:package
grid_options:
columns: 12
rows: auto
card_mod:
style: |
ha-card .box {
background-color: rgba(0,255,0,0.5);
}
.box div:nth-child(2) div:nth-child(1) {
{% set lock_state = states('lock.front_door') %}
--card-mod-icon-color:
{% if lock_state == 'unlocked' %} red
{% elif lock_state == 'locked' %} blue
{% else %} yellow; {% endif %};
}
I will do it. Currently I am away from a PC. Will add a link in a few days I hope.
1 Like
sure, no rush.as it looks , the marker no longer has the entity_id , so we can not template that into it anymore like we didā¦
VietNgoc
January 5, 2025, 10:47pm
7918
parautenbach
January 6, 2025, 6:19am
7919
Thomas fixed the card-mod resource !
It is supposed to do a lot of good for change HA elements, and badges and cards in sections. (release notes)
Seeing a lot of problems in my own config though, using many embedded stacked cards, that now all fall apart.
former badge mod:
type: custom:mod-card
card:
type: custom:hui-entity-badge
entity: sensor.solar_energy_daily
show_name: true
name: Zon
color: gold
card_mod:
style:
hui-entity-badge:
$:
ha-badge:
$: |
.badge {
border: 2px solid var(--badge-color) !important;
}
.: |
ha-state-icon {
--mdc-icon-size: 24px;
}
now becomes
type: entity
entity: sensor.solar_energy_daily
show_name: true
name: Zon
color: gold
card_mod:
style:
ha-badge:
$: |
.badge {
border: 2px solid var(--badge-color) !important;
}
.: |
ha-state-icon {
--mdc-icon-size: 24px;
}
if I get it correctly.
mod-card stack-cards dont lose their box-shadows and gaps when not using mod-card
mods not using mod-card:
IgorZg
January 6, 2025, 11:15am
7921
Wowā¦ installed 3.5.0 and loosed lot of background colors. Donāt have time to investigate, so revert back to ā_renderEntity patchedā version of 3.4.3.
GTunney
January 6, 2025, 2:01pm
7923
Latest changed to card mod seem to have caused some issues on my dash.
One example is the below, it was using mod-card so I have removed that however none of the other styling is applying for some reason.
Downstairs should be in center but isnāt and certain styling options such as font weight arenāt working
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:mushroom-title-card
title: Downstairs
subtitle: ""
card_mod:
style:
mushroom-title-card$: |
.title {
--card-primary-color: rgb(var(--rgb-black));
--title-font-size: 20px;
--title-font-weight: 350;
text-align: center;
}
.subtitle {
--card-secondary-color: rgb(var(--rgb-red));
--subtitle-font-size: 32px;
--subtitle-font-weight: bolder;
}
.header {
--title-padding: 0px 5px 0px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.hallway_lamp
use_light_color: true
- type: custom:mushroom-light-card
entity: light.living_room_lamp
use_light_color: true
card_mod:
style: |
ha-card {
padding: 2px;
background: rgba(var(--rgb-primary-text-color), 0.00);
box-shadow: none;
border-radius: 15px;
background-color: none;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.dining_room_lamp
use_light_color: true
- type: custom:mushroom-light-card
entity: light.cupboard_lights
use_light_color: true
card_mod:
style: |
ha-card {
padding: 2px;
background: rgba(var(--rgb-primary-text-color), 0.00);
box-shadow: none;
border-radius: 15px;
background-color: none;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.plinth_lights_1
use_light_color: true
- type: custom:mushroom-light-card
entity: light.plinth_lights_2
use_light_color: true
card_mod:
style: |
ha-card {
padding: 2px;
background: rgba(var(--rgb-primary-text-color), 0.00);
box-shadow: none;
border-radius: 15px;
background-color: none;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.stair_lights
use_light_color: true
- type: custom:mushroom-light-card
entity: light.soffit_lights
use_light_color: true
card_mod:
style: |
ha-card {
padding: 2px;
background: rgba(var(--rgb-primary-text-color), 0.00);
box-shadow: none;
border-radius: 15px;
background-color: none;
}
card_mod:
style: |
ha-card {
padding: 2px;
background: rgba(var(--rgb-primary-text-color), 0.00);
box-shadow: 1px;
border-radius: 15px;
background-color: white;
}
all my borders are indeed back too with release 3.5.0
btw, we need some extra input hereā¦ A reversal PR was made to re-instate the entity_id, but dev;s fear performance issues
home-assistant:dev ā karwosts:map-marker-attributes
opened 02:28PM - 06 Jan 25 UTC
<!--
You are amazing! Thanks for contributing to our project!
Please, DO Nā¦ OT DELETE ANY TEXT from this template! (unless instructed).
-->
## Proposed change
In a [recent change](https://github.com/home-assistant/frontend/pull/23247/), I inadvertently removed attributes from ha-entity-marker that several users were relying on to identify specific markers in the DOM for styling.
This change restores those attributes for maximum backward compatibility, instead of being set as properties.
## Type of change
<!--
What type of change does your PR introduce to the Home Assistant frontend?
NOTE: Please, check only 1! box!
If your PR requires multiple boxes to be checked, you'll most likely need to
split it into multiple PRs. This makes things easier and faster to code review.
-->
- [ ] Dependency upgrade
- [ ] Bugfix (non-breaking change which fixes an issue)
- [ ] New feature (thank you!)
- [ ] Breaking change (fix/feature causing existing functionality to break)
- [x] Code quality improvements to existing code or addition of tests
## Example configuration
<!--
Supplying a configuration snippet, makes it easier for a maintainer to test
your PR.
-->
```yaml
```
## Additional information
<!--
Details are important, and help maintainers processing your PR.
Please be sure to fill out additional details, if applicable.
-->
- This PR fixes or closes issue: fixes #
- This PR is related to issue or discussion:
- Link to documentation pull request:
## Checklist
<!--
Put an `x` in the boxes that apply. You can also fill these out after
creating the PR. If you're unsure about any of them, don't hesitate to ask.
We're here to help! This is simply a reminder of what we are going to look
for before merging your code.
-->
- [x] The code change is tested and works locally.
- [x] There is no commented out code in this PR.
- [ ] Tests have been added to verify that the new code works.
If user exposed functionality or configuration variables are added/changed:
- [ ] Documentation added/updated for [www.home-assistant.io][docs-repository]
<!--
Thank you for contributing <3
-->
[docs-repository]: https://github.com/home-assistant/home-assistant.io
I never experienced that, so maybe chime in ?
klogg
January 6, 2025, 3:38pm
7926
Am I being particularly dim today?
it means that where we used mod-card before (on the new view badges, or on stacks, cards without ha-card element), we should now be able to modify these directly.
However, things arenāt that simple in lifeā¦ the badges are fine now, as is the issue introduced in 2025.1, but the stack cards and classes in card-mod theme are no more functional (at east with the existing syntax)ā¦
either a card-mod bug, or user error requiring new syntax, yet to be defined
1 Like
klogg
January 6, 2025, 3:41pm
7928
Yeah thanks, I think I suddenly worked that out which is why you might have seen my question disappear!
1 Like
mirekmal
January 6, 2025, 4:10pm
7929
Same for me, I use heavily custom button card with transparrent background inside picture elements card and after update to 3.5.0 (almost) all transparency gone. Strangely I canāt figure pout difference between cards that now display with regular background and these that are renderred properly, without itā¦
but why? Button-card hardly ever requires card_mod because of its native options to style anything?
VietNgoc
January 6, 2025, 4:52pm
7931
Honestly, I donāt have any map modification. So I donāt know if there are performance problems somewhereā¦
szerencl
January 6, 2025, 7:54pm
7932
I have a horizontal-stack in a custom:vertical-stack-in-card and I styled the elements in the horizontal stack like so, and it works fine. However if I put this in a decluttering card it breaks completely and I donāt understand why.
Please help!
regular card:
type: custom:vertical-stack-in-card
cards:
- type: custom:mod-card
card:
type: horizontal-stack
cards:
- type: entity
entity: sun.sun
- type: entity
entity: sun.sun
- type: entity
entity: sun.sun
- type: entity
entity: sun.sun
- type: entity
entity: sun.sun
card_mod:
style:
ha-card:
mod-card:
$:
hui-horizontal-stack-card $: |
div#root hui-card > * {
display: flex;
flex-direction: column;
--ha-card-border-width: 0px !important;
margin-bottom: 5px !important;
margin-top: -5px !important;
}
div#root > :first-child > * {
margin-left: 4px !important;
}
div#root > :last-child > * {
margin-right: 4px !important;
}
.: |
hui-horizontal-stack-card {
--horizontal-stack-card-gap: 2px;
}
ha-card {
box-shadow: var(--ha-card-box-shadow);
border: var(--ha-card-border-color,var(--divider-color,#e0e0e0)) solid var(--ha-card-border-width,1px);
background: var(--ha-card-background,var(--card-background-color,#fff));
}
decluttering card template:
decluttering_test:
card:
type: custom:vertical-stack-in-card
cards:
- type: custom:mod-card
card:
type: horizontal-stack
cards:
- type: entity
entity: sun.sun
- type: entity
entity: sun.sun
- type: entity
entity: sun.sun
- type: entity
entity: sun.sun
- type: entity
entity: sun.sun
card_mod:
style:
ha-card:
mod-card:
$:
hui-horizontal-stack-card $: |
div#root hui-card > * {
display: flex;
flex-direction: column;
--ha-card-border-width: 0px !important;
margin-bottom: 5px !important;
margin-top: -5px !important;
}
div#root > :first-child > * {
margin-left: 4px !important;
}
div#root > :last-child > * {
margin-right: 4px !important;
}
.: |
hui-horizontal-stack-card {
--horizontal-stack-card-gap: 2px;
}
ha-card {
box-shadow: var(--ha-card-box-shadow);
border: var(--ha-card-border-color,var(--divider-color,#e0e0e0)) solid var(--ha-card-border-width,1px);
background: var(--ha-card-background,var(--card-background-color,#fff));
}
decluittering card:
type: custom:decluttering-card
template: decluttering_test
Bram and Karwosts found a different approach. There is still hope
check the Pr I linked earlier