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

[Mariusthvdb (Marius)]

exactly this, always check the core frontend source file for dedicated theme variables,
If they exist, use them, if not, you have to find the right element in the dom to modify

given the extremely complex and cluttery organization in that repo, I have bookmarked frontend/src/panels/lovelace/cards at dev · home-assistant/frontend · GitHub so I can always find them quickly…

btw, if you want those variables permanently set to another value, you don’t need card_mod at all, but you can simply set them in your themes.

That way they are supported in core, but more importantly, it is way faster, than modifying via card_mod.

from my themes configuration:

# https://github.com/home-assistant/frontend/blob/74814cc30563d5f5dbb19591ad43086013a0e743/src/panels/lovelace/cards/hui-heading-card.ts

#     ha-heading-card-title-color: gold #var(--primary-text-color)

#     ha-heading-card-title-font-size: 30px #16px
#     ha-heading-card-title-font-weight: 400
#     ha-heading-card-title-line-height: var(--ha-heading-card-title-font-size) # 24px
#     letter-spacing: 0.1px
#     mdc-icon-size: 18px
#     ha-heading-card-subtitle-color: var(--secondary-text-color)
#     ha-heading-card-subtitle-font-size: 14px
#     ha-heading-card-subtitle-font-weight: 500
#     ha-heading-card-subtitle-line-height: 20px

as you can see a lot of dedicated variables (I’ve added the defaults so its easier to check and adjust if required).
Just that single mdc-icon-size isnt dedicated… so I need to set it in card_mod…letter-spacing is fine as is.

[germandau]

Got it:

card_mod:
  style:
    $: |
      .card-header {
        color: red !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        height: 1px !important;
        padding-top: 0px !important;
        margin-top: 0px !important;
        line-height: 20px !important;
      }

line-height was the critical element!

height sets the distance to the following elements
line-height sets the distance to the box

[Roachforlife (Roach)]

Thanks, and again excuse my ignorance as this is all new and I’m learning. I understand the idea of going to dev tools in the browser but any tips/tutorial on spotting exactly where I need to be looking to get this info? Thanks

[Mngsps]

Good morning!

In this code:

    - type: entity-filter
      show_empty: false
      entities:
        - entity: sensor.washing_machine_verbleibende_zeit
          state_filter:
            - operator: '>'
              value: 0
          name: Waschmaschine
          icon: mdi:washing-machine
          card_mod:
            style:
              hui-generic-entity-row:
                $: |
                  .info.pointer {
                    color: black;
                    font-weight: bold;
                  }
                  state-badge {
                    color: grey !important;
                  }

the line

font-weight: bold;

is no more effective since a few weeks. Any idea to makes this working again (bold font)?

All the best, many thanks, and kind regards!

[VietNgoc (Ngoc John)]

@Crashbash2020

tried your suggestion above, it didn’t seem to make any change?

did you reload themes? The padding should apply for ha-dialog content, wich is include browser popup…

[platini761 (Platini76)]

hello, someone can help me?

Card Mod and Tabbed card won't work

I want to have this result, but in a tabbed card: [Screenshot 2025-01-26 alle 20.42.54]

[Ildar_Gabdullin]

Already told where to find answers:

Styling tabbed-card:
main card-mod thread → 1st post → link at the bottom titled “fantastic” → tabbed-card

Styling picture elements:
same path → picture-elements

[Crashbash2020]

yeah I even did a full restart of the system just incase.

Your suggestion was actually already in there essentially, as its the Matt8707 config. not sure why its not working. From memory it was changed around the browser mod 2.0 changes, I fixed the browser mod issues but never the padding

My only assumption is that I’m missing some other piece in terms of an custom addon or something is out of date. I updated all the card mod/browser mod/system up to current and this still didnt fix the issue.

to clarify, is the popup specifically for the “more info” cards? or does it apply to generic popups? (I don’t know if they are different)

my main UI button that does the pop is:

          - type: custom:button-card
            entity: climate.aquariumthermostat
            name: Aquareef
            tap_action:
              !include popup/aquariumthermostat.yaml

EDIT:
Well interestingly I have found the issue, it seems to be a firefox issue specifically. Your change on Chrome works, but not firefox. it shows different paddding.

I assumed this was a cache issue but ctrl+f5 and even clearing browser cache didnt fix it. My only assumption is its something to do with the order things are loaded of FF vs chrome? though probably cant be fixed via HA config anyway so I guess it doesnt matter

[LiQuid_cOOled (Not really a...)]

To start you need to define the action: correctly

 tap_action:
      action: 

[Crashbash2020]

There is an action inside the !include? the popup itself works,

popup/aquariumthermostat.yaml

action: fire-dom-event
browser_mod:
  service: browser_mod.popup
  data:
    style: |

...

[LiQuid_cOOled (Not really a...)]

My bad thought it was supposed to be tap_action: !include popup//aquariumthermostat.yaml all in one line.

