Skip to content

Commit

Permalink
Add mod-card
Browse files Browse the repository at this point in the history
  • Loading branch information
thomasloven committed Nov 11, 2019
1 parent ebc779f commit 7502a5c
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 37 deletions.
57 changes: 25 additions & 32 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Specifically, it looks for `style:` in any cards configuration, and applies the

The basis of almost all lovelace cards is a `ha-card` element, so that's probably where you'd want to start.

Note that some cards (`conditional`, `entity-filter`, `horizontal-stack` and `vertical-stack` as well as some custom cards, like `layout-card`, `auto-entities` and `state-switch` among others) do *not* have a `ha-card` element, and `card-mod` will thus **not** work for those. There is a workaround, though. See FAQ below.
Note that some cards (`conditional`, `entity-filter`, `horizontal-stack` and `vertical-stack` as well as some custom cards, like `layout-card`, `auto-entities` and `state-switch` among others) do *not* have a `ha-card` element, and `card-mod` will thus **not** work for those. There is a workaround, though. See [mod-card below](#mod-card).

---

Expand Down Expand Up @@ -183,6 +183,28 @@ entity: alarm_control_panel.alarm

![advanced](https://user-images.githubusercontent.com/1299821/59151780-59732c80-8a39-11e9-9f19-34d3e0dbd8e9.png)

## Mod-card
There are some cards where card-mod just won't work.
Those cards often are not really *cards* at all, but change how other cards work. Examples include: `conditional`, `entity-filter`, `horizontal-stack` and `vertical-stack` as well as some custom cards, like `layout-card`, `auto-entities` and `state-switch` among others.

For those cases, a special `mod-card` is provided as a workaround:

```yaml
type: custom:mod-card
style: |
ha-card {
border: 1px solid green;
}
card:
type: vertical-stack
cards:
- type: light
entity: light.bed_light
- type: light
entity: light.kitchen_lights
```
![mod-card](https://user-images.githubusercontent.com/1299821/68621707-b71c1100-04d0-11ea-8473-965dbd77b762.png)

# Bonus function - entities card tap\_action
With card-mod installed, you will be able to use `tap_action` with rows in your entities cards:

Expand Down Expand Up @@ -220,6 +242,8 @@ entities:
- light.bed_light
```



# FAQ

### How do I convert my old card-modder configuration to card-mod?
Expand All @@ -245,36 +269,5 @@ For rows in an entities card, you replace `ha-card` with `:host` as described ab

Note that some cards can't be modded with card-mod. See below.

### Why won't this work for some cards?
The cards this doesn't work for often are not really *cards* at all, but change how other cards work. Examples include: `conditional`, `entity-filter`, `horizontal-stack` and `vertical-stack` as well as some custom cards, like `layout-card`, `auto-entities` and `state-switch` among others.

Common for all those are that they have no `ha-card` element. A workaround for this is to put the card you want inside an entities card and mod that. For built-in cards, this can be done by setting the type of an entities row to `custom:hui-<type>-card`:

```yaml
type: entities
style: |
ha-card {
--ha-card-background: red;
box-shadow: none;
background: none;
}
.card-content {
padding: 0
}
entities:
- type: custom:hui-horizontal-stack-card
cards:
- type: entities
entities:
- light.bed_light
- light.kitchen_lights
- light.ceiling_lights
- type: glance
entities:
- light.bed_light
- light.kitchen_lights
- light.ceiling_lights
```

---
<a href="https://www.buymeacoffee.com/uqD6KHCdJ" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/white_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>
Loading

0 comments on commit 7502a5c

Please sign in to comment.