Hi @thomasloven,
do you have any idea, how to solve that problem: https://github.com/thomasloven/lovelace-card-mod/issues/11
I’d love to do what noxhirsch did and reduce the size of the markers to get a better view on the exact position with small cards. In original size, the markers overlay a lot of the card 
Thanks!
I do also have problem still
this
- entity: sensor.netatmo_na_dole_temperature
style: |
:host {
--paper-item-icon-color:
{% if states(sensor.netatmo_na_dole_temperature) | int < 19 %}
green
{% else %}
orange
{% endif %}
;
}
produce this (no color change)
and this
- entity: sensor.netatmo_na_dole_temperature
style: |
:host {
--paper-item-icon-color:
{% if states.sensor.netatmo_na_dole_temperature | int < 19 %}
green
{% else %}
orange
{% endif %}
;
}
produce that
Pay attention how “<” work in this case
2 Likes
{% if states.sensor.netatmo_na_dole_temperature.state | int < 19 %}
with .state at the end works better
2 Likes
The map card works in mysterious ways. I’m trying to come up with something, but it’s fighting back.
2 Likes
I’m really struggling with this.
i copied your settings and picked a image that is already being used by a standard glance card, so I know the link is correct
- title: Test Card
cards:
- type: glance
style: |
ha-card {
background: center / cover url(/local/server.png) no-repeat;
background-size: 8em;
}
entities:
- entity: script.tvvolumeup
I have the following in my raw file
resources:
- type: module
- url: /community_plugin/lovelace-card-mod/card-mod.js
yet it still doesn’t work
when i check the console I see the following
<script async="" type="module" src="https://home.mydomain.com/undefined"></script>
here is the full view
cch:
swipe: true
swipe_amount: 20
swipe_animate: fade
voice: hide
resources:
- type: module
- url: /community_plugin/lovelace-card-mod/card-mod.js
- type: module
url: /local/fold-entity-row.js
- type: module
url: /local/mini-media-player-bundle.js?v=0.9.7
- type: module
url: /local/button-card.js
- type: js
url: /local/alarm_control_panel-card.js?v=5
- type: module
url: /community_plugin/lovelace-fold-entity-row/fold-entity-row.js
- type: module
url: /community_plugin/compact-custom-header/compact-custom-header.js
Try removing the dash (-) before url: /community_plugin/lovelace-card-mod/card-mod.js
So your code would look something like this:
resources:
- type: module
url: /community_plugin/lovelace-card-mod/card-mod.js
1 Like
okay I don’t know how added that dash I’ve removed it and can see it loads in the console, yet I still can’t get it to load.
I’ll go back to the drawing board with it all.
thank you for helping out
are you clearing the cache and reloading your page? CTRL+F5? Is your URL correct? Add a ? to the end of your URL to ensure updates to the js on cache-refreshes.
1 Like
I’ve done that and I’m still not able to get it to load
screenshot what you get out.
- type: glance
style: |
ha-card {
background: center / cover url(/local/Plex.jpg) no-repeat;
}
entities:
- script.tvvolumeup
- script.tvvolumedown
- script.plexplay
- script.plexpause
- script.plexstop
remove the - before type. You gotta let people know you’re using the built in lovelace editor. It’s more particular with configurations. All the code you’ve been given assumes you’re using yaml mode.
type: glance
style: |
ha-card {
background: center / cover url(/local/Plex.jpg) no-repeat;
}
entities:
- script.tvvolumeup
- script.tvvolumedown
- script.plexplay
- script.plexpause
- script.plexstop
And just to clarify. A minus insinuates a list or collection of items. This is a configuration for a single card, does a minus sign make sense for a single item?
1 Like
i had no idea
thank you for the information. i really appericate it
I am not feeling the love, unfortunately. The card-mod works with the standard entity-card. Trying to get the auto-entities card working, within the standard entity-card or as standalone, with the card-mod does not work. Am I looking for love the wrong place?
https://github.com/thomasloven/lovelace-auto-entities#filters
Additional per-entity options, such as style, are specified under options:.
I appreciate your process! Getting it to work with something simpler first is just the way to go, and something I see much less than I would have liked…
2 Likes
@petro, wouldn’t that make them always stack on top of each other? On my landscape devices I would will like them side by side.
Yes, it will stack them. You won’t be able to do a some landscape and some stacked. It’s one or the other. If your screens are high dpi, then they’ll always be landscape unless you force it to be vertical.
well, I’d like to have a card, (or button for that matter) which shows an icon and a name ( for the slider) on one line, above the slider, showing its state at the end.
using the code posted few posts above, and you style:
- type: custom:vertical-stack-in-card
cards:
- type: markdown
style: |
ha-card {
color: grey;
font-weight: bold;
font-family: Helvetica;
font-size: 13px;
}
content: |
<ha-icon icon='mdi:home-assistant'></ha-icon> Delayed startup
- type: custom:slider-entity-row
style: |
host: {
display: block;
margin-right: 10px;
}
entity: input_number.ha_delayed_startup
full_row: true
results in
The style for the slider-entity-row seems not to work, tried a few more, and the font for the slider seems so off, and unlike anything else in HA…
Make sure you have the latest versions of everything involved.
There was a bug at some point around 0.101 which could make things in entities cards not squish and stretch correctly.
You may also want to check out dummy-entity-row.
I am still trying to figure out how to max a card keep a set aspect ratio, but have the cards be large as possible without requiring scrolling dependent on the screen orientation.
If landscape, then width = 50vw, and height = 28.125vh
OR
if portrait, then width = 100vw, and height = 56.25vh
I’ve figured out how to stack them easily, but cannot figure out how to get them side by side or at least how to center the stack so I do not have to use panel: true. If I remove the panel:true option the cards are left aligned to the edge of the cards normal width.
Code wise I currently have:
title: Cameras
panel: true
cards:
- type: vertical-stack
# type: custom:layout-card
# column_number: 1
# max_columns: 2
# min_height: 1
cards:
- type: picture-entity
title: Front Door
entity: camera.frontdoor_camera
show_info: true
aspect_ratio: 16:9
tap_action:
action: more-info
style: |
ha-card {
--height-cctv: calc(50vh - 40px);
--width-cctv: calc(var(--height-cctv) / 9 * 16);
height: var(--height-cctv);
width: var(--width-cctv);
}
- type: picture-entity
title: Driveway
entity: camera.driveway_camera
show_info: true
aspect_ratio: 16:9
tap_action:
action: more-info
style: |
ha-card {
--height-cctv: calc(50vh - 40px);
--width-cctv: calc(var(--height-cctv) / 9 * 16);
height: var(--height-cctv);
width: var(--width-cctv);
}
I would like to accomplish for landscape:
and his in a portrait orientation:
Is there anyway to accomplish with cardmod? Or is being orientation aware simply not possible.