Olivier1974
(Olivier Toussaint)
August 6, 2024, 4:04pm
6831
you can also use the :host
to override system values for the card
card_mod:
style: |
:host {
--feature-border-radius: 0px !important;
}
no?
EDIT: Sorry, Iām blindly helping, I had to remove 2024.8.0b3 because Alexa Media Player is failing to initialize (since b0). So Iāve no way to test and check what Iām giving you.
1 Like
Let me test that again , I did some initial testing on that without success
Also, I think the details on the sliders donāt use that variable .
Thatās what my tile mods are a bit involvedā¦
Thanks! Iāll be back
Haha, thats a bummer indeed for many users right now.
Ive tried that again though, and no, it does not work.
I ll stick with the changes you suggested earlier, they are super reliable at this point.
Fingers crossed they dont change that again.
Olivier1974
(Olivier Toussaint)
August 6, 2024, 8:55pm
6833
It is indeed
Hi I have a fair amount of Alexa devices connected to Home Assistant. Itās worked perfectly for a long time. After a reboot completes, I can go to the Integration and āreloadā it wth no problems. Unfortunately any of my scripts using Alexa devices also pop up as an error since the integration didnāt do its thing. Log captured below. Any ideas?
Logger: homeassistant.config_entries
Source: config_entries.py:586
First occurred: 2:17:07 PM (1 occurrences)
Last logged: 2:17:07 PM
Error settiā¦
It will change again, it is always changing.
Thatās why card-mod is the best and worst tool at the same time.
It makes HA so much better and close to my liking but at every monthly release, youāve to pray for the fewer card-mod section to change
1 Like
newneo
(Neo)
August 7, 2024, 8:11am
6834
Hope Iām in the right thread here!
Please help!
How can I place and align text ācontent-textā in the middle between the images?
type: custom:button-card
entity: sensor.tennis_atp_alexander_zverev_card
name: false
show_name: false
show_state: false
show_icon: false
styles:
card:
- border-radius: 0.5rem
- overflow: hidden
- position: relative
- padding: 0
- display: flex
- flex-direction: column
- justify-content: center
- align-items: center
custom_fields:
background-images:
- position: absolute
- inset: 0
- display: flex
- justify-content: space-between
- align-items: center
- opacity: 0.3
foreground-images:
- position: absolute
- inset: 0
- display: flex
- justify-content: space-between
- align-items: center
- z-index: 1
content-text:
- position: relative
- z-index: 2
- color: white
- font-size: 1rem
- font-weight: bold
- text-align: center
- padding: 5px
- display: flex
- justify-content: center
- align-items: center
- width: 100%
- height: 100%
- box-sizing: border-box
custom_fields:
background-images: |
[[[
return `
<img src="/local/sportpng/flagen/ger.png" alt="Left Background" style="height: 10rem; width: 10rem;">
<img src="${states['sensor.tennis_atp_alexander_zverev'].attributes.opponent_logo}" alt="Right Background" style="height: 10rem; width: 10rem;">
`;
]]]
foreground-images: |
[[[
return `
<img src="/local/sportpng/zverev.png" alt="Left Foreground" style="height: 7.5rem; width: 10rem;">
<img src="https://a.espncdn.com/combiner/i?img=/i/headshots/tennis/players/full/${states['sensor.tennis_atp_alexander_zverev'].attributes.opponent_id}.png" alt="Right Foreground" style="height: 7.5rem; width: 10rem;">
`;
]]]
content-text: |
[[[
return 'Text <br/> Text <br/>';
]]]
Wrong thread, button-card has own ways to define css properties.
This is the main button-card thread.
newneo
(Neo)
August 7, 2024, 9:42am
6836
OK, thank you very much for the tip. Iāll post the request there again!
New Post for Help!
tsloms
(Tsloms)
August 7, 2024, 10:07am
6837
Dear all,
Iām trying to figure out how to implement a scrollable badge row.
(like this for example, but with badges)
Right now, if i have to many badges showing, the badges wrap around to the next row like so:
with the code like this:
type: custom:auto-entities
card:
type: custom:badge-card
state_color: true
show_name: true
show_icon: true
show_state: false
filter:
include:
- domain: binary_sensor
attributes:
device_class: smoke
state: 'on'
- domain: sensor
attributes:
device_class: battery
state: <= 50
...
I started by looking into the examples on how to adjust custom:badge-card as well as badge card here .
I found something like this, but unfortunately, it doesnt bring the effect I want:
type: custom:mod-card
card:
type: custom:badge-card
badges:
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
card_mod:
style:
badge-card:
$: |
div#badges {
color:red;
overflow-x: scroll !important;
}
instead, it looks like this:
Do you have any hints or ideas on how to achieve my goal?
Thanks in advance to anyone!
be ware that these badges are gone from 2024.8 on and replaced but the new āchipā style badges from mushroom
If you would want the keep the old style badges you can, but need a little trick, see š¹ Card-mod - Add css styles to any lovelace card - #6818 by Mariusthvdb
tsloms:
how to archive my goal
other than starting you want to scroll (which your effort apparently brings you, you didnt say what you want
tsloms
(Tsloms)
August 7, 2024, 11:18am
6839
Thanks for that hint, then I eventually have to look for another solution!
But my initial question remains: If and how it would be possible to make the badges scroll horizontally instead of wrapping to the next row.
I guess you can do that with custom Swipe card.
itās a bit picky on the settings, but given the fact this is now a custom-card, it should allow you to add as many as you like and Swipe them
Not sure if horizontal scroll in css will get you there, dont think I saw it done before. Because all of the container cards (entities, stack, and grid) have their own logic for showing endless amounts of cards, and they never cross the card-with. They either get compressed, listed or displayed on the next line
unless there would some kind of unset property in the badge-card to override the wrapping to the next line
btw overflow-x only makes the card wobblyā¦ best set it to none
tsloms
(Tsloms)
August 7, 2024, 2:10pm
6841
Thats a good hint! I experimented with it in the past but never had a good solution, because I couldnāt figure out how to combine it with custom:auto-entities
.
This for example doesnāt work:
type: custom:swipe-card
parameters:
spaceBetween: 8
effect: coverflow
grabCursor: true
centeredSlides: true
slidesPerView: 5
coverflowEffect:
rotate: 10
stretch: 0
depth: 10
modifier: 1
slideShadows: true
pagination:
type: bullets
dynamicBullets: true
start_card: 3
mode: vertical
keep:
outer_padding: false
margin: true
box_shadow: false
background: false
cards:
- type: custom:auto-entities
card:
type: custom:mushroom-entity-card
state_color: true
show_name: true
show_icon: true
show_state: false
filter:
include:
- domain: sensor
attributes:
device_class: battery
state: <= 50
But I never found a way that worked. Putting every card in separately seems a little dumb to me. Do you have any ideas about that?
All right
Iām courious if someone has some kind of badge-like header that is dynamic (like with custom:auto-entities
or else) and āhorizontally scrollableā.
you probably need to set the auto-entities to create cards (using the param: card
)
but for that you need to change to another thread, as this is about card-mod
1 Like
broyuken1
(Broyuken)
August 7, 2024, 4:37pm
6843
How would I change the icon color of the tile card? I use mushroom just about everywhere else and the icon color is blue, however the tile card has the icon color set to a yellow/orange.
features:
- type: select-options
type: tile
entity: input_select.house_mode
vertical: false
color: primary
hide_state: true
hi Iāve got a entitles card to change icon colour depending on state, I would also like to change the icons depending on state
here is my code editor view
type: entities
entities:
- entity: switch.blu_ray_player_switch_2
icon: null
card_mod:
style: |
:host {
--card-mod-icon-color:
{% if states(config.entity)=='on' %}
green
{% else %}
red
{% endif %}
}
- entity: switch.innr_sp_242_switch
card_mod:
style: |
:host {
--card-mod-icon-color:
{% if states(config.entity)=='on' %}
green
{% else %}
red
{% endif %}
}
- entity: switch.stereo_plug_switch_2
card_mod:
style: |
:host {
--card-mod-icon-color:
{% if states(config.entity)=='on' %}
green
{% else %}
red
{% endif %}
}
- entity: light.light_switch
card_mod:
style: |
:host {
--card-mod-icon-color:
{% if states(config.entity)=='on' %}
green
{% else %}
red
{% endif %}
}
- entity: switch.av_switch_2
card_mod:
style: |
:host {
--card-mod-icon-color:
{% if states(config.entity)=='on' %}
green
{% else %}
red
{% endif %}
}
show_header_toggle: false
state_color: true
theme: ios-dark-mode
card_mod:
style: |
:host ha-card
{
background-color: black; border: solid 4px white;
}
Did you find anything useful yet?
Iām having a similar problem, only with basic badge color, which isnāt working anymore with the latest update.
type: custom:hui-state-badge-element
entity: sensor.temperatura_rokova
card_mod:
style: |
:host {
--label-badge-red:
{% if as_timestamp(now()) - as_timestamp(strptime(states('sensor.datum_rokova'), "%d.%m.%Y",default='01.01.2000').strftime("%Y-%m-%d ") + states('sensor.cas_rokova')) | float(default=0) > 240 %}
purple
{% elif states('sensor.temperatura_rokova') | float(default=0) > 17.99 and states('sensor.temperatura_rokova') | float(default=0) < 28 %}
#80C884
{% elif states('sensor.temperatura_rokova') | float(default=0) > 27.99 and states('sensor.temperatura_rokova') | float(default=0) < 30 %}
orange
{% elif states('sensor.temperatura_rokova') | float(default=0) > 15.99 and states('sensor.temperatura_rokova') | float(default=0) < 18 %}
orange
{% else %}
red
{% endif %}
;
}
hold_action:
action: call-service
service: script.refresh_esp3
I must change the ālabel-badge-redā to something different, but donāt have a clue what to.
Iām also conditionally changing font size and it also doesnāt work anymore:
type: custom:hui-state-badge-element
entity: switch.robas1_local
card_mod:
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.label-badge .value {
{% if is_state((config.entity), 'off') %}
font-size: 100% !important;
{% else %}
font-size: 70% !important;
{% endif %}
}
.: |
:host {
--label-badge-red:
{% if is_state((config.entity), 'off') %}
#80C884
{% else %}
red
{% endif %}
;
}
tap_action:
action: toggle
hold_action:
action: more-info
I tried searching CSS properties of badges with Inspector in browser, but I just donāt understand enough CSS to find the solutionā¦
Faecon
(Jo)
August 8, 2024, 1:34am
6846
made this in my config.yaml
climate:
- platform: climate_group
name: "Group_airco"
temperature_unit: C
entities:
- climate.ruimte1_airco
- climate.ruimte2_airco
- climate.ruimte3_airco
- climate.ruimte4_airco
- climate.ruimte5_airco
- climate.ruimte6_airco
- climate.ruimte7_airco
- climate.ruimte8_airco
and this is my badge
card_mod:
style: |
ha-state-icon::after {
content: "{{ expand('climate.group_airco') | selectattr('state','eq','cool') | list | count }}";
this counts only to 1ā¦ What did I do wrong ?
and i want to count the cool and the heating, how do I do that ?
please do a search in the community on that exact phrase, it will get you to the answer within the first 3 listed hits
use the variable --card-mod-icon
, as its explained quite extensively in these pages and elsewhere in the community
you probably didnt search it?
why, are any of them actually in the state of ācoolā?
the template works alright
{{ expand('light.alle_binnen_lampen')
| selectattr('state','eq','on')
| list | count }}
so I guess this makes it a card-mod question on the mod itself, not the template ?
can you try with a regular string to see if it is displayed
for the other question, just add
| selectattr('state','in',['on','off'])
always use the exact state, not the frontend display of that, so, check those in /developer-tools/state
Olivier1974
(Olivier Toussaint)
August 8, 2024, 7:59am
6850
I had to revert to 2024.7 due to my intensive use of Alexa Media Player that was not working with the 2024.8 betas.
So I had to give up on that one. Pretty sure someone will come with a solution soon now that 2024.8.0 is officially out there.
1 Like