If by âstillâ you mean âsince two hoursâ, then yes. Thatâs a new thing.
No, that feature is not included yet. That will be in 2.0 or so. Thereâs a big update to card-mod coming when I finish the documentation and examples.
2 Likes
no, I meant after upgrading from the previous version. Expected it to show the version 14 in the console, while it is showing 1.1.0, as it did before the update.
No issue, just wanting to ascertain my install went alright. Must admit I am not even sure I had the beta version or 13 installed.
cant wait!, thanks for this great and unmissable addition to HA.
Hi I need some help changing the vertical-align: of the highlighted icon from âmiddleâ to âtext-bottomâ.
I managed to change the size of the icon with this code:
:host {
font-size: 24px;
--iron-icon-width: 32px;
--iron-icon-height: 32px;
}
but I cannot change its position and itâs driving me crazy.
Icon:
Chrome Inspector screenshot:
JS path of the icon:
document.querySelector(âbody > home-assistantâ).shadowRoot.querySelector(âhome-assistant-mainâ).shadowRoot.querySelector(âapp-drawer-layout > partial-panel-resolver > ha-panel-lovelaceâ).shadowRoot.querySelector(âhui-rootâ).shadowRoot.querySelector(â#view > hui-panel-view > layout-cardâ).shadowRoot.querySelector(â#columns > div:nth-child(1) > hui-entities-card:nth-child(1)â).shadowRoot.querySelector(â#states > div:nth-child(1) > hui-toggle-entity-rowâ).shadowRoot.querySelector(âhui-generic-entity-rowâ).shadowRoot.querySelector(âstate-badgeâ).shadowRoot.querySelector(âiconâ)
Relevant part of .yaml file:
type: entities
show_header_toggle: false
style: |
:host {
--paper-slider-active-color: var(--switch-checked-color);
}
entities:
- entity: light.piano_terra
icon: 'mdi:home-floor-0'
style: |
:host {
font-size: 24px;
--iron-icon-width: 32px;
--iron-icon-height: 32px;
}
- type: divider
- type: 'custom:fold-entity-row'
[...]
Any help is appreciated, thank you!
Sorry for the delayed reply, but Iâm still not able to get it working. I ended up changing the way I was going to group stuff together and now I have
- type: custom:stack-in-card
mode: vertical
keep:
margin: true
outer_padding: true
style: |
ha-card {
background: none;
box-shadow: none;
}
cards:
- type: custom:text-divider-row
text: People
style: |
div {
margin: 0 -16px;
}
Which also doesnât work. The selector is now
document.querySelector(âbody > home-assistantâ).shadowRoot.querySelector(âhome-assistant-mainâ).shadowRoot.querySelector(âapp-drawer-layout > partial-panel-resolver > ha-panel-lovelaceâ).shadowRoot.querySelector(âhui-rootâ).shadowRoot.querySelector(â#view > hui-panel-view > layout-cardâ).shadowRoot.querySelector(â#columns > div:nth-child(1) > stack-in-cardâ).shadowRoot.querySelector(âha-card > div > hui-vertical-stack-cardâ).shadowRoot.querySelector(â#root > text-divider-row:nth-child(1)â).shadowRoot.querySelector(âh2â)
But after changing my code and reading through this thread some more it appears it will only work if itâs in an entity card?
Let me know if I should revert my config, here is what I had after your suggested change with previous format
- type: entities
entities:
- type: custom:text-divider-row
debug_cardmod: true
text: People
style: |
div {
margin: 0 -16px;
}
looking for some help with defining the style code. I want to simply add âmarginâ to the camera view to push the card down (so I can see the date and time). I hacked the console to add margin, so you can see the bottom camera image is shown the way I want it, but i cannot figure out what the style code looks like. Any help?
Here is the
How did you figure out?
I have a similar question but no idea how to handle. If you find some minutes, you might have a look at? Link
I explained it here.
So you could do something like this
- type: picture-elements
style:
'#root > bar-card':
$: |
ha-card {background: none; box-shadow: none;}
2 Likes
I have two questions. Sorry if these seem like basic questions, but I was not able to solve these myself. First, Iâm trying to use card-mod with the following setup. The card consists of a entities card, which has two auto-entities cards inside it. The auto-entities cards are using glance as the card.
YAML
- entities:
- card:
show_header_toggle: false
style: |
ha-card {
box-shadow: none;
background: transparent;
}
.card-header {
font-size: 20px;
}
title: Helsinki
type: glance
filter:
exclude:
- name: '54'
- name: '201'
include:
- entity_id: sensor.hsl_hel_*
state: '> 3'
sort:
count: 5
method: state
numeric: true
type: 'custom:auto-entities'
- card:
show_header_toggle: false
style: |
ha-card {
box-shadow: none;
background: transparent;
}
.card-header {
font-size: 20px;
}
title: LeppÀvaara
type: glance
filter:
include:
- entity_id: sensor.hsl_lpv_bus*
name: '/[0-9]{3}[NK]?/'
state: '> 3'
- entity_id: sensor.hsl_lpv_train*
state: '> 3'
sort:
count: 5
method: state
numeric: true
type: 'custom:auto-entities'
title: Public transport
type: entities
I have already succeeded with removing the borders of the auto-entitites (glance) cards and changing the size of titles. However, I would like to bold out or apply italics to the line number (235, 550, 39, A etc.) from each entity. Does anybody have suggestions on how to achieve this? Iâve tried to inspect element, but didnât find anything noteworthy.
Second question: Iâm trying to add conditional coloring to entities cardâs states. So that the icon and entity name would always display as normal, but the state would change between red and green.
YAML
entities:
- entity: sensor.googlesheets_stocks_gainloss
name: Portfolio gain/loss
style: |
:host {
color:
{% if states(config.entity)[:1] == â-â %}
red
{% else %}
green
{% endif %}
;
}
title: Stock portfolio
type: entities
I was able to change to whole rowâs color based on the state, but I would like to only change the color of the state (and not the entity name). In my example, the state is <div class="text-content">-âŹ291.40</div>. How can I achieve this?
New to card mod (and css altogether) so trying to get my head around a few things so some advice would be appreciated.
Here is my current sensor card.
And my custom:mini-graph-card with a touch of card-mod to try and get the icon, header text colour, value colour and unit of measurement colour the same as the standard sensor card (with the âslateâ theme).
Three questions:
- Can some assist with code on the colours for the text?
- Is there a way to reduce the size of the card altogether? Iâve been trying to get it about 75% of its current height but nothing seems to work.
- Is there a way to transition though all my colour values without listing them all as Iâve done?
style: "ha-card {\n --paper-item-icon-color: dodgerblue;\t\n}\n.card-header {\n color: #b58e31;\n}\n"
color_thresholds:
- color: '#0012ff'
value: 08
- color: '#0022ff'
value: 09
- color: '#0032ff'
value: 10
- color: '#0044ff'
value: 11
- color: '#0054ff'
value: 12
- color: '#0064ff'
value: 13
- color: '#0074ff'
value: 14
- color: '#0084ff'
value: 15
- color: '#0094ff'
value: 16
- color: '#00a4ff'
value: 17
- color: '#00b4ff'
value: 18
- color: '#00c4ff'
value: 19
- color: '#00d4ff'
value: 20
- color: '#00e4ff'
value: 21
- color: '#00fff4'
value: 22
- color: '#00ffd0'
value: 23
- color: '#00ffa8'
value: 24
- color: '#00ff83'
value: 25
- color: '#00ff5c'
value: 26
- color: '#00ff36'
value: 27
- color: '#00ff10'
value: 28
- color: '#17ff00'
value: 29
- color: '#3eff00'
value: 30
- color: '#65ff00'
value: 31
- color: '#8aff00'
value: 32
- color: '#b0ff00'
value: 33
- color: '#d7ff00'
value: 34
- color: '#fdff00'
value: 35
- color: '#FFfa00'
value: 36
- color: '#FFf000'
value: 37
- color: '#FFe600'
value: 38
- color: '#FFdc00'
value: 39
- color: '#FFd200'
value: 40
entities:
- entity: sensor.temperature_xiaomi_office
hours_to_show: 12
icon: 'mdi:thermometer'
name: Office
points_per_hour: 1
show:
graph: bar
type: 'custom:mini-graph-card'
Hi, is it possible to style conditionally secondary info entity card inisde auto entities card?
This is not working 
card:
show_header_toggle: false
title: Rachunki
type: entities
filter:
include:
- entity_id: variable.*
options:
secondary_info: >-
Do zapĆaty: <b style='color:[[ if({entity}.attributes.czy_oplacony ==
'nie', 'green', 'red') ]]'>[[ {entity}.attributes.do_zaplaty ]]</b>
type: 'custom:secondaryinfo-entity-row'
sort:
method: state
type: 'custom:auto-entities'
So I thought about condition move to style. Something like this:
card:
show_header_toggle: false
title: Rachunki
type: entities
filter:
include:
- entity_id: variable.*
options:
secondary_info: >-
Do zapĆaty: <b style='color:red'>[[ {entity}.attributes.do_zaplaty ]]</b>
type: 'custom:secondaryinfo-entity-row'
style: |
div.secondary b {
color: green !important; //condition must go here
}
sort:
method: state
type: 'custom:auto-entities'
See the advanced configuration section of the readme.
Getting through the shadowDOM to the secondary info row is a bit more involved than that.
1 Like
Thanks. That did the trick:
card:
show_header_toggle: false
title: Rachunki
type: entities
filter:
include:
- entity_id: variable.*
options:
secondary_info: true
style:
hui-generic-entity-row:
$: |
.secondary::before {
content: "Do zapĆaty:"
}
.secondary::after {
color:
{% if is_state_attr(config.entity, 'status','do oplacenia') %}
green
{% else %}
red
{% endif %}
;
content: "{{ state_attr(config.entity, 'do_zaplaty') }}"
}
sort:
method: state
type: 'custom:auto-entities'
1 Like
Hi,
Iâm trying to use card-mod to colour the background of entities on a glances card. I plan to adjust background colour according to temperature (havenât done that bit yet). I would like to adjust padding and margin, but notice that only some of these settings donât take.
My config:
- type: glance
entities:
- entity: sensor.temperature_8434
name: Kitchen
- entity: sensor.downstairs_temperature
name: TV room
- entity: sensor.inside_temperature
name: Bedroom
- entity: sensor.temperature_study
name: Study
- entity: sensor.temperature_5534
name: Oliver
- entity: sensor.temperature_1902
name: Pete
- entity: sensor.temperature_ellie
name: Ellie
show_icon: false
style: |
.entity {
background: red;
margin-left: 4px;
margin-right: 4px;
margin-bottom: 8px;
padding-bottom: 4px;
padding-top: 4px;
}
But looking in the inspector in Chrome, I can see that some of these get ignored.
Any suggestions as to what I can do differently?
Thanks
Darn. The colour adjustment isnât working for me. Iâm doing this:
style: |
.entity {
margin-left: 4px;
margin-right: 4px;
margin-bottom: 8px;
padding-bottom: 4px;
padding-top: 4px;
background:
{% if states(config.entity) |int <22 %}
green;
{% else %}
blue;
{% endif %}
}
If I replace states(config.entity) with a number, it works. Is there some trick to getting states(config.entity) working?
background:
{% if states(âconfig.entityâ) |int <22 %}
green;
{% else %}
blue;
{% endif %}
}
A simple matter of quotes and youâre there.
Thanks for the quick response @eggman, but that doesnât seem to be the answer. All of the examples I have seen are without quotes. In any case - trying it in my cases didnât make any difference.
Ah, yes - usually that parameter is a string value of an entity id, I hadnât realised it could also be a variable referring to the current entity in a card.
Css prioritization is weird.
Try margin-bottom: 8px !important;etc.
The glance card has no entity property. The things in the glance card do, though. Try applying the styles to them instead.
Awesome - thanks Thomas. CSS is weirdâŠ