Hi @all .multiple-entity-row.
I have two questions:
Any way to make that style sheet shorter/smarter? smart-badge is a sub-class from div.entity.
There are four entities-cards with similar rows. It is possible to style the whole view? Where to paste the style code?
- type: conditional
conditions:
- entity: binary_sensor.deptimer_1_recurring
state: 'on'
style:
multiple-entity-row$: |
hui-generic-entity-row
div.entity:nth-child(1) { margin-right: 8px; }
div.entity:nth-child(1) state-badge {
{{ 'color: #FDD835;' if state_attr('switch.superb_iv_departure_timer_1','departureWeekdayMask')[0:1] == 'y' else 'color: #44739E;' }}
}
div.entity:nth-child(2) { margin-right: 8px; }
div.entity:nth-child(2) state-badge {
{{ 'color: #FDD835;' if state_attr('switch.superb_iv_departure_timer_1','departureWeekdayMask')[1:2] == 'y' else 'color: #44739E;' }}
}
div.entity:nth-child(3) { margin-right: 8px; }
div.entity:nth-child(3) state-badge {
{{ 'color: #FDD835;' if state_attr('switch.superb_iv_departure_timer_1','departureWeekdayMask')[2:3] == 'y' else 'color: #44739E;' }}
}
div.entity:nth-child(4) { margin-right: 8px; }
div.entity:nth-child(4) state-badge {
{{ 'color: #FDD835;' if state_attr('switch.superb_iv_departure_timer_1','departureWeekdayMask')[3:4] == 'y' else 'color: #44739E;' }}
}
div.entity:nth-child(5) { margin-right: 8px; }
div.entity:nth-child(5) state-badge {
{{ 'color: #FDD835;' if state_attr('switch.superb_iv_departure_timer_1','departureWeekdayMask')[4:5] == 'y' else 'color: #44739E;' }}
}
div.entity:nth-child(6) { margin-right: 8px; }
div.entity:nth-child(6) state-badge {
{{ 'color: #FDD835;' if state_attr('switch.superb_iv_departure_timer_1','departureWeekdayMask')[5:6] == 'y' else 'color: #44739E;' }}
}
div.entity:nth-child(7) { margin-right: 8px; }
div.entity:nth-child(7) state-badge {
{{ 'color: #FDD835;' if state_attr('switch.superb_iv_departure_timer_1','departureWeekdayMask')[6:7] == 'y' else 'color: #44739E;' }}
}
row:
type: custom:multiple-entity-row
entity: switch.superb_iv_departure_timer_1
name: Wochentage
icon: mdi:calendar-week
show_state: false
entities:
- name: Mo
icon: mdi:calendar
- name: Di
icon: mdi:calendar
- name: Mi
icon: mdi:calendar
- name: Do
icon: mdi:calendar
- name: Fr
icon: mdi:calendar
- name: Sa
icon: mdi:calendar
- name: So
icon: mdi:calendar
1 Like
craitz1
February 25, 2022, 8:14am
2847
So I found a code online that says to edit to work. I have tried to get this to work for days and can not figure it out. It’s a Custom Button Card that is a person card to show who is home or away and state of phone. This is a year old code tho and have not tinkered that much on the newer stuff. Was wondering if someone can point me in the simple corrections to get this to work. I have looked and looked and can not find documentation on what I am attempting to do. I have tried placing entity instead of batt and charge and loc before for sensors and still get errors.
So far errors I see are at the beginning.
Configuration errors detected:
3 | [[[ <span style="color: var(–t …
Code I am tinkering with.
custom_fields:
batt: sensor.ashley_s_iphone_battery_level
[[[
return `<ha-icon
icon="mdi:battery"
style="width: 20px; height: 20px; color: deepskyblue;">
</ha-icon><span> <span style="color: var(--text-color-sensor);">${states['sensor.ashley_s_iphone_battery_level'].state}%</span></span>`
]]]
charge: sensor.ashley_s_iphone_battery_state
[[[
return `<ha-icon
icon="mdi:battery-charging"
style="width: 20px; height: 20px; color: deepskyblue;">
</ha-icon><span> <span style="color: var(--text-color-sensor);">${states['sensor.ashley_s_iphone_battery_state'].state}</span></span>`
]]]
loc: device_tracker.ashley_s_iphone
[[[
return `<ha-icon
icon="mdi:home"
style="width: 20px; height: 20px; color: deepskyblue;">
</ha-icon><span> <span style="color: var(--text-color-sensor);">${states['person.ashley'].state}</span></span>`
]]]
entity: person.ashley
icon: 'mdi:account'
show_icon: false
show_entity_picture: true
entity_picture: /local/ashley.png
name: Mom
styles:
card:
- border-radius: 5%
- padding: 5%
- color: ivory
- font-size: 20px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
custom_fields:
batt:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.ashley_s_iphone_battery_level"].state < 20) return
"red"; ]]]
charge:
- align-self: middle
- justify-self: start
loc:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
grid:
- grid-template-areas: '"i i" "n n" "batt batt" "charge charge" "loc loc"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
icon:
- color: darkorange
- width: 40%
- margin-top: 0
- margin-left: '-3%'
img_cell:
- justify-content: start
- align-items: start
- margin: none
name:
- font-weight: bold
- font-size: 20px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 4px
type: custom:button-card
Original Code
custom_fields:
batt: |
[[[
return `<ha-icon
icon="mdi:battery"
style="width: 20px; height: 20px; color: deepskyblue;">
</ha-icon><span> <span style="color: var(--text-color-sensor);">${states['sensor.battery_level'].state}%</span></span>`
]]]
charge: |
[[[
return `<ha-icon
icon="mdi:battery-charging"
style="width: 20px; height: 20px; color: deepskyblue;">
</ha-icon><span> <span style="color: var(--text-color-sensor);">${states['sensor.battery_state'].state}</span></span>`
]]]
loc: |
[[[
return `<ha-icon
icon="mdi:home"
style="width: 20px; height: 20px; color: deepskyblue;">
</ha-icon><span> <span style="color: var(--text-color-sensor);">${states['person.you'].state}</span></span>`
]]]
entity: person.you
icon: 'mdi:account'
show_icon: false
show_entity_picture: true
entity_picture: /local/your_picture.jpg
name: Name Here
styles:
card:
- border-radius: 5%
- padding: 5%
- color: ivory
- font-size: 20px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
custom_fields:
batt:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.battery_level"].state < 20) return
"red"; ]]]
charge:
- align-self: middle
- justify-self: start
loc:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
grid:
- grid-template-areas: '"i i" "n n" "batt batt" "charge charge" "loc loc"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
icon:
- color: darkorange
- width: 40%
- margin-top: 0
- margin-left: '-3%'
img_cell:
- justify-content: start
- align-items: start
- margin: none
name:
- font-weight: bold
- font-size: 20px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 4px
type: 'custom:button-card'
CDRX2
February 25, 2022, 12:26pm
2848
Your code does not make use of card-mod, it is JS included in button-card. You should try and check that forum thread, you’ll find answers there
glcy
February 25, 2022, 8:03pm
2849
please help me change the size of this button. I have tried many options, but this option does not apply.
craitz1
February 26, 2022, 4:22am
2851
After tinkering more with the code I actually was able to make it work properly
CDRX2
February 26, 2022, 8:35am
2852
Congrats! For future reference this is the thread related to what you’re working with in this specific case
e-raser
February 26, 2022, 10:03pm
2853
How to set a custom width? I can’t find an example you did this already.
What I have:
- type: custom:stack-in-card
title: ''
mode: vertical
keep:
background: true
box_shadow: true
margin: true
outer_padding: true
border_radius: true
cards:
- type: entities
entities:
- entity: climate.thermostat
secondary_info: last-changed
card_mod:
style:
.: |
ha-card {
margin-left: -15px;
margin-right: -15px;
margin-top: -15px;
margin-bottom: -13px;
box-shadow: none;
}
- type: horizontal-stack
cards:
- type: custom:slider-entity-row
entity: climate.thermostat
name: ''
hide_when_off: false
full_row: true
min: 7
max: 32
step: 1
attribute: temperature
toggle: false
show_state: true
state_color: true
secondary_info: last-changed
state_header: ''
column: false
- type: custom:climate-mode-entity-row
entity: climate.thermostat
name: ' '
icon: none
secondary_info: none
modes:
- hvac_mode: auto
icon: mdi:calendar-sync
color: green
- hvac_mode: heat
- hvac_mode: 'off'
card_mod:
style:
.: |
ha-card {
margin-left: -10px;
margin-right: -10px;
margin-top: 0px;
margin-bottom: 15px;
#box-shadow: none;
}
What I want:
Using about 75 % for the left row, 25 % for the right one. Currently it is equally (50 %).
@e-raser
e-raser
February 26, 2022, 10:41pm
2855
@Ildar_Gabdullin I’m not in a hurry. There are much much MUCH more important things nowadays than HA GUI modding. Take care, I hope you’re safe.
marcorm69
February 27, 2022, 12:21pm
2856
Hi all.
I have a problem with a style.
I have this code
- type: entities
title: Durata
entities:
- entity: input_number.durata1_zona1
card_mod:
style:
.: |
ha-card {
border-radius:5px!Important;
}
"ha-slider$": |
div#sliderContainer {
margin-left: 0;
margin-right: 0;
}
paper-progress {
background-color:orange!Important;
border-radius:5px!Important;
padding:0!Important;
}
div#secondaryProgress {
background:red!Important;
}
"ha-slider$ paper-progress$": |
div#progressContainer {
height:30px;
background:grey!Important;
}
div#primaryProgress {
background:orange!Important;
}
This working for change slider style, but I need to change the border of card and the H1, but I have try in different ways without success.
Ragards,
e-raser
February 27, 2022, 5:50pm
2857
I have two issues using the custom:stack-in-card (more precise: the horizontal-stack inside it):
MAJOR: On mobile devices (on desktop everything is fine!) the cards exceed their border limits, resulting in cut off content on the right:
MINOR: See 🔹 Card-mod - Add css styles to any lovelace card - #2853 by e-raser for custom width inside horizontal-stack card
This is what I use:
type: entities
title: ABC
state_color: true
show_header_toggle: false
entities:
- type: section
label: GRUPPEN
- type: custom:stack-in-card
title: ''
mode: vertical
keep:
background: true
box_shadow: true
margin: true
outer_padding: true
border_radius: true
cards:
- type: entities
entities:
- entity: cover.rollladen_alle
name: Alle
secondary_info: position
card_mod:
style:
.: |
ha-card {
margin-left: -15px;
margin-right: -15px;
margin-top: -15px;
margin-bottom: -13px;
box-shadow: none;
}
- type: horizontal-stack
cards:
- type: custom:slider-entity-row
entity: cover.rollladen_alle
name: ' '
icon: none
hide_when_off: false
full_row: true
min: 0
max: 100
step: 1
attribute: position
toggle: false
show_state: false
state_color: true
secondary_info: ''
state_header: ''
column: true
- type: custom:cover-position-preset-row
name: ' '
icon: none
entity: cover.rollladen_alle
reverseButtons: true
customSetpoints: true
openPosition: 100
midOpenPosition: 71
midClosePosition: 17
closePosition: 0
customText: true
customOpenText: AUF
customMidOpenText: Mitte (1/2)
customMidClosedText: Fast zu
customClosedText: ZU
state_color: false
card_mod:
style:
.: |
ha-card {
margin-left: -10px;
margin-right: -10px;
margin-top: 0px;
margin-bottom: 15px;
box-shadow: none;
}
Try putting the styles for the card at the level of the card itself, not the entity. Hopefully this should work:
- type: entities
card-mod:
style:
.: |
ha-card {
border-radius: 5px;
}
ha-card h1.card-header {
<your-style-key>: <your-style>
}
title: Durata
entities:
- entity: input_number.durata1_zona1
card_mod:
style:
ha-slider$: |
div#sliderContainer {
margin-left: 0px;
margin-right: 0px;
}
and so on...
Seems there are some new variables in 2022.3.x?
- type: entities
title: Theme Switcher
show_header_toggle: false
entities:
- input_select.theme_switcher
How can I make it use the background colour instead of whitesmoke?
this is what I use (in my generic theme settings):
# set colors on quickbar
mdc-text-field-fill-color: var(--card-background-color) # quickbar header
mdc-text-field-ink-color: var(--primary-text-color) #var(--mdc-theme-primary)
# set colors on input_select
mdc-select-ink-color: var(--primary-text-color)
mdc-select-fill-color: var(--card-background-color)
and here are the official variables:
import { css } from "lit";
export const darkStyles = {
"primary-background-color": "#111111",
"card-background-color": "#1c1c1c",
"secondary-background-color": "#202020",
"primary-text-color": "#e1e1e1",
"secondary-text-color": "#9b9b9b",
"disabled-text-color": "#6f6f6f",
"app-header-text-color": "#e1e1e1",
"app-header-background-color": "#101e24",
"switch-unchecked-button-color": "#999999",
"switch-unchecked-track-color": "#9b9b9b",
"divider-color": "rgba(225, 225, 225, .12)",
"mdc-ripple-color": "#AAAAAA",
"input-idle-line-color": "rgba(255, 255, 255, 0.42)",
"input-hover-line-color": "rgba(255, 255, 255, 0.87)",
"input-disabled-line-color": "rgba(255, 255, 255, 0.06)",
"input-outlined-idle-border-color": "rgba(255, 255, 255, 0.38)",
show original
and
--light-primary-opacity: 1.0;
/* rgb */
--rgb-primary-color: 3, 169, 244;
--rgb-accent-color: 255, 152, 0;
--rgb-primary-text-color: 33, 33, 33;
--rgb-secondary-text-color: 114, 114, 114;
--rgb-text-primary-color: 255, 255, 255;
--rgb-card-background-color: 255, 255, 255;
/* input components */
--input-idle-line-color: rgba(0, 0, 0, 0.42);
--input-hover-line-color: rgba(0, 0, 0, 0.87);
--input-disabled-line-color: rgba(0, 0, 0, 0.06);
--input-outlined-idle-border-color: rgba(0, 0, 0, 0.38);
--input-outlined-hover-border-color: rgba(0, 0, 0, 0.87);
--input-outlined-disabled-border-color: rgba(0, 0, 0, 0.06);
--input-fill-color: rgb(245, 245, 245);
--input-disabled-fill-color: rgb(250, 250, 250);
--input-ink-color: rgba(0, 0, 0, 0.87);
--input-label-ink-color: rgba(0, 0, 0, 0.6);
true, some changes in 2022.3
which lead to another nice guide
Changed the alpha to 0 on the card-background-color has fixed it but I can’t wait to find out what else this might have screwed up…
CM000n
March 1, 2022, 10:03am
2863
Hi guys,
The reason is that with the default 1 1 0 flex parameters the conditional cards are evenly distributed within a horizontal stack. However, I want them to be left-aligned and as close together as possible, which is possible with a flex setting of 1 1 1.
I thought I could solve this with the help of Card Mod. Unfortunately, my code does not seem to be correct. I hope someone here can help me.
This is my current code excerpt.
- type: horizontal-stack
cards:
- type: custom:mod-card
card_mod:
style: |
button-card {
flex: 1 1 1;
}
card:
type: conditional
conditions:
- entity: binary_sensor.spuehlmaschine
state: "on"
card:
type: 'custom:button-card'
template: chip_mdi_icon_only
variables:
ulm_chip_mdi_icon_only_entity: binary_sensor.spuehlmaschine
ulm_chip_mdi_icon_only_icon: mdi:dishwasher
- type: custom:mod-card
card_mod:
style: |
button-card {
flex: 1 1 1;
}
card:
type: conditional
conditions:
- entity: binary_sensor.waschmaschine
state: "on"
card:
type: 'custom:button-card'
template: chip_mdi_icon_only
variables:
ulm_chip_mdi_icon_only_entity: binary_sensor.waschmaschine
ulm_chip_mdi_icon_only_icon: mdi:washing-machine
maybe use card-mod, within type:conditional
CM000n:
The reason is that with the default 1 1 0 flex parameters the conditional cards are evenly distributed within a horizontal stack. However, I want them to be left-aligned and as close together as possible, which is possible with a flex setting of 1 1 1.
copy-paste from card-mod-documentation:seen , but not e.g. conditional, entity_filter, vertical-stack, horizontal-stack, grid.
Read further for how to and code example for cards without ha-card element: GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card
Cards that don’t have a <ha-element> can still be styled by using the supplied custom:mod-card card. This is only necessary in very few instances, and likely to bring more problems than it solves. Most likely your card contains another card, in which case that is the one you should apply the styles to.
1 Like
