I canât find anything thatâs named âm-e-râ and I donât know what that means, I have looked at that list 10 times but canât find anything related to my problem.
multiple-entity-row
1 Like
Thank you for the reply, and your clarification.
I was able to change the colour of the secondary-info to red by using this
style:
hui-generic-entity-row:
$:
.info.pointer .secondary: |
ha-relative-time {
color: red !important;
}
But i still canât get it to change to red ONLY if the last_update is longer then 2 minutes (for testing), i donât know what i am doing wrong - i have tried multiple ways, but it wonât change to red⌠any ideas?
type: entities
entities:
- entity: sensor.badrum_temperature
type: custom:multiple-entity-row
style:
hui-generic-entity-row:
$:
.info.pointer .secondary: |
ha-relative-time {
color: >
{% set last_updated = (states.sensor.badrum_temperature.last_updated) %}
{% if last_updated %}
{% set time_difference = as_timestamp(now()) - as_timestamp(last_updated) %}
{% if time_difference > 120 %}
red
{% else %}
inherit
{% endif %}
{% else %}
inherit
{% endif %}
}
name: Tempgivare Hall
secondary_info: last-changed
show_state: false
entities:
- entity: sensor.tempgivare_hall_batteri
name: Batteri
How would I go about using card-mod to alter what is displayed with the âmore infoâ portion of a light card (Mushroom in this case)?
My Tuya device has color temp control, but only warm-to-bright white capability. However, when using the Tuyalocal integration, more-info also displays a color wheel selector, additional colors, an Attributes drop-down, and an Effects/Scene selection:
Interestingly, the same card/more-info displays correctly for the device when using the cloud-based Tuya integration/entity. Iâve played with all the Tuya values used for this device until I finally got the power, brightness, and color temp controls working. But no combination of these worked to limit or turn off these additional controls, so I thought using card-mod might be the solution.
- This is definitely to be fixed in either Frontend or in this integration. Consider creating an issue in Github (may be start in Frontend repo).
- Any more-info-related things is an off-topic here. There is a dedicated card-mod-themes thread. But I am not sure it is possible to fix more-info for a particular entity. But probably it could be possible for ALL light-related more-info - this may work if you use only similar lights.
Suggest to use this DOM navigation path (I should have edited that m-e-r post earlierâŚ) and this way to define conditions for css attributes:
- type: custom:multiple-entity-row
entity: input_boolean.test_boolean
card_mod:
style:
hui-generic-entity-row $: |
.info.pointer .secondary ha-relative-time {
{% set last_updated = states[config.entity].last_updated %}
{% set time_difference = as_timestamp(now()) - as_timestamp(last_updated) %}
{% if time_difference > 120 %}
color: red;
{% endif %}
}
secondary_info: last-changed
instead of
some_property: {% if ... %} ... {% else %} ... {% endif %}
since it is more flexible.
1 Like
You are a freaking star, thank you so much for helping me with this - now my headache will be gone.
Is there some way i can buy you a coffe or something?
Edit - just saw you link, coffe incomming.
Thank you so much once again, my hero without a cape.
1 Like
It looks like !secret (and !include for that matter) will only work in the frontend (UI) in YAML mode.
I have no experience with YAML mode, but this is what I read elsewhere:
Just cannot get !secret to work - Home Assistant Community (home-assistant.io)
Not exactly if I understood you correctly.
In UI in âyaml editorâ you CANNOT use â!secretâ, â!includeâ.
They can only be used in yaml-made-dashboards, not in UI-made ones.
As for yaml-anchors - you MAY use them in UI âyaml-editorâ.
But since after saving the yaml code is converted to json, all your anchors will be converted to a code before converting to json, so these anchors will not be restored as anchors after reopening the UI âyaml-editorâ.
type: custom:more-info-card
entity: light.luz_sofa
style: |
state-card-content { display: none }
How to remove the title SofĂĄ please.
When I used card-mod with vertical-stack, it turned everything into a single column, how to fix it?
type: custom:mod-card
style: |
ha-card {
}
card:
type: vertical-stack
cards:
- show_current: true
show_forecast: true
type: weather-forecast
entity: weather.forecast_home
forecast_type: daily
type: custom:mod-card
style: |
ha-card {
}
card:
type: vertical-stack
cards:
- show_current: true
show_forecast: true
type: weather-forecast
entity: weather.forecast_home
forecast_type: daily
Fill a bug report on github if it is not made yet.
Try using a custom:layout-card to place these cards in diff columns.
1 Like
Does anyone know how to reduce the vertical spacing in the to do lists (former shopping list)?
Thank you, a lot, in advance!
All the best
Benedikt
Why does the outer card_mod applied to the entities card also affect the child elements (here: simple-clock-card GitHub - fufar/simple-clock-card: Simple clock card for Home assistant lovelace)?
border-with: 0px; is not respected here 
type: entities
title: đ Uhrzeit
state_color: true
show_header_toggle: true
entities:
- type: custom:simple-clock-card
use_military: true
hide_seconds: false
font_size: 1.5rem
paddingLeft_size: 10px
paddingRight_size: 10px
paddingTop_size: 10px
paddingBottom_size: 10px
card_mod:
style: |
ha-card {
letter-spacing: 1px;
border-width: 0px;
#padding: 3px;
margin-left: -5px;
#text-align: right;
#margin-top: -10px;
}
card_mod:
style:
.: |
ha-card {
border-width: 1px;
}
Obviously I want to remove the border from the inner card.
Even with âimportantâ?
Yes. !important on the inner card_mod is automatically also applied to the outer card_mod.
Other styles also affected. Always applied to both inner and outter card. Crazy.
(note: final goal by the way is to position the clock card right next to the header text on the right side)
Yes, I have HA v2023.4.0 and card_mod v3.2.4.
I also applied
ha-card {
background-color: red;
}
and I see the background changes, also set
height: 150px !important;
and still height is not changed (stays 320px):
When I set this value manually to e.g.
150px the effect is applied, but during some internal refresh cycle it is set back to 320px.Does card_mod set the value only once?
Thanks for helping!
What about other styles?
Could you test some amount of styles from a consolidation post (1st post â link at the bottom)?
May be your issues could be explained by old SW versions; or it also could be a particular browser issue.
I it possible to target only the energy dashboard through the theme file?
I would like to add --masonry-view-card-margin: 8px 4px; to the host of <ha-panel-energy>.
Iâve been trying stuff like this but havent really been able to get it working.
card-mod-theme: Rounded
card-mod-ha-panel-energy: |
:host {
--masonry-view-card-margin: 8px 4px;
}
I have checked the link with other style examples, trying to find a good candidate to play with. The graph has a legend, so I thought it should be pretty easy to change the font size on it. I tried two possibilities (with and without using $:) and none of them worked 
Have I done a stupid mistake in syntax? Otherwise I am puzzledâŚ
P.S. Tested in Chrome and Firefox with same (negative) result.
P.P.S. ivory background worked just fine.
- type: history-graph
entities:
- entity: sensor.current_uv_index
hours_to_show: 48
refresh_interval: 60
card_mod:
style: |
ha-card {
background-color: ivory;
}
.chartLegend {
font-size: 2em !important;
}
state-history-charts $:
state-history-chart-line $:
ha-chart-base $: |
.chartLegend {
font-size: 2em !important;
}
state-history-charts $:
state-history-chart-line $:
ha-chart-base $: |
.chartContainer {
height: 10px !important;
}
