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

[dany83 (Danilo)]

can increase the width of the slider?
can you write me the code for this works

[KTibow (Kendell R)]

What do you get in the template tab of HA devtools?

[KTibow (Kendell R)]

Clarification please? Which card? Can you make a mockup or describe how you want it to be increased in more detail?

[dany83 (Danilo)]

example , i want large as can use better.
this is my card

entities:

• entity: cover.tapparella_sala
  full_row: true
  max: 100
  min: 0
  step: 1
  type: ‘custom:slider-entity-row’
  title: TAPPARELLA SALA
  type: entities

[KTibow (Kendell R)]

This might be hard. In the meantime, could you send a GitHub issue over to slider-entity-row?

[dany83 (Danilo)]

@KTibow

slider-entity-row

custom tell me no can do with slider-entity-row
so i ask you with css or other custom card mod can i do this ?

[KTibow (Kendell R)]

I think your translator’s mangling your words. Could you restate, because

@dany83

custom tell me no can do with slider-entity-row

doesn’t make any sense?

[dany83 (Danilo)]

the creator this custom tell me no have large slider , so i want find other solution.
sorry for my english translator

[kareem613]

I think I asked this in the wrong thread earlier.

I’ve got an entities card with an image in the header. I’m trying to figure out the selector for the img. I can get to the header itself. Below, the red border shows up.

type: entities
style: |
  ha-card div.header-footer.header {
    border: 1px solid red;
    height: 150px;
    object-fit: cover;
  }
entities:
  - switch.garage
header:
  type: picture
  image: /local/snapshots/camera.malin_garage.jpg

The next element below is the hui-picture-header-footer, then the img element.
I can’t seem to figure out how to select the img element.
None of these work.

ha-card div.header-footer.header hui-picture-header-footer img

ha-card div.header-footer.header > img

Any ideas on how to select the img in a header?

[terminus]

This:

[KTibow (Kendell R)]

No, the template tab, not the states tab.

[Patrik_Gustavsson]

i’m trying to center the title in a grid card. can someone please help a noob out?

This is what i have tried so far and it does not work.

Added style: to grid card.

type: grid
title: Belysning
style: |
  ha-card {
    text-align: center;
  }
cards:
  - type: light
    tap_action:
      action: toggle
    entity: light.spottar_vardagsrum
    name: Spotlights vardagsrum
    icon: 'mdi:track-light'
    icon_height: 100px
  - type: light
    tap_action:
      action: toggle
    entity: light.spottar_matsal
    name: Spotlights Matsal
    icon: 'mdi:track-light'
    icon_height: 100px
  - type: light
    tap_action:
      action: toggle
    entity: light.spottar_kok
    name: Spotlights Köket
    icon: 'mdi:track-light'
    icon_height: 100px

And tried to use the custom:mod_custom card this way and it didnt work either.

[KTibow (Kendell R)]

You need to use shadow roots for mod-card styling into hui-grid-card

[terminus]

Thankn you for the hint:

[terminus]

If I replace the “config.entity” with the specific entity, I get this:

[KTibow (Kendell R)]

Is sensor.ics_10's remaining attribute 11? If not then the template is working. You don’t need to quote hex colors BTW.

[terminus]

Yes the remaining Attribute today is 11. I set it to 11 to see if the template does the job. Later I would set it back to 1.

[KTibow (Kendell R)]

What if you don’t quote 11?

[KTibow (Kendell R)]

type: entities
style:
  hui-picture-header-footer$: |
    img {
      /* Do whatever you want to do */
    }
  .: |
    ha-card div.header-footer.header {
      border: 1px solid red;
      height: 150px;
      object-fit: cover;
    }
entities:
  - switch.garage
header:
  type: picture
  image: /local/snapshots/camera.malin_garage.jpg

[terminus]

Nothing. Sadly.

the template always returns the “else” condition