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

Mariusthvdb · January 24, 2025, 1:20pm

exactly what change are your referring to?
don’t make us go find / seek

Mariusthvdb · January 24, 2025, 1:23pm

header, (as the element of a card) or type: heading?

both can be modified though, but you need to find the correct element to modify. check the .container.

Can even use a card-mod class and still add via card_mod style:

  - type: heading
    heading: Aanwezigheid
    heading_style: title
    card_mod:
      class: class-section-heading-no-color
      style: |
        .container {
          {% set thuis = is_state('binary_sensor.familie_thuis','on') %}
          background: {{'green' if thuis else 'dimgray'}};
          --ha-heading-card-title-color:
            {{'var(--active-color)' if thuis else 'black'}} !important;
        }

there are several more examples already in this thread/community

again, that is a false assumption.
I dont use the mushroom title card, so cant help you there (there is a dedicated mushroom style guid in the community so be sure to check that out)

suppose you want to modify the individual badges in the heading? that’s also possible, check Ildars post on that subject
(as always, 1 post here, scroll to the bottom, Fantastic post) and then find the relevant post in that link

cediqqu · January 24, 2025, 1:47pm

Sorry!! I’m referring to the boxes of each element, they are rounded. And to the Element: Developer Tools, the text is out of line and not everything is displayed.

Mariusthvdb · January 24, 2025, 2:37pm

A yes, I see now

what settings do you use in card_mod pertaining the sidebar? Any variables you are changing?
or, in card-mod theming for that matter?

The non-wrapping of the developer tools name might be an issue in the plugin, did you already post it in the Repo of custom-sidebar? Elchininet is very active, so will probably catch that for you very promptly

cediqqu · January 24, 2025, 2:55pm

I don’t made any changes or setting with Card Mod, i only installed it.

And yes, i asked in the Custom Sidebar Page too!

Thanks!

Mariusthvdb · January 24, 2025, 2:57pm

having a go at some badge styling in New badges and card-mod customisation - #78 by Mariusthvdb with help from great modifier @VietNgoc I figured it would benefit the crowd if I posted this here too:

from top to bottom being all core cards (badges, entities with embedded tile cards, and below that regular entities) modified by card_mod only

Mariusthvdb · January 24, 2025, 2:59pm

seems far fetched that would immediately cause a change in the sidebar…

dont see it either, but I did set several in themes and card-mod theming, so maybe override the trouble you get in your config.

Ill follow along in the repo, to see what gives there

but where did you do that, I cant find it at GitHub · Where software is built

cediqqu · January 24, 2025, 3:42pm

I mean I asked in the forum group! Sorry I’m new to this stuff!!

Thanks for your help.

Vish2024 · January 24, 2025, 10:48pm

Hi,

I’m trying to change the text color for the first entity in this card (a conditional type entity) as well as make it “unclickable”. Here’s my attempt :

type: entities
entities:
  - type: conditional
    conditions:
      - entity: input_boolean.loraswitchcheck
        state: "off"
      - entity: sensor.avlfiller
        state: Online
    row:
      entity: switch.relay3
      icon: mdi:light-switch
      name: Relay
    card_mod:
      style:
        hui-script-entity-row $: |
          hui-generic-entity-row {
            pointer-events: none;
            color: red;
          }

Here’s what I’m seeing:

I’m not sure what I’m doing wrong here.

Thanks.

PS: I’m no coder or have any experience in coding

strangerover · January 25, 2025, 2:38am

Hello!

How can I remove some of the header space shown here?
Additionally, how can I increase this row of numbers to be the same size, or close?

This is what I have currently:

show_current: false
show_forecast: true
type: weather-forecast
entity: weather.home_2
forecast_type: daily
card_mod:
  style: |
    ha-card {
        border-radius: 1px;
      background-color: transparent;
       border: 0px;
       box-shadow: none;
         font-size: 20pt;
        font-weight: bold
    }
        font-size: 20pt;
        font-weight: bold
      
        

      }
      ha-card div.forecast div.temp {
        font-size: 55pt;
      }
           ha-card div.forecast div.forecast-image-icon svg {
        --mdc-icon-size: 70px;
        width: 70px;
        height: 70px
      }

cediqqu · January 25, 2025, 9:41am

