Home Assistant makes extensive use of something called shadow DOM. hash - Whatever comes after # in the current URL.browser - The browser_mod deviceID of the device.user - The name of the currently logged in user.config - The entire configuration of the card, entity or badge - ( config.entity may be of special interest).Style: | :host TemplatesĪll styles may contain jinja2 templates that will be processed by the Home Assistant backend.Ĭard-mod also makes the following variables available for templates: Those can both be set and used in card-mod - prepended by two dashes: TIP: Home Assistant themes makes use of CSS variables. Screenshot of the ha-card element in the Chrome DOM inspector The bottommost element that can be styled is the. See the manual for each card to see how to specify parameters for the included card(s).
Note, though that those cards often include other cards, which card-mod can work on. conditional, entity_filter, vertical-stack, horizontal-stack, grid. This includes almost every card which can be seen, but not e.g. NOTE: card-mod only works on cards that contain a ha-card element. In basic form, this parameter contains a string of CSS which will be injected into the element of the card. This indicates that this card has card-mod code which will not be shown in the visual editor.Ĭards are styled by adding a card_mod parameter to the card configuration.
You should also see a little brush icon popping up near the "SHOW VISUAL EDITOR" button. You should see the text of the card turn red as you type.
0 kommentar(er)
