Seems that card-mod was not properly installed.
I am trying to change the font size of the bottom value of the compass card (4.5C). I just can’t get through many nested #shadow-root elements.
type: custom:compass-card
header:
title:
value: Temperature
compass:
circle:
color: green
indicator_sensors:
- sensor: sensor.maximum_temperature_outside
decimals: 1
state_units:
show: true
indicator:
show: false
type: arrow_outward
state_abbreviation:
show: false
state_value:
show: true
value_sensors:
- sensor: sensor.gw2000a_outdoor_temperature
decimals: 1
- sensor: sensor.minimum_temperature_outside
decimals: 1
style: |
ha-card {
border: solid 1px var(--secondary-color);
}
Any hints? Thx.
I am trying to edit the slider, but i do not know anymore what to use as element to use in style…
I thought it was ha-slider or .state. But it does do nothing.
Can someone help and maybe explain me where to look for?
Would like to change the size of the slider, align the slider next to the icon, and the state text (12) right beside the slider end. (no margin)
May be used as a starting point:
1st post - link at the bottom - input-number
1 Like
Thanks! Found a lot.
I now have that locked option, really nice 
But i can not seem to add other options to the slider. Do i place them wrong?
type: entities
title: Locked slider
entities:
- entity: >-
input_boolean.smart_switch_ir_paneel_toilet_power_on_off_at_target_temperature
name: Lock the slider
- entity: input_number.target_temperature_toilet
name: hidden
style:
hui-generic-entity-row:
$: |
.info {
display: none;
}
state-badge {
display: none;
}
.: |
ha-slider {
max-width: unset !important;
}
.flex .state {
display: none;
}
tap_action:
action: none
card_mod:
style: |
:host {
{% if is_state('input_boolean.smart_switch_ir_paneel_toilet_power_on_off_at_target_temperature','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 %}
}
ha-slider {
{% set WIDTH = states("input_number.target_temperature_toilet")|int(0) %}
width: {{200}}px !important;
max-width: unset !important;
}
My slider keeps it’s name, icon and value (value is fine)
The slider is no longer grayed out.
sorry, can not get it done, even my “default” border remove style has no effect here.
type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: button
show_name: false
show_icon: true
tap_action:
action: toggle
entity: >-
input_boolean.smart_switch_ir_paneel_toilet_power_on_off_at_target_temperature
name: Automatische Temperatuur
show_state: true
icon_height: 30px
icon: mdi:gauge
hold_action:
action: none
card_mod:
class: content-button
- type: entities
entities:
- entity: input_number.target_temperature_toilet
name: []
tap_action:
action: none
card_mod:
class: content-entities
style: |
:host {
{% if is_state('input_boolean.smart_switch_ir_paneel_toilet_power_on_off_at_target_temperature','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;
}
.flex ha-slider {
--_active-track-color: var(--disabled-text-color);
}
{% endif %}
ha-slider {
{% set WIDTH = states("input_number.target_temperature_toilet")|int(0) %}
width: {{200}}px !important;
max-width: unset !important;
}
.flex ha-slider {
{% set WIDTH = states("input_number.target_temperature_toilet")|int(0) %}
width: {{200}}px !important;
max-width: unset !important;
}
- Cannot help you, have no access to HA these days.
- You trying to achieve lot of things, your code is huge. Suggest to start with small tasks.
Oke, will try again tomorrow, its late now.
I thought i had it but than i could not get the 2 things together, and i saw that the color of the sliders remains blue, even in the pure example of the lock it stays blue. think HA changes values… 
Here either you doing smth wrong or HA changed silently, and these changes are not reflected in my post.
Why you got two “style” options here?
Made no error in the lock function. HA did change things.
Also found
.flex ha-slider {
--_active-track-color: var(--disabled-text-color);
to remove ‘remove’ the blue slider but not the blue dot. But this give a fault in the size of the slider.
i tried all under
card_mod:
class: content-entities
style: |
but it had no effect, so i copy past it seperate, also no effect.
Will try again today from strart.
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