šŸ”¹ Card-mod - Add css styles to any lovelace card

Try your templates in developer tools template section and it will show you the problems.

And please donā€™t post full problems several times.

1 Like

Thanks arganto

Iā€™m a bit stuckā€¦ I had working code prior to the UI updates from December 2022. Itā€™s the last remaining thing I havenā€™t been able to fix.

My old (now broken) modifications:

        card_mod:
          style:
            ha-markdown:
              $:
                ha-markdown-element: |
                  table {
                    border-spacing: 0;
                    width: 100%;
                    padding: 8px;
                    border-radius: var(--ha-card-border-radius);
                  }
                  th {
                    background-color: var(--state-icon-color);
                    color: white;
                    padding: 4px;
                  }
                  th:first-child {
                    border-top-left-radius: min(var(--ha-card-border-radius)/2, 5px);
                  }
                  th:last-child {
                    border-top-right-radius: min(var(--ha-card-border-radius)/2, 5px);
                  }
                  td {
                    padding: 4px;
                  }
                  tr:nth-child(even) {
                    background-color: var(--table-row-background-color);
                  }

In short, this added some rounding to the header and footer rows and gave alternating rows differing colours.

Iā€™ve inspected the DOM and I can only see a top-level <card-mod>, which probably means I canā€™t style any inner elements anymore, unless thereā€™s some trick Iā€™m missing.

I can still apply something like a scrollbar via this top-level element, but canā€™t seem to reach anything else. The last example of markdown card changes is one by Mariusthvdb and some comments by Ildar, but thatā€™s prior the UI updates.

Is this kind of change definitely not possible anymore?

Try with

card_mod:
  style:
    ha-markdown $:
      ha-markdown-element: |

Does this code work?
Shouldnā€™t you use ā€œcalc()ā€ here?
I may be wrong.

Also, I suggest you to define a ā€œdefaultā€ value:
var(--ha-card-border-radius, 4px)

why are you using card_mod on the button-card? you can set those directly in the styles section of the button-card itself?

wait, nvermind me. I didnt see the well hidden

right there in the middle of the card configā€¦:wink:

sorry

Not so sure about that, Ive never used the ha-markdown-element: yet, but, just this day, no such thing as coincidence, I wondered if we could card_mod per section in a markdown card. Is that what this does?

because if so, Id love to be able to change this mod:

    - type: markdown
      card_mod:
        style: |
          ha-card.type-markdown {
            overflow-y: scroll;
            height: 450px;
          }
      content: >
        ### Components: {{state_attr('sensor.overview_components','Components')}}

        Per domain:

        {{state_attr('sensor.overview_components','per domain')}}

to starting the scroll section below the Per domain line.

the template that follows is a huge list of ordered components in the system, and Id love to keep the ā€˜headerā€™ in sight.

Mar-01-2023 20-57-35

I might be able probably to fake that, and use 2 stacked cards, but it would be very nice to be able to target sections inside a markdown card?

  - type: markdown
    content: |-
      <p>Read:</p>
      <p>The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.</p>
      
      End!
    card_mod:
      style:
        ha-markdown $: |
          p:nth-child(2) {
            max-height: 200px;
            overflow-y: auto;
          }

image

2 Likes

elif Instead elseif

type: vertical-stack
cards:
  - type: alarm-panel
    states:
      - arm_night
      - arm_away
    entity: alarm_control_panel.9000_aaa_zone_1_alarm
    card_mod:
      style:
        .: |
          ha-card {
            background-color:
            {% if is_state('alarm_control_panel.9000_aaa_zone_1_alarm', 'disarmed') %} 
            red; 
            {% elif is_state('alarm_control_panel.9000_aaa_zone_1_alarm', 'armed_away') %} 
            blue;
            {% elif is_state('alarm_control_panel.9000_aaa_zone_1_alarm', 'armed_night') %}
            green;
            {% else %}
            yellow;
            {% endif %}
            }
        ha-chip:
          $: |
            div:nth-child(1) {
                {% if is_state("alarm_control_panel.9000_aaa_zone_1_alarm", "disarmed") %}
                  background-color: green;
                {% elif is_state("alarm_control_panel.9000_aaa_zone_1_alarm", "armed_away") %}
                  background-color: red;
                {% elif is_state("alarm_control_panel.9000_aaa_zone_1_alarm", "armed_night") %}
                  background-color: orange;
                {% elif is_state("alarm_control_panel.9000_aaa_zone_1_alarm", "triggered") %}
                  background-color: red;
                {% else %}
                  background-color: grey;{% endif %} }
1 Like

I know. And the reason for quoting it as well. And the hint to check template playground in dev-tools.
Helping people help themselves. And as he already replied with thanks and heart, it was solved already.

those templates can be made a lot simpler, and cut all that repetitive code, try something like this:

{% set status = states('alarm_control_panel.9000_aaa_zone_1_alarm') %}
{% set colors = {'disarmed':'red','armed_away':'blue','armed_night':'green'} %}
{{colors.get(status,'yellow')}}
1 Like

