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

[tungmeister]

Inadvertently quoted the wrong message. Your code isn’t there as it didn’t work, tried a few variations as well with no joy.

[arganto]

O.k. But because it is working (btw your dom screenshot shows exactly what I expected and described before) and if you can’t try it or show it, what you have tried with my code, then ofc I can’t help.

Replace your whole style-section (BTW you should used card_mod->style as in my example) only to see that it is working (save and close the card as well). And then add your parts again.

[micogg (Michael Ogg)]

Hi everyone, I’ve been beating my head against the wall for 2 days and it’s probably something simple.

I have a layout card in which I have a markdown and a custom:button-card. I’m having issues adding style to the custom:button-card to add padding to move it. Hopefully the pictures help it make more sense. I want to add padding to the left of the “Home” button to make it align with the “Media” title. The issue that I’m running into is that using the inspect tool, I need to add the padding to the “button-card”, but no mater what style I use in my yaml, I can only style the “ha-card”.

How do I style the “button-card”, which appears to be the parent of the “ha-card”. There is a picture from inspector to help this make more sense. Below is also the yaml.

Edit: Using Card-Mod-Helper, I got path for the “button-card” I’m trying to add padding to. If anyone knows how to style the Button Card under the root, it would be appreciate…

"body>home-assistant$home-assistant-main$ha-drawer>partial-panel-resolver>ha-panel-lovelace$hui-root$#view>hui-view>grid-layout$#root>layout-card$grid-layout$#root>button-card"

  - type: 'custom:layout-card'
    view_layout:
      grid-area: navigation ###This is to align the naivagtion section in the main grid
    layout_type: grid
    layout:
      grid-template-columns: 50% 50%
      grid-template-rows: auto
      grid-template-areas: |
        "room-title home-button"
    cards:
        #Room Name
      - type: markdown
        content: |
          Living Room
        view_layout:
          grid-area: room-title
          show:
            mediaquery: "(min-width: 1200px)"
        style: |
          ha-card {
            height: 50%;
            border: none;
          }
          ha-markdown {
            font-size: 3vw;
            font-weight: 500;
            text-align: left;
          }
        #Home Button
      - type: custom:button-card
        name: Home
        show_name: false
        show_icon: true
        view_layout:
          grid-area: home-button
        tap_action:
          action: navigate
          navigation_path: /room-dashboard/0
        template: 
          - standard_home
          - icon_home-button
        style: |
          button-card {
            position: relative;
            padding-left: 35px
          }

[hkroed (Hans Kristian Røed)]

Hi!
Can someone please help me edit the header font size in multiple entity row?
I’ve tried with the following code, but with no luck

style:
  hui-generic-entity-row:
    $: |
      .info.pointer {
        font-size: 8px;
      }

[Ildar_Gabdullin]

@hkroed

header font size in multiple entity row?

1st post → link at the bottom

[hkroed (Hans Kristian Røed)]

So you gave me the link to Githubs Card Mod… Thanks
Belive me, I have been there. And in this thread…

[Ildar_Gabdullin]

Check again what I wrote you. It was not about a Github.

[S1NK]

Thanks! Found a bunch of replies from Ildar in this thread with examples. Fixed some other problems i’ve been working with as well.

[S1NK]

Pretty certain this was the issue and have fixed now! Thanks!

[Ildar_Gabdullin]

Markdown with images:

type: markdown
content: |-
  ![Image](/local/images/test/blue.jpg)
  xxx
  ![Image](/local/images/test/blue.jpg)
  yyy
card_mod:
  style:
    ha-markdown $: |
      img:nth-of-type(2) {
        height: 100px;
        filter: opacity(0.5);
      }

[Ildar_Gabdullin]

Markdown with a table:

type: markdown
content: |
  <div class="tg-wrap">
    <table width=100%>
      <tbody>
        {%- for i in range(5) -%}
          {{
            '<tr>
              <td>
                <ha-icon icon="mdi:bell"></ha-icon>' +
                '<span>' +
                states("sun.sun") +
                '</span>' +
              '</td>
              <td>' +
                states("sun.sun") +
              '</td>
            </tr>'
          }}
        {%- endfor -%}
      </tbody>
    </table>
  </div> 
card_mod:
  style:
    ha-markdown $: |
      tr td:nth-child(2) {
        color: red;
        text-align: right;
      }
      tr:nth-child(2n) {
        background-color: rgba(33,33,33,0.2);
      }
      tr:nth-child(2) td:nth-child(1) {
        color: magenta;
      }
      tr:nth-child(3) td:nth-child(1) ha-icon {
        color: orange;
      }
      tr:nth-child(4) td:nth-child(1) span {
        color: magenta;
      }

[mkanet]

