Hi, is there a way to remove the light gray background of the selected part?
If I then click elsewhere in the dash it disappears.
Is it possible to remove the highlighted selection?
Now itâs like this
I would like it that way
Thanks
Use Code Inspector to find out which elementâs background needs a change.
Currently I donât have the possibility to use Code Inspector, but it should be the background when the mouse passes over it (but now I can only try from a smartphone). I tried a few times but failed.
mushroom custom title cards
and i tried but i am quite new to this and i am not really sure what i am looking for or at, which would be why i asked for help
i can still find primary-text-color in the css, but that is about where i got lost
it is the computer i cleared cache on where it no longer works
i am using the same browser on both so my guess is that is the issue there
Not using mushrooms.
Here is what you should do:
- If you need a ready answer:
â post a SHORT code of your card;
â explain what you want to achieve;
â show what you tried. - Or - using Code Inspector, localize the element you wish to style; then see in Code Inspector which property is used (which you want to override) and what value it is equal to. Then try to write a card-mod code with a defined path to the element. Post here in case of questions / failuresâŚ
@RatatoskRagnarok Mushroom uses specific nomenclature for title cards. I just answered this yesterday in the Mushroom forum found here:
type: custom:mushroom-title-card
title: Title
subtitle: Subtitle
card_mod:
style: |
ha-card {
--title-color: red !important;
--subtitle-color: blue !important;
}
For the remainder of Mushroom Cards youâll use
card_mod:
style: |
ha-card {
--card-primary-color: white !important;
--card-secondary-color: green !important;
}
In addition @Ildar_Gabdullin advice is exactly how I was able to learn how to edit rather quickly.
1 Like
I can not find. I was able to change the color of that part but not make the selection invisible. Thereâs no way to do it. 
There is an âunofficialâ rule here: if you say âI tried but failedâ - you should have posted a code which demonstrates that you really tried. Goal is to bring up âlearnersâ, not âconsumersâ.
2 Likes
The parts are mdc-tab and mdc-tabâactive.
I have done several tests, the color can be changed and it works, the transparent one also works but not as I would like. The clearer selection when tapping with your finger remains, I was unable to eliminate it.
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;}