Have you addred browser_mod: to your configuration.yaml?
Canāt see it
Okay that is missing - where do I add this? Where was that explained? Thanks a lot!
Yes, installed via HACS.
I have tried with 3 popup variables. Still not working.
Regarding browser_mod line in configuration.yaml - Yes, itās added.
In the installation instructions of browser_mod 
thomasloven/hass-browser_mod: 
A Home Assistant integration to turn your browser into a controllable entity - and also an audio player (github.com)
ĀÆ_(ć)_/ĀÆ Strange. If you want you can create an issue on our github repo. There, such errors can be tracked and documented a bit better than here in the forum where everything gets mixed up.
Added the integration via HACS, added the line into the config.yaml - no change, same error
I am probably missing something simple but when I try to add any of the Slider cards to my dashboard I get an error. When I view the dashboard the button loads the brightness percentage and the name but displays an error message like āCustom Element doesnāt exist:my-sliderā¦ā.
Any ideas?
Seems to be an IOS issue:
On IOS sliding starts by pressing the thumb, which is reduced to 0px in the template.
Thatās why it could not work.
The solution is to make it wider but it is now visible. I use default value (25px)
type: "custom:my-slider"
entity: "[[[ return entity.entity_id ]]]"
radius: 14px
height: 42px
mainSliderColor: rgba(var(--color-yellow),1)
secondarySliderColor: rgba(var(--color-yellow),0.2)
mainSliderColorOff: rgba(var(--color-theme),0.05)
secondarySliderColorOff: rgba(var(--color-theme),0.05)
thumbVerticalPadding: "5px"
# thumbWidth: 0px (default 25px)
thumbHeight: 42px
card_mod:
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
}
2 Likes
Hey all,
I know the guy that put together the wiki is gone now. Do we have a list of all the cards somewhere. I see people talking about pull requests ect. But is there a list of whats been added?
Thanks! 
Yeah, weāre working on a solution.
Here are all the current custom_cards:
2 Likes
Thats awesome!
Thank you
Finally, itās working. Thank You for your advice.
Anyway, gotta ask how to get instant working background color swaps etc? like for normal light_card or power_outlet
Iām using below code but I need to manually refresh to see changes (I spent hour thinking - why itās not working 
)
state:
- operator: template
value: "[[[ return states[variables.humidifier].state == 'on' ]]]"
styles:
icon:
- color: "rgba(var(--color-yellow),1)"
label:
- color: "rgba(var(--color-yellow-text),1)"
name:
- color: "rgba(var(--color-yellow-text),1)"
img_cell:
- background-color: "rgba(var(--color-yellow), 0.2)"
card:
- background-color: "rgba(var(--color-background-yellow),var(--opacity-bg))"
Nevermind, adding below solved all issues
triggers_update: "all"
Does your card include?:
triggers_update: "all"
Because your are using the state of a variable the button-card needs to trigger updates.
If your value is based on your entity it auto-triggers, but than you can use:
state:
- value: "on"
Yup, it worked like a charm - edited post like 2 minutes before your post.
Change of styles is working nice but itās for - letās say button only. What if I would like to swap color of entire card? Can I use above code (itās giving me error currently). I want something working like card_light if itās possible in custom_card.
Can you share the full code of the card you want to change? This makes it easier to help you. You can apply styles on item-level as I think your are doing now without affecting the underlying card.
Itās test card for Humidifier with selecting Mode (lvl 1,2,3)
As You can see itās working okay but want to have more control over colors especially I want to know how to color background of whole card like in light_card.
card_humidifier:
triggers_update: "all"
styles:
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
custom_fields:
item1:
card:
type: 'custom:button-card'
label: '[[[ return states[variables.water_lvl].state ]]]'
template:
- ulm_language_variables
name: 'Nawilżacz'
icon: 'mdi:air-humidifier'
color: var(--google-grey)
show_icon: true
show_label: true
show_name: true
size: 20px
state:
- operator: template
value: "[[[ return states[variables.humidifier].state == 'on' ]]]"
styles:
icon:
- color: "rgba(var(--color-yellow),1)"
label:
- color: "rgba(var(--color-yellow-text),1)"
name:
- color: "rgba(var(--color-yellow-text),1)"
img_cell:
- background-color: "rgba(var(--color-yellow), 0.2)"
card:
- background-color: "rgba(var(--color-background-yellow),var(--opacity-bg))"
styles:
icon:
- color: "rgba(var(--color-blue),1)"
label:
- justify-self: start
- align-self: start
- font-weight: bolder
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
name:
- align-self: end
- justify-self: start
- font-weight: bold
- font-size: 14px
- margin-left: 12px
state:
- justify-self: start
- align-self: start
- font-weight: bolder
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
img_cell:
- background-color: "rgba(var(--color-blue),0.2)"
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
grid:
- grid-template-areas: '"i n" "i l"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content min-content
card:
- border-radius: 21px 8px 8px 21px
- box-shadow: none
- padding: 0px
tap_action:
action: call-service
service: humidifier.toggle
service_data:
entity_id: humidifier.zhimi_ca4_a088_humidifier
item2:
card:
type: 'custom:button-card'
template: list_items
custom_fields:
item1:
card:
type: 'custom:button-card'
template: widget_icon
icon: 'mdi:numeric-1-box'
tap_action:
action: call-service
service: humidifier.set_mode
service_data:
entity_id: humidifier.zhimi_ca4_a088_humidifier
mode: Level1
state:
- operator: template
value: "[[[ return states[variables.humidifier].attributes.mode == 'Level1' ]]]"
styles:
icon:
- color: "rgba(var(--color-yellow),1)"
label:
- color: "rgba(var(--color-yellow-text),1)"
name:
- color: "rgba(var(--color-yellow-text),1)"
img_cell:
- background-color: "rgba(var(--color-yellow), 0.2)"
card:
- background-color: "rgba(var(--color-background-yellow),var(--opacity-bg))"
item2:
card:
type: 'custom:button-card'
template: widget_icon
icon: 'mdi:numeric-2-box'
tap_action:
action: call-service
service: humidifier.set_mode
service_data:
entity_id: humidifier.zhimi_ca4_a088_humidifier
mode: Level2
item3:
card:
type: 'custom:button-card'
template: widget_icon
icon: 'mdi:numeric-3-box'
tap_action:
action: call-service
service: humidifier.set_mode
service_data:
entity_id: humidifier.zhimi_ca4_a088_humidifier
mode: Level3
The full card color can be controlled with:
card_humidifier:
triggers_update: "all"
styles:
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
state:
- operator: template
value: "[[[ return states[variables.your_variable].state ]]]"
styles:
card:
- background-color: "your_color"
In your code you only specify changeable styles to your individual items. With this addition your adding changeable styles to your āmain_cardā.