I am hoping someone can give me some guidance. I am using the markdown card. I would like to change the default td vertical alignment so that in the screenshot, the mdi bell icon and the timestamp text are both vertically aligned to the top instead of the middle/center.

I’m not sure; but from what I can see in my web browser’s Developer Tools, it shows that td{} veritical alignment is being forced by the user agent stylesheet to inherit. I could be wrong.

In any case, I would like to know what is preventing me from changing this; and, the easiest way to change this.

[parautenbach (Pieter Rautenbach)]

Interesting, Ildar.

I wonder if my original method will now work again, because I did something similar to what you did here when that broke for me. In the end I had to go for another hack.

I’m more reporting my various solutions and attempts here to document it than asking for help. Sharing out of interest.

This was the original approach and the cleanest in my opinion.

Card-mod - Super-charge your themes!

I recently came across a post where users show what kinds of entities their setup consists of. I found this interesting, especially that you can just group on the state object without the need to go to the DB. The markdown table is neat but I wanted something that looked prettier. Card-mod to the rescue! I’m using theme variables where possible. [Screenshot 2021-04-19 at 12.19.30] - type: markdown content: > Domain | Count :---|---: {% for domain…

(I only see now I posted it under the theme post for some reason. Oops.)

But then that broke, either due to something with card-mod’s compatibility with HA or a UI change in HA.

No injection of card-mod styles beyond the first level of ha-markdown cards

I then tried the HTML in markdown as you did here, but couldn’t get it working completely, so in the end I used the custom button card as an HTML container with some JS to build the table, with the styling applied by card-mod.

parautenbach/Home-Automation/blob/a702ac9039f10f7d04012a7b2011b0d896693590/home_assistant/ui-lovelace/devices.yaml#L346

[e-raser]

Can we extend the entity name space to the right to use the free/white area?

With longer names the text is usually cut off (and putting it in another line below is not nice either). Reducing the number field size/padding on the right unfortunately does not extend the entity name to make it expand and make use of the additional free space.

See red box area.

[Ildar_Gabdullin]

First, thank you for your “content” code.
I never used markdown for tables till yesterday/day before, so had ho idea how to draw tables in markdown.

---

Regarding card-mod.
Sometimes - very rarely - I see some instability for markdown.
What I noticed is (and told about it earlier) - using this

  style:
    ha-markdown:
      $: |

is better than

  style:
    ha-markdown $: |

While playing with card-mod for tables in markdown, I created 3 similar cards (code will be posted later), all 3 cards seem to be have stable styles. So, cannot find a reason of instability…

As I said many times, I am not an expert in CSS, only deal with it for card-mod.
Mainly my CSS knowledge comes from “try-fail-try-success”.

---

Regarding your code.

                  table {
                    border-spacing: 0;
                    width: 100%;
                    padding: 8px;
                    border-radius: var(--ha-card-border-radius);
                  }

This “border-radius” seems to be not working:
– there is a “padding” defined;
– “overflow” is default (w/o clipping),
so it does not change borders.
Later I will post a method to define borders.

Next, for this:

                  th:first-child {
                    border-top-left-radius: var(--ha-card-border-radius);
                  }
                  th:last-child {
                    border-top-right-radius: var(--ha-card-border-radius);
                  }

This way to define “border-radius” is preferable if:
– you need to define “border-radius” for the “thead” only;
– due to some reasons you cannot define “border-radius” for “table” (in this case you will have to define “border-radius” for the last row as well).

Next, for this:

                  tr:nth-child(even) {
                    background-color: var(--table-row-background-color);
                  }

The “tr” element is inside “thead” too.
So, use “tbody tr:nth-child(even)” path.

---

BTW, your code for table may be a bit “optimized”:

    content: >-
      Domain | Count
         :---|---:
      {% for domain in (states | groupby('domain'))[:5]  -%}
        {%- set name = domain[0].replace('_', ' ') | title -%}
        **{{ name }}** | {{ states[domain[0]] | count }} {{"\n"}}
      {%- endfor %}

[Ildar_Gabdullin]

Some more examples for styling tables in Markdown
(the initial idea of @parautenbach)

Here only background defined for a “thead” & “tbody”:

type: markdown
content: >
  Domain | Count
     :---|---:
  {% for domain in (states | groupby('domain'))[:5]  %} {% set name =
  domain[0].replace('_', ' ') | title %} **{{ name }}** | {{ states[domain[0]] |
  count }} {# leave blank line below otherwise table won't render #}

  {% endfor %}
card_mod:
  style:
    ha-markdown $: |
      table {
        width: 100%;
      }
      th {
        background-color: orange;
      }
      tbody tr {
        background-color: cyan;
      }

---

More styles:
– globally defined “border-radius”;
– removed spacing between cells;
– paddings for text;
– colored header text;
– odd & even rows have diff. background.

card_mod:
  style:
    ha-markdown $: |
      table {
        width: 100%;
        border-radius: 6px;
        border-spacing: 0;
        overflow: hidden;
      }
      th {
        background-color: orange;
        color: white;
        padding: 4px;
      }
      td {
        padding: 4px;
      }
      tbody tr:nth-child(even) {
        background-color: grey;
      }
      tbody tr:nth-child(odd) {
        background-color: cyan;
      }

---

Here how to define “border-radius” in a case when the “globally” defined “border-radius” does not work:
– we need to keep spacings between cells;
– have to define “border-radius” for “thead” & last row.

card_mod:
  style:
    ha-markdown $: |
      table {
        width: 100%;
      }
      th {
        background-color: orange;
        color: white;
        padding: 4px;
      }
      td {
        padding: 4px;
      }
      tbody tr:nth-child(even) {
        background-color: grey;
      }
      tbody tr:nth-child(odd) {
        background-color: cyan;
      }
      th:first-child {
        border-top-left-radius: 6px;
      }
      th:last-child {
        border-top-right-radius: 6px;
      }
      tbody tr:last-child :first-child {
        border-bottom-left-radius: 6px;
      }
      tbody tr:last-child :last-child {
        border-bottom-right-radius: 6px;
      }

---

Also more examples/ideas may be found here:
styling flex-table-card

[Ildar_Gabdullin]

Kind of this?

code

type: entities
entities:
  - entity: input_number.number_float
    name: some long long long long long
  - entity: input_number.number_float
    name: some long long long long long
    card_mod:
      style:
        hui-generic-entity-row $: |
          .info {
            white-space: unset !important;
          }
  - entity: input_number.number_float
    name: some long long long long long
    card_mod:
      style:
        hui-generic-entity-row $: |
          .info {
            flex: 1 1 50% !important;
          }

[parautenbach (Pieter Rautenbach)]

@Ildar_Gabdullin

This “border-radius” seems to be not working:
– there is a “padding” defined;

Ah, it’s defined in my custom.js. It’s from the time when HA didn’t have rounded corners on cards. They since introduced it, but with a larger radius, so I’ve kept mine.

@Ildar_Gabdullin

This way to define “border-radius” is preferable if:
– you need to define “border-radius” for the “thead” only;

Yes, that’s what I want in my case: only the top left and right corners of the head row must be rounded.

@Ildar_Gabdullin

BTW, your code for table may be a bit “optimized”:

Thanks. Indeed. The whitespace control of Jinja can catch one out. Your version is a bit more maintainable and explicit.

[e-raser]

@Ildar_Gabdullin

        hui-generic-entity-row $: |
          .info {
            flex: 1 1 50% !important;
          }

Exactly. But how to apply this on this point (next to the existing

                    :host {
                      --ha-textfield-input-width: 50px;
                      #--text-field-padding: 0px;
                    }

inside auto-entities)?

Full code

type: grid
columns: 1
square: false
title: 🔧 Konfiguration
cards:
  - type: custom:collapsable-cards
    title: 🏃‍♂️ Bewegungsmelder
    defaultOpen: false
    buttonStyle: 'font-size: x-large'
    cards:
      - type: entities
        title: null
        state_color: true
        show_header_toggle: false
        entities:
          - type: custom:text-divider-row
            text: Dauer (Trigger-/Aktiv-Zeit) *
            align: center
            style: |
              :host {
                #--text-divider-color: red;
                --text-divider-font-size: 16px;
                #--text-divider-line-size: 3px;
                #--text-divider-margin: 1em 0;
                #margin-bottom: 20px;
              }
          - type: custom:auto-entities
            card:
              type: entities
              title: null
              state_color: true
              show_header_toggle: false
              card_mod:
                style:
                  .: |
                    ha-card {
                      border-width: 0px;
                      margin-bottom: -5px;
                      margin-top: -10px;
                      margin-left: -15px;
                      margin-right: -15px;
                    }
            entities: null
            filter:
              include:
                - entity_id: number.motion_*_duration
                  options:
                    secondary_info: last-changed
                    card_mod:
                      style: |
                        :host {
                          --ha-textfield-input-width: 50px;
                          #--text-field-padding: 0px;
                        }
              exclude: []
            show_empty: true
            unique: true
            sort:
              method: name
              reverse: false

In short: how to combine :host with hui-generic-entity-row in this case?

[Ildar_Gabdullin]

@e-raser

#--text-divider-color: red;

Unrelated to the issue: this is a wrong commentary style.
Should be:
/* --text-divider-color: red; */