šŸ”¹ Card-mod - Add css styles to any lovelace card

Would someone mind helping me with the required style syntax for adjusting the grid margin values in the layout below please?

I have the following button layout where Iā€™d like to reduce the gap between each button.
image

If I look at the console to inspect CSS layout, I can see the following margin information:
image

Which is linked to the following:
image

When I click on that element, it shows this around the buttons:
image

I just donā€™t know how to translate that into the syntax for style, so any advice would be very welcome please!

My yaml is as follows:

      - type: vertical-stack
        cards:
          - type: custom:layout-card
            layout: grid
            gridrows: 50% 50%
            gridcols: 15% 35% 15% 35%
            gridgap: 1px
            cards:
              - type: "custom:button-card"
                entity: light.test
                gridrow: 1 / 3
                gridcol: 1 / 1
                style: "ha-card { height: 100%; }"
              - type: "custom:button-card"
                entity: light.test
                gridrow: 1 / 1
                gridcol: 2 / 2
                style: "ha-card { height: 55px; }"
              - type: "custom:button-card"
                entity: light.test
                gridrow: 2 / 2
                gridcol: 2 / 2
                style: "ha-card { height: 55px; }"
              - type: "custom:button-card"
                entity: light.test
                gridrow: 1 / 3
                gridcol: 3 / 3
                style: "ha-card { height: 100%; }"
              - type: "custom:button-card"
                entity: light.test
                gridrow: 1 / 1
                gridcol: 4 / 4
                style: "ha-card { height: 55px; }"
              - type: "custom:button-card"
                entity: light.test
                gridrow: 2 / 2
                gridcol: 4 / 4
                style: "ha-card { height: 55px; }"

Thanks for your help! your example didnā€™t work at first but with a little bit of tinkering I found this solution at the end:

- entity: input_number.turflijst_duikboot_pils
  type: custom:multiple-entity-row
  name: test
  secondary_info: last-changed
  show_state: false
  icon: mdi:cart
  debug_cardmod: true
  style: 
    .: 
    "state-badge:not(.icon-small)":
      $: 
        "ha-icon":
          $: |
            ha-svg-icon {
              color: green;
            }

:tada:

CARD-MOD 2.0 has just been released

To be honest, this may be too earlyā€¦ but I just couldnā€™t wait! Itā€™s too awesome!

Remember how this thread started with me saying ā€œnot a custom: in sight.ā€ because you didnā€™t have to do type: custom:card-modder (or type custom:mod-card !) ever again?
Well, now Iā€™m doing away with style: too.

All styles can now be moved over to your theme and be applied to everything at once. Or just a view, or just a card - itā€™s your choice!

Styling via styles still works, of course, and you can even use both methods at once.

Since I was so eager to release this, thereā€™s absolutely no documentation yet. But I included two demo themes.

Airy:

and Art-nouveau:

To try them out. Install them as per the link above, then install card-mod 2.0 and select the theme in your user settings. You wonā€™t need to do anything else.


To just try it out, you can also try running my test docker containers.
Assuming you have git and docker installed and know your way around them somewhat:

  • clone the entire repository
  • go to the test directory
  • run docker-compose up prod
  • point your browser to http://localhost:5001
  • log in using user: dev password: dev
12 Likes

This is super cool, appreciate your work Thomas!

Looks like a great improvement. Iā€™m not yet clear on how I apply different card mod styles per existing theme though.

I have a main card style that I apply everywhere - except for where a card is a row item in an entities card, they get a different transparent style to blend in with the main card.

This happens for both my day and night theme.

Will keep digging in the theme files and see if I can work it out.

I realize it can be tricky to understand whatā€™s going on. I will update the documentation soon - but I need some rest first.

The basics is that you have some new theme variables, card-mod-{thing} where thing can be e.g. card, row, glanceā€¦ and thatā€™s where you put what youā€™d earlier put in style:.

Itā€™s important that the variable values are strings, so the | is absolutely vital.

E.g:

card-mod-card: |
  ha-card {
    background: red;
  }

card-mod-row: |
  :host {
    background: blue;
  }

Edit:
Oh! And card-mod now adds a class to every card depending on itā€™s type, and lets the user add more.

So e.g.

card-mod-card: |
  ha-card {
    background: purple;
  }
  ha-card.type-button {
    background: teal;
  }
  ha-card.pink {
    background: pink;
  }

