I believe what you want to do is the opposite no?
navigation_path: >
[[[ return (window.location.pathname.split('/')[2] == 'alarm')
? '/ui-settings/alarm' : null; ]]]
No, what I need is that when the button is displayed on āalarmā (full path ā/ui-settings/alarmā)
it remains there, if not, it should navigate thereā¦
reversing the logic to:
hold-action:
action: navigate
navigation_path: >
[[[ return (window.location.pathname.split('/')[2] == 'home')
? '/ui-settings/alarm' : null; ]]]
because it either is on Home or on Alarm in the settings dashboard doesnt help.
I now see this in Chrome inspector upon holding:
does that make sense at all?
I have a full set of shortcut menu buttons using:
tap_action:
action: navigate
navigation_path: >
[[[ return (window.location.pathname.split('/')[2] == 'weer_klimaat')
? '/ui-settings/home_climate_settings' : '/lovelace/weer_klimaat'; ]]]
working as expected. Not sure why this would be different. Ive disabled the button template to be sure, but that still makes no difference.
Right, Iāve just seen the issueā¦ hold-action should be hold_action 
rightā¦ duh. so sorryā¦!Ā±
working right nowā¦
Hi!
Iām having a weird issue here. I was creating a new button card, when (to me) all of a sudden the āstylesā variables had no effect anymore. Actually they take effect, when I toggle the button. But after refreshing the site, the settings again show no effect. And this goes for all my lovelace pages, in every browser, with every user and in the app.
Iām talking about these settings:
styles:
card:
- border-radius: 15px
- font-size: 14px
- background-color: '#262626'
state:
- value: 'on'
styles:
card:
- background-color: '#4d4d4d'
It looks like this:
My compelte UI is affected by this. Can someone help here? This would be really appreciated!
Please share the full config, not just a part of it.
Also state is not supposed to be under styles but at the same level than styles.
Sorry, this was a copy-paste mistake. āstateā is indeed an the level of styles.
Should I post the complete lovelace config?
The weirdest thing is, I just used a backup of my complete HA instance from yesterday, when the issue wasnāt there, but it didnāt disapear.
Here is my config of a single button:
type: 'custom:button-card'
entity: light.buro_decke
name: Deckenlampe
tap_action:
action: toggle
hold_action:
action: fire-dom-event
browser_mod:
command: popup
title: Helligkeit & Szenen
style:
$: |
.mdc-dialog__scrim {
backdrop-filter: blur(20px) brightness(70%);
-webkit-backdrop-filter: blur(20px) brightness(70%);
}
card:
type: entities
entities:
- type: 'custom:light-popup-card'
entity: light.buro_decke
icon: []
fullscreen: false
brightnessWidth: 130px
brightnessHeight: 360px
borderRadius: 20px
sliderColor: '#c7c7c7'
sliderTrackColor: '#1a1a1a'
actionSize: 70px
actionsInARow: 3
actions:
- service: scene.turn_on
service_data:
entity_id: scene.buro_decke_konzentrieren
color: '#e6ffff'
name: konzentrieren
- service: scene.turn_on
service_data:
entity_id: scene.buro_decke_hell
color: '#ffeecc'
name: hell
- service: scene.turn_on
service_data:
entity_id: scene.buro_decke_relax
color: '#ffb31a'
name: relax
title: []
double_tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: Farbe / Temperatur
style:
$: |
.mdc-dialog__scrim {
backdrop-filter: blur(20px) brightness(70%);
-webkit-backdrop-filter: blur(20px) brightness(70%);
}
card:
type: 'custom:light-entity-card'
entity: light.buro_decke
shorten_cards: false
consolidate_entities: true
color_wheel: true
persist_features: true
brightness: true
color_temp: true
white_value: true
color_picker: true
smooth_color_wheel: true
hide_header: true
child_card: false
show_slider_percent: true
full_width_sliders: true
effects_list: false
icon: 'mdi:ceiling-light'
color: auto
show_state: false
aspect_ratio: 1/1
size: 50%
styles:
card:
- border-radius: 15%
- width: null
- height: null
- padding-bottom: 12px
- margin-left: null
- background-color: '#262626'
- font-size: 15px
state:
- value: 'on'
styles:
card:
- background-color: '#4d4d4d'
But the problem occurs at every button. Thanks in advance!
Not the complete lovelace config, the config of one of your button which doesnāt work and the button-card templates used, if any.
Remove that, those are not valid values.
Okay I removed the ānullā entries but it didnāt help. They also have been there before, when it still looked the way it should.
It seems that the behavior doesnāt affect only button-card, so thereās nothing I can do for you regarding button-card.
Maybe your theme is bugged, or one of the parent card of the buttons is (layout-card, vertical-stack-in-card, stack-in-card, etcā¦)
yeah I made a simple as possible card:
type: 'custom:button-card'
aspect_ratio: 1/1
styles:
card:
- border-radius: 15%
- background-color: '#262626'
and the problem stll is present.
It seems, that it came all of a sudden. Strangeā¦
Iām using the standard theme.
But thank you anyways.
You seem to have a lovelace addon interfering with all the cards (I can tell by how the background glitches initially), look there first (disable them one by one and see which one is the culprit)
You where right! I deleted the last one Iāve installed, which was:
now everything works again. Thanks for your expertise! It would have been hard for me to figure that out, since it didnāt stop working immediately.
is there a way to change the color of the card and the icon to 2 different colors with a state change?
There are several examples in the documentation over on github, maybe you should try that first But the answer is yes it is possible.
color_type: card
state:
- value: YOUR_STATE
color: YOUR_BACKGROUND_COLOR
styles:
icon:
- color: YOUR_ICON_COLOR
Any chance you could share more then just that one card, I"d like to shameless steal a ton of that because its simply awesome
Is there a option to get the correct brightness instead above 100%? Iām using the code below but it have a brightness between 0/255 so it shows like 144% etc, would like to have it between 0/100.
label: |
[[[
var bri = states['light.tvlamp'].attributes.brightness;
return 'Helderheid: ' + (bri ? bri : '0') + '%';
]]]
You divide it by 2.55
label: |
[[[
var bri = states['light.tvlamp'].attributes.brightness;
return 'Helderheid: ' + (bri ? Math.round(bri / 2.55) : '0') + '%';
]]]
1 Like
OC
what/which card do you want to see?