ianadd
(ian)
May 2, 2022, 4:01am
1
How can I fully format a widget? Is there any document explaining which bits of html work here?
I have managed:
to colour the text of a template widget - coloured foreground or background
I want to do things like
a) colour the whole widget,
b) colour change based on entity state
c) maybe make it transparent
So far I have this working…
{{'<p style="background-color:green;color:red;">'}}
I’ve seen a reference to automagic but this looks like overkill.
You can use some HTML but not a lot, very basic formatting like line breaks, changing the font size and color. There is a existing PR to allow for background transparency so may want to wait for that.
1 Like
ianadd
(ian)
May 3, 2022, 8:48am
3
@dshokouhi ok, it is limited but do you know what is possible?
I have managed to use colour, but changing font size as well is defeating me.
For font size try the header tags
Here is a more definitive answer from someone who looked at android source code for what is supported: Which HTML tags are supported by Android TextView? - Stack Overflow
1 Like
ianadd
(ian)
May 4, 2022, 3:29am
5
The header tags work to make a larger font, but I have not found a way to combine that with a colour.
Thanks for the link, I’ll explore.
Edit - so far this works, Not good but …
{{'<p style="background-color:green; color:black;" ><big><strong>' if states('sensor.gbp_aud')|float(0)>1.77 else '<p style="color:red;;"><big><strong>'}}{{states('sensor.gbp_aud')}}
{{'<br><small><p style="color:black">'}}
GBP-AUD
I’ve been looking at how to change font sizes and found that you can nest as many big elements as you like to make it even bigger, for example
<big><big><big>{{ state }}</big></big></big>
The result is that you can make a template widget look similar to an entity state widget, but with a label set from another state.
I use this this to display my cars charge level and then the estimated charging time underneath and much smaller, but only when it’s plugged in.
1 Like
vaidotask
(Vaidotas K.)
September 20, 2022, 7:45am
7
Has anyone found a way to align the text to the left?
3 Likes
The underlying display is happening using android.text.Html
which apparently supports non-standard text-align
values. Adding
<p style="text-align: start">my content</p>
made my widget’s text left-aligned.
1 Like
chezzo
October 28, 2023, 3:40pm
9
Any idea how to make my widget a link which opens the Home Assistant app?