Would make all cards purple except buttons, which would be teal, and cards where the user has specified:

type: entities
class: pink
entities:
  - light.bed_light

which would be pink.

4 Likes

My UI is so much faster now! I noticed on iPhone (official app) that markdown card was loading slower. Icons were there, but not the markdowns. Now all is instant.

Hey all, hoping to get some help in this thread. I have a dropdown list but the is there a way to align it better and keep it in the card when it comes to width? I have CSS styling options but just donā€™t know what to style :slight_smile:

drpdwn1

drpdwn2

Hmmm I donā€™t know is it just me orā€¦After updating to 2.0.0 version from 14 when entering HA address web page freezes for a couple of seconds. Iā€™ve just installled back 14 version and the freeze is gone. In my java script console all I see is:

Uncaught (in promise) TypeError: Object(...)()._addCard is not a function

but it is an error from card-tools and I have as in 2 version as in 14. ANy ideas what might be the problem? I tested in latest firefox and in Edge so I guess Chrome is also affected by thisā€¦

Is this just me or? Core in a Venv on ubuntuā€¦:

it seems to work, but tons, and tons of errorsā€¦ they keep on going as I change views to.

This is a sample after selecting the theme and then clicking the default view:

I can open an issue on github if neededā€¦

Jul 23 13:37:34 server hass[18523]: 2020-07-23 13:37:34 ERROR (MainThread) [homeassistant.components.websocket_api.http.connection.140458933657040] Error handling message: Unknown error
Jul 23 13:37:34 server hass[18523]: Traceback (most recent call last):
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 229, in async_render
Jul 23 13:37:34 server hass[18523]:     return compiled.render(kwargs).strip()
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/jinja2/environment.py", line 1045, in render
Jul 23 13:37:34 server hass[18523]:     self.environment.handle_exception()
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/jinja2/environment.py", line 787, in handle_exception
Jul 23 13:37:34 server hass[18523]:     raise rewrite_traceback_stack(source=source)
Jul 23 13:37:34 server hass[18523]:   File "<template>", line 3, in top-level template code
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/jinja2/sandbox.py", line 412, in call
Jul 23 13:37:34 server hass[18523]:     return __context.call(__obj, *args, **kwargs)
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 366, in __call__
Jul 23 13:37:34 server hass[18523]:     state = _get_state(self._hass, entity_id)
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 480, in _get_state
Jul 23 13:37:34 server hass[18523]:     state = hass.states.get(entity_id)
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/core.py", line 885, in get
Jul 23 13:37:34 server hass[18523]:     return self._states.get(entity_id.lower())
Jul 23 13:37:34 server hass[18523]: jinja2.exceptions.UndefinedError: 'dict object' has no attribute 'entity'
Jul 23 13:37:34 server hass[18523]: During handling of the above exception, another exception occurred:
Jul 23 13:37:34 server hass[18523]: Traceback (most recent call last):
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/components/websocket_api/connection.py", line 95, in async_handle
Jul 23 13:37:34 server hass[18523]:     handler(self.hass, self, schema(msg))
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 265, in handle_render_template
Jul 23 13:37:34 server hass[18523]:     state_listener()
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 253, in state_listener
Jul 23 13:37:34 server hass[18523]:     msg["id"], {"result": template.async_render(variables)}
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 231, in async_render
Jul 23 13:37:34 server hass[18523]:     raise TemplateError(err)
Jul 23 13:37:34 server hass[18523]: homeassistant.exceptions.TemplateError: UndefinedError: 'dict object' has no attribute 'entity'
Jul 23 13:37:34 server hass[18523]: 2020-07-23 13:37:34 ERROR (MainThread) [homeassistant.components.websocket_api.http.connection.140458933657040] Error handling message: Unknown error
Jul 23 13:37:34 server hass[18523]: Traceback (most recent call last):
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 229, in async_render
Jul 23 13:37:34 server hass[18523]:     return compiled.render(kwargs).strip()
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/jinja2/environment.py", line 1045, in render
Jul 23 13:37:34 server hass[18523]:     self.environment.handle_exception()
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/jinja2/environment.py", line 787, in handle_exception
Jul 23 13:37:34 server hass[18523]:     raise rewrite_traceback_stack(source=source)
Jul 23 13:37:34 server hass[18523]:   File "<template>", line 3, in top-level template code
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/jinja2/sandbox.py", line 412, in call
Jul 23 13:37:34 server hass[18523]:     return __context.call(__obj, *args, **kwargs)
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 366, in __call__
Jul 23 13:37:34 server hass[18523]:     state = _get_state(self._hass, entity_id)
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 480, in _get_state
Jul 23 13:37:34 server hass[18523]:     state = hass.states.get(entity_id)
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/core.py", line 885, in get
Jul 23 13:37:34 server hass[18523]:     return self._states.get(entity_id.lower())
Jul 23 13:37:34 server hass[18523]: jinja2.exceptions.UndefinedError: 'dict object' has no attribute 'entity'
Jul 23 13:37:34 server hass[18523]: During handling of the above exception, another exception occurred:
Jul 23 13:37:34 server hass[18523]: Traceback (most recent call last):
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/components/websocket_api/connection.py", line 95, in async_handle
Jul 23 13:37:34 server hass[18523]:     handler(self.hass, self, schema(msg))
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 265, in handle_render_template
Jul 23 13:37:34 server hass[18523]:     state_listener()
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 253, in state_listener
Jul 23 13:37:34 server hass[18523]:     msg["id"], {"result": template.async_render(variables)}
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 231, in async_render
Jul 23 13:37:34 server hass[18523]:     raise TemplateError(err)
Jul 23 13:37:34 server hass[18523]: homeassistant.exceptions.TemplateError: UndefinedError: 'dict object' has no attribute 'entity'
Jul 23 13:37:34 server hass[18523]: 2020-07-23 13:37:34 ERROR (MainThread) [homeassistant.components.websocket_api.http.connection.140458933657040] Error handling message: Unknown error
Jul 23 13:37:34 server hass[18523]: Traceback (most recent call last):
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 229, in async_render
Jul 23 13:37:34 server hass[18523]:     return compiled.render(kwargs).strip()
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/jinja2/environment.py", line 1045, in render
Jul 23 13:37:34 server hass[18523]:     self.environment.handle_exception()
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/jinja2/environment.py", line 787, in handle_exception
Jul 23 13:37:34 server hass[18523]:     raise rewrite_traceback_stack(source=source)
Jul 23 13:37:34 server hass[18523]:   File "<template>", line 3, in top-level template code
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/jinja2/sandbox.py", line 412, in call
Jul 23 13:37:34 server hass[18523]:     return __context.call(__obj, *args, **kwargs)
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 366, in __call__
Jul 23 13:37:34 server hass[18523]:     state = _get_state(self._hass, entity_id)
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 480, in _get_state
Jul 23 13:37:34 server hass[18523]:     state = hass.states.get(entity_id)
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/core.py", line 885, in get
Jul 23 13:37:34 server hass[18523]:     return self._states.get(entity_id.lower())
Jul 23 13:37:34 server hass[18523]: jinja2.exceptions.UndefinedError: 'dict object' has no attribute 'entity'
Jul 23 13:37:34 server hass[18523]: During handling of the above exception, another exception occurred:
Jul 23 13:37:34 server hass[18523]: Traceback (most recent call last):
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/components/websocket_api/connection.py", line 95, in async_handle
Jul 23 13:37:34 server hass[18523]:     handler(self.hass, self, schema(msg))
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 265, in handle_render_template
Jul 23 13:37:34 server hass[18523]:     state_listener()
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 253, in state_listener
Jul 23 13:37:34 server hass[18523]:     msg["id"], {"result": template.async_render(variables)}
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 231, in async_render
Jul 23 13:37:34 server hass[18523]:     raise TemplateError(err)
Jul 23 13:37:34 server hass[18523]: homeassistant.exceptions.TemplateError: UndefinedError: 'dict object' has no attribute 'entity'
Jul 23 13:37:34 server hass[18523]: 2020-07-23 13:37:34 ERROR (MainThread) [homeassistant.components.websocket_api.http.connection.140458933657040] Error handling message: Unknown error
Jul 23 13:37:34 server hass[18523]: Traceback (most recent call last):
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 229, in async_render
Jul 23 13:37:34 server hass[18523]:     return compiled.render(kwargs).strip()
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/jinja2/environment.py", line 1045, in render
Jul 23 13:37:34 server hass[18523]:     self.environment.handle_exception()
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/jinja2/environment.py", line 787, in handle_exception
Jul 23 13:37:34 server hass[18523]:     raise rewrite_traceback_stack(source=source)
Jul 23 13:37:34 server hass[18523]:   File "<template>", line 3, in top-level template code
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/jinja2/sandbox.py", line 412, in call
Jul 23 13:37:34 server hass[18523]:     return __context.call(__obj, *args, **kwargs)
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 366, in __call__
Jul 23 13:37:34 server hass[18523]:     state = _get_state(self._hass, entity_id)
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 480, in _get_state
Jul 23 13:37:34 server hass[18523]:     state = hass.states.get(entity_id)
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/core.py", line 885, in get
Jul 23 13:37:34 server hass[18523]:     return self._states.get(entity_id.lower())
Jul 23 13:37:34 server hass[18523]: jinja2.exceptions.UndefinedError: 'dict object' has no attribute 'entity'
Jul 23 13:37:34 server hass[18523]: During handling of the above exception, another exception occurred:
Jul 23 13:37:34 server hass[18523]: Traceback (most recent call last):
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/components/websocket_api/connection.py", line 95, in async_handle
Jul 23 13:37:34 server hass[18523]:     handler(self.hass, self, schema(msg))
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 265, in handle_render_template
Jul 23 13:37:34 server hass[18523]:     state_listener()
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 253, in state_listener
Jul 23 13:37:34 server hass[18523]:     msg["id"], {"result": template.async_render(variables)}
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 231, in async_render
Jul 23 13:37:34 server hass[18523]:     raise TemplateError(err)
Jul 23 13:37:34 server hass[18523]: homeassistant.exceptions.TemplateError: UndefinedError: 'dict object' has no attribute 'entity'
Jul 23 13:37:34 server hass[18523]: 2020-07-23 13:37:34 ERROR (MainThread) [homeassistant.components.websocket_api.http.connection.140458933657040] Error handling message: Unknown error
Jul 23 13:37:34 server hass[18523]: Traceback (most recent call last):
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 229, in async_render
Jul 23 13:37:34 server hass[18523]:     return compiled.render(kwargs).strip()
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/jinja2/environment.py", line 1045, in render
Jul 23 13:37:34 server hass[18523]:     self.environment.handle_exception()
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/jinja2/environment.py", line 787, in handle_exception
Jul 23 13:37:34 server hass[18523]:     raise rewrite_traceback_stack(source=source)
Jul 23 13:37:34 server hass[18523]:   File "<template>", line 3, in top-level template code
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/jinja2/sandbox.py", line 412, in call
Jul 23 13:37:34 server hass[18523]:     return __context.call(__obj, *args, **kwargs)
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 366, in __call__
Jul 23 13:37:34 server hass[18523]:     state = _get_state(self._hass, entity_id)
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 480, in _get_state
Jul 23 13:37:34 server hass[18523]:     state = hass.states.get(entity_id)
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/core.py", line 885, in get
Jul 23 13:37:34 server hass[18523]:     return self._states.get(entity_id.lower())
Jul 23 13:37:34 server hass[18523]: jinja2.exceptions.UndefinedError: 'dict object' has no attribute 'entity'
Jul 23 13:37:34 server hass[18523]: During handling of the above exception, another exception occurred:
Jul 23 13:37:34 server hass[18523]: Traceback (most recent call last):
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/components/websocket_api/connection.py", line 95, in async_handle
Jul 23 13:37:34 server hass[18523]:     handler(self.hass, self, schema(msg))
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 265, in handle_render_template
Jul 23 13:37:34 server hass[18523]:     state_listener()
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 253, in state_listener
Jul 23 13:37:34 server hass[18523]:     msg["id"], {"result": template.async_render(variables)}
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 231, in async_render
Jul 23 13:37:34 server hass[18523]:     raise TemplateError(err)
Jul 23 13:37:34 server hass[18523]: homeassistant.exceptions.TemplateError: UndefinedError: 'dict object' has no attribute 'entity'
Jul 23 13:37:34 server hass[18523]: 2020-07-23 13:37:34 ERROR (MainThread) [homeassistant.components.websocket_api.http.connection.140458933657040] Error handling message: Unknown error
Jul 23 13:37:34 server hass[18523]: Traceback (most recent call last):
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 229, in async_render
Jul 23 13:37:34 server hass[18523]:     return compiled.render(kwargs).strip()
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/jinja2/environment.py", line 1045, in render
Jul 23 13:37:34 server hass[18523]:     self.environment.handle_exception()
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/jinja2/environment.py", line 787, in handle_exception
Jul 23 13:37:34 server hass[18523]:     raise rewrite_traceback_stack(source=source)
Jul 23 13:37:34 server hass[18523]:   File "<template>", line 3, in top-level template code
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/jinja2/sandbox.py", line 412, in call
Jul 23 13:37:34 server hass[18523]:     return __context.call(__obj, *args, **kwargs)
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 366, in __call__
Jul 23 13:37:34 server hass[18523]:     state = _get_state(self._hass, entity_id)
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 480, in _get_state
Jul 23 13:37:34 server hass[18523]:     state = hass.states.get(entity_id)
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/core.py", line 885, in get
Jul 23 13:37:34 server hass[18523]:     return self._states.get(entity_id.lower())
Jul 23 13:37:34 server hass[18523]: jinja2.exceptions.UndefinedError: 'dict object' has no attribute 'entity'
Jul 23 13:37:34 server hass[18523]: During handling of the above exception, another exception occurred:
Jul 23 13:37:34 server hass[18523]: Traceback (most recent call last):
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/components/websocket_api/connection.py", line 95, in async_handle
Jul 23 13:37:34 server hass[18523]:     handler(self.hass, self, schema(msg))
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 265, in handle_render_template
Jul 23 13:37:34 server hass[18523]:     state_listener()
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 253, in state_listener
Jul 23 13:37:34 server hass[18523]:     msg["id"], {"result": template.async_render(variables)}
Jul 23 13:37:34 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 231, in async_render
Jul 23 13:37:34 server hass[18523]:     raise TemplateError(err)
Jul 23 13:37:34 server hass[18523]: homeassistant.exceptions.TemplateError: UndefinedError: 'dict object' has no attribute 'entity'
Jul 23 13:37:35 server hass[18523]: 2020-07-23 13:37:34 ERROR (MainThread) [homeassistant.components.websocket_api.http.connection.140458933657040] Error handling message: Unknown error
Jul 23 13:37:35 server hass[18523]: Traceback (most recent call last):
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 229, in async_render
Jul 23 13:37:35 server hass[18523]:     return compiled.render(kwargs).strip()
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/jinja2/environment.py", line 1045, in render
Jul 23 13:37:35 server hass[18523]:     self.environment.handle_exception()
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/jinja2/environment.py", line 787, in handle_exception
Jul 23 13:37:35 server hass[18523]:     raise rewrite_traceback_stack(source=source)
Jul 23 13:37:35 server hass[18523]:   File "<template>", line 3, in top-level template code
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/jinja2/sandbox.py", line 412, in call
Jul 23 13:37:35 server hass[18523]:     return __context.call(__obj, *args, **kwargs)
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 366, in __call__
Jul 23 13:37:35 server hass[18523]:     state = _get_state(self._hass, entity_id)
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 480, in _get_state
Jul 23 13:37:35 server hass[18523]:     state = hass.states.get(entity_id)
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/core.py", line 885, in get
Jul 23 13:37:35 server hass[18523]:     return self._states.get(entity_id.lower())
Jul 23 13:37:35 server hass[18523]: jinja2.exceptions.UndefinedError: 'dict object' has no attribute 'entity'
Jul 23 13:37:35 server hass[18523]: During handling of the above exception, another exception occurred:
Jul 23 13:37:35 server hass[18523]: Traceback (most recent call last):
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/components/websocket_api/connection.py", line 95, in async_handle
Jul 23 13:37:35 server hass[18523]:     handler(self.hass, self, schema(msg))
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 265, in handle_render_template
Jul 23 13:37:35 server hass[18523]:     state_listener()
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 253, in state_listener
Jul 23 13:37:35 server hass[18523]:     msg["id"], {"result": template.async_render(variables)}
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 231, in async_render
Jul 23 13:37:35 server hass[18523]:     raise TemplateError(err)
Jul 23 13:37:35 server hass[18523]: homeassistant.exceptions.TemplateError: UndefinedError: 'dict object' has no attribute 'entity'
Jul 23 13:37:35 server hass[18523]: 2020-07-23 13:37:34 ERROR (MainThread) [homeassistant.components.websocket_api.http.connection.140458933657040] Error handling message: Unknown error
Jul 23 13:37:35 server hass[18523]: Traceback (most recent call last):
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 229, in async_render
Jul 23 13:37:35 server hass[18523]:     return compiled.render(kwargs).strip()
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/jinja2/environment.py", line 1045, in render
Jul 23 13:37:35 server hass[18523]:     self.environment.handle_exception()
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/jinja2/environment.py", line 787, in handle_exception
Jul 23 13:37:35 server hass[18523]:     raise rewrite_traceback_stack(source=source)
Jul 23 13:37:35 server hass[18523]:   File "<template>", line 3, in top-level template code
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/jinja2/sandbox.py", line 412, in call
Jul 23 13:37:35 server hass[18523]:     return __context.call(__obj, *args, **kwargs)
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 366, in __call__
Jul 23 13:37:35 server hass[18523]:     state = _get_state(self._hass, entity_id)
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 480, in _get_state
Jul 23 13:37:35 server hass[18523]:     state = hass.states.get(entity_id)
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/core.py", line 885, in get
Jul 23 13:37:35 server hass[18523]:     return self._states.get(entity_id.lower())
Jul 23 13:37:35 server hass[18523]: jinja2.exceptions.UndefinedError: 'dict object' has no attribute 'entity'
Jul 23 13:37:35 server hass[18523]: During handling of the above exception, another exception occurred:
Jul 23 13:37:35 server hass[18523]: Traceback (most recent call last):
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/components/websocket_api/connection.py", line 95, in async_handle
Jul 23 13:37:35 server hass[18523]:     handler(self.hass, self, schema(msg))
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 265, in handle_render_template
Jul 23 13:37:35 server hass[18523]:     state_listener()
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 253, in state_listener
Jul 23 13:37:35 server hass[18523]:     msg["id"], {"result": template.async_render(variables)}
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 231, in async_render
Jul 23 13:37:35 server hass[18523]:     raise TemplateError(err)
Jul 23 13:37:35 server hass[18523]: homeassistant.exceptions.TemplateError: UndefinedError: 'dict object' has no attribute 'entity'
Jul 23 13:37:35 server hass[18523]: 2020-07-23 13:37:35 ERROR (MainThread) [homeassistant.components.websocket_api.http.connection.140458933657040] Error handling message: Unknown error
Jul 23 13:37:35 server hass[18523]: Traceback (most recent call last):
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 229, in async_render
Jul 23 13:37:35 server hass[18523]:     return compiled.render(kwargs).strip()
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/jinja2/environment.py", line 1045, in render
Jul 23 13:37:35 server hass[18523]:     self.environment.handle_exception()
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/jinja2/environment.py", line 787, in handle_exception
Jul 23 13:37:35 server hass[18523]:     raise rewrite_traceback_stack(source=source)
Jul 23 13:37:35 server hass[18523]:   File "<template>", line 3, in top-level template code
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/jinja2/sandbox.py", line 412, in call
Jul 23 13:37:35 server hass[18523]:     return __context.call(__obj, *args, **kwargs)
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 366, in __call__
Jul 23 13:37:35 server hass[18523]:     state = _get_state(self._hass, entity_id)
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 480, in _get_state
Jul 23 13:37:35 server hass[18523]:     state = hass.states.get(entity_id)
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/core.py", line 885, in get
Jul 23 13:37:35 server hass[18523]:     return self._states.get(entity_id.lower())
Jul 23 13:37:35 server hass[18523]: jinja2.exceptions.UndefinedError: 'dict object' has no attribute 'entity'
Jul 23 13:37:35 server hass[18523]: During handling of the above exception, another exception occurred:
Jul 23 13:37:35 server hass[18523]: Traceback (most recent call last):
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/components/websocket_api/connection.py", line 95, in async_handle
Jul 23 13:37:35 server hass[18523]:     handler(self.hass, self, schema(msg))
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 265, in handle_render_template
Jul 23 13:37:35 server hass[18523]:     state_listener()
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 253, in state_listener
Jul 23 13:37:35 server hass[18523]:     msg["id"], {"result": template.async_render(variables)}
Jul 23 13:37:35 server hass[18523]:   File "/home/ctrl/ha/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 231, in async_render
Jul 23 13:37:35 server hass[18523]:     raise TemplateError(err)
Jul 23 13:37:35 server hass[18523]: homeassistant.exceptions.TemplateError: UndefinedError: 'dict object' has no attribute 'entity'

