I’m trying to adjust the background color of my icon but can’t seem to get it to work.
I’d like to get the same round border as the mushroom cards, however I have to use a default entity card since the mushroom entity card doesn’t include a switch.
Here’s my entity:
I seem to be able to make it work in the DOM adjusting the state-badge .pointer but this doesn’t seem to work in the yaml code.
Welcome!! There isn’t a background behind the icon like Mushroom. You’d be better off doing this in a horizontal stack with a mushroom and entity card if you want the toggle. Mushroom uses tap action as a switch on the icon vs a toggle.
To actually create what you want you’ll need a few HACS modules.
Just a heads up please post your code described in #11
type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: fan.bedroom_fan
card_mod:
style: |
ha-card {
border-width: 0;
background: none;
}
- type: entities
entities:
- entity: fan.bedroom_fan
name: ' '
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
card_mod:
style: |
ha-card {
border-width: 0;
background: none;
}
This uses custom:stack-in-card
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-entity-card
entity: fan.bedroom_fan
card_mod:
style: |
ha-card {
border-width: 0;
}
- type: entities
entities:
- entity: fan.bedroom_fan
name: ' '
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
card_mod:
style: |
ha-card {
border-width: 0;
card_mod:
style: |
ha-card {
border-width: 0;
background: #696969 !important;
}
Hi, thanks for the reply!
Your answer is correct and gives (almost) the desired result. Only thing I’m not happy with right now is the outlining because of the padding the right entity uses.
I read the docs of card_mod about the shadow DOM but can’t seem to target the div element with the class .card-content
Could you assist me further?
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-entity-card
entity: input_boolean.guest_mode
secondary_info: none
card_mod:
style: |
ha-card {
border-width: 0;
}
- type: entities
card_mod:
style: |
ha-card {
border-width: 0;
}
entities:
- entity: input_boolean.guest_mode
name: ' '
card_mod:
debug: true
style:
.: |
#states {
padding: 0 !important;
}
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
I may be misunderstanding, but you’d like the border gone, correct? If I’m misinterpreting just post a pic of what you want added or removed from the card
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-entity-card
entity: input_boolean.guest_mode
secondary_info: none
card_mod:
style: |
ha-card {
border-width: 0;
}
- type: entities
card_mod:
style: |
ha-card {
border-width: 0;
}
entities:
- entity: input_boolean.guest_mode
name: ' '
card_mod:
debug: true
style:
.: |
#states {
padding: 0 !important;
}
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
card_mod:
style: |
ha-card {
border-width: 0;
}
the code below is about a question in the thread’s name, but may be this is not what you are looking for?
type: entities
entities:
- entity: sun.sun
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
background-color: rgba(255,0,0,0.2)
}
Sorry for the confusion. I’d like to remove the padding that is being set on the div id="states" class="card-content">
In order to remove the padding I’ll have to be able to target that div. In this code example I’m trying to target that div via id #states:
entities:
- entity: input_boolean.guest_mode
name: ' '
card_mod:
debug: true
style:
.: |
#states {
padding: 0 !important;
}
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
Unfortunately I’m unable to target the div and unable to remove the padding
If you are trying to remove the padding, you get to it through the card-content like this
type: entities
entities:
- entity: sun.sun
name: name
card_mod:
style:
.: |
.card-content {
padding: 4px 4px 4px 4px;
}
That’s what I thought too but it doesn’t work
entities:
- entity: input_boolean.guest_mode
name: ' '
card_mod:
style:
.: |
.card-content {
padding: 0 !important;
}
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
Does this have anything to do with it?
is this card part of a larger card?
this is the full yaml code:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-entity-card
entity: input_boolean.guest_mode
secondary_info: none
card_mod:
style: |
ha-card {
border-width: 0;
}
- type: entities
card_mod:
style: |
ha-card {
border-width: 0;
}
entities:
- entity: input_boolean.guest_mode
name: ' '
card_mod:
style:
.: |
.card-content {
padding: 4px 4px 4px 4px;
}
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
The horizontal stack appears to be causing the issue. One the Mushroom card was added, that code no longer worked. I’ll keep trying.
Is this closer to what you wanted?
Adjust margin and padding to your liking
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
tempalte: entity
entity: input_boolean.automation_menu
icon: mdi:moon-waning-crescent
icon_color: red
primary: Sun
secondary_info: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
margin: -10px 0px 0px 0px;
}
- type: entities
entities:
- entity: input_boolean.automation_menu
name: ' '
icon: ' '
card_mod:
style:
.: |
.card-content {
padding: 2px 10px 0px 2px;
}
Yes because of this answer I found the solution! I had to move the card_mod and .card-content selector to the parent to remove the padding.
Thank you!
full code
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: Gastmodus
icon: mdi:human-handsdown
entity: light.living_room
icon_color: |-
{% if is_state('input_boolean.guest_mode', 'on') %}
primary
{% endif %}
tap_action:
action: navigate
navigation_path: /dashboard-mushroom/woonkamer
double_tap_action:
action: toggle
card_mod:
style: |
ha-card {
border-width: 0;
}
:host {
--card-mod-icon:
{% if states('input_boolean.guest_mode')=='on' %}
mdi:human-handsup
{% else %}
mdi:human-handsdown
{% endif %}
}
- type: entities
card_mod:
style: |
ha-card {
border-width: 0;
}
.card-content {
padding: 0
}
entities:
- entity: input_boolean.guest_mode
name: ' '
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
