Continuation of the prev. post:
custom:flex-table-card
main post
How to style a header
Styling a row dependently on an entity’s state/attribute (or any other entity)
Map card
styling markers
display values on a Map card
animated markers
how to hide private data
show small pics for source device_trackers
custom:map-card
colorize an icon dynamically
how to hide private data
adding an additional info like a speed
show small pics for source device_trackers
custom:windrose-card
font-size for some labels
custom:shutter-card
disable controls
custom:hui-element
post
custom:restriction-card
main post
custom background
fix for a restriction card inside a Grid with square cells
Button card
highlight on hover
custom:button-card
One of rare cases when card-mod is needed for custom:button-card
Using button-card variables in jinja card-mod code
Adapting for sections
custom:tabbed-card
post
change an icon
custom: fluid-level-background-card
post
auto-entities
list of posts with styles
Sticky cards
post
Additional small title for any card with a title
post
How to scale an iframe content
post
post
custom:sun-card, custom:horizon-card
post
minimalistic-area-card
increase icon size
Other stuff
About these examples
Important notes about navigation
About navigation
About navigation #2
Combining “$:” styles and “not $:” styles
Using variables (especially after 2022.12)
Card for testing colors for binary_sensor entities (icons, history) (may be useful after 2022.12)
Using "::before" , "::after" & "content"
How to change card-mod styles for dark & light modes
How to let HA to choose a default style
How to combine icons
Possible errors when using card-mod
Conditional styles for different clients
Issue with re-defining a variable
Adding a color outline to icons
Showing an old HA logo (pre 2023.10)
How to add an icon to a card’s title
User-defined config options - to be used inside card-mod
config.entity + mod-card
Using yaml-anchors
Using global macros, also check another example
How to re-use card-mod code
Meaning of these “{%” & “{%-” things for card-mod code
Zero values for CSS theme variables
Overlaying cards
Themes
for beginners: where to put card-mod theme code?, also here
Create a custom theme based on a default theme
“-yaml” vs “w/o -yaml”: schema
Using classes
Dynamic background: one, two
not card-mod but useful:
adding CSS vars to every theme
adding CSS vars to the default theme
more-info is always wide
wide columns on Device page
use more available area in Dev tools → Templates
Badges:
before 2024.8
column layout
sticky
scrollable
“Sidebar” view:
how to set a fixed width for a right sidebar
moving a right sidebar to the left
allow to scroll “main” area w/o scrolling a sidebar
Header:
styling tabs
moving a header to the bottom
hiding a header
how to change a header’s icon size
badges in a header
hide a “search” button (also - hide all buttons & menu)
vivid selected & hovered tabs
remove “opacity” effect
Sidebar: styling a sidebar + adding badges to a sidebar
Old post
type: entities
entities:
- entity: input_boolean.test_boolean
name: 'Checkbox: hidden'
style:
hui-generic-entity-row:
ha-entity-toggle:
$: |
ha-switch {
display: none;
}