Plugin to customize the styling of Lovelace cards.
![](https://private-user-images.githubusercontent.com/292349/303110211-6314dc34-4750-4cf4-b7b4-c3d0b6132486.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQzMTkwMjksIm5iZiI6MTcyNDMxODcyOSwicGF0aCI6Ii8yOTIzNDkvMzAzMTEwMjExLTYzMTRkYzM0LTQ3NTAtNGNmNC1iN2I0LWMzZDBiNjEzMjQ4Ni5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODIyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyMlQwOTI1MjlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT04MDkwZjkzMDNhOTdiNWI2NGYxNjA1MmJmYzZhYTA2NDBkOWNkNTk4OWE0OWY0MDMzMTY4MmMxNTk1N2RlMGY1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.jFIzaKVj38buYv8tXXjqVUPuVSP7TNhjPp5DdK0VjzM)
- style any component as a card (like
vertical-stack
,grid
,layout-card
, ...) - remove card styling from any card
- apply custom CSS to any component
- tile card customization
- similar plugins:
Great care has been taken to minimize the overhead of this plugin.
This plugin works by hooking into Lit's reactive life-cycle
using ReactiveElement.addInitializer
and a custom Reactive Controller
that only runs once per card in the hostUpdated
live-cycle callback.
Have HACS installed, this will allow you to update easily.
- Adding Styler to HACS can be done using this button:
(If the button above doesn't work, add https://github.com/folke/lovelace-styler
as a custom repository of type Integration in HACS.)
- Click Download on the HACS page
- Reload the Home Assistant web page
type: vertical-stack
styler:
card: true
cards: ...
type: grid
styler:
card: true
cards: ...
type: custom:layout-card
styler:
card: true
cards: ...
type: mushroom-light-card
entity: light.my_light
styler:
card: false
type: mushroom-light-card
entity: light.my_light
styler:
style: |
.card {
border-color: red;
}
With styler, it's fairly easy to configure some options related to the sections view.
The example below sets the grid gap to 10px and the maximum number of sections to 2.
title: Home
type: sections
styler:
style: |
.container {
--column-gap: 10px !important;
--column-max-width: 100hw !important;
--max-column-count: 2 !important;
}
sections: ...
type: tile
info: false # hides the info section, so only shows the icon
animation: spin # adds a spinning animation to the icon
animation: pulse # adds a pulsing animation to the icon
The code below was used to create the two room cards in the screenshot above. The example code uses the Mushroom Custom Cards.
type: horizontal-stack
layout_options:
grid_columns: 2
styler:
card: true
cards:
- type: custom:mushroom-template-card
primary: Living Room
secondary: "{{ states('sensor.netatmo_living_room_temperature_2') | round(0) }} °C"
icon: mdi:sofa
icon_color: pink
tap_action:
action: navigate
navigation_path: downstairs
styler:
style: |
mushroom-state-info { min-height: 150px }
ha-card { --icon-size: 130px }
mushroom-shape-icon {
position: absolute;
margin: -20px -25px;
}
- type: grid
columns: 1
square: false
styler:
style: |
:host {
flex: 0 0 auto !important;
margin: 12px;
}
cards:
- type: tile
info: false
entity: light.group_lounge
- type: tile
info: false
entity: binary_sensor.presence_living_room
color: blue
type: horizontal-stack
layout_options:
grid_columns: 2
styler:
card: true
cards:
- type: custom:mushroom-template-card
primary: Upstairs
secondary: "{{ states('sensor.netatmo_upstairs_temperature_3') | round(0) }} °C"
icon: mdi:bed
icon_color: brown
tap_action:
action: navigate
navigation_path: downstairs
styler:
style: |
mushroom-state-info { min-height: 150px }
ha-card { --icon-size: 130px }
mushroom-shape-icon {
position: absolute;
margin: -20px -25px;
}
- type: grid
columns: 2
square: false
styler:
style: |
:host {
flex: 0 0 auto !important;
margin: 12px;
}
cards:
- type: tile
info: false
entity: alarm_control_panel.upstairs
- type: tile
info: false
entity: light.group_all_upstairs
- type: custom:mushroom-template-card
- type: tile
info: false
entity: binary_sensor.presence_upstairs
color: blue
- type: custom:mushroom-template-card
- type: tile
info: false
entity: fan.ventilos