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

Unclear, what do you want? Post an MS Paint picture.

Hi, I’m building a floorplan with ha-floorplan and have completed the floorplan element but now want to overlay it with some entities, e.g. temperature gauge or auto-entities. I’ve been searching how to do this and trying different things with card-mod for a few days but I’ve come to a brick wall each time. I’m simply confused by the css and where it needs to go.

Rather than paste my many failed attempts of code, can someone please point me to a very basic example of one card overlaying another, that I can try to understand and then build on please?

All the examples I’ve found so far are too specific for other needs.

Thanks, Matt

I’m trying to make the outer border of a badge larger. I’ve managed to pin down in the inspector where the value is defined within the CSS, however I haven’t been able to figure out how to implement it using card mod.

Hopefully the picture is clear enough and I haven’t cropped it too poorly. This is what I’m trying to achieve.

My best guess is that I’m somehow not defining the containers correctly. The current code (that isn’t working):

      - type: custom:badge-card
        badges:
          - entity: sensor.eetstatus_0
            name: ''
            card_mod:
              style: |
                :host {
                  --label-badge-background-color: rgba(0, 0, 0, 0.85);
                  {% set sens = 'sensor.eetstatus_0' %}
                  {% set eetst = state_attr(sens,'eetlijst_entry') %} 
                  {% if eetst == None %} 
                  --ha-label-badge-label-color: black; --label-badge-red: #f7f5f5;
                  {% else %} 
                   {% if eetst < 0 %} --label-badge-red: #377330; {% elif eetst > 0 %} --label-badge-red: #bd1313; {% elif eetst == 0 %} --label-badge-red: slategrey; {% endif %}
                  {% endif %}
                   --ha-label-badge-size: 75px; }
                ha-state-label-badge:
                  $:
                    ha-label-badge:
                      $:
                        .badge-container
                            .label-badge {
                            border: 0em solid;
                            }

icon inside slider

Without checking the dom, etc., at least this structure and | is missing.

            card_mod:
              style:
                .: |
                  :host {
                    ... }
                ha-state-label-badge:
                  $:
                    ha-label-badge:
                      $: |

After playing around with this further, it appears to be prioritising the initial CSS/Styles first then overlaying the updated card-mod styling which cases the weird flash behaviour.

In my config.yaml file I also put the following to see if it would prioritise the load but it has not worked.

frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

Anyone know what I can do to help fix this? Seems I am driving myself mad. I have added an issue here also.

Slowed down example:

ezgif-3-770374844a

As already replied there. Search and play around with disabling transition css properties.

Thanks for the heads up re correct place for posting.

Just looked at the CSS and don’t believe this is a transition issue, although it appears to load like one.

My hypothesis is, the page loads with the initial CSS and quickly the Card-Mod styling kicks in which moves everything in place, making it look somewhat animated. The initial CSS looks like it is prioritised.

If you wanted to test and out of interest, does this same behaviour appear for you from this code? * Do excuse the mess, I am focused on getting this loading right before committing to any more styling

