thomasloven / lovelace-card-mod Goto Github PK
View Code? Open in Web Editor NEW🔹 Add CSS styles to (almost) any lovelace card
License: MIT License
🔹 Add CSS styles to (almost) any lovelace card
License: MIT License
My Home Assistant version: 0.101.X
My lovelace configuration method (GUI or yaml): yaml
What I am doing:
After update HA to 0.101 I have errors in browser console with card-mod:
and vertical-stack-in-card cards rendering is invalid (when I disable card-mod everything is normal)
What I expected to happen:
no errors, correct rendering vertical-stack-in-card cards
Minimal steps to reproduce:
resources:
- url: /community_plugin/lovelace-card-mod/card-mod.js
type: module
...
...
- type: custom:vertical-stack-in-card
title: "Kuchnia"
cards:
- type: glance
show_name: false
entities:
- sensor.temperature_kuchnia
- sensor.humidity_kuchnia
- type: entities
show_header_toggle: false
entities:
- binary_sensor.window_kuchnia
- climate.thermostat_kuchnia
- entity: sensor.dishwasher_kuchnia
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity) == "zmywanie" %}
var(--state-icon-active-color)
{% else %}
var(--state-icon-color)
{% endif %}
}
Error messages from the browser console:
Uncaught (in promise) TypeError: Cannot read property 'style' of undefined
at /community_plugin/lovelace-card-mod/card-mod.js:1
at NodeList.forEach (<anonymous>)
at HTMLElement.customElements.get.firstUpdated (/community_plugin/lovelace-card-mod/card-mod.js:1)
at HTMLElement.performUpdate (/frontend_latest/app.34e7b19f.js:2)
at HTMLElement._enqueueUpdate (/frontend_latest/app.34e7b19f.js:2)
By putting an X in the boxes ([ ]) below, I indicate that I:
[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[X] Have made sure I am using the latest version of the plugin.
[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
My Home Assistant version: 0.111.0
My lovelace configuration method (GUI or yaml): yaml
What I am doing: applying custom styling to a markdown-card
What I expected to happen: font styling is applied to element h1
What happened instead: no styling is applied. Safari reports User Agent Style Sheet
. Issue is present in Firefox too.
Minimal steps to reproduce:
Use the aforementioned yaml in a view.
- type: markdown
content: |
# Vacuum automation
style: |
ha-card {
height: 50px;
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
h1 {
font-size: 14px;
font-weight: thin;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
Error messages from the browser console: (I don't think these are related)
[Error] hui-thermostat-card – Error: Specify an entity from within the climate domain.
Error: Specify an entity from within the climate domain.
s (chunk.6dbb65acb727c33dd251.js:2144:318438)
value (chunk.ab96942901cd9a8d7754.js:146:46870)
(anonymous function) (chunk.ab96942901cd9a8d7754.js:146:47612)
asyncFunctionResume
(anonymous function)
promiseReactionJobWithoutPromise
promiseReactionJob
[Error] hui-alarm-panel-card – Error: Invalid card configuration
Error: Invalid card configuration
s (chunk.6dbb65acb727c33dd251.js:2144:318438)
value (chunk.ab96942901cd9a8d7754.js:146:46870)
(anonymous function) (chunk.ab96942901cd9a8d7754.js:146:47612)
asyncFunctionResume
(anonymous function)
promiseReactionJobWithoutPromise
promiseReactionJob
[Error] Failed to load resource: the server responded with a status of 404 () (index.m.js.map, line 0)
By putting an X in the boxes ([ ]) below, I indicate that I:
Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
Have made sure I am using the latest version of the plugin.
Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
This is not actually a bug I think, but I can't get it working. Might also have to do with my CSS knowledge.
In the chrome inspector I see the following hierarchy:
A vertical-stack-in-card with two cards: circle and decluttering-card.
As you can see, I did change some settings in the inspector which I can't get to work from the yaml style |
configuration:
align-items: center;
on the <div id="root" style="
to center both cards.flex: 1
on the circle-sensor-card
flex: 2
on the decluttering-card
How do I do that with styling?
- type: vertical-stack-in-card
style |
?????
If I use #root { xxx }, I don't see any result for instance.
My Home Assistant version: 0.106.0.dev20200210
My lovelace configuration method (GUI or yaml): yaml
What I am doing:
Trying to use mod-card
to get a background color.
What I expected to happen:
I expect my cards to be split into three columns on my desktop.
What happened instead:
If I use a mod-card
as a wrapper to anything the lovelace just stacks everything into one column.
Minimal steps to reproduce:
Create few cards with and without using mod-card
:
views:
- title: test1
id: test1
cards:
- type: entities
title: Entities card sample
show_header_toggle: true
header:
image: 'https://www.home-assistant.io/images/lovelace/header-footer/balloons-header.png'
type: picture
entities:
- sensor.date
- sensor.date
- sensor.date
- sensor.date
- sensor.date
- type: entities
title: Entities card sample
show_header_toggle: true
header:
image: 'https://www.home-assistant.io/images/lovelace/header-footer/balloons-header.png'
type: picture
entities:
- sensor.date
- sensor.date
- sensor.date
- sensor.date
- sensor.date
- type: entities
title: Entities card sample
show_header_toggle: true
header:
image: 'https://www.home-assistant.io/images/lovelace/header-footer/balloons-header.png'
type: picture
entities:
- sensor.date
- sensor.date
- sensor.date
- sensor.date
- sensor.date
- title: test2
id: test2
cards:
- type: custom:mod-card
card:
type: vertical-stack
cards:
- type: entities
title: Entities card sample
show_header_toggle: true
header:
image: 'https://www.home-assistant.io/images/lovelace/header-footer/balloons-header.png'
type: picture
entities:
- sensor.date
- sensor.date
- sensor.date
- sensor.date
- sensor.date
- type: custom:mod-card
card:
type: vertical-stack
cards:
- type: entities
title: Entities card sample
show_header_toggle: true
header:
image: 'https://www.home-assistant.io/images/lovelace/header-footer/balloons-header.png'
type: picture
entities:
- sensor.date
- sensor.date
- sensor.date
- sensor.date
- sensor.date
- type: custom:mod-card
card:
type: vertical-stack
cards:
- type: entities
title: Entities card sample
show_header_toggle: true
header:
image: 'https://www.home-assistant.io/images/lovelace/header-footer/balloons-header.png'
type: picture
entities:
- sensor.date
- sensor.date
- sensor.date
- sensor.date
- sensor.date
By putting an X in the boxes ([ ]) below, I indicate that I:
[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[X] Have made sure I am using the latest version of the plugin.
[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
My Home Assistant version: 0.105.5
My lovelace configuration method (GUI or yaml):
GUI
What I am doing:
Using mod-card.
What I expected to happen:
Not inject styles into my lovelace config.
What happened instead:
It injects styles into my lovelace config. ;)
- type: 'custom:mod-card'
style: |-
ha-card {
background: none;
box-shadow: none;
}
ha-card {
background: none;
box-shadow: none;
}
ha-card {
background: none;
box-shadow: none;
}
ha-card {
background: none;
box-shadow: none;
}
Minimal steps to reproduce:
Use card-mod to modify a vertical stack.
- type: 'custom:mod-card'
style: |-
ha-card {
padding: 2px;
}
card:
type: 'vertical-stack'
cards:
...
Error messages from the browser console:
None
By putting an X in the boxes ([ ]) below, I indicate that I:
[x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[x] Have made sure I am using the latest version of the plugin.
[x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
HA version: 0.108.5 | Lovelace: yaml | HACS: 0.24.0 | card-mod: 13
Hey guys,
I'm testing this card mod. I get it to work, but every time I refresh the page, it makes a flick (show the normal card and then after miliseconds, apply the css. It seems to load the default and then apply css). It gives a very bad user experience when refresh the page.
I installed it trought HACS and then added this to resources:
Here is my yaml:
title: Home
icon: 'mdi:home'
path: home
cards:
- type: vertical-stack
cards:
- type: entities
style: |
ha-card {
border-radius: 15px;
border: 1px solid green;
background-color: yellow;
}
entities:
- entity: binary_sensor.xxxxxxxxxxxxxxxxxxxxxxxxx
- entity: binary_sensor.xxxxxxxxxxxxxxxxxxxxxxxxx
Thanks for any help
My Home Assistant version: 0.105.3
My lovelace configuration method (GUI or yaml):
Yaml
What I am doing:
Simply upgraded to the newest card mod. Downgrading no-longer works either.
What I expected to happen:
This error is stopping all card-mod styles. Cards still work without styles. I'd expect the outcome would be to get styles back.
What happened instead:
No styles are applied.
Minimal steps to reproduce:
I don't know if I can. This is the error that is being produced from card tools that causes card-mod to fail. Removing card mod resources removes the error.
F12 Dev console (chrome):
Uncaught TypeError: Failed to resolve module specifier "card-tools/src/templates.js". Relative references must start with either "/", "./", or "../".
HA Logs:
2020-02-13 22:20:55 ERROR (MainThread) [frontend.js.latest.202001302] http://x:8123/lovelace/0:0:0 Uncaught TypeError: Failed to resolve module specifier "card-tools/src/templates.js". Relative references must start with either "/", "./", or "../".
This is my test card that I play around with when developing appdaemon apps. I usually don't style it. Just added the 'example style' and it produces the same error.
- id: testing
icon: mdi:test-tube
title: Testing
style: |
ha-card {
color: red;
}
cards:
- type: entities
entities:
- switch.test_1
- switch.test_2
- light.test
- light.test_1
- light.test_2
Error messages from the browser console:
Uncaught TypeError: Failed to resolve module specifier "card-tools/src/templates.js". Relative references must start with either "/", "./", or "../".
By putting an X in the boxes ([ ]) below, I indicate that I:
[x ] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[x ] Have made sure I am using the latest version of the plugin.
[x ] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[x ] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
My Home Assistant version: 0.108.2
My lovelace configuration method (GUI or yaml): GUI
What I am doing:
Added style to change icon colour of stock sensor card depending on the state of a sensor.
This was working until recently.
What I expected to happen:
Continue to work as before.
What happened instead:
Stopped working probably after recent HA upgrade.
Minimal steps to reproduce:
Recent HA upgrade?
# The least ammount of code possible to reproduce my error
entity: sensor.sdm230import
graph: none
icon: 'mdi:import'
name: Import
state_color: true
style: |
:host {
--paper-item-icon-color:
{% if states.sensor.import_power.state|int > 0 %}
red
{% else %}
rgb(138, 185, 45)
{% endif %}
;
type: sensor
# End of code
Error messages from the browser console:
By putting an X in the boxes ([ ]) below, I indicate that I:
[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[X] Have made sure I am using the latest version of the plugin.
[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
Hi Thomas,
Great mod, maybe I didn't read through properly, but how would I go about the --ha-card-background:
with regards to theming? I.e. having a dark and a light theme now messes up when switching on sundown.
Tnx
My Home Assistant version: 0.97.2
My lovelace configuration method (GUI or yaml):
GUI
What I am doing:
I modded the map card to reduce the size of the device_tracker markers.
What I expected to happen:
That they are always smaller from the beginning they appear
What happened instead:
When I load the view, the markers appear in their original size. After several seconds (2-15 sec) they scale down to the intended size. When I click on them, the scale down immediately.
Minimal steps to reproduce:
Add the yaml code for a map card with a device_tracker (no entity_picture needed)
# The least ammount of code possible to reproduce my error
aspect_ratio: '3:2'
dark_mode: true
default_zoom: 14
entities:
- entity: device_tracker.first_tracker
- entity: device_tracker.second_tracker
style:
.: |
.leaflet-control-zoom {
opacity: 0.2;
}
.leaflet-control-attribution {
opacity: 0.2;
}
paper-icon-button{
opacity: 0.3;
}
.leaflet-marker-icon{
margin-top: -18px!important;
margin-left: -18px!important;
width: 32px!important;
height: 32px!important;
}
ha-entity-marker:
$: |
.marker {
width: 32px!important;
height: 32px!important;
}
type: map
# End of code
Error messages from the browser console:
No errors
By putting an X in the boxes ([ ]) below, I indicate that I:
[x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[x] Have made sure I am using the latest version of the plugin.
[x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
My Home Assistant version: 0.101.3
My lovelace configuration method (GUI or yaml):
type: entities
entities:
- entity: device_tracker.XXXX1
- entity: device_tracker.XXXX2
style: |
:host {
color: {% if is_state(config.entity, 'Away') %}black{%else %}blue{% endif %};
}
What I am doing:
Trying to color text in rows of an entities card
What I expected to happen:
Rows to be colored
What happened instead:
Rows are not colored
# See Above
By putting an X in the boxes ([ ]) below, I indicate that I:
[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[X] Have made sure I am using the latest version of the plugin.
[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
Edit: I was unaware that I could not use the gui to add the cards but had to be chaning the config file directly. Still cant find that info in the docs but anyway now it works for me
My Home Assistant version: 0.XX.X
My lovelace configuration method (GUI or yaml):
GUI
What I am doing:
Trying to add a card with custom style
What I expected to happen:
Custom style to be applied
What happened instead:
ERror showing
Expected a value of type undefined
for style
Minimal steps to reproduce:
Installed lovelace-card-mod through HACS, then pressed "add to lovelace", then restarted HA then used an example code:
type: entity-button
entity: light.malarbord
style: |
ha-card {
background: {% if is_state('light.bed_light', 'on') %} green {% endif %};
}
# The least ammount of code possible to reproduce my error
# End of code
Error messages from the browser console:
By putting an X in the boxes ([ ]) below, I indicate that I:
[x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[x] Have made sure I am using the latest version of the plugin.
[x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
I have problem with image css format, i try to reference with #id but do not work,
- badges: []
title: P ALTA
panel: true
cards:
- type: picture-elements
title: esto es una prueba
style: |
ha-card {
height:70vh;
}
.card-header {
font-size: 1px;
}
#image {
height: 70vh;
width: auto;
}
image: /local/3d_planta_alta.jpg
elements:
- entity: alarm_control_panel.alarma
style:
'--iron-icon-height': 50px
'--iron-icon-width': 50px
left: 94%
top: 4%
type: state-icon
My Home Assistant version: 0.106.5
My lovelace configuration method (GUI or yaml): yaml
What I am doing: using custom:card-mod as the type, worked fine on version 11 but since going to 12 & 13 get errors
What I expected to happen: displays my cards
What happened instead:
error message;
Minimal steps to reproduce:
use the yaml in the screenshot
By putting an X in the boxes ([ ]) below, I indicate that I:
[ x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[ x] Have made sure I am using the latest version of the plugin.
[ x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[ x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
Cant get any of them to work card-mod or card- modder
i copied the raw code and made a .js file in www folder. i also added type an url to resources raw edit.
i keep getting custom element doesn't exist
My Home Assistant version: 0.98.1
My Lovelace configuration method yaml:
What I am doing:
Trying to make dynamic image and icons color changes regarding status. It worked in version 3.
What I expected to happen:
Change background image and icons colors on status change.
What happened instead:
Nothing
Minimal steps to reproduce:
# The least ammount of code possible to reproduce my error
style: |
ha-card {
--paper-item-icon-color: white;
--primary-text-color: white;
--secondary-text-color: white;
background-image: url("/local/lovelace/home/weather-background-[[ sun.sun.state ]].gif");
}
# End of code
Error messages from the browser console:
By putting an X in the boxes ([ ]) below, I indicate that I:
[x ] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[x ] Have made sure I am using the latest version of the plugin.
[x ] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[x ] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
My Home Assistant version: 0.110.4
My lovelace configuration method (GUI or yaml): GUI
What I am doing:
Create a entities card with a battery sensor which I want to change the icon color.
What I expected to happen:
The batterie icon should change its color to green.
What happened instead:
The icons is still displayed in the color of the Lovelace Theme.
Minimal steps to reproduce:
# The least ammount of code possible to reproduce my error
entities:
- entity: sensor.openclose_5_battery_level
name: Name
style: |
:host {
--iron-icon-fill-color: green ;
}
type: entities
# End of code
Error messages from the browser console:
By putting an X in the boxes ([ ]) below, I indicate that I:
[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[X] Have made sure I am using the latest version of the plugin.
[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
My Home Assistant version: 0.105.3
My lovelace configuration method (GUI or yaml): YAML
What I am doing:
Since updating to 0.105.x (currently 0.105.3), some entity types in glance cards no longer accept my styles for the "active" color. Examples are input_boolean & automation, and both worked fine under 0.104.x. Here's a snippet from a glance card:
- entity: input_boolean.heat_water
name: Heat
tap_action:
action: toggle
hold_action:
action: more-info
icon: 'mdi:fire'
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity) == 'on' %} red;
{% else %} green;
{% endif %}
}
type: glance
When the input_boolean is off
, the icon is green as expected. When it's on
, I get the default color (yellow) instead of red. If I open the inspector, I still see the card-mod
element in what looks like the correct place with the correct color based on the state, but the icon itself gets the default active color (yellow).
Adding state_color: true
to the glance card doesn't help, but I don't think it's supposed to be used there anyway. Same happens for automation entities in a glance card.
Error messages from the browser console: None
By putting an X in the boxes ([ ]) below, I indicate that I:
[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[X] Have made sure I am using the latest version of the plugin.
[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
I've been using the card mod and sliders and they are great!. however I don't really like the vast amount of space between each entity. E.g. between the title to the actual entity.
Is there a css code I can use in order to remove the spacing between the entities?
cards:
- entities:
- entity: light.entry_8
icon: 'mdi:lightbulb-outline'
toggle: true
type: 'custom:slider-entity-row'
show_header_toggle: false
title: Entry
type: entities
style: |
.card-header {
font-size: 20px;
}
- entities:
- entity: sensor.temperature_sensor_1_43
- entity: sensor.humidity_sensor_1_45
icon: 'mdi:water-percent'
- entity: sensor.light_sensor_1_44
icon: 'mdi:brightness-5'
- entity: sensor.entry_motion
icon: 'mdi:motion-sensor'
- entity: sensor.entry_door
icon: 'mdi:door-closed-lock'
show_icon: true
show_name: false
show_state: true
type: glance
type: 'custom:vertical-stack-in-card'
refer to the highlighted areas in screencap.
It's not obvious from any of the examples (despite showing colored bulbs etc) how this is achieved. I've only succeeded in changing the background color of icons, not the actual color. Many thanks.
When viewing the page for card-mod in hacs, it claims the configuration process is:
- url: /community_plugin/lovelace-card-mod/card-mod.js
type: null
should be
- url: /community_plugin/lovelace-card-mod/card-mod.js
type: module
Have had to help a few people on the forums and this was the root cause of their problems.
My Home Assistant version: 0.95.4
My lovelace configuration method (GUI or yaml):
yaml
What I am doing:
The light is controlled from automation.
Lovelace Card Mod
The light switch vibrates and does not change the state.
- title: Test Card Mod
icon: mdi:home
cards:
- type: entities
style: |
ha-card {
border-radius: 10px;
}
entities:
- entity: light.bedroom
- type: entities
style: |
ha-card {
border-radius: 10px;
}
entities:
- type: custom:slider-entity-row
entity: light.bedroom
toggle: true
name: Bedroom
Lovelace Card Modder
The light switch changes state without error.
- title: Test card-modder
icon: mdi:home
cards:
- type: custom:card-modder
style:
border-radius: 10px
card:
type: entities
entities:
- entity: light.bedroom
- type: custom:card-modder
style:
border-radius: 10px
card:
type: entities
entities:
- type: custom:slider-entity-row
entity: light.bedroom
toggle: true
name: Bedroom
Is there any plans to add styling options for horizontal/vertical-stack card or custom:vertical-stack-in-card? I can not figure out how to change the background for these elements...
If it works now, I will be grateful for the tip of how to do it
I would like the ability to mod the custom:text-divider row, it is currently too bulky.
This may already be possible, I could just be doing something stupid. Here is my current edition of the code:
type: entities
title: Climate
style: |
h2 {
font-size: 16px;
padding: 0px;
}
.text-divider {
padding: 0px;
margin: 0px;
}
show_header_toggle: false
entities:
- type: 'custom:text-divider-row'
text: Home
- entity: input_number.c_home_heat
name: Heat
- entity: input_number.c_home_cool
name: Cool
- type: 'custom:text-divider-row'
text: Night
- entity: input_number.c_night_heat
name: Heat
- entity: input_number.c_night_cool
name: Cool
- type: 'custom:text-divider-row'
text: Away
- entity: input_number.c_away_heat
name: Heat
- entity: input_number.c_away_cool
name: Cool
My Home Assistant version: 0.XX.X
0.102.3
My lovelace configuration method (GUI or yaml):
yaml
What I am doing:
I am trying to add some custom css to the slider-entity-row. I wan't the slider to look more like the bar_card.
What I expected to happen:
I expected it to be able to change the styling of the slider, I have been fiddling around in the browser inspect element and changed the css to look like I want. But when I went to add in the stryling nothing happens.
What happened instead:
Nothing.
Minimal steps to reproduce:
# The least ammount of code possible to reproduce my error
- type: entities
style: |
div {
padding: 0px !important;
margin: 0px !important;
}
entities:
- type: custom:slider-entity-row
style: |
#sliderContainer {
margin-left: 0px !important;
margin-right: 0px !important;
}
entity: light.dinner_table_light
name: hide_state
full_row: true
hide_when_off: false
hide_state: true
# End of code
Error messages from the browser console:
No error message, nothing happens.
By putting an X in the boxes ([ ]) below, I indicate that I:
[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[X] Have made sure I am using the latest version of the plugin.
[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
My Home Assistant version: 0.106.0
My lovelace configuration method (GUI or yaml): yaml
What I am doing:
Applying custom styles on vertical-stack-in cards.
What I expected to happen:
No errors
What happened instead:
Errors due to recent Lovelace changes: https://developers.home-assistant.io/blog/2020/02/18/106-custom-card-changes/
Minimal steps to reproduce:
- type: custom:mod-card
style: |
ha-card {
background-color: var(--primary-background-color);
border-radius: 15px;
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-4px -4px 4px 0 rgba(255,255,255,.5),4px 4px 4px 0 rgba(0,0,0,.03);
{% else %}
-4px -4px 4px 0 rgba(50, 50, 50,.5),4px 4px 4px 0 rgba(0,0,0,.15);
{% endif %}
}
card:
type: custom:vertical-stack-in-card
cards:
- type: glance
title: Home Assistant
columns: 7
show_name: false
entities:
- entity: sensor.count_automations
- entity: sensor.count_binary_sensors
- type: entities
show_header_toggle: false
entities:
- entity: sensor.potential_breaking_changes
- entity: input_select.log_level
Error messages from the browser console:
[Error] mod-card
TypeError: Attempted to assign to readonly property.
setConfig — card-mod.js:1:7794
o — hui-warning-element.ts:18
_createCardElement — hui-horizontal-stack-card.ts:21
_rebuildCard — hui-horizontal-stack-card.ts:21
(anonymous function) — hui-horizontal-stack-card.ts:21
dispatchEvent
r — fire_event.ts:76
(anonymous function) — hui-warning-element.ts:18
promiseReactionJob
o (chunk.a7f86c7205b90ff898cc.js:2212:232412)
_createCardElement (chunk.a7f86c7205b90ff898cc.js:2696:328273)
_rebuildCard (chunk.a7f86c7205b90ff898cc.js:2696:328458)
(anonymous function) (chunk.a7f86c7205b90ff898cc.js:2696:328389)
dispatchEvent
r (app.83a8dbf7.js:2:45042)
(anonymous function) (chunk.a7f86c7205b90ff898cc.js:2212:232735)
promiseReactionJob
By putting an X in the boxes ([ ]) below, I indicate that I:
[x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[x] Have made sure I am using the latest version of the plugin.
[x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
Please add support for one click "Add to Lovelace" link in HACS.
I recently set up a new HassOS test instance VM and I noticed HACS was added by default. I needed to get card-mod installed but for what ever reason, it was quite a bit more difficult than setting up most of my other plugins. With these other plugins a Link was provided via HACKS that added the entry into the "resources:" config of Lovelace and made the install effortless.
With HomeAssistant growing so quickly, this functionality would be awesome to add especially for new users. Additionally many of the popular plugins already support the "add to Lovelace" function.
FYI: the proper url listed in the install guide here is wrong as the module is no longer card-modder.js
Hi @thomasloven I know popup-card is deprecated but for now it's widely used in my HA.
I've started the process of replacing card-modder with card-mod in my setup, and the only thing missing are changing the popup-cards.
Tried also with ha-card, but still it doesn't apply the new CSS.
Old config:
camera.bmw_530i_xdrive:
title: Sist kjente lokasjon
large: false
card:
type: custom:card-modder
card:
type: picture-entity
entity: camera.bmw_530i_xdrive
style:
border-radius: 0px
style:
border-radius: 15px
background-color: rgba(100,100,100,0.3)
box-shadow: 0px 0px 10px 10px rgba(57,128,228);
New config:
camera.bmw_530i_xdrive:
style: |
:host {
border-radius: 15px;
background-color: rgba(100,100,100,0.3);
box-shadow: 0px 0px 10px 10px rgba(57,128,228);
}
title: Sist kjente lokasjon
large: false
card:
type: picture-entity
entity: camera.bmw_530i_xdrive
I hope you will still assist me in achieving this even if popup-card is deprecated.
My Home Assistant version: 0.105.2
My lovelace configuration method (GUI or yaml): YAML
What I am doing: Trying to change icon color based on entity state
What I expected to happen: The icon to change color
What happened instead: Got error in the logs and the color doesn't change (this was working before 0.105.x release
Minimal steps to reproduce:
# The least ammount of code possible to reproduce my error
- type: entities
show_header_toggle: false
entities:
- type: "custom:restriction-card"
row: true
card:
type: entities
name: UK Powerstrip
entity: switch.studio_andrea_uk_powerstrip
tap_action:
action: none
style: |
:host {
--paper-item-icon-color:
{% if is_state(config.entity, 'on') %}
rgb(251, 205, 65);
{% elif is_state(config.entity, 'off') %}
rgb(2550, 0, 0);
{% else %}
rgb(128, 128, 128);
{% endif %}
}
# End of code
Error messages from the browser console:
None in the console, this is from HA logs:
2020-02-07 12:48:07 ERROR (MainThread) [homeassistant.components.websocket_api.http.connection.139907224751376] Error handling message: Unknown error
Traceback (most recent call last):
File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 221, in async_render
return compiled.render(kwargs).strip()
File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/asyncsupport.py", line 76, in render
return original_render(self, *args, **kwargs)
File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/environment.py", line 1008, in render
return self.environment.handle_exception(exc_info, True)
File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/environment.py", line 780, in handle_exception
reraise(exc_type, exc_value, tb)
File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/_compat.py", line 37, in reraise
raise value.with_traceback(tb)
File "<template>", line 3, in top-level template code
File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/sandbox.py", line 440, in call
return __context.call(__obj, *args, **kwargs)
File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 983, in wrapper
return func(hass, *args[1:], **kwargs)
File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 646, in is_state
state_obj = _get_state(hass, entity_id)
File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 470, in _get_state
state = hass.states.get(entity_id)
File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/core.py", line 876, in get
return self._states.get(entity_id.lower())
jinja2.exceptions.UndefinedError: 'dict object' has no attribute 'entity'
During handling of the above exception, another exception occurred:
Traceback (most recent call last):
File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/components/websocket_api/connection.py", line 95, in async_handle
handler(self.hass, self, schema(msg))
File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 254, in handle_render_template
state_listener()
File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 242, in state_listener
msg["id"], {"result": template.async_render(variables)}
File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 223, in async_render
raise TemplateError(err)
homeassistant.exceptions.TemplateError: UndefinedError: 'dict object' has no attribute 'entity'
2020-02-07 12:48:07 ERROR (MainThread) [homeassistant.components.websocket_api.http.connection.139907224751376] Error handling message: Unknown error
Traceback (most recent call last):
File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 221, in async_render
return compiled.render(kwargs).strip()
File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/asyncsupport.py", line 76, in render
return original_render(self, *args, **kwargs)
File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/environment.py", line 1008, in render
return self.environment.handle_exception(exc_info, True)
File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/environment.py", line 780, in handle_exception
reraise(exc_type, exc_value, tb)
File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/_compat.py", line 37, in reraise
raise value.with_traceback(tb)
File "<template>", line 3, in top-level template code
File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/sandbox.py", line 440, in call
return __context.call(__obj, *args, **kwargs)
File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 983, in wrapper
return func(hass, *args[1:], **kwargs)
File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 646, in is_state
state_obj = _get_state(hass, entity_id)
File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 470, in _get_state
state = hass.states.get(entity_id)
File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/core.py", line 876, in get
return self._states.get(entity_id.lower())
jinja2.exceptions.UndefinedError: 'dict object' has no attribute 'entity'
During handling of the above exception, another exception occurred:
Traceback (most recent call last):
File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/components/websocket_api/connection.py", line 95, in async_handle
handler(self.hass, self, schema(msg))
File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 254, in handle_render_template
state_listener()
File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 242, in state_listener
msg["id"], {"result": template.async_render(variables)}
File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 223, in async_render
raise TemplateError(err)
homeassistant.exceptions.TemplateError: UndefinedError: 'dict object' has no attribute 'entity'
2020-02-07 12:48:08 ERROR (MainThread) [homeassistant.components.websocket_api.http.connection.139907224751376] Error handling message: Unknown error
Traceback (most recent call last):
File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 221, in async_render
return compiled.render(kwargs).strip()
File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/asyncsupport.py", line 76, in render
return original_render(self, *args, **kwargs)
File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/environment.py", line 1008, in render
return self.environment.handle_exception(exc_info, True)
File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/environment.py", line 780, in handle_exception
reraise(exc_type, exc_value, tb)
File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/_compat.py", line 37, in reraise
raise value.with_traceback(tb)
File "<template>", line 3, in top-level template code
File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/sandbox.py", line 440, in call
return __context.call(__obj, *args, **kwargs)
File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 983, in wrapper
return func(hass, *args[1:], **kwargs)
File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 646, in is_state
state_obj = _get_state(hass, entity_id)
File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 470, in _get_state
state = hass.states.get(entity_id)
File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/core.py", line 876, in get
return self._states.get(entity_id.lower())
jinja2.exceptions.UndefinedError: 'dict object' has no attribute 'entity'
During handling of the above exception, another exception occurred:
Traceback (most recent call last):
File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/components/websocket_api/connection.py", line 95, in async_handle
handler(self.hass, self, schema(msg))
File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 254, in handle_render_template
state_listener()
File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 242, in state_listener
msg["id"], {"result": template.async_render(variables)}
File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 223, in async_render
raise TemplateError(err)
homeassistant.exceptions.TemplateError: UndefinedError: 'dict object' has no attribute 'entity'
By putting an X in the boxes ([ ]) below, I indicate that I:
[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[X] Have made sure I am using the latest version of the plugin.
[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
It would be very useful if this card also allowed to map any element to a call service service, something like, map the element and CSS class and call a service with it when click! The hardest part should be what parameters to pass to the call service! A template should help.
Just a ideia :)
My Home Assistant version: 0.107.5
My lovelace configuration method (GUI or yaml): yaml
What I am doing:
To load modded picture-elements card in dashboard
What I expected to happen:
Card loaded without help of lovelace-card-preloader
custom plugin
What happened instead:
Card is not loaded, instead in Dashboard red message appears with title "Custom element doesn't exist: hui-picture-elements-card."
If lovelace-card-preloader
custom plugin is installed and configure in lovelace yaml file a la
preload:
- picture-elements
then card is loaded.
Minimal steps to reproduce:
# The least amount of code possible to reproduce my error
- type: custom:mod-card
style: |
ha-card {
--paper-card-background-color: #155c9d;
--primary-text-color: white;
font-size: 1.3rem;
font-style: bold
}
card:
type: picture-elements
image: /local/images/transparent_background.png
elements:
- type: image
entity: vacuum.servantess
camera_image: camera.servantess_map
style:
top: 50%
left: 50%
width: 100%
...
# End of code
Error messages from the browser console:
None
By putting an X in the boxes ([ ]) below, I indicate that I:
[x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[x] Have made sure I am using the latest version of the plugin.
[x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
Looks like the hacs install does not install mod-card (which I attempted to use to change a horizontal-stack style). How should I proceed?
My Home Assistant version: 0.110.1
My lovelace configuration method (GUI or yaml): yaml
What I am doing:
I am trying to get rid of shadow and border around auto-entities card using mod-card workaround
What I expected to happen:
Flattening the view due to shadow and border to be gone
What happened instead:
The shadow around the Brightness and Temperature box (auto-entities card) is not disappearing.
Minimal steps to reproduce:
# The least ammount of code possible to reproduce my error
cards:
- type: vertical-stack
title: Kitchen Controls
cards:
- type: entities
title: Kitchen Lights
entities:
- light.kitchen_intelite
- type: custom:mod-card
style: |
ha-card {
border: 0px;
background: none;
box-shadow: none;
}
card:
type: custom:auto-entities
show_empty: false
card:
type: entities
show_header_toggle: false
filter:
template: |
{% if is_state('light.kitchen_intelite','on') and is_state('switch.kitchen_intelite_dark_mode','off')%}
input_number.kitchen_intelite_brightness
input_number.kitchen_intelite_temperature
{% endif %}
{% if is_state('light.kitchen_intelite','on') and is_state('switch.kitchen_intelite_dark_mode','on')%}
input_number.kitchen_intelite_brightness_dark_mode
{% endif %}
footer:
type: buttons
entities:
- entity: switch.kitchen_intelite_mourn_mode
- entity: switch.kitchen_intelite_noon_mode
- entity: switch.kitchen_intelite_eve_mode
- entity: switch.kitchen_intelite_dark_mode
# End of code
Error messages from the browser console:
By putting an X in the boxes ([ ]) below, I indicate that I:
[x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[x] Have made sure I am using the latest version of the plugin.
[x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
This is once again not working.
Has --state-icon-color changed again?
Originally posted by @PierreScerri in #44 (comment)
When using mod-card, the elements inside isn't updated when HomeAssistant refreshes entities.
Tested with identical cards placed independently and inside a mod-card within the same view. The independent card will update entities, graphs and such, but within the mod-card everything is static.
My Home Assistant version:0.106
My lovelace configuration method (GUI or yaml): Yaml
Hello, in my configuration I wrote this code and it worked fine before 105.5, but the 106 update gives me errors. You can help?
I previously worked with card-modder and I am changing everything to this card.
In Google Chrome, I cleared the cache and it works, in Firefox too, ... but in the Android app it's still happening.
Thank you for your work, it is very good !!!!!!!
This is the code:
- type: custom:mod-card
style: |
ha-card {
background-repeat: no-repeat;
background-size: 100% 68px;
background-image: url("/local/lovelace/cardbackK.png");
border-radius: 10px;
border: solid 1px rgba(100,100,100,0.3);
box-shadow: 3px 3px rgba(0,0,0,0.4);
overflow: hidden;
--ha-card-background: rgba(0,0,0,0)
}
card:
type: entities
title: Comedor Sur
show_header_toggle: false
entities:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mod-card
card:
type: glance
show_header_toggle: false
entities:
- entity: binary_sensor.puerta_sur
name: Puerta
- entity: binary_sensor.ventana_cocina
name: Cocina
- entity: binary_sensor.balcon_comedor_sur
name: Balcón
- entity: binary_sensor.ventana_escaleras
name: Escalera
- entity: binary_sensor.ventana_mesa
name: Mesa
style: |
ha-card {
margin: 0px !important;
background: transparent;
}
- type: custom:mod-card
card:
type: thermostat
entity: climate.kuc0000725
style: |
ha-card {
margin: 0px !important;
background: transparent;
}
- type: custom:mod-card
card:
type: glance
show_header_toggle: false
entities:
- switch.rele_1
- sensor.temperatura_actual_sur
- sensor.temperatura_fijada_sur
- sensor.valvula_sur
- entity: binary_sensor.kuc0000725_lowbat
name: Batería
style: |
ha-card {
margin: 0px !important;
color: transparent;
}
Error messages from the browser console:
Cannot assign to read only property 'style' of object '#'
type: 'custom:mod-card'
style: |
ha-card {
background-repeat: no-repeat;
background-size: 100% 68px;
background-image: url("/local/lovelace/cardbackK.png");
border-radius: 10px;
border: solid 1px rgba(100,100,100,0.3);
box-shadow: 3px 3px rgba(0,0,0,0.4);
overflow: hidden;
--ha-card-background: rgba(0,0,0,0)
card:
type: entities
title: Comedor Sur
show_header_toggle: false
entities:
- type: 'custom:vertical-stack-in-card'
cards:
- type: 'custom:mod-card'
card:
type: glance
show_header_toggle: false
entities:
- entity: binary_sensor.puerta_sur
name: Puerta
- entity: binary_sensor.ventana_cocina
name: Cocina
- entity: binary_sensor.balcon_comedor_sur
name: Balcón
- entity: binary_sensor.ventana_escaleras
name: Escalera
- entity: binary_sensor.ventana_mesa
name: Mesa
style: |
ha-card {
margin: 0px !important;
background: transparent;
}
- type: 'custom:mod-card'
card:
type: thermostat
entity: climate.kuc0000725
style: |
ha-card {
margin: 0px !important;
background: transparent;
}
- type: 'custom:mod-card'
card:
type: glance
show_header_toggle: false
entities:
- switch.rele_1
- sensor.temperatura_actual_sur
- sensor.temperatura_fijada_sur
- sensor.valvula_sur
- entity: binary_sensor.kuc0000725_lowbat
name: Batería
style: |
ha-card {
margin: 0px !important;
color: transparent;
}
By putting an X in the boxes ([ ]) below, I indicate that I:
[ ] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[ ] Have made sure I am using the latest version of the plugin.
[ ] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[ ] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
My Home Assistant version: 105.3
My lovelace configuration method (GUI or yaml):
What I am doing:
style: |
ha-card {
border-radius: 15px;
font-size: 12px;
font-variant: small-caps;
box-shadow: none;
}
What I expected to happen:
What happened instead:
Minimal steps to reproduce:
updated to 13, rolled back to 12
# The least ammount of code possible to reproduce my error
# End of code
Error messages from the browser console:
By putting an X in the boxes ([ ]) below, I indicate that I:
[ ] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[ ] Have made sure I am using the latest version of the plugin.
[ ] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[ ] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
My Home Assistant version:
0.105.3
My lovelace configuration method (GUI or yaml):
yaml
What I am doing:
Installing card-mod and card-tools via HACS and view the developer console in my browser.
What I expected to happen:
No errors.
What happened instead: Error resolving module specifier: card-tools/src/templates.js
Minimal steps to reproduce:
Install
# The least ammount of code possible to reproduce my error
- url: /local/community/lovelace-card-tools/card-tools.js
type: module
- url: /local/community/lovelace-card-mod/card-mod.js
type: module
# End of code
Error messages from the browser console:
Error resolving module specifier: card-tools/src/templates.js
I noticed that I am using card-mod.js from the src
directory, which is the non-minified version.
By putting an X in the boxes ([ ]) below, I indicate that I:
[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[X] Have made sure I am using the latest version of the plugin.
[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
Hi Thomas,
first of all, thank you for your effort and work in this community and for your plug-ins, greatly appreciate that.
My Home Assistant version: 0.110.4
My lovelace configuration method (GUI or yaml):
GUI
What I am doing:
I am trying to get rid of the box shadow of Mini-Media-Player to suite my UI-Design:
see: https://community.home-assistant.io/t/google-inspired-home-assistant-on-mobile/202191
What I expected to happen:
i expect to get rid of the box shadow with following code:
entity: media_player.sonos_wohnzimmer
show_header_toggle: false
icon: 'mdi:play-box-outline'
name: Sonos Play One Wohnzimmer
artwork: full-cover
style: |
ha-card {
box-shadow: none;
webkit-box-shadow: none;
}
type: 'custom:mini-media-player'
What happened instead:
nothing
Minimal steps to reproduce:
# The least ammount of code possible to reproduce my error
entity: media_player.sonos_wohnzimmer
show_header_toggle: false
icon: 'mdi:play-box-outline'
name: Sonos Play One Wohnzimmer
artwork: full-cover
style: |
ha-card {
box-shadow: none;
webkit-box-shadow: none;
}
type: 'custom:mini-media-player'
# End of code
Error messages from the browser console:
By putting an X in the boxes ([ ]) below, I indicate that I:
[x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[x] Have made sure I am using the latest version of the plugin.
[ ] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
I guess this is kinda a feature request.
I've been working quite a bit lately with the subscribeRenderTemplate
method and rendering Jinja from the frontend. With reference to card-mod.js
. I noticed that HA will extract entities from the template automatically and update the template as needed, but once you define entity_ids
it will no longer extract entities. And as I'm pretty sure your aware of based on your code in card-mod.js
, HA won't extract an entity from config.entity
, so you have to manually specify it in entity_ids
.
I did a bit of testing and found that it will extract an entity_id from non-nested variables.
For example if your variables are
{
"config": {
"entity": "myid"
},
"entity": "myid"
}
and you use a template such as "{{ states(entity) }} {{ states("anotherid") }}"
,
HA will be able to extract "myid" and "anotherid".
Having people use entity
instead of config.entity
would remove the need for entity_ids
(naturally excluding templates that don't use an entity).
It's a little quirky but I thought I'd just mention it.
HA's extract entities method here.
I have a rule to modify my style, but this is only updated when I reload lovelace, not on state change:
cards:
- type: vertical-stack
cards:
- type: custom:layout-card
layout: horizontal
max_columns: 2
max_width: [100%, 100%]
cards:
- type: entities
title: Luzes
entities:
- entity: light.maindoor_light
- entity: light.hallway_spotlight
- type: custom:slider-entity-row
entity: light.hallway_tablelight
toggle: true
style: |
:host {
color: {% if is_state('binary_sensor.hallway_tablelight_autoon', 'on') %} green {% endif %};
}
- entity: light.christmas_light_1
My Home Assistant version: 0.108.1
My lovelace configuration method (GUI or yaml): GUI
What I am doing: change icon color by sensor state
What I expected to happen:
What happened instead: nothing after update to 0.108, previous was ok
Minimal steps to reproduce:
entity: sensor.solar_grid_status
name: GRID
style: |
ha-card {
background:
{% if states('sensor.solar_ac_input')|int > 200%}
{% else %}
red
{% endif %};
--paper-item-icon-color:
{% if is_state('sensor.solar_grid_status', 'AC Use' ) %}
rgb(80, 171, 48)
{% endif %};
}
theme: default
type: sensor
[ x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[x ] Have made sure I am using the latest version of the plugin.
[ x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[x ] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
My Home Assistant version: 0.105.2
My lovelace configuration method (GUI or yaml): GUI
What I am doing:
Modifying the CSS of the entities card.
What I expected to happen:
The code to not self duplicate
What happened instead:
When the UI editor is open or closed the code duplicates itself
Minimal steps to reproduce:
The code I'm using is below. The part that it is adding and duplicating is
ha-card {
background: none;
box-shadow: none;
}
Below is the code I'm using in the card through the UI editor
type: 'custom:mod-card'
style: |
ha-card {
background: url(/local/pics/ui/small-master-bedroom.jpg);
}
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: 'custom:button-card'
entity: script.good_night_all_lights_off
name: Living room
show_icon: false
styles:
card:
- background: '#FF704D'
- border-radius: 5%
- width: 110px
- height: 45px
- border: 2px dashed
tap_action:
action: navigate
navigation_path: '#p1'
- type: 'custom:button-card'
entity: light.garage
name: Master
show_icon: false
styles:
card:
- background: '#FF704D'
- border-radius: 5%
- width: 110px
- height: 45px
- border: 2px dashed
tap_action:
action: navigate
navigation_path: '#p2'
- type: 'custom:button-card'
entity: light.garage
name: Andrew
show_icon: false
styles:
card:
- background: '#FF704D'
- border-radius: 5%
- width: 110px
- height: 45px
- border: 2px dashed
tap_action:
action: navigate
navigation_path: '#p3'
- type: vertical-stack
cards:
- type: 'custom:state-switch'
entity: hash
style: ''
default: p1
transition: slide-right
states:
p1:
type: entities
style: |
ha-card {
background: none;
box-shadow: none;
}
entities:
- type: 'custom:slider-entity-row'
entity: light.livingroom_dimmer_level
icon: 'mdi:ceiling-light'
- type: divider
- type: 'custom:slider-entity-row'
entity: light.living_room_lamp
icon: 'mdi:floor-lamp'
- type: 'custom:rgb-light-card'
entity: light.living_room_lamp
colors:
- rgb_color:
- 255
- 127
- 255
- rgb_color:
- 241
- 224
- 181
- rgb_color:
- 239
- 210
- 117
- rgb_color:
- 255
- 0
- 21
brightness: 255
transition: 1
p2:
type: entities
entities:
- light.dining_room
- light.entrance
# End of code
Error messages from the browser console:
By putting an X in the boxes ([ ]) below, I indicate that I:
[X ] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[X ] Have made sure I am using the latest version of the plugin.
[X ] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[X ] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
My Home Assistant version: 0.105.4
My lovelace configuration method (GUI or yaml): yaml
What I am doing:
Try to use it.
What I expected to happen:
To load correctly
What happened instead:
I get an error.
Minimal steps to reproduce:
Just install it and add this to ui-lovelace.yaml
- url: /community_plugin/lovelace-card-tools/card-tools.js
type: module
- url: /community_plugin/lovelace-card-mod/card-mod.js
type: module
Error messages from the browser console:
(anonymous) @ bootstrap:83
(anonymous) @ calendar-card.js:1
index.js:21 CALENDAR-CARD Version 3.108.2
mini-graph-card-bundle.js:1 MINI-GRAPH-CARD 0.9.2
button-card.js:1430 BUTTON-CARD Version 3.1.0
card-tools.js:1 CARD-TOOLS 2 IS INSTALLED DeviceID: 0beeac99-09d49201
0:1 Uncaught TypeError: Failed to resolve module specifier "card-tools/src/templates.js". Relative references must start with either "/", "./", or "../".
simple-thermostat.js:1 simple-thermostat: 0.34.0
custom-header.js:145 CUSTOM-HEADER Version 1.3.2
banner-card.js:4 banner-card: 0.9.0
atomic_calendar.js:1 atomic_calendar v0.8.9 loaded
By putting an X in the boxes ([ ]) below, I indicate that I:
[X ] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[X] Have made sure I am using the latest version of the plugin.
[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
My Home Assistant version: 0.105.4
My lovelace configuration method (GUI or yaml): yaml
What I am doing: basic test to see if card-mod works
- type: entities
title: Family
show_header_toggle: false
style: |
ha-card {
color: red;
}
entities:
- entity: sensor.my_street
name: John
What I expected to happen:
I expect "John" to be red
What happened instead:
Nothing happens.
Minimal steps to reproduce:
I've installed both card-mod and card-tools.
# The least ammount of code possible to reproduce my error
- type: entities
title: Family
show_header_toggle: false
style: |
ha-card {
color: red;
}
entities:
- entity: sensor.my_street
name: John
# End of code
Error messages from the browser console:
0:1 Uncaught TypeError: Failed to resolve module specifier "card-tools/src/templates.js". Relative references must start with either "/", "./", or "../".
By putting an X in the boxes ([ ]) below, I indicate that I:
[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[X] Have made sure I am using the latest version of the plugin.
[X ] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
My Home Assistant version: 0.95.4
My lovelace configuration method (GUI or yaml):
yaml
What I am doing:
I am trying to add green background to vertical stack
What I expected to happen:
Green background to vertical stack
What happened instead:
Nothing
This is my code:
- type: vertical-stack
style: |
#root {
background: green
}
My Home Assistant version: 0.98.1
My lovelace configuration method (GUI or yaml):
YAML
What I am doing:
I modified my map card to resize the marker as described in #8
(Plugin & HASS up2date - all caches cleared)
What I expected to happen:
At least to resize after some seconds - or better on page load
What happened instead:
With lovelace-card-mod version 4 & 5 the style is only applied while switching to another view. As soon as I press the icon of another view, the marker resizes.
Minimal steps to reproduce:
Map card with following style added:
# The least ammount of code possible to reproduce my error
ha-entity-marker:
$: |
.marker {
width: 24px!important;
height: 24px!important;
border: 0px!important;
margin-top: 12px!important;
margin-left: 12px!important;
}
# End of code
Error messages from the browser console:
No errors or warnings (even in debug_cardMod: true
mode)
By putting an X in the boxes ([ ]) below, I indicate that I:
[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[X] Have made sure I am using the latest version of the plugin.
[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.