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

[KTibow (Kendell R)]

You should ask over at button-card, they have built-in styling. Or just read the docs of it over at GitHub.

[dbrunt (Daniel)]

Thanks. First time trying to use card-mod. I’ve read the docs and I guess I’m missing something. Does card-mod (or mod-card) need to be specified as a card type above the card(s) you want to inject styling into? I tried adding styling but nothing happened so I presume that’s what needs to be done now that I think more about it. I’ll have another go at it…

I did not know there was a Github Community Support forum. Now I do! Posted a new topic…

[dbrunt (Daniel)]

I figured it out, finally!

      - type: 'custom:button-card'
        style: |
          ha-card { 
            font-size: 0.8rem
            }

[dbrunt (Daniel)]

Well, I thought I had.
The ha-card entry is being overridden by a constructed stylesheet called ha-card.button-card-main { .

UPDATE: added !important to the font entry and that fixed it.

[cpuram]

Grid Card - is there any way to reduce the space between cards in new grid card?

[ASNNetworks]

Bumping my own question since it hasn’t been fixed/reverted with HA117 updates or HA 118 and I haven’t found a workaround yet. I can confirm that the !important does not work ideally here. Each time you refresh the tab, first the stylesheet is applied and then the css cardmod, which causesthe markdown styling to jump which makes using the interface a bad experience.

I’m not skilled with CSS, but perhaps there is a way to change (or delete) the stylesheet itself.

Github ticket: https://github.com/home-assistant/frontend/issues/7578#issuecomment-720539351

[skank]

Can i change the color of my title only with this?

I tried

style: |
          ha-card {
            --primary-text-color: #e79118
          }

But that changed all my text
title-color doesnt work

[KTibow (Kendell R)]

There’s a regular theme variable for that, something like grid-card-gap, no need for card-mod, use it as a regular theme variable.

[KTibow (Kendell R)]

Which card are you using?

[skank]

stack in card
But when i do, it changes the title but also the text under the cards that are in stack

If i add another style to those card in stack, it works, but its wrong color, mm

[KTibow (Kendell R)]

When I get out of work, I’ll see which element you need to target to change the title color. Could you use the HTML font tag for changing the color?

[KTibow (Kendell R)]

Could you use the markdown card with the font HTML tag for that, instead of using the header?

[skank]

You mean use the markdown card, and get rid of the title of the card?
Can you give an example? for the html font tag?

[KTibow (Kendell R)]

type: markdown
content: <font color="red">Hi</font>

Put it as the first card in the stack, try googling “HTML font tag” to learn more.

[cpuram]

thanks for your suggestion @KTibow. really appreciate it.

However, I dont use themes file. just using the system dark theme. any idea how can I do it in my scenario? cheers.

[KTibow (Kendell R)]

Something like:

style: |
  ha-card {
    --grid-card-gap: 500px;
  }

[cpuram]

@KTibow

style: |
  ha-card {
    --grid-card-gap: 500px;
  }

this doesn’t seem to be doing anything. any further ideas? thanks in advance.

[KTibow (Kendell R)]

Can you create a temporary theme, which is a copy of your theme, but with grid-card-gap set? Then set just that card to use that theme, using the theme config var.

[skank]

@KTibow

HTML font tag

Thx its working , size and stuff too
Only thing is that the color isnt exactly the same

I used “var(–primary-color)” but its slightly different, any idea? that var primary color is rgb(26, 115, 232)

i tried the rgb but it didnt work
i read this : Color of text in either hexadecimal (ie: #RRGGBB format) or named color (ie: black, red, white)

Edit: got it ! thx

[CDRX2]

Hi,

I’ve posted this in the layout card thread, but since I’m looking to modify some CSS, perhaps someone here might have a suggestion.

I’m currently trying to use the layout card to create a sidebar on my frontend. I’ve however run into a snag. There are margins between the cards that I would like to get rid of. Best explained with a screenshot where I’ve already identified the culprit thanks to the developer tools of my browser:

Unticking that CSS property does get rid of the margins (in orange in the screenshot), however I’ve not been able to figure out what code would need to go where in order to remove those margins.

My basic config (reduced it so it’s readable):

title: Dev

views:

- title: Dev
  icon: 'mdi:github'
  panel: true
  badges: []
  path: dev
  cards:
    - type: 'custom:layout-card'
      layout: grid
      gridrows: auto
      gridcols: 23% 77%
      gridgap: 0px
      gridplace: stretch
      cards:
        - !include frontend/sidebar_dev.yaml

        - type: 'custom:config-template-card'
          gridrow: 1 / 1
          gridcol: 2 / 2
          entities:
            - ...
          card:      
            type: 'custom:swipe-card'
            parameters:
              effect: 'cube'
              cubeEffect: 
                shadow: false
                slideShadows: false
            cards:
              - !include frontend/dev_rez.yaml
              - !include frontend/dev_1er.yaml

I’ve also tried many different combinations combined with a mod-card in which I then configure the above layout-card, but no dice.

As far as my understanding of CSS goes, the correct properties should be inserted somewhere here and not within the included yaml files. Should I be wrong, I’ll gladly post their content as well.

Thanks for any help!