Your indentation and syntax looks fishy. Try this:
- type: custom:hui-element
card_type: sensor
detail: 2
entity: sensor.pool_temperature
graph: line
card_mod:
style: |
ha-card {
--ha-card-background: "rgba(0, 0, 0, 0.3)";
box-shadow: none;
color: var(--primary-color);
}
.header {
display: none !important;
}
Hi @CDRX2
Thanks for helping out, I tried modifying the existing code, but that didnāt help, so then I tried copying your code in, and that made it work, not sure what I missed.
I then had to also modify the width and height, as it the card then got very narrow, so now it looks like this:
- type: custom:hui-element
card_type: sensor
detail: 2
entity: sensor.pool_temperature
graph: line
card_mod:
style: |
ha-card {
--ha-card-background: "rgba(0, 0, 0, 0.3)";
box-shadow: none;
color: var(--primary-color);
}
.header {
display: none !important;
}
style:
left: 58%
top: 38%
width: 45%
height: 25%
Which is very close to what I wanted 
Thankyou again!
Hello everyone,
I am using the fold-entity-row card and I would like to know how I can hide the āsectionā line between the different labels ?
I didnāt find any similar example, and I also tried many things without success (I am not really familiar with CSSā¦)
Thanks if you can help me!
try this:
entities:
- type: 'custom:fold-entity-row'
head:
type: section
label: some label
card_mod:
style: |
.divider {
display: none;
}
padding: 0
open: true
clickable: true
entities:
- ā¦
Thanks a lot ! I didnāt think I could place the styling under the head key.
first of all i know my code is all over the place. My preview in the code editor is completely messed up, however my card in the dashboard is fine. In the app itās messed up aswell. Can anybody explain why it only partly works?
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 8px
tap_action:
action: toggle
name: offset
show_name: false
- type: markdown
content: ' '
title: TV-Remote
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 8px
tap_action:
action: toggle
name: offset
show_name: false
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 8px
tap_action:
action: toggle
name: offset
show_name: false
- type: custom:button-card
size: 50%
offset: 20px
styles:
card:
- height: 80px
- width: 80px
icon:
- color: red
tap_action:
action: call-service
service: script.fernseher_an
service_data: {}
target: {}
icon: mdi:power
show_name: true
- type: custom:button-card
color_type: blank-card
styles:
card: null
tap_action:
action: toggle
name: offset
show_name: false
- type: custom:button-card
styles:
card:
- height: 80px
- width: 80px
tap_action:
action: call-service
service: script.fernseher_source
service_data: {}
target: {}
icon: mdi:import
show_name: false
icon_height: 50px
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 8px
tap_action:
action: toggle
name: offset
show_name: false
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 8px
tap_action:
action: toggle
name: offset
show_name: false
- type: custom:button-card
styles:
card:
- height: 80px
- width: 80px
tap_action:
action: call-service
service: script.fernseher_back
service_data: {}
target: {}
icon: mdi:arrow-left
show_name: false
icon_height: 50px
- type: custom:button-card
color_type: blank-card
styles:
card: null
tap_action:
action: toggle
name: offset
show_name: false
- type: custom:button-card
styles:
card:
- height: 80px
- width: 80px
tap_action:
action: call-service
service: script.fernseher_home
service_data: {}
target: {}
icon: mdi:home
show_name: false
icon_height: 50px
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 8px
tap_action:
action: toggle
name: offset
show_name: false
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 8px
tap_action:
action: toggle
name: offset
show_name: false
- type: custom:button-card
tap_action:
action: call-service
service: script.amazon_prime
service_data: {}
target: {}
show_name: false
icon: mdi:amazon
icon_height: 30px
- type: custom:button-card
tap_action:
action: call-service
service: script.fernseher_up
service_data: {}
target: {}
show_name: false
icon: mdi:chevron-up
icon_height: 50px
style: |
ha-card {
border-radius: 10px 10px 0 0;
}
- type: custom:button-card
tap_action:
action: call-service
service: script.netflix_2
service_data: {}
target: {}
show_name: false
icon_height: 30px
icon: mdi:netflix
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 8px
tap_action:
action: toggle
name: offset
show_name: false
- type: horizontal-stack
cards:
- type: custom:button-card
styles:
card:
- width: 52.5%
tap_action:
action: call-service
service: script.fernseher_left
service_data: {}
target: {}
icon: mdi:chevron-left
show_name: false
style: |
ha-card {
border-radius: 10px 0px 0px 10px;
height: 80%;
margin: 0% 0% 0% 5%;
border: 2px;
padding: 0 0 0 0px;
box-shadow: none;
}
- type: custom:button-card
styles:
card:
- width: 49.5%
tap_action:
action: call-service
service: script.fernseher_ok
service_data: {}
target: {}
icon: mdi:circle-outline
show_name: false
icon_height: 50px
card-mod-card: null
style: |
ha-card {
border-radius: 0px 0px 0px 0px;
height: 104%;
margin: -3% -45.5% auto;
padding-top: -1px
border: 2px;
padding: 0 0 0 0px;
box-shadow: none;
}
- type: custom:button-card
styles:
card:
- width: 52.5%
- left: '-98.6%'
tap_action:
action: call-service
service: script.fernseher_right
service_data: {}
target: {}
icon: mdi:chevron-right
show_name: false
style: |
ha-card {
border-radius: 0px 10px 10px 0px;
height: 80%;
border: 2px;
padding: 0 0 0 0px;
box-shadow: none;
}
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 8px
tap_action:
action: toggle
name: offset
show_name: false
- type: custom:button-card
color_type: blank-card
tap_action:
action: toggle
name: offset
show_name: false
- type: custom:button-card
styles:
card:
- margin: '-9.4% 0% 0% 0%'
tap_action:
action: call-service
service: script.fernseher_down
service_data: {}
target: {}
icon: mdi:chevron-down
show_name: false
icon_height: 50px
style: |
ha-card {
border-radius: 0px 0px 10px 10px;
padding: 0 0 0 0px;
box-shadow: none;
}
- type: custom:button-card
color_type: blank-card
styles:
card: null
tap_action:
action: toggle
name: offset
show_name: false
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 8px
tap_action:
action: toggle
name: offset
show_name: false
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 8px
tap_action:
action: toggle
name: offset
show_name: false
- type: custom:button-card
color_type: blank-card
styles: null
tap_action:
action: toggle
name: offset
show_name: false
- type: custom:vertical-stack-in-card
cards:
- type: custom:button-card
styles:
card:
- height: 80px
icon:
- height: 30px
tap_action:
action: call-service
service: script.fernseher_lauter
service_data: {}
target: {}
icon: mdi:volume-plus
show_name: false
icon_height: 50px
- type: custom:button-card
styles:
card:
- height: 80px
icon:
- height: 30px
tap_action:
action: call-service
service: script.fernseher_leiser
service_data: {}
target: {}
icon: mdi:volume-minus
show_name: false
icon_height: 50px
- type: custom:button-card
color_type: blank-card
styles: null
tap_action:
action: toggle
name: offset
show_name: false
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 8px
tap_action:
action: toggle
name: offset
show_name: false
No need for card-mod. You can do it with button-card, look:
(I replaced custom:vertical with generic vertical-stack because I donāt use the plugin.)
You can see the difference, the chevrons and the circle now have no box shadow anymore.
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 8px
tap_action:
action: toggle
name: offset
show_name: false
- type: markdown
content: ' '
title: TV-Remote
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 8px
tap_action:
action: toggle
name: offset
show_name: false
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 8px
tap_action:
action: toggle
name: offset
show_name: false
- type: custom:button-card
size: 50%
offset: 20px
styles:
card:
- height: 80px
- width: 80px
icon:
- color: red
tap_action:
action: call-service
service: script.fernseher_an
service_data: {}
target: {}
icon: mdi:power
show_name: true
- type: custom:button-card
color_type: blank-card
styles:
card: null
tap_action:
action: toggle
name: offset
show_name: false
- type: custom:button-card
styles:
card:
- height: 80px
- width: 80px
tap_action:
action: call-service
service: script.fernseher_source
service_data: {}
target: {}
icon: mdi:import
show_name: false
icon_height: 50px
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 8px
tap_action:
action: toggle
name: offset
show_name: false
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 8px
tap_action:
action: toggle
name: offset
show_name: false
- type: custom:button-card
styles:
card:
- height: 80px
- width: 80px
tap_action:
action: call-service
service: script.fernseher_back
service_data: {}
target: {}
icon: mdi:arrow-left
show_name: false
icon_height: 50px
- type: custom:button-card
color_type: blank-card
styles:
card: null
tap_action:
action: toggle
name: offset
show_name: false
- type: custom:button-card
styles:
card:
- height: 80px
- width: 80px
tap_action:
action: call-service
service: script.fernseher_home
service_data: {}
target: {}
icon: mdi:home
show_name: false
icon_height: 50px
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 8px
tap_action:
action: toggle
name: offset
show_name: false
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 8px
tap_action:
action: toggle
name: offset
show_name: false
- type: custom:button-card
tap_action:
action: call-service
service: script.amazon_prime
show_name: false
icon: mdi:amazon
icon_height: 30px
- type: custom:button-card
tap_action:
action: call-service
service: script.fernseher_up
show_name: false
icon: mdi:chevron-up
icon_height: 50px
styles:
card:
- border-radius: 10px 0px
- box-shadow: none
- type: custom:button-card
tap_action:
action: call-service
service: script.netflix_2
show_name: false
icon_height: 30px
icon: mdi:netflix
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 8px
tap_action:
action: toggle
name: offset
show_name: false
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: call-service
service: script.fernseher_left
icon: mdi:chevron-left
show_name: false
styles:
card:
- border-radius: 0px 10px 10px 0px
- border: 2px
- padding: 0
- box-shadow: none
- type: custom:button-card
tap_action:
action: call-service
service: script.fernseher_ok
icon: mdi:circle-outline
show_name: false
icon_height: 50px
styles:
card:
- border-radius: 0px
- border: 2px
- padding: 0
- box-shadow: none
- type: custom:button-card
tap_action:
action: call-service
service: script.fernseher_right
icon: mdi:chevron-right
show_name: false
styles:
card:
- border-radius: 0px 10px 10px 0px
- border: 2px
- padding: 0
- box-shadow: none
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 8px
tap_action:
action: toggle
name: offset
show_name: false
- type: custom:button-card
color_type: blank-card
tap_action:
action: toggle
name: offset
show_name: false
- type: custom:button-card
tap_action:
action: call-service
service: script.fernseher_down
icon: mdi:chevron-down
show_name: false
icon_height: 50px
styles:
card:
- border-radius: 0px 10px 10px 0px
- border: 2px
- padding: 0
- box-shadow: none
- type: custom:button-card
color_type: blank-card
tap_action:
action: toggle
name: offset
show_name: false
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 8px
tap_action:
action: toggle
name: offset
show_name: false
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 8px
tap_action:
action: toggle
name: offset
show_name: false
- type: custom:button-card
color_type: blank-card
styles: null
tap_action:
action: toggle
name: offset
show_name: false
- type: vertical-stack
cards:
- type: custom:button-card
styles:
card:
- height: 80px
icon:
- height: 30px
tap_action:
action: call-service
service: script.fernseher_lauter
service_data: {}
target: {}
icon: mdi:volume-plus
show_name: false
icon_height: 50px
- type: custom:button-card
styles:
card:
- height: 80px
icon:
- height: 30px
tap_action:
action: call-service
service: script.fernseher_leiser
service_data: {}
target: {}
icon: mdi:volume-minus
show_name: false
icon_height: 50px
- type: custom:button-card
color_type: blank-card
tap_action:
action: toggle
name: offset
show_name: false
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 8px
tap_action:
action: toggle
name: offset
show_name: false
Yeah the thing is I donāt want seperate buttons, I want them to touch each other so they look like a dpad (like on real tv remotes). My problem is when I do it with absolute values (px) itās fine in the editor but not oin my phone and not on my dashboard, when I do height and with relative values (%) I have the same problem like you can see in the previous post.
But I will later try to bring the middle row together with a custom:vertical-stack-in-card and just increase the height of up and down and push them together with margin
This didnāt work. Does anyone have any ideas what else I could try to make a d pad?
Hope I can get some help here. iām trying to get to style the lock icon in this card (align it all the way to the right). Itās this propoerty according to the restriction card documentation: restriction-lock-margin-left
My card:
type: custom:restriction-card
restrictions:
confirm:
text: Ventilatie aanpassen?
card:
type: custom:slider-button-card
entity: fan.mechanische_ventilatie
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: true
compact: true
icon:
show: true
use_state_color: false
tap_action:
action: more-info
action_button:
mode: custom
icon: mdi:power
show: false
show_spinner: true
tap_action:
action: none
name: Ventilatie
I tried a couple of things to no avail (all at the top ident level):
card_mod:
style: |
:host: {
--restriction-lock-margin-left: 95%;
}
card_mod:
style: |
restriction-card:
$:
div:
div#overlay: {
--restriction-lock-margin-left: 95%;
}
And quite a lot more, all to no avail. Thanks in advance!
Wrong syntax, remove the 2nd ā:ā after ā:hostā.
Wrong syntax:
These observations are only about syntax, did not check your other code.
How can I remove those borders (I highlighted them manually RED in the screenshot) created by custom:auto-entities card?
Tried a few things already, unfortunately e. g. a simple border: 0px; applied to every ha-card has no effect 
HereĀ“s full code:
type: entities
title: šŖ TĆ¼ren, Fenster & Co
state_color: true
show_header_toggle: false
entities:
- type: custom:auto-entities
card:
type: entities
title: TĆ¼ren
state_color: true
show_header_toggle: false
card_mod:
style:
.: |
.card-header {
font-size: 17px;
padding: 5px;
padding-top: 0px;
margin-left: 20px;
}
ha-card {
margin-left: -15px;
margin-top: -20px;
margin-bottom: -25px;
}
entities: []
filter:
include:
- domain: binary_sensor
attributes:
device_class: door
state: 'on'
options:
secondary_info: last-changed
show_empty: false
unique: true
sort:
method: last_changed
reverse: true
- type: custom:auto-entities
card:
type: entities
title: Fenster
state_color: true
show_header_toggle: false
card_mod:
style:
.: |
.card-header {
font-size: 17px;
padding: 5px;
padding-top: 0px;
margin-left: 20px;
}
ha-card {
margin-left: -15px;
margin-top: -20px;
margin-bottom: -25px;
}
entities: []
filter:
include:
- domain: binary_sensor
attributes:
device_class: window
state: 'on'
options:
secondary_info: last-changed
show_empty: false
unique: true
sort:
method: last_changed
reverse: true
- type: custom:auto-entities
card:
type: entities
title: Garagentore
state_color: true
show_header_toggle: false
card_mod:
style:
.: |
.card-header {
font-size: 17px;
padding: 5px;
padding-top: 0px;
margin-left: 20px;
}
ha-card {
margin-left: -15px;
margin-top: -20px;
margin-bottom: -25px;
}
entities: []
filter:
include:
- domain: binary_sensor
attributes:
device_class: garage_door
state: 'on'
options:
secondary_info: last-changed
show_empty: false
unique: true
sort:
method: last_changed
reverse: true
- type: custom:auto-entities
card:
type: entities
title: RolllƤden
state_color: true
show_header_toggle: false
card_mod:
style:
.: |
.card-header {
font-size: 17px;
padding: 5px;
padding-top: 0px;
margin-left: 20px;
}
ha-card {
margin-left: -15px;
margin-top: -20px;
margin-bottom: -25px;
}
entities: []
filter:
include:
- domain: cover
attributes:
device_class: blind
state: open
options:
secondary_info: last-changed
show_empty: false
unique: true
sort:
method: last_changed
reverse: true
- type: custom:auto-entities
card:
type: entities
title: Sonstige
state_color: true
show_header_toggle: false
card_mod:
style:
.: |
.card-header {
font-size: 17px;
padding: 5px;
padding-top: 0px;
margin-left: 20px;
}
ha-card {
margin-left: -15px;
margin-top: -20px;
margin-bottom: -25px;
}
entities: []
filter:
include:
- entity_id: '*.contact_*'
state: 'on'
options:
secondary_info: last-changed
exclude:
- domain: binary_sensor
or:
- attributes:
device_class 1: door
- attributes:
device_class 2: window
- attributes:
device_class 3: garage_door
show_empty: false
unique: true
sort:
method: last_changed
reverse: true
Thanks for the help. Unfortunately I donāt manage to find the proper way to set the margin. The absolute DOM path of the icon is the following:
/html/body/home-assistant//home-assistant-main//app-drawer-layout/partial-panel-resolver/ha-panel-lovelace//hui-root//ha-app-layout/div/hui-view/hui-masonry-view//div/div[2]/restriction-card//div/div[1]/ha-icon
I tried with:
card_mod:
style:
&
style:
No clue what the difference is BTW.
I tried with
:host,
restriction-card,
ha-icon,
div#overlay,
div#overlay>ha-icon,
div>div#overlay>ha-icon
And the full relative paths
"restriction-card":
$: |
div>div#overlay
"restriction-card":
$: |
div>div#overlay>ha-icon
And with styles:
ārestriction-lock-margin-left
ārestriction-lock-row-margin-left
ālock-margin-left
ālock-row-margin-left
margin-left
Nothing worked
When inspecting I can change the layout:
ha-card {
margin-left: -15px;
margin-top: -20px;
margin-bottom: -25px;
box-shadow: none;
}
Would anyone know if itās at all possible to change the max height of the selection window of input_select entities? Iām talking about this popup window:
I want to set a max height. I have a sticky footer in my dashboard, but then the windows goes under my sticky footer if the window is too large (due to many options), which means I canāt select the bottom options. Or would someone know a way to make sure the popup window goes over the sticky footer? I tried setting z-index: 1000 for the input_select (the sticky footer is 999), but that didnāt work.
Open to any suggestions !
You may play with these vars:
type: vertical-stack
title: Listbox
cards:
- type: entities
title: All items
entities:
- entity: input_select.test_sensors_for_graph
card_mod:
style: |
:host {
--paper-font-subhead_-_line-height: 30px;
--paper-item-min-height: 20px;
}
P.S. Added this example here.