You have an incorrectly configured template somewhere.

Ahh. I was hoping that wasnā€™t the case. lol So the hunt beginsā€¦ You have any ideas on the best way to track it down. I think ive reached the point where I have so much going on im starting to forget what is whatā€¦

Screenshot_20200723_225428

Lovelace is expecting an entity from one of your templates but not getting anything. So look for a template that defines an entity.

1 Like

needle in a haystack, goitcha! haha

Thanks, ill begin to search. between HA and node-red, and my horrible -long-way- of writing code we are talking probably 3000 lines or more to go through. Ive changed names on entitys multiple times, which ive now stopped doing and started naming them generic names like ā€˜light-3ā€™ instaed of kitchen-lightā€¦ etcā€¦ could be anything. Ive got tons of templates.

I dived into the wonders of customizing Lovelace triggered by this awesome layout: A different take on designing a Lovelace UI

Iā€™ve come a long way But Iā€™m struggling now with styling a markdown card. This markdown card is within a picture-elements card. Iā€™m still a bit confused about styling lovelace. Itā€™s not consistent or every type of card. I also donā€™t understand the $ signs in the style definitions $: Couldnā€™t find a definition of this, searching for it is impossible :slight_smile:

So when I define the card as follows, my styles end up at the wrong place (at least I assume), because they are ignored by the