[Vish2024]

Hi,

Just bumping this in case anyone’s got a solution.

Thanks.

[Mariusthvdb (Marius)]

why don’t you set it on the entity itself, in stead of in the entities card?

the answer is in the link of the first post of this thread at the bottom,

click that and find the Post on entities card there.

[arganto]

How is this all related to card-mod?

[LiQuid_cOOled (Not really a...)]

Why are you asking me? I didn’t pose the question.

[arganto]

But you answered. I only took the last reply to this ot sub-thread.

[michelscholte (mjsch)]

Can someone help me? I’m unable to change the custom:bom-weather-card with card_mod. I would like to change e few things, but nothing happens. This is my code:

type: custom:vertical-stack-in-card
cards:
  - type: custom:gap-card
    height: 40
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:bom-weather-card
        entity_current_conditions: sensor.condition
        entity_temperature: sensor.temperature
        entity_forecast_high_temp_1: sensor.temperature_1d
        entity_forecast_high_temp_2: sensor.temperature_2d
        entity_forecast_high_temp_3: sensor.temperature_3d
        entity_forecast_high_temp_4: sensor.temperature_4d
        entity_forecast_high_temp_5: sensor.temperature_5d
        entity_forecast_icon_1: sensor.condition_1d
        entity_forecast_icon_2: sensor.condition_2d
        entity_forecast_icon_3: sensor.condition_3d
        entity_forecast_icon_4: sensor.condition_4d
        entity_forecast_icon_5: sensor.condition_5d
        entity_forecast_low_temp_1: sensor.minimum_temperature_1d
        entity_forecast_low_temp_2: sensor.minimum_temperature_2d
        entity_forecast_low_temp_3: sensor.minimum_temperature_3d
        entity_forecast_low_temp_4: sensor.minimum_temperature_4d
        entity_forecast_low_temp_5: sensor.minimum_temperature_5d
        entity_possible_today: sensor.minimum_rain_5d
        entity_pop_1: sensor.sunchance_1d
        entity_pop_2: sensor.sunchance_2d
        entity_pop_3: sensor.sunchance_3d
        entity_pop_4: sensor.sunchance_4d
        entity_pop_5: sensor.sunchance_5d
        entity_pos_1: sensor.rain_1d
        entity_pos_2: sensor.rain_2d
        entity_pos_3: sensor.rain_3d
        entity_pos_4: sensor.rain_4d
        entity_pos_5: sensor.rain_5d
        entity_apparent_temp: sensor.feel_temperature
        entity_sun: sun.sun
        temp_font_weight: 600
        temp_font_size: 65px
        locale: nl
        card_mod:
          style: |
            ha-card {
              height: 280px;
              box-shadow: 0px 15px 32px 3px rgba(0,0,0,0.45);
              background-color: rgba(118,118,118,0.1);
              border-color: transparent;
              width: 70%;
              padding-top: 0px !important;
              margin-bottom: 90px !important;
            }
            ha-card .dayname {
              color: #5b79a0 !important; /* Soft pastel blue-gray */
            }
            ha-card .variations {
              display: none;
            }
            ha-card .forecast {
              margin-top: 80px
            }
view_layout:
  column: 3
card_mod:
  style: |
    ha-card {
      width: 100%;
      height: 720px;
      border-color: transparent;
      border: 30px;
      display: flex;
      align-items: start;
      justify-content: center;
      background-color:  rgba(20, 20, 20, 1);
    }
    vertical-stack-in-card {
      background: transparent;
      border-radius: 10px !important;
      border: transparent;
      height: 400px;
      width: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0px 15px 32px 3px rgba(0, 0, 0, 0.45) !important;
    }

[Mariusthvdb (Marius)]

could you minimize to the smallest non-working section? this is a huge card config you cant expect us to check completely.

be precise in what is not working for you

btw, why the nested custom stack cards? the only make things complex, where you could that with all core crds

[michelscholte (mjsch)]

Hi, I need the nested vertical cards to show a nice tablet view with 3 colums of information. Within these columns I want to vertical group things for a nice overview.
The part that isn’t working for me is customizing the bom-weather-card at all.
I thought the best way was to show it including these vertical-stack cards, but below you can see a more reduced version:

      - type: custom:bom-weather-card
        card_mod:
          style: |
            ha-card {
              height: 280px;
              box-shadow: 0px 15px 32px 3px rgba(0,0,0,0.45);
              background-color: rgba(118,118,118,0.1);
              border-color: transparent;
              width: 70%;
              padding-top: 0px !important;
              margin-bottom: 90px !important;
            }
            ha-card .dayname {
              color: #5b79a0 !important; /* Soft pastel blue-gray */
            }
            ha-card .variations {
              display: none;
            }
            ha-card .forecast {
              margin-top: 80px
            }

[Mariusthvdb (Marius)]

and this is new, or has it always been working and did something change?
which card_mod version, and ha version?