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
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
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
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
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.
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.
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:
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?
There are quite a few really cool ideas in your gist that I will need to test
I see that you are using a few animations, including marquee and are also using conditions.
I saw in the cookbook that some conditions can be checked using e.g. [data-state=xx].
So is it also possible to check if the text in a textfield overflows? Maybe using a calc() of the width or maybe something more elegan?
I am trying to scroll text if it is too long for the textfield.
Problems right now
It scrolls independent of the text length → missing if condition
The text remains visible when it scrolls out of the field → not sure but maybe selection of the text-field rather than the text?
It does not actually scroll the text but rather the field, it seems, i.e. the text is still cut-off → maybe linked to problem 2?
→ not sure but maybe selection of the text-field rather than the text?