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

Maybe try this instead? https://github.com/custom-cards/stack-in-card (itā€™s on hacs too)

Hi is it possible to remove the space between the different cards?

Would you mind helping me determine where I specify the configuration to remove the 8px padding shown here please?

image

I just canā€™t figure out what code to use and where, as seen with my attempt below. :slight_smile:

    - type: entities
      show_header_toggle: false
      style: |
        ha-card {
          padding: 0px;
          border-radius: 0px;
          height: 45px;
          box-shadow: none;
          background: none;
          width: 80px;
        }
        .card-content {
          padding: 0 0 0 0px;
        }
      entities:
        - entity: input_datetime.test
          style: 
            hui-generic-entity-row:
              $: |
                state-badge {
                  display: none;
                }
                div.padName {
                  display: none;
                }
                div.flex {
                  margin: 0px 0px 0px 0px;
                }
            paper-input-container:
              $: |
                #container {
                  padding: 0px;
                }

Hereā€™s more detail if it helps:
image

Hi Danny,

Can you tell me what Gauge you are using for the Nu,Vandaag and Totaal items?
Never seen those before :slight_smile:

Regards Niels

No problem: https://github.com/AmoebeLabs/flex-horseshoe-card can be added with HACS

2 Likes

Thanks Danny!

1 Like

you have enquired about something like this recently, havenā€™t you?

Hereā€™s what works for me (but it still looks a bit padded at the bottom despite having 0px padding)

entity: input_datetime.off_timer_started_light_1st_floor_landing
    style:
      paper-time-input:
        $:
          paper-input:
            $: 'paper-input-container {padding: 0px}'
      hui-generic-entity-row:
        $: |
          state-badge {
            display: none;
          }
          div.padName {
            display: none;
          }
          div.flex {
            margin: 0px 0px 0px 0px;
          }

btw, your styling does not hide date in my case (Chrome) as I can see no padName.

Hi Ahmad, yes I had a post in the button card thread but it was off-topic in there so thought Iā€™d best post in here. :slight_smile:
Thank you very much for your help by the way, youā€™ve cracked it! I donā€™t know how or where you managed to work out that paper-time-input and paper-input were the right ones to use, but they work a treat, so thank you! I can finally rest now that my OCD of wanting the time vertically centred is fixed:

image

My datetime only has time enabled which may explain why itā€™s different (using Chrome too).

I think I described it to someone recently. Just look at the HTML tree and find the next element that contains the thing you want to amend. try to add the attribute and see if if works. If not, step inside.
Of course, you need to know which attribute to try. Well, itā€™s Google + some learning + personal experience.

Glad it works for you, enjoy it :wink:

damn 8[ - ]

Does anybody know if itā€™s possible to use card-mod to add a style to #view?

I tried adding this to the top of my view, but no luck:

style: |
  #view {
    margin-left: 30px !important;
  }

Donā€™t think so as card-mod is for styling cards. Happy to be wrongā€¦ :wink:

Thanks @AhmadK, I figured that might be the case

Is it possible to style the state-badge? Iā€™ve been trying to remove that awful border-radius with every possible combination but I canā€™t get rid of it.

The first one is the default behaviour. The second one is what Iā€™m trying to achieve.

image

but itā€™s not a standard state badge (icon) - whatā€™s your config for it?

Iā€™m using image: ... instead of icon:..... However images get the circle borders.

so you donā€™t want to post the relevant config and want us to guess? ok then

Sorry, that was not my intention. At the time, I was replying through my phone.
Iā€™ve tried the following:

# This is inside a "type: entities" block
- type: custom:slider-entity-row
  entity: cover.living_room_shutter_left
  image: /local/img/icons/shutter.svg
  full_row: false
  name: Esquerda
  style: |
     :host { # state-badge doesn't work either
         border-radius: 0;
     }

Also, styling in customize.yaml:

cover.living_room_shutter_left:
  entity_picture: /local/img/icons/shutter.svg

much better now.
I was unable to style the slider using card-mod so had to use mod-card.
This code works for me

type: custom:mod-card
style:
  slider-entity-row:
    $:
      hui-generic-entity-row:
        $: |
          state-badge {border-radius: 0%}
card:
  type: custom:slider-entity-row
  entity: cover.living_room_shutter_left
  image: /local/img/icons/shutter.svg
  full_row: false
  name: Esquerda

btw, you donā€™t have to use shutter.svg in both slider-entity-row and cover.living_room_shutter_left - I removed the latter and it worked as expected.

The same happened to me using card-mod.
That actually works just fine! Thanks @AhmadK.

I am newer to home assistant so please bear with me. I have read lots of forums and documentation and cannot find this answer. I cannot get the title of an entities card to center. It is working fine on a glance card, is this by design? Or am I doing something wrong? Any help would be very much appreciated!

My code looks like this:

card:
  cards:
    - columns: 3
      entities:
        - entity: person.aaron
          name: Aaron
        - entity: person.kristin
          name: Kristin
        - entity: person.olivia
          name: Olivia
      show_icon: false
      show_name: true
      show_state: true
      style: |
        ha-card {
          background: rgb(119, 136, 153)
        }
        ha-card {
          color: white
        }
        ha-card {
          padding: 8px;
          border-bottom: 1px solid #ddd; 
        }
        ha-card {
          text-align: center;
        }
      title: Family
      type: glance
    - type: entities
      title: Lights
      entities:
        - entity: light.downstairs_lights
        - type: 'custom:button-entity-row'
          buttons:
            - entity: light.kitchen_light
              name: Kitchen
              state_styles:
                'off':
                  color: white
            - entity: light.dining_room_light
              name: Dining Room
              state_styles:
                'off':
                  color: white
            - entity: light.entryway_light
              name: Entryway
              state_styles:
                'off':
                  color: white
      style: |
        ha-card {
          background: rgb(119, 136, 153)
        }
        ha-card {
          color: white
        }
        ha-card {
          padding: 8px;
          border-bottom: 1px solid #ddd; 
        }
        ha-card {
          text-align: center;
        }
  type: 'custom:vertical-stack-in-card'
style: |
  ha-card {
    background: rgb(119, 136, 153)
  }
  ha-card {
    text-align: center;
  }
type: 'custom:mod-card'