You need to terminate each line
add ; at the end.
Solutions like this may be used by a simple ācopy/pasteā. Otherwise the thread will be flooded by explaining the same things again & again. That was my intention - accumulate solutions in dedicated posts to avoid spamā¦
I think I just understand,
because I type this
card_mod:
style: |
:host {
--paper-item-icon-color: red
--paper-item-icon-active-color: green
}
instead this:
style: |
:host {
--paper-item-icon-active-color: red;
--paper-item-icon-color: cyan;
}
If I remove card_mod itās okay
You should read docs: GitHub - thomasloven/lovelace-card-mod: š¹ Add CSS styles to (almost) any lovelace card
Does
--paper-item-icon-active-color: red;
--paper-item-icon-color: cyan;
work for switch entities ?
because , if I apply this to switch , Itās stays red even if āonā
- type: entities
entities:
- entity: switch.pool_pump
style: |
:host {
--paper-item-icon-active-color: green;
--paper-item-icon-color: red;
}
I understand this, but I donāt understand how to make this method with switch and condition.
Sorry but I new on this and I struggle a lot for understand
Ok. Wait a little, today will try to explain.
thanks a lot
So, what you cannot do?
It is already explained in the post I gave you.
type: entities
state_color: true
entities:
- entity: switch.test_switch
name: Colored
style: |
:host {
--paper-item-icon-active-color: red;
--paper-item-icon-color: cyan;
}
And your code seems to be wrong - check indentation for the 1st line.
Hi there, I used the Layout-card to make grid-areas.
Now I will change the background color of a grid area?
I have tried this, but now result.
Someone think that this is possible with the Card-Mod, styling elements without ha-card.
Do someone here nowās how??
views:
- title: testing
panel: false
path: testing
type: 'custom:grid-layout'
layout:
grid-template-columns: 25% auto 25%
grid-template-rows: null
grid-template-areas: |
"header header header"
"sidebar main main"
"footer footer footer"
grid-area: sidebar;
background-color: #ff0000
badges: []
cards:
- type: button
tap_action:
action: toggle
entity: sensor.energy_production_tarif_1
show_name: true
show_icon: true
show_state: true
view_layout:
grid-area: sidebar
title: homey
Iām a beginner, tell me where do you insert this part of the code into Lovelace?
style: |
@keyframes spin-office-ac {
100% {transform: translate(-50%, -50%) scale(1.5) rotate( {% if is_state('input_boolean.air_conditioner_office', 'on') %} -360deg {% else %} 0deg {% endif %} )}
}
another day, another challengeā¦
please help me mod the map card in a stack, to fill the full width of the card.
this is a piece of the yaml I use:
type: conditional
conditions:
- entity: binary_sensor.earthquakes_near_active
state: 'on'
card:
type: entities
header:
type: picture
image: /local/images/aardbeving.jpg
entities:
- type: custom:hui-element
card_type: entities
style: |
ha-card {
margin: 0px -16px 0px -16px;
box-shadow: none;
}
title: Quakes
show_header_toggle: false
entities:
- binary_sensor.earthquakes_near_active
- sensor.earthquakes_near
- input_number.quakes_near
- type: custom:auto-entities
show_empty: false
entities:
- zone.home
card:
type: map
style: |
ha-card {
box-shadow: none;
}
# margin: 0px -16px 0px -16px;
default_zoom: 4
filter:
# include:
# - entity_id: geo_location.*
template: >
{%- set ns = namespace(quakes_near=[]) %}
{% set km = states('input_number.quakes_near')|float %}
{% set location = states('input_select.quakes_near') %}
{% for s in states.geo_location|selectattr('attributes.source','eq','usgs_earthquakes_feed')
if distance(s.entity_id,location) < km %}
{% set ns.quakes_near = ns.quakes_near + s.entity_id %}
{% endfor %}
{{ns.quakes_near}}
and as you can see I normally use the
margin: 0px -16px 0px -16px;
to make it happen. However, on the map card it merely shifts it to the left, creating an even bigger gap on the right side.
this is un-modded:
and this with the mod:
really oddā¦
Have you tried position: absolute and family or width?
In the YAML editor of the card.
Yes, using mod-card. Please try to read the documentation.
no I havenāt, the only positional mods I use, system wide, are like margin: 0px -16px 0px -16px; sometimes 8 px more or less, but it always works perfectly.
Except for these maps obviously.
What would you suggest? combine this with position: absolute? or only that?
Not sure what you mean with family?
did try object-fit: auto; but none of that seems to have any effect.
The map card section only does show perfectly, so it is an issue displaying that in the entities card stacking itā¦