s with icons I want to layout.
<hui-markdown-card class="element">
	<ha-card class="type-custom-hui-markdown-card">
		<slot></slot>
		<ha-markdown breaks="" class="no-header">
			<ha-markdown-element>
				<div>
					<ha-icon icon="mdi:sofa"/> 24.2Āŗ
				</div>
				<div>
					<ha-icon icon="mdi:bed"/> 24.6Āŗ
				</div>
				<div>
					<ha-icon icon="mdi:desktop-tower-monitor"/> 23.91Āŗ
				</div>
			</ha-markdown-element>
			<card-mod slot="none"><!---->
				<style>
					ha-markdown-element > font > ha-icon {vertical-align: 3%; opacity: 0.6;}
					ha-markdown-element > p > span {font-family: SF Text; font-size: 5vw; 
					font-weight: 200; margin-left: -0.3vw; letter-spacing: -0.05vw;}
				</style>
				<!---->
			</card-mod>
			<card-mod slot="none"><!---->
				<style>
					
				</style>
				<!---->
			</card-mod>
		</ha-markdown>
    <card-mod slot="none"><!---->
		<style>
        .: '* {display: here}'
		ha-icon {
			color: red
		}
		ha-card {
			top: 65%, left: 60.5%, width: 21%
		}
		ha-markdown-element {
			display: grid, grid-template-columns: repeat(3, 1fr)
		}
      </style>
	  <!---->
	</card-mod>
