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

Mariusthvdb · August 8, 2024, 6:49am

why, are any of them actually in the state of ‘cool’?

the template works alright

{{ expand('light.alle_binnen_lampen') 
 | selectattr('state','eq','on') 
  | list | count }}

so I guess this makes it a card-mod question on the mod itself, not the template ?
can you try with a regular string to see if it is displayed

for the other question, just add

| selectattr('state','in',['on','off'])

always use the exact state, not the frontend display of that, so, check those in /developer-tools/state

Olivier1974 · August 8, 2024, 7:59am

I had to revert to 2024.7 due to my intensive use of Alexa Media Player that was not working with the 2024.8 betas.
So I had to give up on that one. Pretty sure someone will come with a solution soon now that 2024.8.0 is officially out there.

paulgryan52 · August 8, 2024, 9:31am

I tried searching thank you but didn’t find anything, I’m new to ha and still learning

stephanschleichstr13 · August 8, 2024, 12:03pm

Hey, is it here possible to remove the gab/padding between the rows?

See red lines

type: entities
entities:
  - entity: sensor.feiertag_next_date_holiday_indays
    name: Feiertag
    icon: mdi:calendar
    state_color: true
    type: custom:multiple-entity-row
    show_state: false
    column: true
    entities:
      - entity: sensor.feiertag_next_date_holiday_indays
        name: false
        styles:
          font-size: 13px
      - entity: sensor.ics_2
        name: false
        attribute: description
        styles:
          font-size: 13px

Mariusthvdb · August 8, 2024, 12:11pm

did you find an element in the Dom that would apply there, or, search the first post Link to Ildars huge post of examples?

stephanschleichstr13 · August 8, 2024, 12:19pm

I read it yeah, but hard to understand for no programmer.

i found now this and it works, but i dont know how to build it in card_mod (see red bubble)

Mariusthvdb · August 8, 2024, 12:22pm

ok that is a good start, if you can see it changing when entering that, next go to the link in the first post, and find the post about ~~secondary-info-row~~multiple-entity-row, and see how those properties are changed. It might not be there exactly but probably other properties of the secondary row like color etc are.
give it a try and report back please?

stephanschleichstr13 · August 8, 2024, 12:30pm

why to “secondary-info-row” and not to “custom:multiple-entity-row”?

i tried something like this but is not working, i dont understand the right build up when i try to build via developer console

    card_mod:
      style:
        hui-generic-entity-row $: |
          .entities-column .entity {
            margin-top: -15px !important;
          }

niekniek89 · August 8, 2024, 12:35pm

Hi,

i would like to have this column a bit longer/higher.
but i don’t know the right code.

i have now:

card_mod:
style: |
ha-card {
background: var(–card-background-color);
width: 85px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}

does anyone know how i can do that?

stephanschleichstr13 · August 8, 2024, 12:38pm

use “hight” like width

Ildar_Gabdullin · August 8, 2024, 12:38pm

Is it what you are looking for?

stephanschleichstr13 · August 8, 2024, 12:39pm

yeah, i dont need the space between the lines, why do you use line-height and no margin etc.? how do you find this?

i currently dont understand the right building when i try to use card_mod in combi with the dev console from the browser

Edit: ah you use the integration style for that, it looks like i over read it, sorry, but can you maybe tell my what is the right code when i try to use it via card_mod maybe i understand it then a little better

niekniek89 · August 8, 2024, 12:40pm

thanks for your answer.
unfortunately “hight” or “height” does nothing.
I can get it in width, but I want it higher/longer

Ildar_Gabdullin · August 8, 2024, 12:40pm

The simpler - the better )))
Changing margin may lead to undesired results…
Besides, these elements are inline-block.

I am not a CSS pro, just doing “try - fail - repeat - succeed”.

stephanschleichstr13 · August 8, 2024, 12:42pm

sorry try this: height: 80px !important;

niekniek89 · August 8, 2024, 12:44pm

@stephanschleichstr13

yes, that’s it!
it worked, thank you very much.

Mariusthvdb · August 8, 2024, 12:52pm

if a card has the option to do this natively, you really should use that, and not try to overload it with card-mod. The styles: object allows you to

Add custom CSS styles to the entity element

which is a very nice feature of this card. it basically opens up all CSS options. always turn to eg CSS Tutorial to find what is in the toolbox on a given element, be it a card, image or text.

In this case, Ildar uses CSS line-height property which you can even test in W3Schools Tryit Editor

Mariusthvdb · August 8, 2024, 1:06pm

back to modding the now legacy badge-card, currently known as

type: custom:hui-state-badge-element
entity: sensor.temperatuur

we need to adjust the ‘old’ modifier

        card_mod:
          style:
            ha-state-label-badge $:
                ha-label-badge $: |
                  .badge-container .label-badge .label span {
                    color: green;
                    border-radius: 0;
                    background-color: ivory;
                  }

and adapt it to the new Dom path (in the screen below I traversed to the label, whihc is the section we cant set theme variables for, or hardly. We need to card_mod the color, background-color and border-radius, maybe more)

