Use an entities card instead of vertical-in-stack. Might have better luck. Vert in stack card always causes problems every few versions
vertical-stack-in-card is the base of my interface. Removing it isn’t an option for me.
- type: custom:card-mod
card:
type: glance
style:
ha-card {
background: url('/local/capshield1-bw.png');
}
entities:
- entity: script.tvvolumeup
- entity: script.tvvolumedown
- entity: script.plexplay
- entity: script.plexpause
- entity: script.plexstop
Could someone please help I can’t get the above to work.
What am I doing wrong?
It was mine as well. You can make entities card work exactly the same as vert in card stack.
Could you show me an yaml example?
I have them in my configuration. Just click on my profile, I have a link to github there. I’m on mobile right now and can’t post an example.
1 Like
style: | and then indent the line below correctly.
1 Like
i’ve set up the following but i cant get it to work
- type: 'custom:card-mod'
card:
type: glance
style: |
ha-card {
background-image: url("/local/capshield1.png");
}
entities:
- entity: script.tvvolumeup
- entity: script.tvvolumedown
- entity: script.plexplay
- entity: script.plexpause
- entity: script.plexstop
i see this message: Cannot read property ‘setConfig’ of undefined
- type: glance
style: |
ha-card {
background: center / cover url(/local/capshield1.png) no-repeat;
}
entities:
- script.tvvolumeup
- script.tvvolumedown
- script.plexplay
- script.plexpause
- script.plexstop
2 Likes
I am trying to change font size in card thermostat. Why I need to use !important" to make it work?
entity: climate.netatmo_bedroom
style: |
ha-card {
--current-temperature-font-size: 10px !important;
}
type: thermostat
Normally in CSS more specific selectors (such as a class, or an id) will have priority. This would means that, if the CSS set the font size for anything with a certain class it would override the font size you are applying to the ha-card element. Using !important stops that happening.
See here for more details:
1 Like
I am trying to figure out how to ensure that two picture entity for my cameras cards always are always as large as possible to be viewed without scrolling whether the view window is portrait or landscape view. I am having issues with my wall mount tablet running fully kiosk browser.
I am not sure if the combination of panel: true with custom layout card is what is giving me issues, but I am stumped. It appears to not stack them vertically when the width is 800px+ on my laptop.
I have tried a handful of things, but not getting anywhere on the FKB device (running lineageos 12.1).
As you can see the camera streams would be bigger if they were stacked which is why I have been tinkering with min-heigh and vh, vw, vmin, and vmax css measurments.
I do not mind padding. I just want the cards as big as possible while maintaing their aspect ratio with respect to the view height.
# lovelace_gen
title: Cameras
panel: true
cards:
- type: custom:layout-card
column_number: 1
max_columns: 2
max_width: [100%, 100%]
cards:
- type: picture-entity
title: Front Door
entity: camera.frontdoor_camera
show_info: true
tap_action:
action: more-info
style: |
ha-card {
?????????????
}
- type: picture-entity
title: Driveway
entity: camera.driveway_camera
show_info: true
tap_action:
action: more-info
style: |
ha-card {
????????
}
Portrait mode works as expected on my phone:
My laptop works correctly in landscape also:
Tablet:
Laptop @ 802px width:
Is there a chance to color single icon by card-mod in glance card?
Something like this (but this one is not working):
entities:
- entity: sensor.load_1m
style: |
.ha-icon {
--paper-item-icon-color: red;
}
- entity: sensor.load_5m
- entity: sensor.load_15m
type: glance
Perhaps you should give the README a read?
Unfortunately, this does not work either
entities:
- entity: sensor.load_1m
style: |
:host {
--paper-item-icon-color: red;
}
- entity: sensor.load_5m
- entity: sensor.load_15m
type: glance
But anyway thank You for that hint as there is a lot of useful knowledge and people usually do not read readme.
There is some buzz that it could be v. 0.101 problem
You are right. It should be fixed now (version 8).
2 Likes
Hi
Thank you for helping but I’m still not able to get it to work.
It should work on glance cards right?
Put them in a vertical stack. No need for the custom layout card. panel: true on the vertical stack.
You can look at my github link in my profile for an example. Its my cameras view.
Yes, it works on glance card.
- title: Test Card
cards:
- type: glance
style: |
ha-card {
background: center / cover url(/local/icons/adguard_reeder.png) no-repeat;
background-size: 8em;
}
entities:
- switch.adguard_protection
- switch.adguard_filtering
- switch.adguard_query_log
- switch.adguard_safe_search
- switch.adguard_safe_browsing
2 Likes
Are you sure the URL is correct? Does it work if you access it directly?