I think I figured it out. This appears to work;
} ${subButtonIcon[2].setAttribute(“icon”, hass.states[‘sensor.sunshine_mdi_icon_0’].state)} ${subButtonIcon[3].setAttribute(“icon”, hass.states[‘sensor.sunshine_mdi_icon_1’].state)}
1 Like
In other news… custom CSS style doesn’t seem to be working on the Media Player button.
As soon as I switch it to another type of button, the styling applies, but then switch it back to Media player and styling disappears.
Yes same issue on cover button type.
Another question when you select call service on a sub_button how do you select it ?
Ps: it seams that as soon i select call service in a sub_button tap action, when i edit again the card, visual editor don’t work anymore
Thank you, doesn’t work on my side strangely first part not recognise
The pop-up issue sorry.
I have my lighting-card setup with horizontal sliders. On the left hand side I have an icon with no function other than to easier differentiate the light. Sliding/swiping on the horizontal slider works good except when you try to do it on the icon on the left side. The icon acts as a clickable button, except it isn’t.
Is it possible to make the icon “invisible” to touches so you can swipe through it without any issues?
Ideally I would like to remove the power button on the right, and have the left icon be the power button, but as soon as it is on, the whole thing should act as a slider. Is this possible?
- type: grid
columns: 2
square: false
cards:
- type: custom:slider-button-card
entity: light.lilla_kokson
slider:
direction: left-right
background: gradient
use_state_color: true
use_percentage_bg_opacity: true
show_track: false
toggle_on_click: false
force_square: false
show_name: true
show_state: false
compact: true
icon:
show: true
use_state_color: false
icon: mdi:mirror-rectangle
tap_action:
action: none
action_button:
show: true
mode: custom
icon: mdi:power
show_spinner: false
tap_action:
action: toggle
service: light.kok
card_mod:
style: |
:host {
--background-color: transparent!important;
--slider-color: rgba(149, 97, 52, 0.8) !important;
}
ha-card > div > div.text {
font-weight: 600;
font-size: 14px;
margin-top: -1px;
letter-spacing: -0.2px;
}
div.icon {
margin: 4px 2px 4px 4px;
font-size: 10px;
}
ha-card > div > div.text > div {
overflow: visible;
}
ha-card {
border-radius: 26px !important;
--ha-card-background: #2b374e;
}
ha-card > div > div.action {
position: absolute;
top: 14px;
right: 9px;
font-size: 11px;
}
.slider-bg {
width: var(--slider-value) !important;
}
- type: custom:slider-button-card
entity: light.stora_kokson
slider:
direction: left-right
background: gradient
use_state_color: true
use_percentage_bg_opacity: true
show_track: false
toggle_on_click: false
force_square: false
show_name: true
show_state: false
compact: true
icon:
show: true
use_state_color: false
icon: mdi:mirror-rectangle
tap_action:
action: none
action_button:
show: true
mode: custom
icon: mdi:power
show_spinner: false
tap_action:
action: toggle
service: light.stora_kokson
card_mod:
style: |
:host {
--background-color: transparent!important;
--slider-color: rgba(202, 184, 148, 0.8) !important;
}
ha-card > div > div.text {
font-weight: 600;
font-size: 14px;
margin-top: -1px;
letter-spacing: -0.2px;
}
div.icon {
margin: 4px 2px 4px 4px;
font-size: 10px;
}
ha-card > div > div.text > div {
overflow: visible;
}
ha-card {
border-radius: 26px !important;
--ha-card-background: #2b374e;
}
ha-card > div > div.action {
position: absolute;
top: 14px;
right: 9px;
font-size: 11px;
}
.slider-bg {
width: var(--slider-value) !important;
}
Also, how do you style your sliders to look like this? With a round background on the left icon?
Does anyone know how i can change the color of the icon instead of the background color?
styles: |
.switch-button {
background-color: ${state === 'on' ? 'orange' : 'grey'} !important;
}
I’ve just tried and this is working on my side. You should have made a mistake somewhere.
You can do this like that:
.bubble-icon {
opacity: 1;
color: ${state === 'on' ? 'orange' : 'grey'} !important;
}
1 Like
Sorry for my previous post, realised that the slider I use isn’t yours.
I have a few questions about your slider. Is it possible to make it so that you have to press the icon/button to present the slider, or tap anywhere to turn the light on to the last percentage. As it is now, I am able to configure it to turn on via the button, but clicking anywhere on the slider will turn it on to the amount where I click.
I hope this makes sense?
So, are you looking for a slider that only displays the brightness but behaves like a button? If so, this is not possible at the moment.
1 Like
Something that looks like this:
When you press the icon on the left the light turns on and the slider appears. With the light turned off you cannot control the slider. So like the slider works today, except that you can only control the brightness when it is on. Maybe also make the whole slider area a button to turn the light on when it is off.
I actually started over and now the pop ups are centered. So don’t worry about that issue. The bigger one is that I can’t edit any of the pop up buttons after I initially add them. See below…
Hello, everybody !
I am trying to change the gray static background of the slider, and icons depending on the state of the entity, found in the instructions how to change the color of the slider itself, but I can not understand how to change the color of its background, tried different combinations of examples, but did not achieve the result !
Can anyone help ?
styles: |
.range-fill {
background: rgba(79, 69, 87, 1) !important;
}
.switch-button {
background-color: ${state === 'on' ? 'blue' : 'red'} !important;
}
.bubble-icon {
opacity: 1;
color: ${state === 'on' ? 'green' : 'grey'} !important;
}
This is what it looks like (
1 Like
I’m already on it, and this time I will take more time to test everything before the release.
1 Like
Thx this works but i still have 1 problem remaining… I kinda want it to be the state of an entity called light.woonkamer… Is this possible? Becouse my button entity is an temperature sensor which gives me the temp under the name which i love
@Cloos, I want to use your Bubble cards as much as possible - but love the little icons that appear when using Tile card with a Person entity. Is there a way to replicate that on the bubble card, or is that a bigger job?
In that case to get the state from any entity you can do this:
.bubble-icon {
opacity: 1;
color: ${hass.states['light.woonkamer'].state === 'on' ? 'orange' : 'grey'} !important;
}
I’ve just tried it and indeed that’s a bigger job, maybe in the future but for now I’m focusing on the last v2 issues.
1 Like
Been trying to get the weather icon template to work for me based on your code but cannot seem to get it right.
- type: custom:bubble-card
card_type: button
card_layout: large-2-rows
button_type: state
entity: weather.met_office_maidstone_daily
name: Weather
show_state: true
show_last_changed: false
sub_button:
- entity: sensor.average_temperature
icon: mdi:home-thermometer-outline
show_state: true
show_background: false
- entity: sensor.openweathermap_temperature
show_background: false
show_state: true
show_attribute: false
attribute: temperature
icon: mdi:thermometer
- entity: sensor.feels_like_today
show_background: false
show_state: true
name: Today
show_name: true
show_icon: true
show_attribute: false
- entity: sensor.feels_like_tomorrow
name: Tomorrow
show_state: true
show_background: false
show_name: true
styles: |-
.bubble-button-card-container {
background: rgba(0,190,240,0.6);
} .bubble-icon {
opacity: 1;
}
${subButtonIcon[2].setAttribute(“icon”,
getWeatherIcon(hass.states['sensor.weather.forecast_home'].state))}
${subButtonIcon[3].setAttribute(“icon”,
getWeatherIcon(hass.states['sensor.weather.forecast_home'].state))}