šŸ”¹ Card-mod - Add css styles to any lovelace card

mm, thanks, and tried a few things, donā€™t think that would work, since the name of the slider would still be cut-off because of the slider, unless on an ipad or so.

also, I feel it should be possible to do i one card, the hack I posted above is already stretching itā€¦ adding another card to that is a bit much for a simple task of showing a slider full width.

Check out slider-entity-row.

Thanks Thomas, Ive looked at that, and my quest remains: showing the name and icon above the slider.

I can display the full slider, but then there is no display of anything other than the state:

09

While in fact I was looking for something like this:

off
50

on
36

schematicalliy

icon name
slider state

the latter is made possible using custom-ui with this settings:

light.bedside_guest_room_right:
  templates:
    icon: >
      if (state === 'on') return 'mdi:human-greeting';
      return 'mdi:hotel';
  extra_data_template: >
    if (attributes.hs_color) 
        return 'Hs: ' + attributes.hs_color;
    return null;
  state_card_mode: break-slider
  stretch_slider: true
  hide_control: false
  show_last_changed: true
  confirm_controls: true
  slider_theme:
    min: 0
    max: 255
    pin: true
    off_when_min: true
    report_when_not_changed: true
  extra_badge:
    - attribute: brightness
      unit: Br
    - attribute: color_temp
      unit: Co

maybe this is something you can consider adding also?

I donā€™t get it. Whatā€™s different from just what you were looking for two weeks ago?

well, I understandā€¦
that post was also about adding the extra data templates to an other entity.

Iā€™ve now used the same kind of example, but used one with a full slider for this specific question.

As you can see in the post I now try to have the slider on a row below the icon and name, and not have these all on 1 line.

which is somewhat different than showing attributes on a secondary line.

update
having tried this:

  - type: custom:vertical-stack-in-card
    cards:
      - type: markdown
        style: |
          ha-card {
            color: grey;
            font-weight: bold;
            font-family: Helvetica;
            font-size: 13px;
          }
        content: |
          <ha-icon icon='mdi:home-assistant'></ha-icon> Delayed startup
      - type: custom:slider-entity-row
        entity: input_number.ha_delayed_startup
        full_row: true

09

and this:

  - type: horizontal-stack
    cards: 
      - type: custom:button-card
        template: horizontal-filler
      - type: vertical-stack
        style: |
          ha-card {
            color: grey;
            --paper-item-icon-color: green;
            font-weight: bold;
            font-family: Helvetica;
            font-size: 13px;
          }

        cards:
          - type: markdown
            content: |
              #### <ha-icon icon="mdi:home-assistant"></ha-icon> Delayed startup
          - type: custom:slider-entity-row
            entity: input_number.ha_delayed_startup
            full_row: true
      - type: custom:button-card
        template: horizontal-filler

22

it seems slider-entity-row wonā€™t exactly do as I hoped for. Using the full-row pushes the state and uom to the outer border, which looks ugly.

I probably am missing all sorts of styles options (reason I posted here), but for such a simple task this seems to be ridiculously complexā€¦

I have read the entire thread and I still canā€™t wrap my head around how to use selectors.

Iā€™m trying to remove the padding from a markdown card inside a picture-elements card. In object inspector I know I have to change ha-markdown

ha-markdown {
  display: block;
  user-select: initial;
  padding: 0px 16px 16px;
}
hui-picture-elements-card #shadow-root ha-card #root hui-markdown-card #shadow-root ha-card ha-markdown.markdown.no-header

Iā€™m trying examples blindly here and a nudge in the right direction is appreciated.

EDIT:

Figured it out

- type: picture-elements
  style:
    .: |
    "#root > hui-element > hui-markdown-card":
      $: |
        ha-card > ha-markdown {padding: 0 !important;}
1 Like

Sorry, were there anybody in the world for who this card-mod wasnā€™t working?

It is not possible to install wrong.

  1. Install by HACS
  2. in RAW Lovelace in resources
    - url: /community_plugin/lovelace-card-mod/card-mod.js

And simplest style do not work. Trying a lot. Purging cache, adding type: js, type: moduleā€¦ nothing

Any idea? Anybody?

You need to post an example of your code. It works for me for some things anyway so probably you are setting the style incorrectly or trying to style an element you canā€™t styleā€¦

1 Like

Itā€™s still very unclear to me what you are trying to do and how you are trying to do it.
Are yoy trying to put the slider on a single row only by itself, with no value or anything? If so, thereā€™s an option to hide the state display.
If you are trying to push the state a bit to the left you can try

- type: custom:slider-entity-row
  entity: ...
  style: |
    host: {
      display: block;
      margin-right: 8px;
    }

Anything at all to start from would help.

Try padding: 0px 16px 16px !important;

The simplest example:

type: entities
entities:
  - entity: sensor.netatmo_na_dole_temperature
  - entity: sensor.netatmo_na_dole_co2
style: |
  ha-card {
    color: red
  }

Produces:
image

(with theme ā€˜defaultā€™ what most probably should not be important)

color: red;

1 Like

I tought that last line should be without ā€˜;ā€™
But with ā€˜;ā€™ doesnt work either

Then try adding debug_cardmod: true and check your browser log to see if it finds the ha-card.
You can also use inspect element to make sure your ha-card gets a card-mod element.

Sorry, where to put debug_cardmod: true?
Meantime I did look into the code (the dev tools in Chrome) and I can find ha-card and I can not find anywhere card-mod.
Moreover, at this stage I have only 3 resources added and can find there only two of them. Yes, no card-mod.js

Is it ok, that in UI code resources card-mod.js has no type declared?

What does the installation instructions say?

Pretty sure the github for card-mod tells you how to add it to lovelace.

  - url: /community_plugin/lovelace-card-mod/card-mod.js
    type: module
1 Like

Is only me who has that issue? https://github.com/thomasloven/lovelace-card-mod/issues/15

Use an entities card instead of vertical-in-stack. Might have better luck. Vert in stack card always causes problems every few versions