By the way, I don’t know what to put in the tap_action if it’s not filled automatically by default?
I saw only that code you posted - and this is not a code of the whole card, just a code for “tap_action”.
As well as this new code - this is a part related to a “srtrelatslct” custom field inside some unknown button-card.
And this part contains the misplaced “styles” part from my example.
And since this part is misplaced - you are getting a wrong result.
I would suggest to test with simple cards and proceed with complex cases step by step.
You’re right, the code was misplaced, thanks for the tip!
Now I managed to hide some items, but I would like to reduce the space between the options. What is the property I need to change?
My code is the following:
srtrelatslct:
card:
type: "entities"
entities:
- "[[[ return variables.var_startinrelative_slct_entity ]]]"
card_mod:
style: |
ha-card {
--ha-card-background: transparent;
box-shadow: none;
border: none;
--mdc-icon-size: 0px;
--mdc-select-label-ink-color: transparent;
--mdc-theme-primary: transparent;
--mdc-select-disabled-ink-color: transparent;
}
The idea is to hide everything except the down arrow and the selectable options. I still didn’t manage to hice the lower line of the dropdown text…
What is an “option”? Post a picture.
The space between the times: 0:00, 0:30, 1:00, 1:30 … of the dropdown. It would be nice to make a smaller space…
Ask in the card-mod thread.
OK. For the 2nd question, what I mean is whether there is a card that does exactly what the standard dropdown does, but with easier to configure styles?
Hello I don’t know why but the dashboard always shows: "No card type found
I installed Button Card via HACS, it is also available in the resources and I restarted.
- type: custom:button-card
entity: light.am_bett_licht
icon: mdi:home
color: auto
color_type: card
tap_action:
action: more-info
name: Home
styles:
card:
- font-size: 12px
- font-weight: bold
I found the problem solved, it was due to the formatting. Sorry.
I have a dynamic sidebar on my home view, which is inspired by https://github.com/matt8707/hass-config/blob/f836da87f5d4dced111c4fbea709adbdcebc95fd/sidebar.yaml
The sidebar includes info such as cheapest petrol in the area, what meal is on the planner tonight, etc.
In my sensor template I’ve set up anchor tags eg <a href="/lovelace/recipe">Latest Recipe</a> in order to add contextual information.
The config is all in place, I’ve set up all the anchors - I just can’t get them to work on the front end. I’ve the card set to tap action: none, and I can’t have the tap action just do one thing because there are a number of these contextual links.
I can see that css is set to disable pointer events, but when I turn them back on I can see the ripple effect but the links dont actually do anything.
Has anyone had luck getting anchor tags to work in a custom button card?
Hi Mates,
my card sometimes does not update:
button_card_templates:
roomcard:
variables:
temp_entity: null
humi_entity: null
setTemp_entity: null
valve_entity: null
window_open_entity: null
lights_on_entity: null
group_expand: true
triggers_update: >-
[[[
const res = [variables.temp_entity, variables.humi_entity,
variables.setTemp_entity, variables.valve_entity,
variables.window_open_entity, variables.lights_on_entity].filter(i =>
!!i); console.log(res); return res; ]]]
So the question is: Is templating in triggers_update not supported?
The lights_on_entitiy ist mostly a group a lights.
**Solved**
The return value of triggers_update can not handle arrays so
triggers_update:
- '[[[ return variables.temp_entity ]]]'
- '[[[ return variables.humi_entity ]]]'
does work
Hello everyone,
Is it possible to integrate a kind of slider in this button card that enables brightness control of the lamp? It does not necessarily have to be a slider. As long as the brightness can be regulated and visualized, I am very open to creative ideas. (I was thinking of slightly graying out the card every 10% difference in brightness for visualization purposes. Since the color of the card adapts to the lamp color, this must be retained. The size of the card must also remain the same and cannot change, as it is precisely fitted to the layout of my dashboard
PS: In principle, I would prefer to implement it as in the slider button card by mattieha, without changing my card design
Here is the Card with code:
type: custom:button-card
icon: phu:play
aspect_ratio: 1/1
show_name: false
entity: light.hue_play_2
tap_action:
action: toggle
hold_action:
action: more-info
styles:
card:
- border-radius: 24px
- background-color: |
[[[
if (states['light.hue_play_2'].state == 'on') {
const rgb = states['light.hue_play_2'].attributes.rgb_color;
return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
}
return 'var(--contrast10)';
]]]
icon:
- color: var(--black)
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
view_layout:
grid-column: 2
grid-row: 3
Thank you already
Thanks, but as I already mentioned, unfortunately that doesn’t work because the slider button card changes my design too much. Unfortunately, since I’m currently creating a dashboard based on colors, this isn’t a solution for me. unless there is a way to just insert the slider into the existing button card.
I replied to you, a post below yours
You can always stack multiple cards. This is a button card and the big slider card
With a negative top margin you can give the illusion that the slider is part of the card.
2 Likes
That’s exactly what I was looking for 
Thank you so much, I’ll try it today
Based on the picture you sent me, I conclude that you have already tested it. Unfortunately, I can’t manage to integrate the big-slider the way you did.
Would you be so kind as to share the code with me? I would be really grateful
ok, the lesson I learned today: Don’t give up too soon =) i managed to make them like you. Thanks again I really appreciate your help
type: vertical-stack
cards:
- type: conditional
conditions:
- condition: state
entity: input_boolean.dashboard_condition_wohnzimmer
state: 'on'
card:
type: custom:button-card
icon: hue:table-wash
aspect_ratio: 1/1
show_name: false
entity: light.ball
tap_action:
action: toggle
hold_action:
action: more-info
styles:
card:
- border-radius: 24px
- background-color: |
[[[
if (states['light.ball'].state == 'on') {
const rgb = states['light.ball'].attributes.rgb_color;
return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
}
return 'var(--contrast10)';
]]]
icon:
- color: var(--black)
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:big-slider-card
entity: light.ball
attribute: brightness
text_color: rgba(0,0,0,0)
icon_color: rgba(0,0,0,0)
card_mod:
style: |
:host {
margin-top: -69px !important;
--card-background-color: rgba(255, 255, 255, 0);
--ha-card-background: rgba(0, 0, 0, 0);
--ha-card-box-shadow: none;
}
view_layout:
grid-column: 4
grid-row: 3
2 Likes
Looks great! I’m a bit curious what your entire dashboard looks like.
This was my big slider code. The background color match was the only major difference in our cards.
- type: custom:big-slider-card
entity: light.pc_hue_bar
attribute: brightness
height: 40
colorize: true
border_style: none
border_radius: 4px 4px 4px 4px
background_color: |
'{{ '#%02x%02x%02x' % state_attr('light.pc_hue_bar', 'rgb_color') }};'
icon: ' '
name: ' '
card_mod:
style: |
ha-card {
margin-top: -100px;
}
view_layout:
grid-column: 4
grid-row: 3