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

Can you please post the code for a card that is not working?

type: custom:mod-card
card_mod:
  style:
    hui-vertical-stack-card$: |
      .card-header {
        font-size: 25px !important;
        padding: 8px 16px 0px !important;
      }
card:
  type: vertical-stack
  title: Bathroom
  cards:
    - type: custom:mushroom-chips-card
      chips:
        - type: entity
          entity: sensor.temperature_84
        - type: entity
          entity: sensor.humidity_83
        - type: template
          entity: binary_sensor.presence_sensor_fp2_dffb_presence_sensor_1
          content_info: none
          tap_action:
            action: more-info
          icon: >-
            {{ 'mdi:motion-sensor' if is_state(entity, 'on') else
            'mdi:motion-sensor-off' }}
          icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''white'' }}'
        - type: template
          entity: binary_sensor.water_29
          content_info: none
          tap_action:
            action: more-info
          icon: '{{ ''mdi:water'' if is_state(entity, ''on'') else ''mdi:water-off'' }}'
          icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''white'' }}'
      alignment: end
      style: |
        .chip-container {
            padding-right: 4px;
            margin-top: -46px
        }
    - type: custom:mushroom-light-card
      entity: light.mugg
      name: Ceiling
      fill_container: false
      show_brightness_control: true
      layout: horizontal
      icon_color: amber

image

Basicly, i want the “bathroom” text to be in line with the mushroom sensors so the card gets more compacted. And this all worked before i upgraded.

style now requires this setup. You were missing the card_mod line.

card_mod:
 style: |
type: custom:mod-card
card_mod:
  style:
    hui-vertical-stack-card$: |
      .card-header {
        font-size: 25px !important;
        padding: 8px 16px 0px !important;
      }
card:
  type: vertical-stack
  title: Bathroom
  cards:
    - type: custom:mushroom-chips-card
      chips:
        - type: entity
          entity: sensor.temperature_84
        - type: entity
          entity: sensor.humidity_83
        - type: template
          entity: binary_sensor.presence_sensor_fp2_dffb_presence_sensor_1
          content_info: none
          tap_action:
            action: more-info
          icon: >-
            {{ 'mdi:motion-sensor' if is_state(entity, 'on') else
            'mdi:motion-sensor-off' }}
          icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''white'' }}'
        - type: template
          entity: binary_sensor.water_29
          content_info: none
          tap_action:
            action: more-info
          icon: '{{ ''mdi:water'' if is_state(entity, ''on'') else ''mdi:water-off'' }}'
          icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''white'' }}'
      alignment: end
      card_mod:
       style: |
        .chip-container {
            padding-right: 4px;
            margin-top: -46px
        }
    - type: custom:mushroom-light-card
      entity: light.mugg
      name: Ceiling
      fill_container: false
      show_brightness_control: true
      layout: horizontal
      icon_color: amber

Thanks! I knew it was something small i missed :slight_smile:

Hey all,

Novice trying to learn and need a little help. I am working with a Custom weather card and trying to use card_mod change the color a little tiny line when I inspect with browser debug its called div.bar-block-left and right. I don’t know how to target this to add an element of border-color: black. I am adding screenshot as well.

Thanks
Wayne B.

It is simply border-color: black; I added border:none to show that you can remove the border altogether.

type: custom:hourly-weather
entity: weather.forecast_home
card_mod:
   style: |
     ha-card {
       background: none!important;
       border-color: black; 
       border: none;
         }

It’s general practice to post your code using the community standards. See #11

Thanks for the response.

So what I am actually trying to change the color of is a little tiny line above the time. See new screenshot. When I put the actual card in my dashboard the default color of grey makes it almost invisible. I only said the border-color because I used by inspect mode in my browser and navigated to the div.bar-block-left and added an element of border-color to see what I needed to add.

Screenshot 2024-03-30 205717

Wayne.

Missed that. Let me take another look. Can you post your code?

divider-color: is what you need to change the color of those slashes.

type: custom:hourly-weather
entity: weather.forecast_home
card_mod:
   style: |
     ha-card {
       background: none!important;
       border-color: black; 
       border: none;
       --divider-color: red;
         }

1 Like

That is exactly what I needed! Thanks I did not know where to find that setting at.

I just looked directly in the JS

image

Thanks this is my mobile dashboard project. Just though I would post SS of it. Its always a work in progress. Thanks again for the help…
Uas

2 Likes

It coming along great! Colors flow well. I am happy I was able to assist.

My boards are always a work in progress too. I prefer the darker look. Here is one of my latest creations.

2 Likes

I like the textures. I never though of adding textures.

Just wanted to bump this if anyone knew if this was possible

@image969 Assuming you’re talking about displaying a card via browser_mod.popup… there’s no special card-mod configuration. The easiest way I’ve found is to create the card you want to “pop up” in a test dashboard via normal means. Get your card-mod setup and whatever else exactly how you want it, and then copy the yaml into your browser_mod.popup service call under your firedom event. If you copy/paste correctly, the popup will look exactly like the card in your test dashboard.

Hi, thanks for the reply. I have the card working fine in the pop-up. It’s just a drop-down menu when you click on it. The pop-up dimensions aren’t big enough so it crops it. I want to know if the overflow in card mod can be used so it extends past the pop-up.

Can’t help much if you don’t post your current code, but you can definitely increase the height of the popup card which could solve your issue.

Here’s a screenshot of the code I was referring to. I would rather not change the height of the pop-up card, because then there would be a ton of blank space showing when I’m not using the drop-down menu. I have no problem with this overflow line anywhere else it just doesn’t seem to work Inside the pop-up card

I don’t think you can do that. The popup card has a defined size. You can change the size via card-mod etc, but it’s a defined size nonetheless. You can’t declare anything outside the size of the popup card as there just isn’t any space there. It’s possible to add scrollbars, but that’s going to let you scroll the whole card. I suppose it’s possible to add scrollbars to only the dropdown, but you would have to experiment with card-mod and it will depend on the specific card your trying to use and how it’s constructed. I could very easily be wrong, but I’d be surprised if you can accomplish this with card-mod alone, at least as long as you’re talking about it being a popup card. In any case, if you don’t post your code properly formatted, then no one can help, as no one can copy and paste your code from a screenshot to try things and give you direction.