Custom UI: HTML - custom content in state-cards

Share your Projects! Dashboards & Frontend
1

preview

Custom content in state cards using HTML code and entity states.

Download: https://github.com/c727/home-assistant-customui-html

config:

homeassistant:
  customize:
    input_boolean.html:
      custom_ui_state_card: state-card-html
      config:
        stylesheet: /local/random_sensors.css
        dialog: history_graph.random_sensors
        html:
          - c: "<img src='https://raw.githubusercontent.com/home-assistant/home-assistant-assets/master/logo-small.png' alt='logo' height='50px' width='50px'>"
          - c: "<ul><li>Custom HTML code</li><li>in Home Assistant</li></ul>"
          - c: "<table><tr><th>Sensor</th><th>Value</th></tr>"
          - c: "<tr><td>Sensor 1</td><td>"
          - s: sensor.random1
          - c: "</td></tr><tr><td>Sensor 2</td><td>"
          - s: sensor.random2
          - c: "</td></tr><tr><td>Sensor 3</td><td>"
          - s: sensor.random3
          - c: "</td></tr></table>"
          - m: >
               <ul>
                <li>${sensor.random1}</li>
                <li>${sensor.random2}</li>
                <li>${sensor.random3}</li>
               </ul>
8 Likes
2

@eddi89 first of all thank you very much for sharing this tool. It makes customs cards plausible for people with no html knowledge like me.
I’ve embarked on a little project using your tool and have a question.
on the weather card, how do I move the “Clear” text to one side and the 28.8 to the other? thank you.

weather

the code
https://hastebin.com/ezidoyugip.xml

1 Like
3

That looks great!

Could you please share the stylesheet you used to achieve that look?

4

Sure. This is the package
https://hastebin.com/ozefakeday.coffeescript

this is the style sheet
https://hastebin.com/itiyilanuq.css

and these are the icons

1 Like
5

Much appreciated!

6

you’re welcome

7

@eddi89 is this possible to use the frame inside of this card? I am trying to fit Google Maps Directions iframe into it. Thank you

8

I can’t pull up your CSS on hastebin on my phone… but I would imagine you could define where weather status is displayed similar to the humidity and visibility variables are displayed below.

9

@joshluster thank you. I dont know how to do that. If you get a chance look at the css.

10

Link not anymore valid… How to get again the icons?

11

Icons Download

I’ve uploaded them here. :+1:

1 Like
12

The original custom card html file link has a 404 error. does anyone have a copy of it i can download?

13

I’m not 100% sure it’s the latest version but hopefully this helps… *note: line 108 i dumped the es5 ver’ in the same file.

https://pastebin.com/e1vUtd5H

14

Awesome, thank you @goonerbeatyaa i stuck them in my git