Slider was changed recently in Frontend, so probably some styles described in my post stopped working and need to be revised.
Means - do not try blindly copy-paste them; use Code Inspector and make necessary changes.
for now i have the button and slider at place where i wanted them 
type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: entities
entities:
- type: divider
- entity: sensor.temperatuur_sensor_toilet_air_temperature
name: Toilet Temperatuur
icon: mdi:thermometer
- entity: switch.smart_switch_ir_paneel_toilet
name: Infrarood verwarming
icon: mdi:heat-wave
- type: divider
title: Toilet
icon: hue:room-toilet
state_color: true
card_mod:
class: content-entities
style: |
ha-icon {
--mdc-icon-size: 29px;
}
- type: button
tap_action:
action: toggle
entity: switch.smart_switch_ir_paneel_toilet
name: Switch IR Verwarming (Toilet)
show_name: true
show_icon: true
show_state: true
icon: mdi:heat-wave
card_mod:
class: content-button
- type: horizontal-stack
cards:
- type: custom:button-card
entity: >-
input_boolean.smart_switch_ir_paneel_toilet_power_on_off_at_target_temperature
name: Automatische Temperatuur
icon: mdi:gauge
tap_action:
action: toggle
hold_action:
action: none
show_name: false
show_state: true
show_entity_picture: false
show_icon: true
card_mod:
class: content-button
styles:
card:
- height: 70px
- margin: 0px
img_cell:
- align-self: start
- position: relative
- margin: '-20px 0px 0px 0px'
state:
- align-self: start
- position: absolute
- font-size: 14px
- font-family: Sans-serif
- font-color: rgba(255, 0, 0, 0.8)
- text-transform: capitalize
- margin: 15px 0px 0px 0px
icon:
- width: 32px
- type: entities
entities:
- entity: input_number.target_temperature_toilet
card_mod:
style:
hui-generic-entity-row:
$: |
.info {
display: none;
}
state-badge {
display: none;
}
.: |
ha-slider {
max-width: unset !important;
margin: 0px 204px 0px 0px;
position: absolute;
}
.flex .state {
position: absolute;
margin: 0px 132px 0px 0px;
text-align: end;
font-size: 16px;
}
ha-slider {
{% set WIDTH = states("input_number.target_temperature_toilet")|int(0) %}
width: {{250}}px !important;
max-width: unset !important;
}
card_mod:
class: content-entities
- type: vertical-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.smart_switch_ir_paneel_toilet_electric_consumption_w
name: Huidig gebruik
icon: mdi:flash
columns: '1'
direction: right
height: 40px
decimal: '0'
min: '0'
max: '3000'
unit_of_measurement: W
positions:
icon: outside
indicator: outside
name: inside
minmax: 'off'
value: inside
severity:
- from: '0'
to: '100'
color: green
- from: '100'
to: '750'
color: yellow
- from: '750'
to: '1500'
color: orange
- from: '1500'
to: '3500'
color: red
- from: '3500'
to: '15000'
color: '#820914'
entity_row: true
style: |
ha-card {
margin: 0px 55px 0px 5px;
box-shadow: none;
border: 0px;
--ha-card-border-width: 0px;
}
.card-content {
padding: 10px 10px 5px 10px !important;
box-shadow: none;
}
- type: custom:bar-card
entities:
- entity: sensor.ir_paneel_toilet_daily_energy_w
name: Vandaag gebruikt
icon: mdi:meter-electric
columns: '1'
direction: right
height: 40px
decimal: '0'
min: '0'
max: '10000'
unit_of_measurement: W
positions:
icon: outside
indicator: outside
name: inside
minmax: 'off'
value: inside
severity:
- from: '0'
to: '2000'
color: green
- from: '2000'
to: '4000'
color: yellow
- from: '4000'
to: '7000'
color: orange
- from: '7000'
to: '12000'
color: red
- from: '12000'
to: '25000'
color: '#820914'
entity_row: true
style: |
ha-card {
margin: 0px 55px 0px 5px;
box-shadow: none;
border: 0px;
}
.card-content {
padding: 10px 10px 5px 10px !important;
box-shadow: none;
}
- type: custom:gap-card
height: 15
style: |
ha-card {
width: 100% !important;
margin: 0px 0px 0px 5px
}
Its just the lock that i am missing now. but maybe i can make it like the slider only shows when the input_boolean is enabled. Will try with conditional
style: |
ha-card {
width: 100px;
margin: -5px 0px 0px 90px;
}
ha-tile-info {
margin: -15px 0px 0px 0px;
font-size: 16px;
}
Hi there,
I created and modified a mushroom cover card and when changing the icon color by using a template the spacing gets lost. However, changing the icon color without templating does not affect the spacing.
Any idea to use my template to change the icon color without destroying the original spacing?
type: custom:mushroom-cover-card
entity: cover.rollladen_schlafen_kinder
card_mod:
style: |
ha-state-icon {
color: gray;
}
ha-card {
--card-primary-font-size: 18px;
} :host {
--mush-spacing:5px;
--mush-card-primary-font-weight: normal
} mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: transparent !important;
--icon-symbol-size: 100px;
margin: 1px !important;
}
show_buttons_control: true
show_tilt_position_control: false
show_position_control: false
icon_type: icon
fill_container: true
secondary_info: none
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
results in:
This is regardless whether using color name (e.g. grey, red…) or color code (e.g. #ffffff…).
type: custom:mushroom-cover-card
entity: cover.rollladen_schlafen_kinder
card_mod:
style: |
ha-state-icon {
{% set entity = 'cover.rollladen_schlafen_kinder' %}
{% if state_attr(entity, 'current_position') |int == 100 %}
{% set icon_col = '#%02x%02x%02x' % (255,255,255) %}
{% elif state_attr(entity, 'current_position') |int > 75 %}
{% set icon_col = '#%02x%02x%02x' % (224,224,224) %}
{% elif state_attr(entity, 'current_position') |int > 50 %}
{% set icon_col = '#%02x%02x%02x' % (193,193,193) %}
{% elif state_attr(entity, 'current_position') |int > 25 %}
{% set icon_col = '#%02x%02x%02x' % (162,162,162) %}
{% elif state_attr(entity, 'current_position') |int > 0 %}
{% set icon_col = '#%02x%02x%02x' % (131,131,131) %}
{% else %} {{ '#%02x%02x%02x' % (100,100,100) }}
{% set icon_col = '#%02x%02x%02x' % (100,100,100) %}
{% endif %}
color: {{ icon_col }};
}
ha-card {
--card-primary-font-size: 18px;
} :host {
--mush-spacing:5px;
--mush-card-primary-font-weight: normal
} mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: transparent !important;
--icon-symbol-size: 100px;
margin: 1px !important;
}
show_buttons_control: true
show_tilt_position_control: false
show_position_control: false
icon_type: icon
fill_container: true
secondary_info: none
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
Results in:
This happens regardless the type of template. Even inserting {{ whatever }} as value for color did not change the behaviour.
Also tried using --card-mod-icon-color: but using template for the value showed the same outcome.
Any idea to change the icon color state attribute dependend without crashing the spacing of my modification?
Thank you for your help and kind regards,
Benedikt
@Ildar_Gabdullin
After upgrading to 2023.11.1 from 2023.10.5 the below code is not applied, the “:host” part of it:
type: entities
entities:
- entity: input_number.living_room_shutter_position
name: Жалюзи зала
icon: mdi:window-shutter
card_mod:
style:
hui-generic-entity-row:
$: |
.info {
text-overflow: unset !important;
white-space: unset !important;
line-height: 15px;
}
:host {
{% if (is_state('input_boolean.living_room_shutter_choice_helper','off') or is_state('automation.otkrytie_zhaliuzei_po_budilniku', 'off')) %}
--paper-slider-active-color: var(--disabled-text-color);
--paper-slider-knob-color: var(--disabled-text-color);
--paper-slider-container-color: var(--disabled-text-color);
--paper-item-icon-color: var(--disabled-text-color);
color: var(--disabled-text-color);
pointer-events: none;
{% endif %}
}
It doesn’t work even if you replace the variables with actual color and add “!important” to it.
What could possibly have changed to make that not work?
Thanks in advance.
1 Like
see
1 Like
@arganto
Thanks for the tip! I got it working, except for the “pointer-events: none;”
Old code:
card_mod:
style:
hui-generic-entity-row:
$: |
:host {
--paper-slider-active-color: var(--disabled-text-color);
--paper-slider-knob-color: var(--disabled-text-color);
--paper-slider-container-color: var(--disabled-text-color);
--paper-item-icon-color: var(--disabled-text-color);
color: var(--disabled-text-color);
pointer-events: none;
}
New code:
card_mod:
style:
hui-generic-entity-row:
$: |
:host {
--md-slider-active-track-color: var(--disabled-text-color);
--md-slider-inactive-track-color: var(--disabled-text-color);
--md-slider-handle-color: var(--disabled-text-color);
--paper-item-icon-color: var(--disabled-text-color);
color: var(--disabled-text-color);
pointer-events: none;
}
Can somebody enlighten me how should the “pointer-events: none” be handled? Thanks
1 Like
What is the correct order to use both a class and a extra style?
1:
card_mod:
class: content
style: |
ha-card {
Or 2:
card_mod:
class: content
style: |
ha-card {
Both seem to work.
As arganto said - happened after moving to material web.
Will update my post dedicated to a slider later.
this one is ok
1 Like
still a bit of a search, because not all variables here seem to be replaced:
paper-slider-knob-color: var(--accent-color)
paper-slider-knob-start-color: var(--accent-color)
paper-slider-pin-color: var(--accent-color)
paper-slider-active-color: var(--accent-color)
paper-slider-container-color: linear-gradient(var(--primary-color), var(--secondary-background-color)) no-repeat
paper-slider-secondary-color: var(--secondary-background-color)
paper-slider-disabled-active-color: var(--disabled-text-color)
paper-slider-disabled-secondary-color: var(--disabled-text-color)
Might be good if we could find and post a 1:1 table of replacement variables here
Ive asked Paul for assistance in 2023.11 To-do: Add release title - #289 by Mariusthvdb
Would appreciate a lot if you could find a fay to continue to use the “pointer-events: none” parameter.
I have this small issue with the selection menu. It alters the card configuration.
type: custom:stack-in-card
mode: vertical
cards:
- type: vertical-stack
cards:
- type: entities
card_mod:
style: |-
ha-card {
margin-bottom: -18px !important;
--ha-card-border-width: 0;
}
entities:
- entity: input_select.shopping_places
name: Local
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
.info {
display: none;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
#border: 1px solid rgba(127,127,127,0.5);
border-radius: 8px !important;
}
.mdc-select__selected-text-container {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-select {
height: 40px;
}
:host {
--mdc-menu-item-height: 40px;
--mdc-select-fill-color: #272727;
}
- type: entities
card_mod:
style: |-
ha-card {
margin-bottom: -18px !important;
--ha-card-border-width: 0;
}
entities:
- entity: input_text.shopping_item_name
name: Produto
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
.info {
display: none;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
#border: 1px solid rgba(127,127,127,0.5);
border-radius: 10px !important;
}
.mdc-text-field__input {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-textfield {
height: 40px;
}
:host {
--mdc-text-field-fill-color: #272727;
}
- type: horizontal-stack
cards:
- type: entities
card_mod:
style: |-
ha-card {
--ha-card-border-width: 0;
}
entities:
- entity: input_number.shopping_item_number
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
.info {
display: none;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
#border: 1px solid rgba(127,127,127,0.5);
border-radius: 10px !important;
}
.: |
:host {
margin-right: -18px !important;
--mdc-text-field-idle-line-color: transparent !important;
--mdc-text-field-hover-line-color: transparent !important;
--mdc-theme-error: transparent !important;
--mdc-theme-primary: transparent !important;
--text-field-padding: 0px 0px 0px 16px;
--mdc-text-field-fill-color: #272727;
}
- type: entities
card_mod:
style: |-
ha-card {
--ha-card-border-width: 0;
}
entities:
- entity: input_select.shopping_item_metric
name: Medida
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
.info {
display: none;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
#border: 1px solid rgba(127,127,127,0.5);
border-radius: 8px !important;
}
.mdc-select__selected-text-container {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-select {
height: 40px;
}
:host {
top: 20px;
--mdc-menu-item-height: 40px;
--mdc-select-fill-color: #272727;
}
- type: custom:mushroom-chips-card
card_mod:
style: |-
ha-card {
--chip-border-radius: 10px;
--chip-background: rgba(33, 150, 243, 0.2);
--chip-box-shadow: none;
--chip-border-width: 0;
margin-right: 18px;
margin-bottom: 14px;
}
alignment: end
chips:
- type: template
content: Adicionar
icon: mdi:plus-circle
icon_color: blue
tap_action:
action: call-service
service: input_button.press
target:
entity_id: input_button.shopping_item_add
double_tap_action:
action: none
hold_action:
action: none
got stuck with a
style: |
ha-card {
height: 450px !important;
}
got a combination from a state-switch which displays a power-flow-card-plus with differnt custom consumers selected by the state switch.
To keep redundant code as short as possible the power flow itself is split using the decluttering-card, means most of it is within a template.
getting the height adjusted works fine on the power-flow-card on it’s own.
But when being state-switched and decluttered I found no solution. Nor if trying to use the card-mod with the card in a dashboard nor if trying to apply the card-mod lines into the template of the power-flow … anyone with a hint on how to get this solved?
Hi all,
I’m trying to solve a mystery when trying to style four different icons inside a custom:flex-horseshoe-card.
I’m using the following code:
card_mod:
style:
.container:
.card--filter-none:
.datagroup: |
g:nth-of-type(1) .icon {
color: red;
}
This works fine and styles only the first icon. It also works fine for the third and fourth icon. However when applied to the second icon (only) all four icons get styles. For the life of me I can’t figure out why.
With nth-of-type(1):
With nth-of-type(2):
Hey! I’m trying to do something like that also, can you share the entire card code? with the chips below?
The code was already provided in that post.
This is what i get, do you know how can i add the fan buttons below?
Probably it depends on the fan. It may have only “on/off” states or 4 states as described.
Oh I see now, well mine is no a “fan” im using script to send RF to control a fan. do you think there’s a way to draw chips or buttons like that and make them call a script?