</ha-card>

Thanks in advance for helping me out.

keep getting this error in inspector after updating to HA 113 (and card tools 2ā€¦?):

since it is a card mod, Id first post here, to hear from other users if this happens elsewhere too. using this simple style for ages:

type: custom:dark-sky-weather-card
style: |
 ha-card {
 background: url("/local/images/weather-background-{{states('sun.sun')}}.png");
 background-size: 100% 400px;
 }

and it shows the background just fine:

Hi

Can someone help with a card-mod config for styling the element chartHeader and/or chartTitle for the history-graph. I have spent hours but I simple donā€™t get it :sob:

This is the JS path:

document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view").shadowRoot.querySelector("#columns > div:nth-child(3) > hui-history-graph-card").shadowRoot.querySelector("ha-card > div > state-history-charts").shadowRoot.querySelector("state-history-chart-line").shadowRoot.querySelector("#chart").shadowRoot.querySelector("div.chartHeader > div.chartTitle")

Hi @thomasloven
Can Card-mod or anything else be used to position your badge card in to the top right corner of a card in line with the heading?
Also many thanks for the badge card, Iā€™ve been hoping for this for a long time. The above would really be a dream layout for me.

Cheers,

Linton

Anyone figure out how to make all fan icons spin when active? I think this example can be super useful as it will allow to also change colors of icons globally based on state without the need for ā€œCustom UIā€ add-on thatā€™s on its last leg :slight_smile:

1 Like

For the color change, i have this in my button template:

    state: &button_state
      - value: 'on'
        styles:
          card: [background-color: 'rgba(79, 79, 79, 0.4)', box-shadow: '0px 0px 10px 1px var(--button-card-light-color-no-temperature)']

Its only the shadow that changes the color on state, but for me, ist right.

and for the spinning fan icon i use animate SVG (have it form Mattias_Persson)

8 Likes