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

Share your Projects! Dashboards & Frontend
#1391

I would appreciate guidance for suppressing the display of the entire toggle button in an Entities card.

I’ve tried enough things to confirm I don’t have a good grasp of the core concepts (i.e. seems straighforward in theory but not in practice). For example, I tried this but it doesn’t work:

type: entities
entities:
  - entity: input_boolean.test
show_header_toggle: false
style:
  ha-entity-toggle:
    $: |
      ha-switch {
        display: none !important;
      }

The toggle button is within a shadow-root and, based on my limitation understanding, that implies more complexity in how to define the item I wish to act on.

Screenshot from 2021-02-08 12-13-40
Screenshot from 2021-02-08 12-13-401438×864 140 KB

1 Like
#1392

The doc says:
“I recommend using HACS to install and keep track of plugins.”
But this plug-in is nowhere to be found in HACS ?
Is a custom repository needed to install it ? If so, what’s the URL ?

#1393

Hi.
Thanks for all your work and help here!

I’ve searched for a few days but cant seem to figure out how it actually works.
I’ve also read that there might be problems with picture elemts cards, but there was a work around?

I have 2 icons, which actually should show a debug boolean state (removed to simplify) but I just want to change the color depending on on/off state and the only way to do it seems to be card-mod.

elements:
  - icon: 'mdi:android-debug-bridge'
    title: Debug
    type: icon
    style:
      '--mdc-icon-size': 40px
      color: 'rgba(255, 0, 0, 0.6)'
      background-color: 'rgba(3, 169, 244, 0.6)'
      border-radius: 50%
      top: 35%
      left: 40%
      padding: 10px 10px 10px 10px
  - icon: 'mdi:android-debug-bridge'
    title: Debug
    type: icon
    style: |
      hui-icon-element {
        color: blue;
      }
image: /
type: picture-elements

But I’m unable to make the second icon use any of the attributes of the first icon.
I’ve also tryed the debug method of my browser and found some elemts names but they modify colors of the entire page.

<hui-icon-element class="element" style="--mdc-icon-size:40px; color: rgba(255, 0, 0, 0.6); background-color: rgba(3, 169, 244, 0.6); border-radius: 50%; top: 35%; left: 40%; padding: 10px;"></hui-icon-element>

Any help apreciated

#1394

Uh, Maybe I can hepl here!

I just made it work:

In Hacs, under Frontend, press “+ EXPLORE & ADD REPOSITURIES” and search for card-mod. Think thats how I made it work!

image
image1259×870 67.7 KB

#1395

Found it :+1: Thank you!

1 Like
#1396

I appreciate this idea. Hope that people will be able to find info faster…

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

Entities card (including some special row elements - button, section, divider)
post

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

Cover entity row
main post
disable a cover control conditionally

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

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

Footer / Header
post

custom:multiple-entity-row
main post
displaying "last-changed" 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

custom:numberbox-card
post

custom:text-divider-row
post

custom:bar-card
animation
2 text lines
displaying an image instead of an icon

Picture Glance card
post

Sensor card with a graph
post

History-graph card
styling
prevent clipping when using inside stack-in-card
added scrollbar

statistics-graph card
post
grouping / aligning labels

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 unit under the 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

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

custom:template-entity-row
post

Badges
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

custom:badge-card
post

Picture Elements card
main post
conditional elements
rotated background image
“selection area”

Logbook card
main post
styling images by using external js-module

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

custom:stack-in-card
main post
example of customizing a width in a horizontal stack

custom:flex-table-card
post

custom:hui-element
post

custom:restriction-card
post

Sticky cards
post

Additional small title for any card with a title
post

How to scale an iframe content
post

custom:sun-card
post

Other stuff
Important notes about navigation
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

Themes
Styling toolbar’s tabs
How to set a fixed width for a right sidebar
Moving a right sidebar to the left
Hiding a toolbar

52 Likes
What's the best way to learn CSS for home assistant
Changing the state color - how?
Card Mod - Style Secondary Info Text
Lovelace: Multiple entity row
CSS styling with '|' in picture elements
🔹 slider-entity-row - Add sliders to entities cards
Color of switch without feedback
Mushroom Cards - Build a beautiful dashboard easily 🍄
Card-mod with entity-filter card - does not apply styles when entites show up
Card-mod font size
Lovelace: mini graph card
Last_changed in picture-elements
Change icon-color in badge depending on state
How to customize the badges at the top of the page?
Last_changed in picture-elements
Interface: How do you stretch an Entities Card?
#1397

изображение

type: entities
entities:
  - entity: input_boolean.test_boolean
    name: 'Checkbox: hidden'
    style:
      hui-generic-entity-row:
        ha-entity-toggle:
          $: |
            ha-switch {
             display: none;
            }
1 Like
#1398

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?

#1399

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

изображение

#1400

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?

#1401

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).

#1402

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.

1 Like
#1403

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

1 Like
#1404

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?

#1405

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 (https://github.com/thomasloven/lovelace-card-mod).
$: 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; }'

изображение

3 Likes
#1406

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

#1407

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.

Screenshot 2021-02-17 at 21.52.21
Screenshot 2021-02-17 at 21.52.21847×199 23.3 KB

#1408

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

#1409

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?

#1410

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…