How to add margin to ha-card?

Configuration Frontend
1

Hey together,

I am new to Home Assistant and trying to customize the styling of my frontend.
I will use Home Assistant mostly to control my home via smart phone. Therefore I want to optimize the look and feel for it.

I want to add a small little margin but I don’t know how. Something like this:

image
image441×570 63.1 KB

I have already used the Chrome dev tools to figure out that my ha-card needs something like “margin: 0 5px” to get what I want but I don’t know how / where to define it.

I tried using card-mod or extending my theme by ‘ha-card-margin: ‘0px 5px’’ but nothing helped.

Any help is appreaciated.

Thank you very much,
Stefan

2

card mod

   style: |
      ha-card { 
        margin: 0px 5px;
      }
2 Likes
3

This does not work for me and I don’t know why.

This is my card:

entities:
  - light.buro_licht
  - sensor.buro_temperatur
  - cover.buro_jalousie
heading:
  - 'mdi:monitor'
  - Büro
style: |
  ha-card { 
    margin: 0px 5px;
  }
type: 'custom:banner-card'

and this is how I load the card mod module in my raw config:

custom_header:
  background: 'rgba(155, 155, 155, 0.25)'
  compact_mode: true
  editor_warnings: false
  swipe_animate: fade
  swipe_prevent_default: true
resources:
  - type: module
    url: /local/plugins/button-card.js?v=1
  - type: module
    url: /local/plugins/gap-card.js?v=1
  - type: module
    url: /local/plugins/custom-header.js?v=0.0.1
  - type: module
    url: /local/plugins/mini-graph-card-bundle.js?v=0.8.2
  - type: module
    url: /local/plugins/card-mod.js?v=1
  - type: module
    url: /local/plugins/banner-card.js?v=1
title: Home

I have all my plugins located in the www/plugins folder:
image

Thank you for your help!

4

Some custom cards don’t accept card-mod. You should talk with the banner-card dev. also take a look at the card mod notes. There could be a solution, check this section out.

5

Sorry for the late reply.
It works now as expected with your provided solution.

I had a broken mod-cards installation. After fixing it everything works!

Thank you!

1 Like
6

Any way to do this with just the standard theme editor? Tried this and the border parts work, just not the margin:

themes:
cameras:
ha-card-border-width: ‘0px’
ha-card-border-radius: ‘5px’
ha-card-margin: ‘0px’