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

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!

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

hello, someone can help me?

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

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

To start you need to define the action: correctly

 tap_action:
      action: 

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: |

...

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

1 Like

Hi,

Just bumping this in case anyoneā€™s got a solution.

Thanks.

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.

How is this all related to card-mod?

Why are you asking me? I didnā€™t pose the question. :thinking:

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

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;
    }

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

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
            }

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

It is a new view.

These are the versions:

  • Core 2025.1.4
  • Supervisor 2024.12.3
  • Operating System 14.2
  • Frontend 20250109.2

CARD_MOD 3.5.0

which one? )

1 Like

If you want to applying css styles for element, for a single popup dialog, then use card_mod in service call data. like thisā€¦
style use for setting css var properties, like --ha-card-background-color etcā€¦

action: fire-dom-event
browser_mod:
  service: browser_mod.popup
  data:
    title: Entities
    style: >
      --popup-min-width: 800px;
    card_mod:
      style:
        .: |
          :host([card]) .content .container {
            padding: 0px !important;
          }
    content:
      type: entities
      entities:
        - input_number.cover_position


some card with tap action trigger.

  - type: custom:button-card
    entity: input_number.cover_position
    template: rect_button
    tap_action: !include ./popup/entities-popup.yaml

2025-01-28 23.11.50