will do, and just fired up Firefox as a 3d browser.
On the Folds and vertical spacing:
to give you an idea though, I have 262 fold-entity-rows, and only this card gives me a headache…
I have them populated with auto-entities cards, or listed entities, what have you. given the fact there is now error in the inspector at all on this config, debugging is very difficult.
Figured it out in themes
card-mod-theme: noctis-grey
card-mod-more-info-yaml: |
ha-more-info-history:
$: |
.header > a, a:visited {
color: var(--secondary-text-color) !important;
font-size: 12px;
}
ha-more-info-logbook:
$: |
.header > a, a:visited {
color: var(--secondary-text-color) !important;
font-size: 12px;
}
Not that agressive anymore
But it is only working here, but not within the tabs like
Any hint?
Hello @thomasloven! Thank you very much for the feedback.
Yes, navigation for hui-element became a bit confusing - but I managed to rebuild all my code, it looks fine again!
Please let me know if you find something that doesn’t work. It’s a bit rickety with timing issues right now.
Thomas, now I got only these issues about card-mod:
fold-entity-row, restriction-card as a row, config-template-card as a row.Thank you again for your valuable work!
P.S. I am creating a post explaining using card-mod for hui-element for different row types as well as using them inside decluttering template with mod-card. This post will be added into the consolidation post.
Styling hui-element card:
This post is about using hui-element card to represent a row inside an Entities card:
slider or box)Here they are (updated 04.03.22 for “chips” buttons and new HA2022.3 design):
type: entities
entities:
- type: custom:hui-element
row_type: section
label: section
- type: custom:hui-element
row_type: sensor-entity
entity: input_number.test_number
name: sensor-entity
- type: custom:hui-element
row_type: number-entity
entity: input_number.test_number
name: number-entity (slider)
- type: custom:hui-element
row_type: number-entity
entity: input_number.test_number_2
name: number-entity (box)
- type: custom:hui-element
row_type: toggle-entity
entity: input_boolean.test_boolean
name: toggle-entity
- type: custom:hui-element
row_type: input-select-entity
entity: input_select.test_value
name: input-select-entity
- type: custom:hui-element
row_type: input-text-entity
entity: input_text.test_text
name: input-text-entity
- type: custom:hui-element
row_type: weather-entity
entity: weather.home_met
name: weather-entity
- type: custom:hui-element
row_type: buttons
entities:
- entity: sun.sun
show_name: true
- entity: sun.sun
show_name: true
- entity: sun.sun
show_name: true
- type: custom:hui-element
row_type: conditional
conditions:
- entity: input_boolean.test_boolean
state: 'on'
row:
entity: sun.sun
name: conditional
section row inside stack-in-card to separate areas.There are 4 methods of styling hui-element rows:
:host - to style a particular row.mod-card level - to style a row inside a decluttering template.Using :host - to style a particular row:
Note: the hui-element card is a kind of transparent element - all styles go “directly to the row”.
type: entities
entities:
- type: custom:hui-element
row_type: sensor-entity
entity: sun.sun
name: Colored row
card_mod:
style: |
:host {
color: red;
}
- type: custom:hui-element
row_type: section
label: section
card_mod:
style: |
:host {
--divider-color: magenta;
}
- type: custom:hui-element
row_type: toggle-entity
entity: input_boolean.test_boolean
name: Colored toggle
card_mod:
style: |
:host {
--switch-unchecked-button-color: yellow;
--switch-checked-button-color: red;
}
Using long DOM navigation - to style a particular row:
Note: the hui-element card is a kind of transparent element - all styles go “directly to the row”.
type: entities
entities:
- type: custom:hui-element
row_type: sensor-entity
entity: sun.sun
name: Colored name
card_mod:
style:
hui-generic-entity-row:
$: |
.info {
color: red;
}
- type: custom:hui-element
row_type: toggle-entity
entity: input_boolean.test_boolean
name: Colored toggle
card_mod:
style:
hui-generic-entity-row:
ha-entity-toggle:
$:
ha-switch:
$: |
.mdc-switch .mdc-switch__track {
background-color: yellow !important;
border-color: red !important;
}
- type: custom:hui-element
row_type: section
label: section
card_mod:
style: |
.divider {
background-color: cyan !important;
}
- type: custom:hui-element
row_type: number-entity
entity: input_number.test_number
name: Colored state
card_mod:
style: |
hui-generic-entity-row .flex .state {
color: magenta;
}
Using long DOM navigation from the parent Entities card or Picture elements card level - to style a particular row or all rows:
Section:
type: entities
entities:
- entity: sun.sun
- type: custom:hui-element
row_type: section
label: section
- entity: sun.sun
- entity: sun.sun
- type: custom:hui-element
row_type: section
label: section
- entity: sun.sun
- entity: sun.sun
card_mod:
style:
.card-content hui-element:
$: |
.divider {
background-color: cyan !important;
}
Sensor:
type: entities
entities:
- type: custom:hui-element
row_type: sensor-entity
entity: sun.sun
name: Colored name
- type: custom:hui-element
row_type: sensor-entity
entity: sun.sun
name: Colored name
- type: custom:hui-element
row_type: sensor-entity
entity: sun.sun
name: Colored name
card_mod:
style:
.card-content hui-element:
$:
hui-generic-entity-row:
$: |
.info {
color: red;
}
Toggle:
type: entities
entities:
- type: custom:hui-element
row_type: toggle-entity
entity: input_boolean.test_boolean
name: Colored toggle
- type: custom:hui-element
row_type: toggle-entity
entity: input_boolean.test_boolean_2
name: Colored toggle
- type: custom:hui-element
row_type: toggle-entity
entity: input_boolean.test_boolean_3
name: Colored toggle
card_mod:
style:
.card-content hui-element:
$:
hui-generic-entity-row:
ha-entity-toggle:
$:
ha-switch:
$: |
.mdc-switch .mdc-switch__track {
background-color: yellow !important;
border-color: red !important;
}
Using long DOM navigation from the parent mod-card level - to style a row inside a decluttering template:
Slider:
Template:
decl_entity_row__slider_xxx:
card:
type: custom:mod-card
card:
type: custom:hui-element
row_type: number-entity
entity: '[[SENSOR]]'
name: '[[VALUE_NAME]]'
card_mod:
style:
hui-element:
$: |
hui-generic-entity-row {
color: [[VALUE_COLOR_TEXT]];
--paper-item-icon-color: [[VALUE_COLOR_ICON]];
}
Using the template:
type: entities
entities:
- type: custom:decluttering-card
template: decl_entity_row__slider_xxx
variables:
- SENSOR: input_number.test_number
- VALUE_NAME: "cyan name, magenta icon"
- VALUE_COLOR_TEXT: cyan
- VALUE_COLOR_ICON: magenta
Input-select:
Template:
decl_entity_row__input_select_xxx:
card:
type: custom:mod-card
card:
type: custom:hui-element
row_type: input-select-entity
entity: '[[INPUT_SELECT]]'
name: '[[VALUE_NAME]]'
card_mod:
style:
hui-element:
$:
hui-generic-entity-row:
$: |
state-badge {
color: '[[VALUE_COLOR]]';
}
Using the template:
type: entities
entities:
- type: custom:decluttering-card
template: decl_entity_row__input_select_xxx
variables:
- INPUT_SELECT: input_select.test_value
- VALUE_NAME: xxxxxx
- VALUE_COLOR: magenta
More examples are described here.
Hello,
Anyone could tell me if it is possible to apply a conical gradient to a mdi:checkbox-blank-circle icon ?
Need to represent a “multicolor” button.
Thanks !
Hello,
I have a some question, maybe there I can found a solution.
Firstly, sorry for my english. I home you can understand me.
Im using my own frontend theme, but with frontend update since 2021.11 I got some problem with view of elements.
Seems like more-info dialogs and select menu updated and uses same color source (–mdc-theme-surface).
On my screenshow I show where I have problems.
I just want to leave black transparent color on more-info and browser-mod-popup background (rgba(26,26,26,0.5)), but I want to change color of selection menu in actions/condition of automations and automation menu in automation list.
But if I change --mdc-theme-surface, color change applies for all this elements (including background color of more info, what i dont want to do).
Please, help me, is it possible use card-mod to change mdc-select background color, but leave black background color of dialogs?
--paper-item-icon-color seems to stopped working since HA 2021.11.
Other things still work on the same element (entity icon):
:host {
--paper-item-icon-color: red; # NOT WORKING ANYMORE
--mdc-icon-size: 40px; # still working
}
How to disable a toggle button:
type: entities
title: Disabled checkbox
show_header_toggle: false
entities:
- entity: input_boolean.test_boolean
name: disabled
card_mod:
style:
hui-generic-entity-row:
ha-entity-toggle:
$:
ha-switch:
$: |
.mdc-switch .mdc-switch__thumb input {
pointer-events: none;
}
.: |
ha-switch {
--switch-unchecked-button-color: var(--disabled-text-color);
--switch-checked-button-color: var(--disabled-text-color);
}
- entity: input_boolean.test_boolean
name: normal
Also, you can “grey” all row’s elements & disable tap_action:
- entity: input_boolean.test_boolean
name: totally disabled
tap_action:
action: none
card_mod:
style:
hui-generic-entity-row:
ha-entity-toggle:
$:
ha-switch:
$: |
.mdc-switch .mdc-switch__thumb input {
pointer-events: none;
}
.: |
ha-switch {
--switch-unchecked-button-color: var(--disabled-text-color);
--switch-checked-button-color: var(--disabled-text-color);
}
.: |
:host {
color: var(--disabled-text-color);
--paper-item-icon-color: var(--disabled-text-color);
}
Short: Found the error. Update changed behaviour, what worked before was broken now. Fixed it.
Long story:
Before:
- type: conditional
conditions:
- entity: sensor.dwd_wetterwarnung_current_warning_level
state_not: '0'
card:
type: entities
entities:
- type: custom:multiple-entity-row
entity: sensor.dwd_wetterwarnung_current_warning_level
name: WARNUNG
toggle: false
state_color: true
show_state: true
secondary_info: ''
icon: mdi:exclamation-thick
entities:
- entity: sensor.dwd_wetterwarnung_current_warning_level
attribute: warning_1_name
name: Warnung vor
- entity: sensor.dwd_wetterwarnung_current_warning_level
attribute: warning_1_start
format: time
name: Von
- entity: sensor.dwd_wetterwarnung_current_warning_level
attribute: warning_1_end
format: time
name: Bis
state_header: Anzahl Warnungen
column: true
card_mod:
style:
.: |
ha-card {
margin-left: -15px;
margin-right: -15px;
margin-top: -15px;
margin-bottom: -15px;
box-shadow: none;
}
:host {
--paper-item-icon-color: red;
--mdc-icon-size: 40px;
}
After/Now - working again (icon is RED):
- type: conditional
conditions:
- entity: sensor.dwd_wetterwarnung_current_warning_level
state_not: '0'
card:
type: entities
entities:
- type: custom:multiple-entity-row
entity: sensor.dwd_wetterwarnung_current_warning_level
name: WARNUNG
toggle: false
state_color: true
show_state: true
secondary_info: ''
icon: mdi:exclamation-thick
entities:
- entity: sensor.dwd_wetterwarnung_current_warning_level
attribute: warning_1_name
name: Warnung vor
- entity: sensor.dwd_wetterwarnung_current_warning_level
attribute: warning_1_start
format: time
name: Von
- entity: sensor.dwd_wetterwarnung_current_warning_level
attribute: warning_1_end
format: time
name: Bis
state_header: Anzahl Warnungen
column: true
card_mod:
style:
.: |
:host {
--paper-item-icon-color: red;
--mdc-icon-size: 40px;
}
card_mod:
style:
.: |
ha-card {
margin-left: -15px;
margin-right: -15px;
margin-top: -15px;
margin-bottom: -15px;
box-shadow: none;
}
So while --mdc-icon-size was still applied to the icon when targeting on the entities card, --paper-item-icon-color now only is working when being applied directly to the custom:multiple-entity-row card.
I´m good now.
So I’ve been using card-mod and custom:mod-card in my lovelace for some time now without any issues. But since my HA update yesterday from 2021.11.4 to 2021.11.5 the custom:mod-card does not work anymore.
If I have a card that uses that, it doesn’t show the card anymore. When I remove it, the card shows again, but without the styles ofcourse…
Can’t find anything in the logs (the ones I know of that is). Anyone else having this issue? Or even better, have a solution?
Edit: Ok, I might have spoken too soon. I’m not sure if its an issue in card-mod. Because some cards still work that I use with card-mod. Others dont. It seems kinda random…
@thomasloven Sorry für the @ but only because of your 3.1.0 update recommendation.
While card-mod can be installed as a lovelace resource, some functionality will benefit greatly from it being installed as a frontend module instead.
To do that, add the following to your configuration.yaml file and restart Home Assistant:
frontend:
extra_module_url:
- /local/card-mod.js
You'll need to adjust that path according to where you have installed card-mod.js. If you installed through HACS, this is probably /hacsfiles/lovelace-card-mod/card-mod.js.
Is it recommended additionally or really instead?
Update: Question because HACS is throwing warings without and readds/enables it back if you e.g. update card-mod. I can live with the waring (if it is better withour) and delete it again after every update, but only want to know the best way.
So remove from lovelace resources in parallel or leave this on top?
And regarding performance, as this is the reason for this, can you have some hints regarding my performance questions above as well?
Wanting to apply the performance fix, but in doubt of the exact path to add.
My card_mod lives in:
/www//community/lovelace-card-mod/card-mod.js
I assume the path to add would be /community/lovelace-card-mod/card-mod.js?
Just copy the path from settings-lovelace-ressources.
Hi, running card mod version:
But i’m having background issues? Seems style isnt applied?
extra_module_url:
- /local/community/lovelace-card-mod/card-mod.js
the code above fixes the card background issues for Chrome and webbrowsers, but the background is still visible on the companion app? is this a bug in card mod or companion app?
Did you get this answered? I removed mine from the resources as the directions say instead. Just trying to verify that I read them correctly.
Not (yet?). I removed it as well. But I’m not sure if there are disadvantages or gaps. I read the instead as well, but saw the warnings and the re-adding after updating. Because of that my (currently unanswered) double check question to Thomas.
I loaded it in both places as well. Error message if not loaded in resources.