is there a way to also get the last_changed time? so i could see since when its running?
maybe even a calculation of how long?
and maybe only IF its running?
Is it a question?
I am asking since you provided some code.
Anything supported.
Use card-mod.
Go to card-mod thread → 1st post → link at the bottom → styling badges on top, styling badges in picture-elemnts, using “:after” & “:before”
Thankyou for your help.
It kicked me a bit in the direction of my goal.
i already had card mod installed but didnt know how to ‘activate’ it.
now i found the part for the configuration.yaml
then i tested it and it basically works.
now i tried to follow your path, but i dont know which link at the bottom you mean (1st post bottom has more then one link, depending on what bottom is) and thread bottom also exists.
So i clicked on every link i found and searched for “styling badges on top” or a part of it.
No luck.
i even searched then every page for the :before and :after, even the whole forum search function didnt return a thing.
And on the github page of the mod i also didnt see a thing.
I am autistic, i have trouble getting instructions from NTs.
Can you help me a bit, so i find what you showed me?
On that accumulative post you will find links to other posts with examples.
These are examples for badges:
Note that badges may be located:
– on the top of the page - and those examples for this case basically;
– in a dedicated custom:badge-card - see examples for this card on that accumulative post (here is a link);
– in a picture elements card.
Structure of a badge in these 3 cases is basically same.
That means that these styles (picture above) may be used in all these 3 cases - means that these styles are UNIVERSAL.
But:
– in case of custom:badge-card - some additional styles (like “change ALL badges in the card”) are possible (actually, this style is not described in the corresponding post but it is rather easy, ask me if you are interested, I’ll add it);
– in case of picture-elements card - same as above, additional styles like “change ALL badges in the card” are possible.
Regarding picture elements.
Here are styles for it:
Here you will see that in part of badges it is specified like “possible styles for badges may be found here” (with a link for “badges on the top”).
But - picture-elements already has a “style” option for badges. Some tutorial may be found here (which is about using “style”, not about using card-mod).
And this “style” option allows to change SOME styles.
But:
– it does not allow to change styles for some elements of a badge;
– it does not allow conditional styling (like “if ON → color: white, otherwise red”).
If you need it - use card-mod then.
To display the “last_changed” attribute for a badge - you need to use “:after”, “:before” methods.
Find a corresponding link in that accumulative post.
I just noticed that now you are asking me about state-icon, not a badge.
Since you first asked about a badge in a previous thread - I answered you about badges.
To achieve this - you may use at least 2 methods:
– create a template sensor which returns a “running since XXX hours” state, then place this sensor as a “state-label”;
– place ANY state-label (for “sun.sun”, for example) + specify a “states.switch.my_switch.last_changed” as a content for “:after” or “:before” pseudo class (i.e. show this text instead of “Above horizon”).
If you want to display this text right under the icon - then I would suggest you the 2nd way but you need to add that pseudo class to the icon itself (i.e. w/o adding state-label element).
Well, a person who doesn’t owe you anything explained you ideas for all possible variants - and still you are not satisfied since you need SOMEONE TO CREATE EVERYTHING FOR YOU.
No “thanks”, just complains.
There are TWO methods:
– template sensor placed as state-label - you need to create this sensor;
– displaying info placed inside a pseudo class by card-mod.
You need to choose a way.
If 2nd way is chosen - then you should create a code BASED on provided examples (provided you a way to find them many times).
“Based” means - using DOM navigation, specify a path to a needed element.
There are plenty of cards, plenty of elements in Lovelace, plenty of possible use-cases - not easy to provide examples for ALL of them.
People should LEARN how to adapt basic examples for your needs.
Take this READY example and change it for your needs:
Here:
– added a “:after” pseudo class with some user-defined text (you should specify your own text);
– the whole “state-badge” element is converted into a flex-row to place the added pseudo class on the right; otherwise the added element will be placed below the icon.
P.S. Just for a record. You seem to be rather ungrateful man.