working theme variables:

    label-badge-background-color: orange
    label-badge-text-color: ivory
    label-badge-red: '#03a9f4'
    ha-label-badge-font-size: 15px
    ha-label-badge-size: 30px
    ha-label-badge-border-radius: 0

#  X  ha-label-badge-color: yellow
#  X   ha-label-badge-label-text-transform: lowercase  #capitalize|none|uppercase|lowercase
    ha-label-badge-label-color: white
#  X   ha-label-badge-label-background-color: ivory

    ha-label-badge-title-font-size: 10px
    ha-label-badge-title-font-weight: 400
    ha-label-badge-title-width: 50px
#  X   ha-label-badge-title-color: white
# need .label-badge .label span for label background-color, color, border-radius

the commented lines with an X show theme variables in the resources but, when used as above, dont have any effect. Hence the need for card_mod on those

resources:
legacy styling: 🔹 Card-mod - Add css styles to any lovelace card - #1310 by Ildar_Gabdullin

github.com

home-assistant/frontend/blob/35fed0b0e2daf522ec659a5274624331e548fff7/src/panels/lovelace/badges/hui-state-label-badge.ts

import { customElement } from "lit/decorators";
import "../../../components/entity/ha-state-label-badge";
import { HuiStateLabelBadgeEditor } from "../editor/config-elements/hui-state-label-badge-editor";
import { HuiEntityBadge } from "./hui-entity-badge";
import { EntityBadgeConfig, StateLabelBadgeConfig } from "./types";

@customElement("hui-state-label-badge")
export class HuiStateLabelBadge extends HuiEntityBadge {
  public static async getConfigElement(): Promise<HuiStateLabelBadgeEditor> {
    await import("../editor/config-elements/hui-state-label-badge-editor");
    return document.createElement("hui-state-label-badge-editor");
  }

  // @ts-ignore
  public override setConfig(config: StateLabelBadgeConfig): void {
    const entityBadgeConfig: EntityBadgeConfig = {
      type: "entity",
      entity: config.entity,
      display_type: config.show_name === false ? "standard" : "complete",
    };

This file has been truncated. show original

github.com

home-assistant/frontend/blob/35fed0b0e2daf522ec659a5274624331e548fff7/src/components/entity/ha-state-label-badge.ts

import { mdiAlert } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket";
import {
  css,
  CSSResultGroup,
  html,
  LitElement,
  PropertyValues,
  TemplateResult,
} from "lit";
import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { arrayLiteralIncludes } from "../../common/array/literal-includes";
import secondsToDuration from "../../common/datetime/seconds_to_duration";
import { computeStateDomain } from "../../common/entity/compute_state_domain";
import { computeStateName } from "../../common/entity/compute_state_name";
import { FIXED_DOMAIN_STATES } from "../../common/entity/get_states";
import {
  formatNumber,
  getNumberFormatOptions,

This file has been truncated. show original

Ildar_Gabdullin · August 8, 2024, 1:28pm

A small remark: badges in picture-elements still look “old style” & still “card-moddable”.

Mariusthvdb · August 8, 2024, 2:11pm

yes, this custom way of loading badges is actually the same badge as the ones in picture-elements.
Are you saying we need that same modifier now in the badge as in the picture-elements?

ive tried to walk the dome, and this should be the path:

        card_mod:
          style:
            hui-state-badge-element $:
              ha-state-label-badge $:
                ha-label-badge $: |
                  .badge-container .label-badge .label span {
                    color: green;
                    border-radius: 0;
                    background-color: ivory;
                  }

but it does nothing…

according to the card-mod helper, this is returned as the card-mod style:

"body>home-assistant$home-assistant-main$ha-drawer>partial-panel-resolver>ha-panel-lovelace$hui-root$#view>hui-view>hui-masonry-view$hui-view-badges$ha-sortable>div>hui-badge:nth-child(8)>hui-state-badge-element$ha-state-label-badge$ha-label-badge$#badge>div.label>span"

when pasting the path

document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("ha-drawer > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view > hui-masonry-view").shadowRoot.querySelector("hui-view-badges").shadowRoot.querySelector("ha-sortable > div > hui-badge:nth-child(8) > hui-state-badge-element").shadowRoot.querySelector("ha-state-label-badge").shadowRoot.querySelector("ha-label-badge").shadowRoot.querySelector("#badge > div.label > span")

but that wouldn’t bake me a pie… (ofc I cut off the unnecessary part first)

the related mod in the picture-elements post would be

        card_mod:
          style:
            ha-state-label-badge:
              $:
                ha-label-badge:
                  $: |
                    .badge-container .label-badge .label span {
                      border-style: solid;
                      border-color: green;
                      color: blue;
                      background-color: magenta;
                     }

which I also tested, to do nothing
whats more, the mods on border didnt even work in the Inspector, except border-radius, thats why I was focussing on the 3 elements that did work in Inspector first. color, background-color and border-radius.