Because this is wrong.
The element is inside $. What you need is copy/paste a ready & published style to your theme.
You mean just paste
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 3em !important;
}
.mdc-text-field__input {
align-self: center !important;
}
span#label {
display: none !important;
}
into my theme?
EDIT: without the card_mod: style: of course
Ofc no.
Should a part of card-mod-row-yaml. Check for examples of using it.
So would it be better to switch to yaml rather than non-yaml? I started theming with information from this thread where Thomas et al seemed to be using the non-yaml version initially.
So I would need to convert my non-yaml to yaml then. I am not sure you can have both in parallel.
Because this is my current theme, so a lot of non-yaml for me to figure out how to get it back to yaml
Summary
card-mod-card: |
.card-content {
padding: 0em 0px 0px 0px;
}
ha-textfield {
--mdc-text-field-height: 3em;
}
ha-textfield .mdc-text-field__input {
align-self: center;
}
ha-markdown {
padding: 0em 0px 0px 0px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
card-mod-row: |
hui-generic-entity-row {
{% if "script" in config.entity -%}
color: white;
--mdc-theme-primary: rgba(255,255,255,1);
{% elif "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
color: white;
{% elif states(config.entity) == "on" -%}
color: white;
{% elif states(config.entity) == "off" -%}
color: grey;
font-style: italic;
{% elif states(config.entity) == "unavailable" -%}
color: dimgrey;
font-style: italic;
{% else -%}
{% endif -%}
height: 2em;
}
hui-generic-entity-row .info.text-content {
overflow: visible;
margin-left: 0px;
margin-right: 0px;
}
:host {
{% if "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
--paper-item-icon-color: white;
{% endif -%}
--mdc-icon-size: 1em;
--card-mod-icon-color: white;
--mdc-text-field-label-ink-color: transparent;
}
.state {
{% if "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
font-weight: bold;
{% endif -%}
}
Collapsed to not bloat the thread
ha-textfield is a part of a row.
It should not be coded from a card’s level.
In general, I do not understand this question.
-yaml is used where you need to pass through $.
In my experience, only some tasks may be solved w/o “-yaml”.
That is what I meant. I did not quite understand that.
So, if we apply card_mod: style: inside a card in the dashboard, it is essentially always using what in themes is referred to as -yaml. Correct?
So everything I can achieve in a card in the dashboard would be put in the -yaml mod in my theme?
But I am trying to access the .mdc-text-field below it.
And I tried just adding it below my code like
card-mod-row: |
hui-generic-entity-row {
height: 2em;
}
.mdc-text-field {
height: 3em;
}
.mdc-text-field__input {
align-self: center;
}
without success.
Please note that you used card-mod-card and I used card-mod-row here because you mentioned it is part of a row.
So would I be better off in the long run to convert this to the yaml version (if that is even possible)?
card-mod-row: |
hui-generic-entity-row {
{% if "script" in config.entity -%}
color: white;
--mdc-theme-primary: rgba(255,255,255,1);
{% elif "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
color: white;
{% else -%}
{% endif -%}
height: 2em;
}
hui-generic-entity-row .info.text-content {
overflow: visible;
margin-left: 0px;
margin-right: 0px;
}
No, it says if you go inside the $, then upon need the -yaml.
you can do this:
card-mod-glance: |
:host {
transition: none !important;
}
I admit it’s the the only mod I have not in a -yaml, but just so you understand the difference.
Now that I revisit, I might probably take it out, as I am not even sure it is still functional
Compare
card-mod-row: |
xxx {
...
}
yyy {
...
}
card-mod-row-yaml: |
xxx $: |
xxx {
...
}
xxx {
...
}
xxx $: |
xxx {
...
}
xxx {
...
}
.: |
xxx {
...
}
xxx {
...
}
I would have thought we are basically always inside the ShadowDOM but none of my mods work when I rename them to -yaml
card-mod-card: |
.card-content {
padding: 0em 0px 0px 0px;
}
ha-markdown {
padding: 0em 0px 0px 0px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
ha-textfield {
height: 3em;
}
.mdc-text-field__input {
align-self: center;
}
span#label {
display: none;
}
card-mod-row: |
hui-generic-entity-row {
{% if "script" in config.entity -%}
color: white;
--mdc-theme-primary: rgba(255,255,255,1);
{% elif "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
color: white;
{% elif states(config.entity) == "on" -%}
color: white;
{% elif states(config.entity) == "off" -%}
color: grey;
font-style: italic;
{% elif states(config.entity) == "unavailable" -%}
color: dimgrey;
font-style: italic;
{% else -%}
{% endif -%}
height: 2em;
}
hui-generic-entity-row .info.text-content {
overflow: visible;
margin-left: 0px;
margin-right: 0px;
}
:host {
{% if "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
--paper-item-icon-color: white;
{% endif -%}
--mdc-icon-size: 1em;
--card-mod-icon-color: white;
--mdc-text-field-label-ink-color: transparent;
}
.state {
{% if "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
font-weight: bold;
{% endif -%}
}
I know I am not a coder but I usually am able to understand a lot. But this whole CSS/ShadowDOM navigation thing just keeps messing with my head.
Would that be kind of the same as placing the card_mod: style: section directly in entities vs. undrneath one of the entities?
I.e. like the difference between
type: entities
card_mod:
style:
xxxx
entities:
- entity: sensor.something
card_mod:
style:
yyy
?
my man…
no it wouldnt…
this mods the card settings, like the header, and margins, or a scroll-bar . so the card as a container
type: entities
card_mod:
style:
xxxx
and this
- entity: sensor.something
card_mod:
style:
yyy
mods the individual entities inside that card, eg icon-color
This schema I posted is not about “card”, “row” - it is about entering or not entering shadowRoot.
1 Like
Okay. I think I am beginning to understand. Not everything, but some more.
What I now do not understand is why adding card-mod-row-yaml to my existing theme (without removing anyhing else) breaks the exisiting theme mod.
So here, the sections w/o -yaml worked until I added the -yaml section at the bottom. Why? They should be independent, should they not?
card-mod-card: |
.card-content {
padding: 0em 0px 0px 0px !important;
}
ha-markdown {
padding: 0em 0px 0px 0px !important;
text-align: center !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
card-mod-row: |
hui-generic-entity-row {
{% if "script" in config.entity -%}
color: white !important;
--mdc-theme-primary: rgba(255,255,255,1) !important;
{% elif "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
color: white !important;
{% elif states(config.entity) == "on" -%}
color: white !important;
{% elif states(config.entity) == "off" -%}
color: grey !important;
font-style: italic !important;
{% elif states(config.entity) == "unavailable" -%}
color: dimgrey !important;
font-style: italic !important;
{% else -%}
{% endif -%}
height: 2em !important;
}
hui-generic-entity-row .info.text-content {
overflow: visible !important;
margin-left: 0px !important;
margin-right: 0px !important;
}
:host {
{% if "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
--paper-item-icon-color: white !important;
{% endif -%}
--mdc-icon-size: 1em !important;
--card-mod-icon-color: white !important;
--mdc-text-field-label-ink-color: transparent !important;
}
.state {
{% if "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
font-weight: bold !important;
{% endif -%}
}
card-mod-row-yaml: |
ha-textfield $: |
.mdc-text-field {
height: 3em !important;
}
.mdc-text-field__input {
align-self: center !important;
}
P.S.: The added yaml part is c&p from the example entities card I posted earlier. The align-self seems to be working. So it is doing something. The height however is not.
Not sure if I understand you.
But if I do - it is same as
type: xxx
card_mod:
style: |
ha-card {...red...}
ha-card {...green...}
Will it be green or red? )
P.S. When sorting out smth - no need to post & test long codes.
It is distracting you (and when posting - others as well) from a possible answer.
Test with small “color: red” w/o jinja templates. Check if the “red” is applied - not mainly “by your eyes” - but by presence of this style in Code Inspector.
So that would mean you cannot have
card-mod-theme:
card-mod-row: |
...
card-mod-row-yaml: |
...
You can have either everything -yaml or nothing -yaml?
Because I now have
card-mod-card: |
xxx
card-mod-row: |
yyy
card-mod-row-yaml: |
zzz
And the only thing that is doing anything now is card-mod-row-yaml even though the mods zzz are unique to card-mod-row-yaml.
Even card-mod-card has stopped doing anything. Which I would have thought might continue to work since it is not modding the “row”.
EDIT:
I am officially giving up for tonight. Frustrated, I admit.
Because this works:
Summary
card-mod-theme: DarkAlex
card-mod-row-yaml: |
ha-textfield $: |
.mdc-text-field {
height: 3em !important;
}
.mdc-text-field__input {
align-self: center !important;
}
span#label {
display: none !important;
}
and this works
Summary
card-mod-theme: DarkAlex
card-mod-card: |
.card-content {
padding: 0em 0px 0px 0px !important;
}
ha-markdown {
padding: 0em 0px 0px 0px !important;
text-align: center !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
card-mod-row: |
hui-generic-entity-row {
{% if "script" in config.entity -%}
color: white !important;
--mdc-theme-primary: rgba(255,255,255,1) !important;
{% elif "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
color: white !important;
{% elif states(config.entity) == "on" -%}
color: white !important;
{% elif states(config.entity) == "off" -%}
color: grey !important;
font-style: italic !important;
{% elif states(config.entity) == "unavailable" -%}
color: dimgrey !important;
font-style: italic !important;
{% else -%}
{% endif -%}
height: 2em !important;
}
hui-generic-entity-row .info.text-content {
overflow: visible !important;
margin-left: 0px !important;
margin-right: 0px !important;
}
:host {
{% if "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
--paper-item-icon-color: white !important;
{% endif -%}
--mdc-icon-size: 1em !important;
--card-mod-icon-color: white !important;
--mdc-text-field-label-ink-color: transparent !important;
align-self: center !important;
--mdc-text-field-fill-color: rgba(0, 0, 0, 0) !important;
}
.state {
{% if "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
font-weight: bold !important;
{% endif -%}
}
.card-content {
padding: 0em 0px 0px 0px !important;
}
But as soon as I combine the two, i.e. simply copy the card-mod-row-yaml part underneath the non-yaml part, it stops working.
So I do not understand why. There are no duplicates inside the three mods that could interfere with each other.
I finally have it working!
I missed the .: | for wht used to be in the non-yaml!
Summary
card-mod-row-yaml: |
.: |
hui-generic-entity-row {
{% if "script" in config.entity -%}
color: white !important;
--mdc-theme-primary: rgba(255,255,255,1) !important;
{% elif "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
color: white !important;
{% elif states(config.entity) == "on" -%}
color: white !important;
{% elif states(config.entity) == "off" -%}
color: grey !important;
font-style: italic !important;
{% elif states(config.entity) == "unavailable" -%}
color: dimgrey !important;
font-style: italic !important;
{% else -%}
{% endif -%}
height: 2em !important;
}
hui-generic-entity-row .info.text-content {
overflow: visible !important;
margin-left: 0px !important;
margin-right: 0px !important;
}
:host {
{% if "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
--paper-item-icon-color: white !important;
{% endif -%}
--mdc-icon-size: 1em !important;
--card-mod-icon-color: white !important;
--mdc-text-field-label-ink-color: transparent !important;
align-self: center !important;
--mdc-text-field-fill-color: rgba(0, 0, 0, 0) !important;
}
.state {
{% if "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
font-weight: bold !important;
{% endif -%}
}
.card-content {
padding: 0em 0px 0px 0px !important;
}
ha-textfield $: |
.mdc-text-field {
height: 3em !important;
}
.mdc-text-field__input {
align-self: center !important;
}
Tested, seems to be this this not possible:
test_row:
card-mod-theme: test_row
card-mod-row-yaml: |
hui-generic-entity-row $: |
state-badge {
color: red;
}
card-mod-row: |
hui-generic-entity-row {
color: cyan;
}
This creates:
If the “-yaml” is commented:
Seems to be by a design.
In general, “-yaml” allows the same as “w/o yaml”.
Yes, it seems that anything you have in the non-yaml part can be moved to the yaml part by prefixing with .: |.
Once you do that, it works.
Did I somehow miss that in the wiki/docs? Or is this something that everybody else just knows? I feel this could maybe be stated somewhere 
Now I can finally start watching Bills vs. Steelers.
Moved to card-mod thread as per @Ildar_Gabdullin…
Can anyone suggest an avenue to explore to get the battery icon colored via the following code in custom-auto-enties using a glance card? or an alternative idea?
1 Like