Thanks, I needed the custom number card to understand what may be the issue.
It’s definitley the number-box card. I place the cards inside a grid layout card with 3 columns and still had alignment issues. I was able to add margin mods to align the number boxes
With my entities…
type: entities
entities:
- type: section
label: Mode Settings
card_mod:
style: |
.label {
color: rgb(187, 187, 187) !important;
font-size: 20px !important;
}
.divider {
background-color: rgb(187, 187, 187) !important;
height: .5px !important;
}
- type: custom:gap-card
height: 5
- type: custom:numberbox-card
icon: false
entity: number.garage_spotlight_sensor_occupancy_timeout
name: Temperature HighHigh Trigger
high: 194
toggle_entity: switch.kitchen_lights
card_mod:
style: |
.cur-box {
border: 1px solid red;
}
.body .cur-num {
color: tomato;
}
- type: custom:numberbox-card
icon: false
entity: number.garage_spotlight_sensor_occupancy_timeout
name: Temperature Low Trigger
low: 32
toggle_entity: switch.kitchen_lights
card_mod:
style: |
.cur-box {
margin-left: 34px;
border: 1px solid red;
}
.body .cur-num {
color: lightblue;
}
- type: custom:numberbox-card
icon: false
entity: number.garage_spotlight_sensor_occupancy_timeout
name: Humidity High Trigger
toggle_entity: switch.kitchen_lights
card_mod:
style: |
.cur-box {
margin-left: 54px;
border: 1px solid red;
}
.body .cur-num {
color: tomato;
}
- type: custom:numberbox-card
icon: false
entity: number.garage_spotlight_sensor_occupancy_timeout
name: Humidity Trigger
toggle_entity: switch.kitchen_lights
card_mod:
style: |
.cur-box {
margin-left:88px;
border: 1px solid red;
}
.body .cur-num {
color: lightblue;
}
show_header_toggle: false
As soon as you introduce a different UoM you get spacing issues.
Even if you set the width and justify the content you are going to get alignment issue on the right.
card_mod:
style: |
.cur-box {
border: 1px solid red;
width: 100px;
justify-content: left !important;
}
You can push the margins to the right edge and everything should align.
type: entities
entities:
- type: section
label: Mode Settings
card_mod:
style: |
.label {
color: rgb(187, 187, 187) !important;
font-size: 20px !important;
}
.divider {
background-color: rgb(187, 187, 187) !important;
height: .5px !important;
}
- type: custom:gap-card
height: 5
- type: custom:numberbox-card
icon: false
entity: input_number.test3
name: Temperature HighHigh Trigger
high: 194
toggle_entity: switch.kitchen_lights
card_mod:
style: |
.cur-box {
border: 1px solid red;
width: 100px;
justify-content: left !important;
}
.body .cur-num {
color: tomato;
}
- type: custom:numberbox-card
icon: false
entity: number.garage_spotlight_sensor_occupancy_timeout
name: Temperature Low Trigger
low: 32
toggle_entity: switch.kitchen_lights
card_mod:
style: |
.cur-box {
margin-left: 34px;
border: 1px solid red;
width: 100px;
justify-content: left !important;
}
.body .cur-num {
color: lightblue;
}
.padl {
color: lime !important;
padding: 0;
margin-left: 10px !important;
}
- type: custom:numberbox-card
icon: false
entity: number.garage_spotlight_sensor_occupancy_timeout
name: Humidity High Trigger
toggle_entity: switch.kitchen_lights
card_mod:
style: |
.cur-box {
margin-left: 54px;
border: 1px solid red;
width: 100px;
justify-content: left !important;
}
.body .cur-num {
color: lightblue;
}
.padl {
color: yellow !important;
padding: 0;
margin-left: 10px !important;
}
- type: custom:numberbox-card
icon: false
entity: input_number.test3
name: Humidity Trigger
toggle_entity: switch.kitchen_lights
card_mod:
style: |
.cur-box {
margin-left:88px;
width: 100px;
justify-content: left !important;
border: 1px solid red;
}
.body .cur-num {
color: lightblue;
}
show_header_toggle: false
1 Like
Hiya IIdar,
May I enquire if you are able to change the swtich’s size? I managed to change the colour with the code below but couldn’t change the size. Thanks for your kind advice.
type: entities
entities:
- light.living_room_lights
- light.study_lights
- light.all_lights
card_mod:
style:
hui-generic-entity-row:
ha-entity-toggle:
$:
ha-switch:
$: |
.mdc-switch .mdc-switch__track {
border-color: green !important;
}
.: |
ha-switch {
--switch-unchecked-track-color: yellow;
--switch-checked-track-color: red;
}
Please post your code and questions using the community standards. See #11 and 16.
Good afternoon,
I have a Conditional Card with Card-mod, but I am stuggling.
I would like to have the font color: black.
But somehow, it stays gray.
Anyone know the solution?
type: conditional
conditions:
- condition: state
entity: binary_sensor.meteoalarm
state_not: 'off'
- condition: state
entity: binary_sensor.meteoalarm
state_not: unknown
card:
type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: >-
{{ (state_attr('binary_sensor.meteoalarm','senderName')).split ()[0] }}
WeerCode :{% if
(state_attr('binary_sensor.meteoalarm','awareness_level')).split (';
')[1] == 'green' %}Groen {% endif %} {% if
(state_attr('binary_sensor.meteoalarm','awareness_level')).split (';
')[1] == 'yellow' %}Geel{% endif %}{% if
(state_attr('binary_sensor.meteoalarm','awareness_level')).split (';
')[1] == 'orange' %}Oranje{% endif %}{% if
(state_attr('binary_sensor.meteoalarm','awareness_level')).split (';
')[1] == 'red' %}Rood{% endif %} (Noord-Holland)
secondary: >-
{{ (state_attr('binary_sensor.meteoalarm', 'description')) }}
Van {{ as_timestamp(state_attr('binary_sensor.meteoalarm','onset')) |
timestamp_custom('%d-%m %H:%M') }} tot {{
as_timestamp(state_attr('binary_sensor.meteoalarm','expires')) |
timestamp_custom('%d-%m %H:%M') }}
icon: |-
{% if is_state('sensor.knmi_weercode', 'Groen') %}
mdi:alert-circle-check
{% elif is_state('sensor.knmi_weercode', 'Geel') %}
mdi:alert-decagram
{% else %}
mdi:alert
{% endif %}
icon_color: >-
{% if (state_attr('binary_sensor.meteoalarm','awareness_level')).split
('; ')[1] == 'green' %}
green
{% endif %}
{% if (state_attr('binary_sensor.meteoalarm','awareness_level')).split
('; ')[1] == 'yellow' %}
red
{% endif %}
{% if (state_attr('binary_sensor.meteoalarm','awareness_level')).split
('; ')[1] == 'orange' %}
red
{% endif %}
{% if (state_attr('binary_sensor.meteoalarm','awareness_level')).split
('; ')[1] == 'red' %}
yellow
{% endif %}
hold_action:
action: url
url_path: 'https://www.knmi.nl/nederland-nu/weer/waarschuwingen/noord-holland '
multiline_secondary: true
fill_container: false
tap_action:
action: url
url_path: 'https://www.knmi.nl/nederland-nu/weer/waarschuwingen/noord-holland '
double_tap_action:
action: more-info
card_mod:
style: |
ha-card {
font-color: black;
{% if (state_attr('binary_sensor.meteoalarm','awareness_level')).split ('; ')[1] == 'green' %}
--primary-text-color: blue;
--secondary-text-color: black;
--card-secondary-font-size: 10px;
--card-primary-font-size: 14px;
background-color: green;
opacity: 0.7;
{% endif %}
{% if (state_attr('binary_sensor.meteoalarm','awareness_level')).split ('; ')[1] == 'yellow' %}
--primary-text-color: blue;
--secondary-text-color: black;
--card-secondary-font-size: 10px;
--card-primary-font-size: 14px;
font-color: black;
background-color: yellow;
opacity: 0.7;
{% endif %}
{% if (state_attr('binary_sensor.meteoalarm','awareness_level')).split ('; ')[1] == 'orange' %}
--primary-text-color: blue;
--secondary-text-color: black;
--card-secondary-font-size: 10px;
--card-primary-font-size: 14px;
background-color: orange;
opacity: 0.7;
{% endif %}
{% if (state_attr('binary_sensor.meteoalarm','awareness_level')).split ('; ')[1] == 'red' %}
--primary-text-color: blue;
--secondary-text-color: black;
--card-secondary-font-size: 10px;
--card-primary-font-size: 14px;
background-color: red;
opacity: 0.7;
{% endif %}
}
card_mod:
style: |
ha-state-icon {
--icon-symbol-size: 50px;
} mushroom-shape-icon {
--icon-size: 80px;
}
ha-card {
width: center;
background: none;
border: none !important;
box-shadow: none !important;
}
1 Like
Replace
--primary-text-color: blue;
--secondary-text-color: black;
With
--card-primary-color: blue !important;
--card-secondary-color: black !important;
1 Like
Yes. That worked. I appreciate the help.
There are several components, but this should assist you.
You can also move the colors directly to the thumb and track.
type: entities
show_header_toggle: false
entities:
- entity: input_boolean.test
card_mod:
style:
hui-generic-entity-row:
ha-entity-toggle:
$:
ha-switch:
$: |
.mdc-switch__track {
height: 12px !important;
width: 30px !important;
padding: 1px 1px;
margin: 1.5px 1px;
--switch-unchecked-track-color: lime;
--switch-checked-track-color: yellow;
}
.mdc-switch__thumb {
border: 1px !important;
height: 15px !important;
width: 15px !important;
--switch-unchecked-button-color: lime;
--switch-checked-button-color: yellow;
}
- entity: input_boolean.test
Hello, the modification is not visible in the card code editor. It looks and works in the RAW file. What mistake are you making?
type: custom:mushroom-template-card
primary: |-
{% set time = now().hour %}
{% if (time >= 18) %}
Jó estét, {{ user }}
{% elif (time >= 12) %}
Kellemes délutánt, {{ user }}
{% elif (time >= 5) %}
Jó reggelt, {{ user }}
{% elif (time >= 8) %}
Kellemes napot, {{ user }}
{% else %}
Jó éjszakát, {{ user }}
{% endif %}
secondary: >
{% set alarm_state = states('alarm_control_panel.partition_area_1') %} {% if
alarm_state == 'disarmed' %}
A riasztó állapota: Hatástalanítva
{% elif alarm_state == 'armed_away' %}
A riasztó élesítve: Távol
{% elif alarm_state == 'armed_night' %}
A riasztó élesítve: Éjszakai
{% else %}
{{ alarm_state }}
{% endif %}
icon: mdi:home
tap_action:
action: navigate
navigation_path: /dashboard-kezelfelulet/info
picture: ''
badge_color: |
{% if is_state('alarm_control_panel.partition_area_1','disarmed') %}
blue
{% endif %}
{% if is_state('alarm_control_panel.partition_area_1','armed_away') %}
red
{% endif %}
{% if is_state('alarm_control_panel.partition_area_1','armed_night') %}
green
{% endif %}
{% if is_state('alarm_control_panel.partition_area_1','armed_stay') %}
orange
{% endif %}
badge_icon: mdi:shield-home
icon_color: cyan
multiline_secondary: true
fill_container: true
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
card_mod:
style:
mushroom-state-info$: |
.container {
align-items: end;
}
.: |
ha-card {
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75) !important;
width: 250px;
}
primary: |-
{% set time = now().hour %}
{% if (time >= 18) %}
Jó estét, {{ user }}
{% elif (time >= 12) %}
Kellemes délutánt, {{ user }}
{% elif (time >= 5) %}
Jó reggelt, {{ user }}
{% elif (time >= 8) %}
Kellemes napot, {{ user }}
{% else %}
Jó éjszakát, {{ user }}
{% endif %}
secondary: >
{% set alarm_state =
states('alarm_control_panel.partition_area_1') %} {% if
alarm_state == 'disarmed' %}
A riasztó állapota: Hatástalanítva
{% elif alarm_state == 'armed_away' %}
A riasztó élesítve: Távol
{% elif alarm_state == 'armed_night' %}
A riasztó élesítve: Éjszakai
{% else %}
{{ alarm_state }}
{% endif %}
icon: mdi:home
tap_action:
action: navigate
navigation_path: /dashboard-kezelfelulet/info
picture: ''
badge_color: >
{% if is_state('alarm_control_panel.partition_area_1','disarmed')
%}
blue
{% endif %}
{% if
is_state('alarm_control_panel.partition_area_1','armed_away') %}
red
{% endif %}
{% if
is_state('alarm_control_panel.partition_area_1','armed_night') %}
green
{% endif %}
{% if
is_state('alarm_control_panel.partition_area_1','armed_stay') %}
orange
{% endif %}
badge_icon: mdi:shield-home
icon_color: cyan
multiline_secondary: true
fill_container: true
hello i tried this code to make blink a picture to make some text but it seems it isn’t work
type: picture-elements
elements:
- type: image
entity: input_boolean.notify_home
style:
top: 50%
left: 50%
width: 100%
animation: my-blink 1s linear infinite
state_image:
'on': /local/FloorPlan/light.msl120_c7f7_light_bulb.png
'off': /local/FloorPlan/Transparent.png
- type: state-icon
entity: light.msl120_c7f7_light_bulb
style:
top: 85%
left: 107%
width: 100%
tap action:
action: toggle
image: /local/FloorPlan/Eteint.png
style: |
@keyframes my-blink {
from {opacity: 0;}
to {opacity: 100;}
from {opacity: 100;}
to {opacity: 0;}
}
how to optimize the code?
button-card in this card it is solved like this
type: custom:button-card
entity: sensor.moon_phase
entity_picture: |
[[[ return `/local/images/moon/${entity.state}.png`; ]]]
show_entity_picture: true
how to do this in this card?
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
{% if is_state('sensor.moon_phase', 'new_moon') %}
background: url('/local/images/moon/new_moon.png');
background-size: 50% auto, cover;
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
{% else %}
{% if is_state('sensor.moon_phase', 'waxing_crescent') %}
background: url('/local/images/moon/waxing_crescent.png');
background-size: 50% auto, cover;
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
{% else %}
{% if is_state('sensor.moon_phase', 'first_quarter') %}
background: url('/local/images/moon/first_quarter.png');
background-size: 50% auto, cover;
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
{% else %}
{% if is_state('sensor.moon_phase', 'waxing_gibbous') %}
background: url('/local/images/moon/waxing_gibbous.png');
background-size: 20% auto, cover;
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
{% if is_state('sensor.moon_phase', 'full_moon') %}
background: url('/local/images/moon/full_moon.png');
background-size: 10% auto, cover;
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
{% else %}
{% if is_state('sensor.moon_phase', 'waning_gibbous') %}
background: url('/local/images/moon/waning_gibbous.png');
background-size: 10% auto, cover;
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
{% else %}
{% if is_state('sensor.moon_phase', 'last_quarter') %}
background: url('/local/images/moon/last_quarter.png');
background-size: 10% auto, cover;
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
{% else %}
{% if is_state('sensor.moon_phase', 'waning_crescent') %}
background: url('/local/images/moon/waning_crescent.png');
background-size: 10% auto, cover;
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% endif %}
}
What card are you referring to ?
Your coding should resemble this format…
{% if is_state('sensor.moon_phase', 'new_moon') %}
xxxx
{% elif is_state('sensor.moon_phase', 'waxing_crescent') %}
xxxx
{% elif is_state('sensor.moon_phase', 'first_quarter') %}
xxxx
{% else %}
xxxx
{% endif %}
I’m sorry you didn’t understand
artificial intelligence helped me solve the problem
everything is simpler
background: url('/local/images/moon/{{ states('sensor.moon_phase') |
lower | replace(' ', '_') }}.png');
full code
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
background: url('/local/images/moon/{{ states('sensor.moon_phase') |
lower | replace(' ', '_') }}.png');
background-size: 50% auto, cover;
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
What is the point of your reply?
1 Like
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:horizon-card
title: []
fields:
sunrise: true
sunset: true
dawn: false
noon: false
dusk: false
southern_flip: false
language: ru
time_format: language
number_format: language
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
--ha-card-border-color: rgba(0,255,255,0.2);
height: 170px;
width: 100%;
}
- type: custom:stack-in-card
cards:
- type: entity
entity: sensor.moon_phase
name: Фаза луны
card_mod:
style: |
ha-card {
font-family: "PT Sans Narrow";
height: 100%;
width: 100%;
right: 0px;
bottom: 0px;
top: 0px;
--mdc-icon-size: 1px;
}
card_mod:
style: >
ha-card {
--ha-card-border-width: 0;
background: url('/local/images/moon/{{ states('sensor.moon_phase') |
lower | replace(' ', '_') }}.png');
background-size: 20% auto, cover;
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
card_mod:
style: |
ha-card {
background: transparent;
border-color: cyan;
}
no need to write spam
Hello, I apologize for the imprecise wording. Please help.
The “card-mod” modification works, but it does not appear. This is a bit confusing. I made some mistake that I don’t understand.
You did not provide context, solved your issue and wrote an unproductive response. Help people help you or help others. Happy AI solved your problem.
2 Likes