You were right, I fixed it now. The problem was with the “white-space” style. I just changed it in my theme settings and now it works perfectly. Thanks.

germandau · January 25, 2025, 11:23am

Hi,

I am working on this since days without any succcess …

Let me show you a screenshot first:

What you see is an overvie of different sensors my proxmox server offers. The bottom right card shows the status quo - the left shows what i want to achieve. On the upper left corner of the card I want to see the ID of the VM or Container. This is just the title of the card. I was able to shrink it and I was able to come close to my target this way:

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

But I don’t find any solution how to push the red title closer to the top margin of the card. The rest of the content will follow (hopefully) and the layout will be perfect.

Any ideas how to fix this?

Roachforlife · January 25, 2025, 9:28pm

Thanks. Youre right that did work thats thats awesome. I guess i just need to figure out the options available for .container. Just trying to change the title to size 25 really. Previously I used " --title-font-size: 25px !important; " but this does not seem to work within .container. Thanks bud

EDIT - Figured it out
–ha-heading-card-title-font-size: 29px !important;

Curious, is there a good resource for all of the options available to reference in the future? I found one specific to mushroom cards which is great but Im guessing there is a larger repository somewhere of the available options? Hopefully anyway. Thanks again!

Ildar_Gabdullin · January 25, 2025, 10:03pm

I do not think there is a resource for available css vars. As for possible css properties - there are tons of sites.

Roachforlife · January 26, 2025, 12:35am

Excuse my ignorance as I am just ‘faking it till I make it’ with this stuff but with “ha-heading-card-title-font-size” I basically just started guessing the end part and saw it worked. Based on the name of that being ultra specific like that, I assumed it has to be written somewhere as a reference?

VietNgoc · January 26, 2025, 12:48am

github.com

home-assistant/frontend/blob/240e48f5c1e8de736d570781ab88e8c44eacf0ce/src/panels/lovelace/cards/hui-heading-card.ts#L129-L211


      
          static styles = css`
            ha-card {
              background: none;
              backdrop-filter: none;
              -webkit-backdrop-filter: none;
              border: none;
              box-shadow: none;
              padding: 0;
              display: flex;
              flex-direction: column;
              justify-content: flex-end;
              height: 100%;
            }
            [role="button"] {
              cursor: pointer;
            }
            ha-icon-next {
              display: inline-block;
              transition: transform 180ms ease-in-out;
            }

This file has been truncated. show original

You can find the source code on the frontend repo, usually the files are named by their tag name… Somehow you will have a little idea how the compoment structure looks like. For example, in the case of heading card, look for the hui-heading-card file …

Crashbash2020 · January 26, 2025, 2:42am

Hi,

Hoping I can get some help, I am trying to edit a padding value, I believe the issue I am having is it inside a shadowroot.

I THINK I have followed the instructions on the docs but the result is incorrect, but i cant see what I have done wrong.

Only thing I can think is I’m trying to use div.XXX instead of the examples using ha-XXX, I don’t know enough about this stuff to know if that’s an issue, or why its not working? I couldn’t find any examples of targeting div.container so maybe that’s not how it should be done?

action: fire-dom-event
browser_mod:
  service: browser_mod.popup
  data:
    title: Aquarium
    card_mod:
      style:
        .: |
        browser-mod-popup$: |
          ha-dialog div.content div.container {
            padding: 0px 0px 0px 0px !important;
          }

here is the inspect element, If i edit the padding manually highlighted in RED, I get the correct behavior. I’m just not sure how to target this value with browser mod?

And this is the padding im wanting to override:

Appreciate if anyone can point out what I’m doing wrong.

VietNgoc · January 26, 2025, 2:50am

And you want padding for all popups? If so, add style to your theme config…

  card-mod-more-info-yaml: |
    .: |
      :host([card]) .content .container {
        padding: 0px !important;
      }

Crashbash2020 · January 26, 2025, 8:10am

Thanks for the suggestion, I did want it for all the popup cards, though I would like to get a better understanding of how it works so if i need to apply a setting to a specific card, I can change it.

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

Edit: also this is a popup card, not sure if its mentioned/makes a difference to how to solve the problem

arganto · January 26, 2025, 3:07pm

You don’t need guessing. Jost open Dev-Tools in browser, look, what is used at the point, you want to change something and change exactly this.