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

So was I…

I see thomas is replying though.
Bring on the big guns…

The markdown card removes all html attributes like style, class or id, so you’ll have to find a tag that it allows but you’re not using otherwise:

content: |
  <span> Centered text </span>

style: |
  span {
    display: block;
    text-align: center;
  }

Edit: Also; LOL

Wouldn’t you just be able to put the style directly in the markdown without needing cardmod?

No. Style tags are not allowed either.

Perfect. Thanks!

Whelp that explains why it wasn’t working.

1 Like

Hello!
I have used card-mod successfully with different cards, but I am not able to modify the text size in an input_number mode: box. Any suggestion?
Thanks in advance!
image

Hello. Tell me please I can change the style of the service-button?
I need to remove the opacity from mwc-button.
I have a piece of HTML:

<hui-service-button-element class="element" style="left: 40%; top: 20%;">
  shadow-root
   <ha-call-service-button>
    shadow-root
	 <ha-progress-button id="progress" tabindex="0">
	  shadow-root
	   <div class="container" id="container">
        <mwc-button id="button">

AND I treid to do it like this:

- type: picture-elements
              image: /local/ui/devices/bedroom_TV/remote_controller.png?v1
              debug_cardmod: true
              style: |
                       ha-card .element:before {
                            content: "";
                            background: green;
                            position: absolute;
                            padding-top: 300%;
                            padding-left: 350%;
                            border-radius: 100px;
                            overflow: hidden;
                            opacity: 0;
                            transition: all 0.8s;
                            pointer-events: none;
                        }
                        ha-card .element:active:before {
                          padding: 0;
                          margin: 0;
                          opacity: 1;
                          transition: 0s;
                          border-radius: 100px;
                          overflow:hidden;
                        }
                        "#states div":
                           service-button:
                           $:
                             ha-call-service-button:
                              $:
                                ha-progress-button:
                                        $: |
                                         #container #button{
                                             opacity: 0;
                                         }
              elements:
                - type: service-button
                  service: media_player.toggle
                  service_data:
                   entity_id: media_player.bedroom_tv4
                  style: 
                    left: 40%
                    top: 20%

Help me please. Where is my mistake?

It seems that it is no longer possible to style markdown cards. See issue 2. here:

I would raise an issue but am not sure if it should be for card-mod or the frontend. Do you have an opinion / guidance Thomas?

EDIT: Never mind. Some one has opened an issue in your repo:

then it would be more of a HTML card rather than markdown.

This is how I get around it, pretty much put each row in a div and target each for using

ha-markdown :nth-child(2) {
   text-align:center;
}

You can view my config here


but of course only ha-card level styles applies how that card-mod needs a rework after 0.111

@thomasloven, i’m having an issue where I am using a conditional “card” where it only displays if the entity is on.

My issue is style doesn’t work on this so I’m using the mod-card, but i still am unable to get the height to work. Am I doing something incorrectly?

Have you tried applying the style to the gauge card? Regardless of whether it’s conditional, that ought to work.

I sure have. I have tried the custom card, the conditional , and the gauge card. It just doesn’t want to work. it’s being rude. :slight_smile:

I’m playing around with the config from Mattias_Persson

I don’t have much height on my tablet (landscape) so I’d like to remove the app-toolbar
My template is mostly the same as here I’ve tried to use the debug_cardmod option but this does not display anything in my browser console?!

I’d really like to get my headers back to how they were…

image

I can do the font and border but I don’t seem to be able to style the actual card at the same time.

This does the markdown bit;

type: markdown
style: 
  ha-markdown:
    $: |
      h2 {
        font-family: {{ font_family }};
        font-size: {{ font_size }};
        font-weight: 100;
        color: {{ color }};
        padding-left: {{ padding_left }};
        border-left: {{ border_left }} {{border_left_color}};
      }

image
But how do I remove the box-shadow and background-color of the actual card?

this doesn’t do it…

type: markdown
style: |
  ha-card {
    margin: {{ margin_top }};
    background-color: {{ background_color }};
    box-shadow: {{ box_shadow }};
  }
  ha-markdown:
    $: |
      h2 {
        font-family: {{ font_family }};
        font-size: {{ font_size }};
        font-weight: 100;
        color: {{ color }};
        padding-left: {{ padding_left }};
        border-left: {{ border_left }} {{border_left_color}};
      }

The selector changed. So your pathing is incorrect at this point in time.

Yeah I have that bit ok (I thought). It is the ha-card bit I can’t get right.

I think it would be

ha-markdown:
  $:
    ha-card:
      $: |
        div {

EDIT: I Don’t use markdown cards but I’m using the lovelace demo to get the selector. So you’d have to test it out. Either way, there’s 2 shadow roots now.

and you might have to replace div with card-header, seeing that it has a class.

style:
  .: |
    ha-card {...}
  ha-markdown:
    $: |
      h2 {...}

H2 is currently a special case with the markdown card, btw. In order to reliably set the font-size and font-weight you’ll have to use
ha-markdown-element:first-of-type h2 {instead of h2 { and add !important to the properties.
See end of this github issue: https://github.com/thomasloven/lovelace-card-mod/issues/52.

1 Like

@petro, @thomasloven

Thanks for the pointers but…
blimey, things are getting complex!!

I wonder if I might be better off just changing to using a custom button card. It’s a pretty simple use case I have here and it means I don’t have to struggle so much with CSS.

Especially if the use of the word ‘currently’ here…

really does mean it might all change again in the future.