that Is a cool mod, and yes, I get it to work on actual lines of text. However, using that on a template returning a long list if text doesnt work.

I did play around bit in the markdown, as adding a white line here or there makes a lot of difference. I could not get it to get better than this though:

    - type: markdown
      card_mod:
        style:
          ha-markdown $: |
            p:nth-child(2) {
              max-height: 200px;
              overflow-y: auto;
            }
      content: |-
        <p>

        {% set comp = state_attr('sensor.overview_components','components') %}
            {% set sub = state_attr('sensor.overview_components','subdomains') %}
            Components: {{comp}} | Subdomains: {{sub}}

        </p>

        <p>

        {{state_attr('sensor.overview_components','per domain')}}

        </p>

compare that to the post above with the unformatted template card, or this somewhat more elaborate card using some folding and separate markdowns:

type: entities
title: Components and domains
card_mod:
  class: class-header-margin
entities:
  - type: custom:hui-element
    card_type: markdown
    card_mod: &no-box
      style: |
        ha-card.type-markdown {
          box-shadow: none;
          margin: 0px -16px;
        }
    content: >
      {% set comp = state_attr('sensor.overview_components','components') %}
      {% set sub = state_attr('sensor.overview_components','subdomains') %}
      Components: {{comp}} | Subdomains: {{sub}}
  - type: custom:fold-entity-row
    head:
      type: section
      label: Per domain
      card_mod: &label
        style: |
          .label {
            margin-left: 0px;
          }
    padding: 0
    entities:

      - type: custom:hui-element
        card_type: markdown
        card_mod: &scroll
          style: |
            ha-card.type-markdown {
              box-shadow: none;
              overflow-y: scroll;
              height: 450px;
              margin: 0px -16px;
            }
        content: >
          {{state_attr('sensor.overview_components','per domain')}}

  - type: custom:fold-entity-row
    head:
      type: section
      label: Per Subdomain
      card_mod: *label
    padding: 0
    entities:

      - type: custom:hui-element
        card_type: markdown
        card_mod: *scroll
        content: >
          {{state_attr('sensor.overview_components','per subdomain')}}

Mar-02-2023 12-51-09

Your answer doesnā€™t help anyone, if you donā€™t feel like it donā€™t

Hi, can I add some perspective to state-label? I would like the text to match the perspective of the wall that is underneath

Perhaps my request to point out my error was overlooked among the many requests in this thread.
In the meantime I have also applied the latest hints in this thread but none led to success.
Any idea what is wrong with my config?

  - type: image
    entity: cover.velux_window_roof_window
    state_image:
      open: /local/ui/floorplan/lite-on.png
      closed: /local/ui/floorplan/lite-off.png
      half-open: /local/ui/floorplan/lite-unavailable.png
    style:
      top: 5%
      left: 50.5%
      width: 2%
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          title: roof-window
          content:
            type: custom:shutter-row
            entity: cover.velux_window_roof_window
            name: Garden
            invert_position: false
            state_color: true
            card_mod:
              style: |
                ha-card { border: yes; padding: 100px; }

Picture of the DOM Navigation
image

Cannot test it myself - but play with something like ā€œtransform: rotateā€ with a native ā€œpicture-elements::styleā€ feature (i.e. not card-mod, check this for hints). I think a ā€œperspectiveā€ may be achieved by combination of different rotation. Tests are needed.

You can with transform: skew, like this:

type: picture-elements
elements:
  - type: state-label
    entity: sensor.lounge_sensor_temperature
    style:
      top: 50%
      left: 15%
      font-size: 20px
      color: white
      transform: skew(20deg, -45deg)
5 Likes

maybe first tell us what you would have expected and what doesnt work? help us help you.

Why is it ā€˜wrongā€™?

unless you want us to notice the border: yes, which is not a supported option according to CSS Borders

do we already have a quick overview of the moddable elements in a mushroom-template-card?

Ive been trying to set some colors, according to my regular theming, but apparently the mushroom out of the box only supports a handful of colors.
therefor, we need to go to card_mod, but then require the elements to mod, and those seem to be very well/deeply hidden in Inspector.

I can set a background (given this is after all a button-card, it would make sense it worked)

            type: custom:mushroom-template-card
            card_mod:
              style: |
                ha-card {
                  pointer-events: none;
                  background: var(--primary-color);
                }

but I can not set color: green or an icon color for that matterā€¦

its really odd to find a card not able to support color: var(--primary-color) but there we are. So how to mod those on the mushroom-template-cardā€¦

for starters:

            type: custom:mushroom-template-card
            card_mod:
              style: |
                ha-card {
                  pointer-events: none;
                  background: ivory;
                }
            icon_color: green
            fill_container: true
            layout: vertical

results in:

I would at least require the element for icon (to be able to use a theme var) the primary element (name) and secondary element (number in this case)

I hope, that if I can set a var to the icon, the card will compute the background of the icon itselfā€¦

Where can i learn about how to modify things with css? How do you know all these commands? Thank you very much for your answer !!