@Ildar_Gabdullin Thank you so much. That answers my question.
Hi guys, Iâm getting nuts trying to figure this out. I want to style the shopping list card. I managed to style the font-family and font-size but cannot get the font color to change. Inspecting the elements I get this:
Manually manipulating the value from the color field characters do change color but I fail miserably when trying to put that into yaml, nothing works:
- type: shopping-list
style: |
ha-card {
--mdc-typography-subtitle1-font-size: 1.5em;
}
:host {
color: rgba(255,255,255,1);
}
thanks in advanded
Since you can see a path in a Code inspector you may define a path for required element/elements.
Now using a â:hostâ is just a guess.
Yeah, previously to that, I tried that too to no avail:
- type: shopping-list
style:
ha-textfield$: |
What should go here? {
color: red;
}
this wonât work and I tried several variations
- type: shopping-list
style:
ha-textfield$: |
.mdc-text-field:not {
color: red;
}
this wonât either:
- type: shopping-list
card_mod:
style:
ha-textfield$: |
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
color: red;
}
Iâm really lost
I always suggest to start more granular and then limit afterwards.
Why not (without test) starting/trying such things first.
card_mod:
style:
ha-textfield:
$: |
input {
color: red !important;
}
Hello Folks,
Iâm trying to manipulate a paper-button-row custom card.
I have an AirConditioner which I control with paper-buttons: turn on for time period, or off.
Also I have an automation to control it based on a preset.
I figured, if the automation is ON, i do not want anyone to mess around with the manual settings, so I disabled them with card-mode.
Problem, is I cannot disable only the paper-buttons, but the whole entity-row, with the icon (visual issue) and the title, which means I cannot access the state history and such.
Could someone help me please to apply my mods only on the paper-buttons?
My code would be this so far:
type: entities
entities:
- entity: automation.toohotinhere
card_mod:
style: |
:host {
{% if is_state('automation.toohotinhere','on') %}
--paper-item-icon-color: var(--disabled-text-color);
pointer-events: none;
{% endif %}
}
extend_paper_buttons_row:
position: right
base_config:
style:
button:
background-color: lightblue
border-radius: 4px
padding-top: 2px
padding-right: 6px
padding-bottom: 2px
padding-left: 5px
margin-right: 5px
border-style: solid
border-width: 2px
font-weight: 500
buttons:
- entity: asd.asd
layout: icon|name
name: auto
style:
button:
width: 100%
background-color: none
border-style: none
border-width: 2px
font-weight: 500
justify-content: flex-start
ripple:
display: none
- name: 30M
tap_action:
action: call-service
service: script.KlimaFor30Script
- name: 1H
tap_action:
action: call-service
service: script.KlimaFor1hScript
- name: 2H
tap_action:
action: call-service
service: script.1656525217310
- name: 'OFF'
tap_action:
action: call-service
service: script.offklima
Oh my, you got it! How did you get to this? why did you suggest input?
Hi guys, I have this two styled cards working separately but I donât know how to put them together in the same card? Thanks in advaned, any help is appreciated.
Card 1
- type: shopping-list
card_mod:
style:
ha-textfield:
$: |
input {
color: #c8c8c8 !important; --mdc-typography-subtitle1-font-size: 1.5em;
}
Card 2
- type: shopping-list
card_mod:
style: |
ha-card {
--mdc-text-field-fill-color: rgba(0,0,0,0);
}
Look at your picture. This is the element, you want to style. And as suggested, this is more granular to start. If you want only style the same element, if it has a special id or class, you can narrow down afterwards.
Please always have a look in the examples in this thread, esp. in the ones from Ildar in den Link at the first post. You would see a lot (!) of examples, which give the answer directly.
card_mod:
style:
.: |
ha-card {
ha-textfield:
$: |
input {
2 Likes
@arganto but in my picture I see tons of things besides âinputâ, call me idiot but I still canât realize where you get the input thing exactly from.
I just saw it, thanks.
sorry mate, I saw 3429 posts and I didnât even consider reading one and using the search tool didnât help. I appreciate!
Hello,
I use plenty of âcustom:stack-in-cardâ with âcustom:multiple-entity-rowâ and other integrated cars - and in these cards âcard_modâ to colour or exchange icons or to adjust the borders.
So far this has always worked, but now it doesnât (without me changing anything!?) The icons are not coloured, the spacing is ignored.
An example with an icon:
type: custom:stack-in-card
card_mod:
style:
.: |
ha-card {
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-top: 10px;
}
cards:
- type: markdown
content: |
## Kßche und Vorräte
- entity: binary_sensor.hmipw_dri32_1_2_r02_kellerfenster_state
type: custom:multiple-entity-row
icon: mdi:chili-hot
show_state: false
state_color: false
name: Vorratskeller
card_mod:
style: >
{% if
(states("sensor.zigbee_tempsensor_tz2000_r02_1_temperature"))|float
> 20 %}
:host {
--card-mod-icon-color: red;
--card-mod-icon: mdi:corn-off}
{% endif %}
entities:
- entity: binary_sensor.hmipw_dri32_1_1_r03_kellerfenster_state
name: false
icon: mdi:door
state_color: true
- entity: sensor.zigbee_tempsensor_tz2000_r02_1_temperature
name: Temperatur
hide_unavailable: true
format: precision0
- entity: sensor.zigbee_tempsensor_tz2000_r02_1_humidity
name: Feuchte
format: precision0
hide_unavailable: true
Card-Mod works if I use it within an regular entity card, i. e:
type: entities
entities:
- entity: sensor.irmelder_1_r53_gartenhaus_brightness
type: custom:multiple-entity-row
name: Helligkeit
state_header: Lux
unit: false
secondary_info: false
card_mod:
style: |
{% if (states("sun.sun")) == 'below_horizon' %}
:host { --card-mod-icon: mdi:weather-night; }
{% elif (states("sensor.k68_ha_uv_index")) | float(0) > 3 %}
:host { --card-mod-icon-color: #FF8F00; }
{% elif (states("sensor.k68_ha_uv_index")) | float(0) > 5 %}
:host { --card-mod-icon-color: red; }
{% endif %}
So it may be a conflicct between âcustom:stack-in-cardâ and âcard_modâ?
Iâve searched here but havenât found anything - or overlooked it. Sorry if that was the case.
Grateful for any help,
Eckart
First, instead of this:
card_mod:
style: |
{% if ... %}
element { prop: value; }
{% endif %}
use this:
card_mod:
style: |
element {
{% if ... %}
prop: value;
{% endif %}
}
since it will let you build more complex styles.
Next, regarding using â--card-mod-icon-xxxâ.
This is not a âpure card-modâ. This is a âtrickâ added by card-mod - which is not obliged to work always & everywhere. See Github issues.
For styling multiple-entity-row - see post #1.
Also, multiple-entity-row is NOT supposed to be used as a separate card, it should be inside Entities card. I am not saying that it will not work. But it will have some unexpected features.
building on that buttons post, I am trying to mod the footer section of an entities card:
to have that button centered (and if that works out, make the container a bit tighter, by applying margin or padding)
footer:
type: buttons
entities:
- entity: sensor.speedtest_download
name: Run Speedtest
icon: mdi:speedometer
tap_action:
action: call-service
service: speedtestdotnet.speedtest
card_mod:
style:
hui-buttons-base $ .ha-scrollbar ha-chip:
$: |
.mdc-chip {
width: 120px;
justify-content: center;
}
does exactly nothing, even though the path seems to be correct
Not really sure how to combine that with the generic header-footer stylings of the header/footer post thoughâŚ
do I set it on the entities card as a whole, or on the buttons in the footer?
give the fact I also have a class for the header, I suppose to would need to be on the entities card:
type: entities
title: Speedtest
card_mod:
class: class-header-margin
style:
hui-buttons-base $ .ha-scrollbar ha-chip:
$: |
.mdc-chip {
width: 120px;
justify-content: center;
}
.: |
.header-footer.footer {
padding: 0px;
}
entities:
hmm, get a mapping error:
type: entities
title: Speedtest
card_mod:
class: class-header-margin
style:
hui-buttons-header-footer $ hui-buttons-base $
.ha-scrollbar {
justify-content: center;
}
The pipe symbol is clipped on the screenshot.
hui-buttons-base $: |
duh⌠sorry bout that.
better indeed. but see what happens when I set a margin: 20px on the footer:
type: entities
title: Speedtest
card_mod:
class: class-header-margin
style:
hui-buttons-header-footer $ hui-buttons-base $ : |
.ha-scrollbar {
justify-content: center;
}
.: |
.header-footer.footer {
margin: 20px;
}
it also sets that to the fold-entity-row above the footerâŚ
setting the margin/padding to the same selector is a bit better, but not yet as I want it, top is untouched so it seems:
style:
hui-buttons-header-footer $ hui-buttons-base $ : |
.ha-scrollbar {
justify-content: center;
margin: 0px;
padding-top: 8px;
padding-bottom: 8px;
}
but this is getting more like it:
style:
hui-buttons-header-footer $ hui-buttons-base $ : |
.ha-scrollbar {
justify-content: center;
height: 40px;
align-content: center;
}
thought as you can see it is still not vertically aligned fully, probably because of the following above it?
It cannot be. I do not see it on your picture. And I cannot reproduce it:
type: vertical-stack
cards:
- type: entities
entities:
- sun.sun
- type: custom:fold-entity-row
padding: 0
head:
entity: sun.sun
entities:
- sun.sun
- sun.sun
footer:
type: buttons
entities:
- entity: sun.sun
card_mod:
style:
hui-buttons-header-footer $ hui-buttons-base $: |
.ha-scrollbar {
justify-content: center;
}
.: |
.header-footer {
margin: 50px;
}
Compare with âw/o a footerâ card;
dont you see the huge space in the fold? I mean directly above the divider line of the footer?
yeah, not sure why that happens. just like the vertical aligning, which is not centered.
guess I need to check the default styling of the footer margins, because without a fold it is also vertically off center:
