🔹 Card-mod - Add css styles to any lovelace card

Ildar_Gabdullin · February 8, 2021, 10:05pm

Here all my posts which may be useful:

NOTE:
Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3).
And also read this important note to create optimized code. In most examples here a code is NOT optimized - just to describe a DOM navigation.

Entity card
post
rotating icon (by @dolodobendan)
disabled tap_action

Entities card (including some special row elements - button, section, divider)
post
using standard vars for some domains

font-size for Entities card
post

Entities card with attributes
post

Slider entity inside Entities card
main post
popup baloon issue
hide the popup baloon

"hui-input-number-entity-row" - entity row for "input_number"
main post
How to make input_number rows look less different from other entity rows - part 1, part 2

input_select row
main post
How to make input_select rows look less different from other entity rows - part 1, part 2
How to add secondary_info: last-changed

input-text row
post
How to make input_text rows look less different from other entity rows - part 1, part 2

input_datetime row
part 1
part 2
How to make input_datetime rows look less different from other entity rows - part 1, part 2

Conditional row inside Entities card
post

Toggle row inside Entities card
colored checkbox
how to disable a toggle button
how to disable a toggle button - inside auto-entities
moving toggle to the left

Hiding checkboxes inside Entities card
for some entity row
for all entity rows

Animations for Entities card
post

“Chip” buttons
post
card-mod theme for chip buttons
changing styles for a particular button in a footer dependently on a state
changing an icon

Cover entity row
main post
disable a cover control conditionally
“narrowed” look

Light entity row
how to show lights with using only “active” & “inactive” colors

How to manage a row’s height
decrease height
increase height

How to shift rows to the right
post

How to center weblinks & commands
post

“Empty slot” for Entities card
post

Circular progress indicator
post

Glance card
main post
changing margin
Allocate items in a compact manner

Footer / Header
post

custom:multiple-entity-row
main post
displaying "last-changed" or any other labels for items
distribute items evenly
animated icons

custom:fold-entity-row
main post
How to enable / disable a “fold / unfold” control for fold-entity-row
RTL fix for a section row

custom:template-entity-row
main post
t-e-r inside a conditional row

custom:numberbox-card
post

custom:multiline-text-input-card
post

custom:text-divider-row
post

Tile card
colored icon & background on hover
remove background from an icon
adding a button
custom icons for features
long states
input_select: one-line look

Heading
post
change icons

Thermostat
custom icons for features

custom:bar-card
animation
2 text lines
displaying an image instead of an icon
centered title
hide the whole bar-card if all bars are hidden
replacing a value
adding a prefix
RTL fix for vertical bars

Gauge
disabled tap_action
colored needle

markdown
scrollbar
scrollbar for some text
markdown with images
markdown with a table: post 1, post 2, post 3
colorize only some text
external js for “hr” element
styling an icon on hover (original idea of @Spartacus)

Picture Glance card
post
changing an icon by card-mod
distributing icons

Sensor card with a graph
post

History-graph card
styling
prevent clipping when using inside stack-in-card
added scrollbar
custom line colors
custom timeline colors
how to set a 0 lower bound for Y-axis
styling a tooltip
how to add an icon to a card’s title
how to set a height

statistics-graph card
post
grouping / aligning labels
custom line colors
replacing a label
how to set a 0 lower bound for Y-axis

custom:mini-graph-card
main post
animation - blinking name, resized & rotating icon
how to display an additional info on the card
how to display additional text items (prefixes & suffixes)
solid (non-semitransparent) fill
move a graph for the 2nd sensor to the bottom
how to set a color for the last bar
place 2 sensors’ states on the left side
displaying states as a part of the legend
displaying a UoM under the state
displaying a UoM before a state
displaying a state & extrema data on the same line
using card-mod to compare mini-graph-card & history-graph
non-elegant & unstable way to show labels for X-axis
fixing an issue with a card inside state-switch
imitating statistics card
how to nicely align legend’s elements
compact view when used in horizontal stack or grid
styling Y-axis labels’ background
how to change graph’s color dynamically
styling points

custom:apexcharts
RTL fix

Weather Card
post

Styling a card inside ‘custom:config-template-card’
post

Styling a card inside ‘custom:decluttering-card’ + passing a style as a variable
post 1
post 2

Badges (before 2024.8)
important - fix to restore a possibility to style badges after 2024.8
Badges: different styling
Badges: conditional show/hide
Badges: hidden name
Square badges
Dynamic icon
Show either an icon or a value
Manually added UoM
Replacing a state
Replacing a UoM
Gradient colors for a badge dependingly on a value (by @parautenbach)

Badges (2024.8)
badges themselves
badges themselves (mod-card) by @arganto
themes - one, two, three

custom:badge-card
post
after 2024.8

Picture Elements card
main post
conditional elements
rotated background image
“selection area”
3 ways to change an element dynamically
on-hover effect for elements
example: show a charging process

Logbook card
main post
styling images by using external js-module
Logbook in a Panel mode
styling a scrollbar (style is unstable)

Media Player card
post

custom:mini-media-player
post

vertical-stack, horizontal-stack
main post
How to fix the “margin-top” problem for a hidden conditional card
Stack inside “hui-element” card
Removing internal borders & margins inside vertical-stack
how to add an icon to a card’s title

grid
how to add an icon to a card’s title

custom:stack-in-card
main post
example of customizing a width in a horizontal stack
styling a header
how to add an icon to a card’s title

See next part below →

Ildar_Gabdullin · February 8, 2021, 10:24pm

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

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

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

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
How to re-use card-mod code
Meaning of these “{%” & “{%-” things for card-mod code

Themes
for beginners: where to put card-mod theme code?, also here
“-yaml” vs “w/o -yaml”: schema
Using classes

not card-mod but useful:
adding CSS vars to every theme
adding CSS vars to the default theme

Badges:
before 2024.8
2024.8: column layout
2024.8: sticky

“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;
            }

123 · February 8, 2021, 10:56pm

Thank you! I think I now understand why the many things I have tried all failed to work.

If the Entities card contains multiple entities, is there a way to make the style apply to all of them? Or does it have to be repeated for each one separately?

Ildar_Gabdullin · February 8, 2021, 10:59pm

Please check here:

There are examples with common style for all entities.
Note that you can specify a common style and then override it for some particular entity like here:

type: entities
title: 'Changed color'
style: |
  ha-card {
    color: blue;
  }
  ha-card .card-content {
    color: red;
  }
entities:
  - entity: input_boolean.test_boolean
    name: Inherited color
  - entity: sun.sun
    name: Inherited color
    secondary_info: last-changed
  - entity: sun.sun
    name: Changed color
    secondary_info: last-changed
    style: |
      :host {
       color: cyan;
      }

123 · February 8, 2021, 11:15pm

The issue I am experiencing is that if I move the style block to the left, so it applies to all entities, it fails to work (even for just one entity).

type: entities
entities:
  - entity: input_boolean.test_boolean
style:
  hui-generic-entity-row:
    ha-entity-toggle:
      $: |
        ha-switch {
         display: none;
        }

Does the reference within the style have to be modified?

Ildar_Gabdullin · February 8, 2021, 11:20pm

Please check this:

type: entities
title: 'Checkbox: hidden'
show_header_toggle: false
entities:
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
style:
  hui-toggle-entity-row:
    $:
      hui-generic-entity-row:
        ha-entity-toggle:
          $: |
            ha-switch {
             display: none;
            }

"hui-generic-entity-row" is inside shadow-root of "hui-toggle-entity-row", so you must specify it.
And you mustn’t if the style is for a particular entity (in short, you are already inside the shadow-root).

Ildar_Gabdullin · February 9, 2021, 12:16am

Colored checkbox:

NOTE:
Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3).

Track with static color, colored track’s border:

  - entity: input_boolean.test_boolean
    name: 'colored back (static), colored border'
    style:
      hui-generic-entity-row:
        ha-entity-toggle:
          $:
            ha-switch:
              $: |
                .mdc-switch .mdc-switch__track {
                  background-color: yellow !important;
                  border-color: green !important;
                }

Track with conditional color, colored track’s border:

  - entity: input_boolean.test_boolean
    name: 'colored back (conditional), colored border'
    style:
      hui-generic-entity-row:
        ha-entity-toggle:
          $:
            ha-switch:
              $: |
                .mdc-switch .mdc-switch__track {
                  border-color: green !important;
                }
              .: |
                ha-switch {
                --switch-unchecked-track-color: yellow;
                --switch-checked-track-color: red;
                }

Thumb with conditional color:

  - entity: input_boolean.test_boolean
    name: colored button (conditional)
    style:
      hui-generic-entity-row:
        ha-entity-toggle:
          $: |
            ha-switch {
              --switch-unchecked-button-color: yellow;
              --switch-checked-button-color: red;
            }

More examples are described here.

123 · February 9, 2021, 4:22am

Thanks again! I will have to learn more about how to navigate through the various levels. Your examples are very helpful.

Mikael_Kristensen · February 9, 2021, 6:19am

Thanks for all your posts, they have been quite informative!

But I think I’m at a state where you were too in the beginning. Not grasping the whole idea and not being able to read a good toturial.

Is the idea that you start your tree in the top layer, and write in code your way down untill you get to the eneioty you want changed?
And that $: is to change into those shadow-y-thing-y?
And the dot-colon-space-pipe >> .: | << is for when theres actually coming style code?

Ildar_Gabdullin · February 9, 2021, 10:04am

Yes, I am trying to use this approach.
Also, in this thread there was at least one more method described by the developer of card-mod (look at his posts, you will find the needed one).

It was described in the GitHub (GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card).
$: is used to go inside shadow-root of some element.

.: is used to go inside some element (not shadow-root) - see GitHub.

I am not 100% sure but I think that the pipe | is used to break a line before styles:

    style: |
      :host {
        color: red;
      }
or
    style: ':host { color: red; }'

    style:
      hui-generic-entity-row:
        ha-entity-toggle:
          $: |
            ha-switch {
              --switch-unchecked-button-color: yellow;
              --switch-checked-button-color: red;
            }            
or
    style:
      hui-generic-entity-row ha-entity-toggle:
        $: 'ha-switch { --switch-unchecked-button-color: yellow; --switch-checked-button-color: red; }'

The means that the pipe must be used ONE time after the LAST colon.

The example:

type: entities
title: Using pipe
show_header_toggle: false
entities:
  - entity: input_boolean.test_boolean
    name: colored text
    style: |
      :host {
        color: red;
      }
  - entity: input_boolean.test_boolean
    name: colored text
    style: ':host { color: red; }'
  - entity: input_boolean.test_boolean
    name: colored button
    style:
      hui-generic-entity-row:
        ha-entity-toggle:
          $: |
            ha-switch {
              --switch-unchecked-button-color: yellow;
              --switch-checked-button-color: red;
            }            
  - entity: input_boolean.test_boolean
    name: colored button
    style:
      hui-generic-entity-row:
        ha-entity-toggle:
          $: 'ha-switch { --switch-unchecked-button-color: yellow; --switch-checked-button-color: red; }'
  - entity: input_boolean.test_boolean
    name: colored button
    style:
      hui-generic-entity-row ha-entity-toggle:
        $: 'ha-switch { --switch-unchecked-button-color: yellow; --switch-checked-button-color: red; }'

KTibow · February 9, 2021, 2:36pm

I’ve been off here for a bit. Are there any posts that haven’t already been answered?

parautenbach · February 17, 2021, 7:56pm

How can I reach the first div in order to add style elements? I tried a few searches but I’m not even sure what to search for. I scanned a number of Ildar Gabdullin’s posts as there are many examples but except for going into shadow roots I couldn’t find the answer for this.

KTibow · February 17, 2021, 11:48pm

I’m pretty sure you don’t need shadow-rooting for that. What happens without shadow-rooting? Could you also specify your whole intentions?

parautenbach · February 18, 2021, 5:17am

Sorry if I explained badly. I meant: I understand how to navigate into shadow roots (and there are many examples of those) and how to get into inner elements (like a div) but here are 3 divs on the same level and I’m unsure how to be specific about how to apply styling to only one of those divs. Should I aim to style the class on the div instead, since they each use different classes?

Ildar_Gabdullin · February 18, 2021, 8:27am

I was trying to simulate your situation but failed since I do not have any details…
In my opinion you should use smth like “.classname” notation.
Like:

style: |
  ha-card .mmp__bg {
    ....
  }

But cannot check myself if it works…

KTibow · February 18, 2021, 2:36pm

The class styling would be the easiest, but you could also try nth-of-type.

maxym · February 18, 2021, 2:56pm

there are several css pseudoclasses for that. ie :first-child etc

see https://www.w3schools.com/css/css_pseudo_classes.asp

Ildar_Gabdullin · February 18, 2021, 6:00pm

Specially for @parautenbach

Styling "custom:mini-media-player"

Font-size for all text:

type: 'custom:mini-media-player'
name: Player
toggle_power: true
entity: media_player.kodi_rpi_1
artwork: full-cover
card_mod:
  style: |
    ha-card {
      font-size: 25px !important;
    }

Colored player’s name (+font-size):

card_mod:
  style: |
    .entity__info__name {
      font-size: 25px !important;
      color: magenta !important;
    }

Colored movie’s (or song) name (+font-size):

card_mod:
  style: |
    .entity__info__media {
      font-size: 25px !important;
      color: magenta !important;
    }

Colored icon:

card_mod:
  style: |
    .entity__icon {
      color: magenta !important;
    }

Alternatively - the icon may be styled by using a stock “--mmp-icon-color” variable:

card_mod:
  style: |
    ha-card {
      --mmp-icon-color: cyan !important;
    }

Colored “power” button:

card_mod:
  style:
    mmp-powerstrip $: |
      ha-icon-button {
        color: cyan !important;
      }

Colored buttons (except “power” button):

card_mod:
  style:
    mmp-media-controls $: |
      ha-icon-button {
        color: cyan !important;
      }

Colored play-control buttons:

card_mod:
  style:
    mmp-media-controls $: |
      .flex.mmp-media-controls__media ha-icon-button {
        color: cyan !important;
      }

Colored play-control buttons (different colors):
(Updated 28.02.21 because of this post)

card_mod:
  style:
    mmp-media-controls $: |
      .flex.mmp-media-controls__media ha-icon-button:nth-child(1) {
        color: cyan !important;
      }
      .flex.mmp-media-controls__media ha-icon-button:nth-child(2) {
        color: red !important;
      }
      .flex.mmp-media-controls__media ha-icon-button:nth-child(3) {
        color: lightgreen !important;
      }

Colored “mute” button:

    card_mod:
      style:
        mmp-media-controls $: |
          .mmp-media-controls__volume.flex ha-icon-button {
            color: cyan !important;
          }

Colored progress bar:

    card_mod:
      style:
        mmp-progress $: |
          .mmp-progress:before {
            background-color: cyan !important;
          }
        .: |
          mmp-progress {
            --mmp-accent-color: magenta;
          }

Colored volume slider:

    card_mod:
      style: |
        ha-card {
          --md-slider-inactive-track-color: cyan;
          --md-slider-active-track-color: red;
          --md-slider-handle-color: green;
        }

Transparent cover:

card_mod:
  style: |
    .mmp__bg .cover {
      opacity: 0.1 !important;
    }

Alternatively - the opacity may be styled by using a stock “--mmp-artwork-opacity” variable:

card_mod:
  style: |
    ha-card {
      --mmp-artwork-opacity: 0.3 !important;
    }

Colored shortcut buttons:

type: custom:mini-media-player
name: Player
toggle_power: true
card_mod:
  style:
    mmp-shortcuts $: |
      mmp-button ha-icon {
        color: cyan;
      }
      mmp-button {
        background-color: green;
      }
artwork: full-cover
entity: media_player.kodi_iiyama
shortcuts:
  columns: 4
  buttons:
    - icon: mdi:dog
      type: source
      id: aaaa
    - icon: mdi:dog
      type: script
      id: script.test_script
    - icon: mdi:dog
      type: script
      id: script.test_script
    - icon: mdi:dog
      type: script
      id: script.test_script

For some particular button:

card_mod:
  style:
    mmp-shortcuts $: |
      mmp-button:nth-of-type(2) ha-icon {
        color: cyan;
      }
      mmp-button:nth-of-type(2) {
        background-color: green;
      }

Colored shortcut name - similarly to colored icon:

card_mod:
  style:
    mmp-shortcuts $: |
      mmp-button span {
        color: cyan;
      }
      mmp-button {
        background-color: green;
      }

More examples are described here.

splinter · February 19, 2021, 1:40pm

If I use “custom: slider-entity-row” in a new card, everything works fine:

type: entities
entities:
  - type: 'custom:slider-entity-row'
    entity: input_number.secondi_accensione_luce_davanti
    name: Secondi accensione
    icon: 'mdi:clock'

but if I use it inside a card where there are already other entities, the right margin of the slide disappears

type: 'custom:mod-card'
style: |
  ha-card {
    border: 1px solid black;
    background: white;
  }
card:
  type: vertical-stack
  cards:
    - type: 'custom:button-card'
      name: Luce davanti
      styles:
        name:
          - font-size: 20px
    - type: 'custom:slider-entity-row'
      entity: input_number.secondi_accensione_luce_davanti
      name: Secondi accensione
      icon: 'mdi:clock'
    - type: horizontal-stack
      cards:
        - type: 'custom:button-card'
          entity: input_select.modalita_luce_davanti
          icon: 'mdi:lightbulb-on-outline'
          name: sempre_acceso
          tap_action:
            action: call-service
            service: input_select.select_option
            service_data:
              entity_id: input_select.modalita_luce_davanti
              option: sempre_acceso
          show_state: false
          show_name: false
          state:
            - value: sempre_acceso
              color: 'rgb(5, 147, 255)'
        - type: 'custom:button-card'
          entity: input_select.modalita_luce_davanti
          icon: 'mdi:motion-sensor'
          name: automatico
          tap_action:
            action: call-service
            service: input_select.select_option
            service_data:
              entity_id: input_select.modalita_luce_davanti
              option: automatico
          show_state: false
          show_name: false
          state:
            - value: automatico
              color: 'rgb(5, 147, 255)'
        - type: 'custom:button-card'
          entity: input_select.modalita_luce_davanti
          icon: 'mdi:lightbulb-off-outline'
          name: sempre_spento
          tap_action:
            action: call-service
            service: input_select.select_option
            service_data:
              entity_id: input_select.modalita_luce_davanti
              option: sempre_spento
          show_state: false
          show_name: false
          state:
            - value: sempre_spento
              color: 'rgb(5, 147, 255)'

Can anyone help me?

leacho73 · February 19, 2021, 3:10pm

Hi All,

I am looking at aligning my text in the middle of a card using the card-mod add-on.

I’ve tried aligning using the following code:

     - type: 'custom:simple-thermostat'
        entity: climate.kitchen
        show_header: false
        control: false
        step_layout: row
        step_size: '0.5'
        hide:
          temperature: true
          state: true
        style: |
          ha-card {
            --st-font-size-xl: 20px;
            --st-font-size-m: 20px;
            --st-font-size-title: 20px;
            --st-font-size-sensors: 20px;
            --st-spacing: 1px;
            color: black;
            height: 192px;
            text-align: center;
            vertical-align: middle;
          }

But I am just seeing the following:

Is it possible to vertically align the text to the center?

Its worth noting that the text displayed is from the simple-thermostat card and the plus and minus are buttons.

Thanks
Leacho