title: Living Room Tablet
views:
  - path: room-controls
    title: Room Controls
    type: panel
    badges: []
    cards:
      - type: vertical-stack
        cards:
          - type: custom:mod-card
            style: |
              ha-card {
                padding: 0px 20px 0px 25px!important;
              }
            card:
              type: vertical-stack
              cards:
                - type: horizontal-stack
                  cards:
                    - type: custom:mod-card
                      card:
                        type: custom:mushroom-title-card
                        title: Room Controls
                      card_mod:
                        style:
                          mushroom-title-card$: |
                            .header {
                              --title-padding: 23px 0px 40px!important;
                              letter-spacing: -0.12vw!important;
                            }
                            .title {
                              font-size: 30px!important;
                              font-weight: 505!important;
                    - type: custom:mushroom-chips-card
                      chips:
                        - type: entity
                          entity: sensor.bathroom_temperature
                          tap_action:
                            action: none
                          hold_action:
                            action: none
                          double_tap_action:
                            action: none
                      alignment: end
                      style: |
                        .chip-container {
                            padding-top: 22px;
                            padding-right: 0px;
                          }
                        ha-card {
                          --chip-box-shadow: none!important;
                          --chip-background: none!important;
                        }
                - type: custom:mod-card
                  card:
                    type: custom:mushroom-title-card
                    title: Lighting
                  card_mod:
                    style:
                      mushroom-title-card$: |
                        .header {
                          --title-padding: 0px 0px 20px;
                          letter-spacing: -0.05vw!important;
                        }
                        .title {
                          font-size: 18px!important;
                - type: grid
                  square: false
                  columns: 2
                  cards:
                    - type: custom:mushroom-light-card
                      entity: light.living_room_lamp
                      layout: horizontal
                      show_brightness_control: true
                      collapsible_controls: true
                    - type: custom:mushroom-light-card
                      entity: light.living_room_side_lamp
                      layout: horizontal
                      show_brightness_control: true
                      collapsible_controls: true
                    - type: custom:mushroom-light-card
                      entity: light.dining_table_lamp
                      layout: horizontal
                      show_brightness_control: true
                      collapsible_controls: true
                - type: custom:mod-card
                  card:
                    type: custom:mushroom-title-card
                    title: Scenes
                  card_mod:
                    style:
                      mushroom-title-card$: |
                        .header {
                          --title-padding: 40px 0px 20px;
                          letter-spacing: -0.05vw!important;
                        }
                        .title {
                          font-size: 18px!important;
                - type: custom:swipe-card
                  parameters:
                    grabCursor: true
                    slidesPerView: 3
                    spaceBetween: 12
                    navigation: null
                  cards:
                    - type: picture
                      image: /local/images/t-shirt-promo.png
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                    - type: picture
                      image: /local/images/t-shirt-promo.png
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                    - type: picture
                      image: /local/images/t-shirt-promo.png
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                    - type: picture
                      image: /local/images/t-shirt-promo.png
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                    - type: picture
                      image: /local/images/t-shirt-promo.png
                      tap_action:
                        action: none
                      hold_action:
                        action: none
  - theme: ''
    path: climate
    title: Climate
    type: panel
    badges: []
    cards:
      - type: custom:mod-card
        style: |
          ha-card {
            padding: 0px 30px 0px 30px!important;
          }
        card:
          type: vertical-stack
          cards:
            - type: horizontal-stack
              cards:
                - type: custom:mod-card
                  card:
                    type: custom:mushroom-title-card
                    title: Room Controls
                  card_mod:
                    style:
                      mushroom-title-card$: |
                        .header {
                          --title-padding: 25px 0px 40px!important;
                          letter-spacing: -0.12vw!important;
                        }
                        .title {
                          font-size: 33px!important;
                          font-weight: 510!important;
                - type: custom:mushroom-chips-card
                  chips:
                    - type: entity
                      entity: sensor.bathroom_temperature
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                      double_tap_action:
                        action: none
                  alignment: end
                  style: |
                    .chip-container {
                        padding-top: 27px;
                        padding-right: 0px;
                      }
                    ha-card {
                      --chip-box-shadow: none!important;
                      --chip-background: none!important;
                    }
            - type: custom:mod-card
              card:
                type: custom:mushroom-title-card
                title: Lighting
              card_mod:
                style:
                  mushroom-title-card$: |
                    .header {
                      --title-padding: 0px 0px 20px;
                      letter-spacing: -0.05vw!important;
                    }
                    .title {
                      font-size: 18px!important;
            - type: grid
              square: false
              columns: 2
              cards:
                - type: custom:mushroom-light-card
                  entity: light.living_room_lamp
                  layout: horizontal
                  show_brightness_control: true
                  collapsible_controls: true
                - type: custom:mushroom-light-card
                  entity: light.living_room_side_lamp
                  layout: horizontal
                  show_brightness_control: true
                  collapsible_controls: true
                - type: custom:mushroom-light-card
                  entity: light.dining_table_lamp
                  layout: horizontal
                  show_brightness_control: true
                  collapsible_controls: true
            - type: custom:mod-card
              card:
                type: custom:mushroom-title-card
                title: Scenes
              card_mod:
                style:
                  mushroom-title-card$: |
                    .header {
                      --title-padding: 40px 0px 20px;
                      letter-spacing: -0.05vw!important;
                    }
                    .title {
                      font-size: 18px!important;
  - theme: ''
    path: tv-controls
    title: TV Controls
    type: panel
    badges: []
    cards:
      - type: custom:mod-card
        style: |
          ha-card {
            padding: 0px 30px 0px 30px!important;
          }
        card:
          type: vertical-stack
          cards:
            - type: horizontal-stack
              cards:
                - type: custom:mod-card
                  card:
                    type: custom:mushroom-title-card
                    title: TV Controls
                  card_mod:
                    style:
                      mushroom-title-card$: |
                        .header {
                          --title-padding: 23px 0px 40px;
                          letter-spacing: -0.12vw!important;
                        }
                        .title {
                          font-size: 35px!important;
                          font-weight: 520!important;
                - type: custom:mushroom-chips-card
                  chips:
                    - type: entity
                      entity: sensor.bathroom_temperature
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                      double_tap_action:
                        action: none
                  alignment: end
                  style: |
                    .chip-container {
                        padding-top: 0px;
                        padding-right: 0px;
                      }
                    :host {
                        --chip-background: none!important;
            - type: horizontal-stack
              cards:
                - type: custom:mushroom-light-card
                  entity: light.bedside_lamps
  - theme: ''
    path: entertainment
    title: Entertainment
    type: custom:grid-layout
    layout:
      width: 100%
      padding: 0px 15px 0px 15px
      card_margin: 4px 4px 8px
    badges: []
    cards:
      - type: custom:mushroom-title-card
        title: Room Controls
        style:
          mushroom-title-card$: |
            .header {
              --title-padding: 23px 0px 40px!important;
              letter-spacing: -0.12vw!important;
            }
            .title {
              font-size: 30px!important;
              font-weight: 505!important;
      - type: custom:mushroom-title-card
        title: Room Controls
        style:
          mushroom-title-card$: |
            .header {
              --title-padding: 23px 0px 40px!important;
              letter-spacing: -0.12vw!important;
            }
            .title {
              font-size: 30px!important;
              font-weight: 505!important;
      - type: custom:mushroom-title-card
        title: Room Controls
        style:
          mushroom-title-card$: |
            .header {
              --title-padding: 23px 0px 40px!important;
              letter-spacing: -0.12vw!important;
            }
            .title {
              font-size: 30px!important;
              font-weight: 505!important;
      - type: button
        tap_action:
          action: toggle
        entity: light.living_room_lamps
  - theme: ''
    path: audio
    title: Audio
    type: sidebar
    badges: []
    cards:
      - type: custom:mushroom-title-card
        title: Audio
      - type: vertical-stack
        cards:
          - type: conditional
            conditions:
              - entity: media_player.bedroom_homepod
                state: playing
            card:
              type: custom:mushroom-media-player-card
              entity: media_player.bedroom_homepod
              show_volume_level: false
              use_media_info: true
              volume_controls:
                - volume_mute
                - volume_set
              fill_container: false
              media_controls:
                - previous
                - play_pause_stop
                - next
                - shuffle
                - repeat
              name: HomePod
              layout: horizontal
              card_mod:
                style: |
                  ha-card {
                    box-shadow: none;
                    border-radius: 0px;
                    position: absolute!important;
                    bottom: 0px;
                    border-top: 0px;
                    left: 0px;
                    width: 100%;
                  }
      - type: markdown
        content: The balcony door is open
      - square: true
        columns: 4
        type: grid
        cards:
          - type: custom:button-card
            icon: mdi:air-conditioner
            aspect_ratio: 2/1
            size: 30px
          - type: custom:button-card
          - type: custom:button-card
          - type: custom:button-card
      - type: custom:swipe-card
        parameters:
          grabCursor: true
          slidesPerView: 3
          spaceBetween: 12
          navigation: null
        cards:
          - type: picture
            image: /local/images/t-shirt-promo.png
            tap_action:
              action: none
            hold_action:
              action: none
          - type: picture
            image: /local/images/t-shirt-promo.png
            tap_action:
              action: none
            hold_action:
              action: none
          - type: picture
            image: /local/images/t-shirt-promo.png
            tap_action:
              action: none
            hold_action:
              action: none
          - type: picture
            image: /local/images/t-shirt-promo.png
            tap_action:
              action: none
            hold_action:
              action: none
          - type: picture
            image: /local/images/t-shirt-promo.png
            tap_action:
              action: none
            hold_action:
              action: none
  - theme: Backend-selected
    type: panel
    path: system
    title: System
    badges: []
    cards:
      - type: vertical-stack
        cards:
          - type: custom:mod-card
            style: |
              ha-card {
                padding: 0px 30px 0px 30px!important;
              }
            card:
              type: vertical-stack
              cards:
                - type: horizontal-stack
                  cards:
                    - type: custom:mod-card
                      card:
                        type: custom:mushroom-title-card
                        title: TV Channels
                      card_mod:
                        style:
                          mushroom-title-card$: |
                            .header {
                              --title-padding: 25px 0px 40px!important;
                              letter-spacing: -0.12vw!important;
                            }
                            .title {
                              font-size: 33px!important;
                              font-weight: 510!important;
                    - type: custom:mushroom-chips-card
                      chips:
                        - type: entity
                          entity: sensor.bathroom_temperature
                          tap_action:
                            action: none
                          hold_action:
                            action: none
                          double_tap_action:
                            action: none
                      alignment: end
                      style: |
                        .chip-container {
                            padding-top: 27px;
                            padding-right: 0px;
                          }
                        ha-card {
                          --chip-box-shadow: none!important;
                          --chip-background: none!important;
                        }
                - type: custom:mod-card
                  card:
                    type: custom:mushroom-title-card
                    title: Favorites
                  card_mod:
                    style:
                      mushroom-title-card$: |
                        .header {
                          --title-padding: 10px 0px 30px;
                          text-decoration: underline;
                          text-decoration-thickness: 3px;
                          text-underline-offset: 7px;
                          letter-spacing: -0.05vw!important;
                        }
                        .title {
                          font-size: 20px!important;
                - type: grid
                  square: false
                  columns: 4
                  cards:
                    - type: custom:button-card
                      entity_picture: >-
                        https://raw.githubusercontent.com/Jasmeet181/mediaportal-uk-logos/master/TV/.Light/BBC%20One%20HD.png
                      show_entity_picture: true
                      aspect_ratio: 2/1
                      size: 50px
                    - type: custom:button-card
                      entity_picture: >-
                        https://raw.githubusercontent.com/Jasmeet181/mediaportal-uk-logos/master/TV/.Light/BBC%20News%20HD.png
                      show_entity_picture: true
                      aspect_ratio: 2/1
                      size: 50px
                    - type: custom:button-card
                      icon: mdi:air-conditioner
                      aspect_ratio: 2/1
                      size: 30px
                    - type: custom:button-card
                      icon: mdi:air-conditioner
                      aspect_ratio: 2/1
                      size: 30px
                    - type: custom:button-card
                      icon: mdi:air-conditioner
                      aspect_ratio: 2/1
                      size: 30px
                    - type: custom:button-card
                      icon: mdi:air-conditioner
                      aspect_ratio: 2/1
                      size: 30px
                    - type: custom:button-card
                      icon: mdi:air-conditioner
                      aspect_ratio: 2/1
                      size: 30px
                    - type: custom:button-card
                      icon: mdi:air-conditioner
                      aspect_ratio: 2/1
                      size: 30px

@SimplyGardner
Not sure that someone will dare to test your short code snippet of > 500 lines ((((

Hi all,
I’m newbie of this fantastic tool. I’m struggling for days trying to center a div in the card.
Please find below the HTML code and my last test.
Any help on this will be very appreciated because this is driving me nuts. :frowning:
Many thanks in advance.
Roberto

type: custom:stack-in-card
card_mod:
  style:
    .: |
      ha-card {
        --ha-card-background: silver;
        opacity: 0.8;
        padding: 25px
      }
mode: vertical
keep:
  background: true
cards:
  - type: custom:mod-card
    card:
      type: energy-date-selection
    card_mod:
      style: |
        hui-energy-period-selector$: |
          div.period {
            justify-content: center;
          }

Shorter version.

ezgif-1-2e9f498e4b

views:
  - theme: Dashboard
    title: Home
    type: custom:grid-layout
    badges: []
    cards:
      - type: markdown
        content: |
          # Room Controls
        card_mod:
          style:
            .: |
              ha-card { 
                --mdc-icon-size: 50px;
                font-size: 50px;
              }  
            ha-markdown:
              $:
                ha-markdown-element: |
                  table {
                    width: 100% important!;
                    font-size: 50px;
                  }

Did anyone succeed in changing styles for #tabsContainer element?
I’m trying to enable momentum scrolling for top menu (View selector).

Obviously I’m trying to achieve that using my HA theme, which modifies some menu element already (hiding chevrons etc)

Go to card-mod Github issues, there are ~2-4 of issues about markdown - everywhere people repeat the same error.

That might be these case however this is issue is not just isolated to the markdown card, this is present for all cards that I apply card-mod too. As above it looks like it’s prioritising the main home assistant theme first and milliseconds later the card mod styling is kicking in, causing it to do a weird flash your animation.

This is standard. But most of the time, you only see it, because of the transition, I’ve already mentioned.

I’ve persevered and tried a bit of a proof of concept. I still haven’t been able to find any clear basic instructions but I’ve done a bit more reading about CSS positioning and have managed this work in progress…

My code (in a panel) is below, I know it can be improved quite a bit. Can anyone spot any obvious improvements?

type: custom:layout-card
layout_type: custom:vertical-layout
layout: {}
cards:
  - type: custom:floorplan-card
    style: |
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        top: -30px;
        left: 0;
        z-index: 0;
      }  
    config:
      image: /local/floorplan/seven/floorplan7.svg
      stylesheet: /local/floorplan/seven/floorplan7.css
      console_log_level: debug
      defaults:
        hover_action: hover-info
      rules: null
  - type: gauge
    entity: sensor.pws_temp
    card_mod:
      style:
        .: |
          ha-card {
            background-color: transparent;
            position: relative;
            z-index: 2;
          }
  - type: custom:layout-break
  - type: custom:gap-card
  - type: custom:layout-break
  - type: custom:mini-media-player
    entity: media_player.study
    group: true
    volume_stateless: true
    toggle_power: false
    artwork: none
    background: transparent
    card_mod:
      style:
        .: |
          ha-card {
            background-color: transparent;
            z-index: 2;
          }
card_mod:
  style:
    .: |
      ha-card {
        position: relative;
        background-color: transparent;
      }

But in your code I also see a potential problem described in those issues I told about.
This is about styling a markdown.
Transition issue - is another one, it MAY BE reduced by kind of “transition: none” style.

Thank you.

I have spent most of today restructuring the pages and embedding most of the styling within “theme” file. I * think * this is loading better and a better structure to build from.

I have changed the markup to the Mushroom Title card. The tree elements were easy to add to the ‘themes’ file

  # Titles
  mush-title-padding: 0
  mush-title-font-size: 30px
  mush-title-font-weight: 505

The final piece of the jigsaw I am trying to figure out is is how to add some letter-spacing: to my title.

Within the title component, I tried adding the following - along with a few other ways.

 card_mod:
    style:
      mushroom-title-card$: |
        .header {
          letter-spacing: -0.12vw!important;

If I look at Chrome, if I add letter-spacing: -0.12vw in the .title section, it works. I am just not sure the code to add to my component.

In type custom:fold-entity-row, I’d love to be able to change the size of the text, “Exterior Lights” (which is the friendly name of group.exterior_lights), as well as remove the icon. I’ve looked through and haven’t found a way to do that.

type: entities
title: 
entities:
  - type: custom:fold-entity-row
    head:
    entity: group.exterior_lights
    open: false
    clickable: true
    icon: null
    entities:
      - entity: switch.front_porch_lights
        secondary_info: last-changed
        style: |
          :host {
            font-size: 14px;
            color: white;
          }
      - entity: switch.garage_exterior_front_light
        secondary_info: last-changed
        style: |
          :host {
            font-size: 14px;
            color: white;
          }
      - entity: switch.rear_exterior_lights
        secondary_info: last-changed
        style: |
          :host {
            font-size: 14px;
            color: white;
          }
      - entity: switch.garage_side_light
        secondary_info: last-changed
        style: |
          :host {
            font-size: 14px;
            color: white;
          }
style: |
  ha-card {
    --ha-card-background: rgba(7, 103, 215, 0.24);
  }

Any advice? is there anyone able to help me or lead me in the right direction?
Many thanks in advance.