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ā¦
Not sure if this is of any help, but I had a similar challenge when I created a button-card. Since button-card uses CSS codes like card-mod, it might work with card-mod as well. I wanted to display the entity picture in fullscreen inside the button card (I created this project with it to give you an idea). Which worked, using the following code:
card:
- padding: 0px
- background-color: var(--card-background-off) #the color when there is no artwork, change or remove to use own color
entity_picture:
- height: 100%
- width: 100%
- position: absolute
Perhaps you can use variables like padding: 0px for the card element and height: 100% and width: 100% for the map element with card-mod. Not sure if itās in anyway helpful, but I figured it doesnāt hurt to try.
Thanks, and yes, I did try several of these already, nothing changes anythingā¦ I also tried a custom:stack-in-card, but even there, the Map behaves differently than the other elements.
Since this is all customization, thereās no change any of the HA Devās will care, even though to seems to be an issue with the Map cardās propertiesā¦ at least as far as all tried options seem to indicate.
You can combine position: absolute and other properties like top, left, bottom, and right to get precise control over positioning. You might also want to use position: relative.
Ok thanks Kendell,
I see. And do use those all over the place in eg the button-cards.
This however seems to be more of a challenge , canāt get anything to do the job.
As said using the Map on its own in the auto- entities works just fine, but stacking it creates the issue.
Since these stack are wide spread in my config , and all are styled for margin, I am rather used to that.
Except with the Mapā¦
Did you try mod-card yet?
Marius, I see no differences on the left & right sides:
type: conditional
conditions:
- entity: binary_sensor.service_on_value
state: 'on'
card:
type: entities
header:
type: picture
image: /local/images/blue_low_2.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.updater
- sensor.cleargrass_1_co2
- input_number.test_number
- type: 'custom:auto-entities'
show_empty: false
entities:
- zone.home
card:
type: map
style: |
ha-card {
box-shadow: none;
}
default_zoom: 4
filter:
include:
- entity_id: device_tracker.life360*
Also, I wonder why you use "hui-element" card, here is a card w/o it, it seems almost same (difference may be tuned by card-mod, I think):
type: conditional
conditions:
- entity: binary_sensor.service_on_value
state: 'on'
card:
type: entities
title: Quakes
show_header_toggle: false
header:
type: picture
image: /local/images/blue_low_2.jpg
entities:
- binary_sensor.updater
- sensor.cleargrass_1_co2
- input_number.test_number
- type: 'custom:auto-entities'
show_empty: false
entities:
- zone.home
card:
type: map
style: |
ha-card {
box-shadow: none;
}
default_zoom: 4
filter:
include:
- entity_id: device_tracker.life360*
I hadnt, and now see I should have 
Its a bit complicated because the margins go into the mod-card style, while the box-shadow can be in the map style:
- type: custom:mod-card
card_mod:
style: |
ha-card {
margin: 0px -16px 0px -16px;
}
card:
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}}
thanks for the suggestion!
tbh, I dont remember, and I took it out just now.
if one adds this for card_header:
.card-header {background-color: var(--primary-color);}
it immediately makes clear what is happening:
thats why the header is so difficult, and I might be better of using a picture card without entitiesā¦
btw, the bottom off this stack is the full list of quakes (if there are any of course, not now, so empty Map). This is hidden in the fold-entity-row, so poses yet another challenge to get the correct mod-card syntax I still need to find:
- type: custom:hui-element
card_type: markdown
style: |
ha-card {
box-shadow: none;
}
content: >
{{state_attr('sensor.earthquakes_near','list')}}
- type: divider
- binary_sensor.earthquakes_active
- sensor.earthquakes
- type: custom:fold-entity-row
head:
type: section
label: All Quakes
padding: 0
entities:
- type: custom:hui-element
card_type: map
style: |
ha-card {
box-shadow: none;
}
# margin: 0px -16px -16px -16px;
entities:
- zone.home
geo_location_sources:
- usgs_earthquakes_feed
default_zoom: 4
bingo:
- type: divider
- binary_sensor.earthquakes_active
- sensor.earthquakes
- type: custom:fold-entity-row
head:
type: section
label: All Quakes
padding: 0
entities:
- type: custom:mod-card
card_mod:
style: |
ha-card {
margin: 0px -16px -16px -16px;
}
card:
type: custom:hui-element
card_type: map
style: |
ha-card {
box-shadow: none;
}
# margin: 0px -16px -16px -16px;
entities:
- zone.home
geo_location_sources:
- usgs_earthquakes_feed
default_zoom: 4
btw, I now see I can leave out the hui-element there too, where it needs to stay for the markdown card above it. (see post above for that)
Hello just spotted it:
Isnāt card-mod / style indentation incorrect? Shouldnāt it be?
card_mod:
style: |
ha-card {
margin: 0px -16px -16px -16px;
}
guess not, all I can say it works perfectly now on both my Maps. Maybe its a typo on Thomasās repo?
Im trying to do 2 things to the custom:fold-entity-row but i cant seem to get it to work. any help would be appreciated.
- Get rid of the divider by making the divider size 0px
- Center the label text
This is the code I have.
type: 'custom:vertical-stack-in-card'
cards:
- type: entity-filter
entities:
- input_boolean.home
- input_boolean.away
- input_boolean.extended_away
- input_boolean.guest
- input_boolean.cleaning_lady
state_filter:
- 'on'
card:
type: glance
show_state: false
show_icon: false
show_name: true
- type: 'custom:mod-card'
style: |
ha-card {
background-color: #2b374e;
}
div.divider {
height: 0px;
}
div.label {
text-align: center;
}
card:
type: 'custom:fold-entity-row'
head:
type: section
label: Mode options
entities:
- input_boolean.guest
- input_text.guest_name