Please post the entire cardâs code. Simple things like misplaced code, typos and column errors can cause the issues you are describing.
So I understand, what section are you trying to make clear. Where the red is?
When you tap it , the color comes back correct?
No, when you tap on a section, a lighter rectangle is formed around the icon, like this:
Then if I tap another section, the lighter rectangle moves to the other section. if I then tap on any other part of the dashboard the lighter rectangle disappears, like this:
I wish that rectangle wasnât there
We are saying the same thing, so I see what you are looking for.
Try this:
type: custom:mod-card
card_mod:
style: |
tabbed-card {
--mdc-ripple-color: transparent;
}
card:
type: custom:tabbed-card
...
or w/o card-mod:
type: custom:tabbed-card
styles:
'--mdc-ripple-color': transparent
...
1 Like
Now it work, thanks!
So I have an issue, I tinkered with the code for a few days and got it to work. I accidentally deleted the card a few days later and for some reason my HA did not back up the card. So I went to create the new card, and now for some reason the slider disable option will not work. Any ideas why? I know I had to move some stuff arround but got it to work, and now I canât figure it out. Code below
Thanks.
type: thermostat
entity: climate.thermostat
name: ' '
card_mod:
style: |
:host {
--state-climate-cool-color: green;
--state-climate-heat-color: red;
}
.more-info {
width: 0;
}
ha-state-control-climate-temperature$:
ha-control-circular-slider$: |
g#interaction {
display: none !important;
}
fighting with thisâŚ
this works:
- type: custom:multiple-entity-row
entity: sensor.studenten_hygro_temp_temperature
card_mod: !include /config/dashboard/card_mods/temp_binnen_color.yaml
but how do I get that card_mod to work using the decluttering template:
card:
type: custom:multiple-entity-row
entity: sensor.[[id]]_hygro_temp_temperature
hide_unavailable: true
state_header: Temp
name: '[[name]]'
card_mod: '[[mod]]'
entities:
- entity: sensor.[[id]]_hygro_temp_humidity
name: Vocht
- entity: sensor.[[id]]_hygro_temp_battery
name: Battery
secondary_info:
entity: sensor.[[id]]_hygro_temp_signal_strength
name: Signal
and
- type: custom:decluttering-card
template: temp_humid_multiple_entity
variables:
- id: master_bedroom
- name: Master Bedroom
- mod: !include /config/dashboard/card_mods/temp_binnen_color.yaml
dont get how I should pass, or even need to, that mod from the card to the template and back again⌠cant we set the card_mod inside the decluttering and have it applied to all using that template?
even the example set by Ildar does not work so I suppose this is deprecated functionalityâŚ
really too bad, I would have loved to use the card
just adding to the above:
im not trying to have each listed entity use an individual mod. I need all entities to use the same mod (for temp icon color).
so, I figured to have that in the decluttering-template. it always works on all cards I have. decluttering was created to do this, prevent multiple copies of the exact same code, as Anchors do.
so the mod working on my top example should just workâŚon all of them⌠but it doesnt
wonder if we can somehow inspect the yaml all of these cards together make in the end to feed the dashboard. maybe its just not doing that correctly and we have a bug
it seems that the custom:mod-card uses a margin.
it is in a custom:layout-card which holds a grid (with mod-card) which was created from auto entities.
i hide empty auto entities but the margin of the mod card still shows.
how do i get rid of this margin?
my code is:
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 100%
grid-template-rows: min-content 1fr
grid-template-areas: |
"lights"
"vacuum"
"media"
"climate"
"switch"
"sensor"
"binary"
"fan"
"select"
"boolean"
cards:
- type: custom:mod-card
view_layout:
show:
mediaquery: '(min-width: 800px)'
grid-area: lights
card_mod:
style:
hui-grid-card:
$: |
.card-header {
color: #9b9b9b !important;
margin: 0px !important;
font-size: 1em !important;
font-weight: 600 !important;
padding: 0px !important;
}
card:
type: custom:auto-entities
show_empty: false
card:
type: grid
square: false
columns: 4
title: Lichter
card_param: cards
filter:
template: >-
{%- set entity_filter = '' %} {%- set domains = states.light |
selectattr('entity_id', 'in',area_entities('Wohnzimmer')) |
map(attribute='domain') | unique | list -%} {%- for domain in
domains -%} {% set entities = states |
selectattr('entity_id', 'in',area_entities('Wohnzimmer')) |
selectattr('domain', 'eq', domain) | rejectattr('entity_id', 'in',
entity_filter) | list -%}
{%- for entity in entities -%}
{{{ 'type': 'custom:mushroom-light-card',
'entity': entity.entity_id,
'use_light_color': 'true',
'show_brightness_control': 'true',
'show_color_control': 'true',
'collapsible_controls': 'true',
'show_color_temp_control': 'true', }}},
{%- endfor %}{%- endfor %}
- type: custom:mod-card
view_layout:
show:
mediaquery: '(min-width: 800px)'
grid-area: vacuum
card_mod:
style:
hui-grid-card:
$: |
.card-header {
color: #9b9b9b !important;
margin: 0px !important;
font-size: 1em !important;
font-weight: 600 !important;
padding: 0px !important;
}
card:
type: custom:auto-entities
show_empty: false
card:
type: grid
square: false
columns: 4
title: Media
card_param: cards
filter:
template: >-
{%- set entity_filter = '' %} {%- set domains = states.vacuum |
selectattr('entity_id', 'in',area_entities('Wohnzimmer')) |
map(attribute='domain') | unique | list -%} {%- for domain in
domains -%} {% set entities = states |
selectattr('entity_id', 'in',area_entities('Wohnzimmer')) |
selectattr('domain', 'eq', domain) | rejectattr('entity_id', 'in',
entity_filter) | list -%}
{%- for entity in entities -%}
{{{ 'type': 'custom:mushroom-light-card',
'entity': entity.entity_id,
'use_light_color': 'true',
'show_brightness_control': 'true',
'show_color_control': 'true',
'collapsible_controls': 'true',
'show_color_temp_control': 'true', }}},
{%- endfor %}{%- endfor %}
- type: custom:mod-card
view_layout:
show:
mediaquery: '(min-width: 800px)'
grid-area: media
card_mod:
style:
hui-grid-card:
$: |
.card-header {
color: #9b9b9b !important;
margin: 0px !important;
font-size: 1em !important;
font-weight: 600 !important;
padding: 0px !important;
}
card:
type: custom:auto-entities
show_empty: false
card:
type: grid
square: false
columns: 4
title: Media
card_param: cards
filter:
template: >-
{%- set entity_filter = '' %} {%- set domains = states.light |
selectattr('entity_id', 'in',area_entities('Wohnzimmer')) |
map(attribute='domain') | unique | list -%} {%- for domain in
domains -%} {% set entities = states |
selectattr('entity_id', 'in',area_entities('Wohnzimmer')) |
selectattr('domain', 'eq', domain) | rejectattr('entity_id', 'in',
entity_filter) | list -%}
{%- for entity in entities -%}
{{{ 'type': 'custom:mushroom-light-card',
'entity': entity.entity_id,
'use_light_color': 'true',
'show_brightness_control': 'true',
'show_color_control': 'true',
'collapsible_controls': 'true',
'show_color_temp_control': 'true', }}},
{%- endfor %}{%- endfor %}
change area_entities(âWohnzimmerâ)) to area_entities(âyour_area_roomâ)) if you want to try it
EDIT: just had to add
card_mod:
style:
hui-grid-card:
$: |
.card-header {
color: #9b9b9b !important;
margin: 0px !important;
font-size: 1em !important;
font-weight: 600 !important;
padding: 0px !important;
}
.: |
:host {margin: 0px !important;}
Hey guys, does anybody know, how to hide the attribute of my humidifier?
type: entities
entities:
- entity: humidifier.vocolinc_vhi_1fc973_humidifier
Wondering if anyone can help⌠I have spent hours trying to work out why this isnât workingâŚ
I am trying to get a mushroom-number-card to be right justified with a small width value control (see pics) and everything is working except setting mushroom-state-item$ .container.horizontal {flex: unset!important;}
1st pic shows page on load and 2nd pic shows flex attribute unchecked (set to unset gives same results) with the mushroom number card in the 2 positionsâŚ
Here is my code:
- type: custom:mushroom-number-card
entity: input_number.energy_hours
layout: horizontal
display_mode: buttons
icon: none
icon_type: none
# icon_color: primary
fill_container: false
primary_info: name
secondary_info: none
name: "Hours:"
card_mod:
style:
mushroom-card$: |
.container {
justify-content: right !important;
}
mushroom-state-item$: |
.container.horizontal {
flex: unset!important;
}
mushroom-state-info$: |
.container {
align-items: end;
margin: 6px -6px 0px 0px;
justify-content: right;
flex: unset !important;
}
mushroom-number-value-control$: |
mushroom-input-number {
--bg-color: transparent !important;
# --bg-color: red !important;
width: 90px;
display: block;
flex: unset !important;
}
.: |
ha-card {
# width: 200px;
background: none!important;
# border: none!important;
# box-shadow: none!important;
# height: 20px!important;
margin: -4px -4px 0px 0px!important;
padding: 4px 0px 0px 0px!important;
--control-height: 32px;
# align-items: justify;!important
align-self: end;!important
# flex: unset !important;
}
Add these lines under your ha-card { You should also be able to delete some of you other mod settings.
ha-card {
position: relative;
float: right;
This is probably closer to what you are trying to achieve, but @Ildar_Gabdullin may be able to offer advice on streamlining the code.
type: custom:mushroom-number-card
entity: input_number.test_level_1
layout: horizontal
display_mode: buttons
icon: none
icon_type: none
icon_color: none
fill_container: false
primary_info: name
secondary_info: none
name: "Hours:"
card_mod:
style:
mushroom-card$: |
.container {
justify-content: right !important;
}
mushroom-state-item$: |
.container.horizontal {
flex: unset;
}
mushroom-state-info$: |
.container {
align-items: end;
margin: 6px -6px 0px 0px;
justify-content: right;
flex: unset !important;
}
mushroom-number-value-control$: |
mushroom-input-number {
--bg-color: transparent !important;
--bg-color: red !important;
display: block;
}
.: |
ha-card {
position: relative;
float: right;
width: 250px;
background: none !important;
border: none !important;
box-shadow: none !important;
height: 20px !important;
margin: -4px -4px 0px 0px important;
padding: 4px 0px 0px 0px important;
--control-height: 32px;
}
An unrelated remark:
since the whole âha-cardâ part is a string (with line-breaks to look nice in a code) - you cannot comment itâs parts by using â#â.
I.e. this is wrong:
ha_card {
#color: xxx;
color: red;
}
Use â/* */â instead:
ha_card {
/* color: xxx; */
color: red;
}
1 Like
There are semi-colons in-between !important too. I was still working on the code realizing it wasnât right. Feel free to jump in.
1 Like
Yes, we should point a user at these errors, let him/her correct them. Allowing to learn is better than giving a ready solution)
1 Like
I 100% agree. I didnât see them at first, was answering via my phone.
"Give a man a fish, and you feed him for a day; teach a man to fish and you feed him for a lifetime. â
2 Likes
No, not using mushrooms (((
1 Like
Many thanks @LiQuid_cOOled and others for your help and tutelage! Only 2nd week after finding out about HA and I canât get enough!
Here is the solution that gives me the card I was looking for (feel free to continue pointing out optimizations⌠and errors!)âŚ
- type: custom:mushroom-number-card
entity: input_number.energy_hours
layout: horizontal
display_mode: buttons
icon: none
icon_type: none
# icon_color: primary
fill_container: false
primary_info: name
secondary_info: none
name: "Hours:"
card_mod:
style:
mushroom-state-info$: |
.container {
align-items: end;
margin: 2px 6px 0px 0px;
}
mushroom-number-value-control$: |
mushroom-input-number {
--bg-color: transparent !important;
# --bg-color: red !important;
}
.: |
ha-card {
position: relative;
float: right;
width: 250px;
background: none !important;
border: none !important;
height: 20px !important;
--control-height: 26px;
padding: 0px !important;
}