đŸ”č Card-mod - Add css styles to any lovelace card

looking for some help with defining the style code. I want to simply add “margin” to the camera view to push the card down (so I can see the date and time). I hacked the console to add margin, so you can see the bottom camera image is shown the way I want it, but i cannot figure out what the style code looks like. Any help?

Here is the

How did you figure out?
I have a similar question but no idea how to handle. If you find some minutes, you might have a look at? Link

I explained it here.

So you could do something like this

- type: picture-elements
  style:
    '#root > bar-card':
      $: |
        ha-card {background: none; box-shadow: none;}
2 Likes

I have two questions. Sorry if these seem like basic questions, but I was not able to solve these myself. First, I’m trying to use card-mod with the following setup. The card consists of a entities card, which has two auto-entities cards inside it. The auto-entities cards are using glance as the card.

image

YAML
      - entities:
          - card:
              show_header_toggle: false
              style: |
                ha-card {
                  box-shadow: none;
                  background: transparent;
                }
                .card-header {
                  font-size: 20px;
                }
              title: Helsinki
              type: glance
            filter:
              exclude:
                - name: '54'
                - name: '201'
              include:
                - entity_id: sensor.hsl_hel_*
                  state: '> 3'
            sort:
              count: 5
              method: state
              numeric: true
            type: 'custom:auto-entities'
          - card:
              show_header_toggle: false
              style: |
                ha-card {
                  box-shadow: none;
                  background: transparent;
                }
                .card-header {
                  font-size: 20px;
                }
              title: LeppÀvaara
              type: glance
            filter:
              include:
                - entity_id: sensor.hsl_lpv_bus*
                  name: '/[0-9]{3}[NK]?/'
                  state: '> 3'
                - entity_id: sensor.hsl_lpv_train*
                  state: '> 3'
            sort:
              count: 5
              method: state
              numeric: true
            type: 'custom:auto-entities'
        title: Public transport
        type: entities

I have already succeeded with removing the borders of the auto-entitites (glance) cards and changing the size of titles. However, I would like to bold out or apply italics to the line number (235, 550, 39, A etc.) from each entity. Does anybody have suggestions on how to achieve this? I’ve tried to inspect element, but didn’t find anything noteworthy.

Second question: I’m trying to add conditional coloring to entities card’s states. So that the icon and entity name would always display as normal, but the state would change between red and green.
image

YAML

entities:

  • entity: sensor.googlesheets_stocks_gainloss
    name: Portfolio gain/loss
    style: |
    :host {
    color:
    {% if states(config.entity)[:1] == “-” %}
    red
    {% else %}
    green
    {% endif %}
    ;
    }
    title: Stock portfolio
    type: entities

I was able to change to whole row’s color based on the state, but I would like to only change the color of the state (and not the entity name). In my example, the state is <div class="text-content">-€291.40</div>. How can I achieve this?

New to card mod (and css altogether) so trying to get my head around a few things so some advice would be appreciated.

Here is my current sensor card.
image
And my custom:mini-graph-card with a touch of card-mod to try and get the icon, header text colour, value colour and unit of measurement colour the same as the standard sensor card (with the ‘slate’ theme).

Three questions:

  • Can some assist with code on the colours for the text?
  • Is there a way to reduce the size of the card altogether? I’ve been trying to get it about 75% of its current height but nothing seems to work.
  • Is there a way to transition though all my colour values without listing them all as I’ve done?

image

style: "ha-card {\n  --paper-item-icon-color: dodgerblue;\t\n}\n.card-header {\n  color: #b58e31;\n}\n"
color_thresholds:
  - color: '#0012ff'
    value: 08
  - color: '#0022ff'
    value: 09
  - color: '#0032ff'
    value: 10
  - color: '#0044ff'
    value: 11
  - color: '#0054ff'
    value: 12
  - color: '#0064ff'
    value: 13
  - color: '#0074ff'
    value: 14
  - color: '#0084ff'
    value: 15
  - color: '#0094ff'
    value: 16
  - color: '#00a4ff'
    value: 17
  - color: '#00b4ff'
    value: 18
  - color: '#00c4ff'
    value: 19
  - color: '#00d4ff'
    value: 20
  - color: '#00e4ff'
    value: 21
  - color: '#00fff4'
    value: 22
  - color: '#00ffd0'
    value: 23
  - color: '#00ffa8'
    value: 24
  - color: '#00ff83'
    value: 25
  - color: '#00ff5c'
    value: 26
  - color: '#00ff36'
    value: 27
  - color: '#00ff10'
    value: 28
  - color: '#17ff00'
    value: 29
  - color: '#3eff00'
    value: 30
  - color: '#65ff00'
    value: 31
  - color: '#8aff00'
    value: 32
  - color: '#b0ff00'
    value: 33
  - color: '#d7ff00'
    value: 34
  - color: '#fdff00'
    value: 35
  - color: '#FFfa00'
    value: 36
  - color: '#FFf000'
    value: 37
  - color: '#FFe600'
    value: 38
  - color: '#FFdc00'
    value: 39
  - color: '#FFd200'
    value: 40
entities:
  - entity: sensor.temperature_xiaomi_office
hours_to_show: 12
icon: 'mdi:thermometer'
name: Office
points_per_hour: 1
show:
  graph: bar
type: 'custom:mini-graph-card'

Hi, is it possible to style conditionally secondary info entity card inisde auto entities card?

This is not working :frowning:

card:
  show_header_toggle: false
  title: Rachunki
  type: entities
filter:
  include:
    - entity_id: variable.*
      options:
        secondary_info: >-
          Do zapƂaty: <b style='color:[[ if({entity}.attributes.czy_oplacony ==
          'nie', 'green', 'red') ]]'>[[ {entity}.attributes.do_zaplaty ]]</b>
        type: 'custom:secondaryinfo-entity-row'
sort:
  method: state
type: 'custom:auto-entities'

So I thought about condition move to style. Something like this:

card:
  show_header_toggle: false
  title: Rachunki
  type: entities
filter:
  include:
    - entity_id: variable.*
      options:
        secondary_info: >-
          Do zapƂaty: <b style='color:red'>[[ {entity}.attributes.do_zaplaty ]]</b>
        type: 'custom:secondaryinfo-entity-row'
        style: |
          div.secondary b {
            color: green !important; //condition must go here
          } 
sort:
  method: state
type: 'custom:auto-entities'

See the advanced configuration section of the readme.
Getting through the shadowDOM to the secondary info row is a bit more involved than that.

https://github.com/thomasloven/lovelace-card-mod/blob/1105f6f1c3f3d91a389f810c96826f0d816e1df5/test/views/tricks.yaml#L147-L149

1 Like

Thanks. That did the trick:

card:
  show_header_toggle: false
  title: Rachunki
  type: entities
filter:
  include:
    - entity_id: variable.*
      options:
        secondary_info: true
        style:
          hui-generic-entity-row:
            $: |
              .secondary::before {
                content: "Do zapƂaty:"
              } 
              .secondary::after {
                color: 
                {% if is_state_attr(config.entity, 'status','do oplacenia') %} 
                  green 
                {% else %} 
                  red 
                {% endif %}
                ;
                content: "{{ state_attr(config.entity, 'do_zaplaty') }}"
              } 
sort:
  method: state
type: 'custom:auto-entities'

1 Like

Hi,

I’m trying to use card-mod to colour the background of entities on a glances card. I plan to adjust background colour according to temperature (haven’t done that bit yet). I would like to adjust padding and margin, but notice that only some of these settings don’t take.

My config:

    - type: glance
      entities:
        - entity: sensor.temperature_8434
          name: Kitchen
        - entity: sensor.downstairs_temperature
          name: TV room
        - entity: sensor.inside_temperature
          name: Bedroom
        - entity: sensor.temperature_study
          name: Study
        - entity: sensor.temperature_5534
          name: Oliver
        - entity: sensor.temperature_1902
          name: Pete
        - entity: sensor.temperature_ellie
          name: Ellie
      show_icon: false
      style: |
        .entity {
          background: red;
          margin-left: 4px;
          margin-right: 4px;
          margin-bottom: 8px;
          padding-bottom: 4px;
          padding-top: 4px;
        }

But looking in the inspector in Chrome, I can see that some of these get ignored.


Any suggestions as to what I can do differently?

Thanks

Darn. The colour adjustment isn’t working for me. I’m doing this:

      style: |
        .entity {
          margin-left: 4px;
          margin-right: 4px;
          margin-bottom: 8px;
          padding-bottom: 4px;
          padding-top: 4px;
          background:
            {% if states(config.entity) |int <22 %}
              green;
            {% else %}
              blue;
            {% endif %}
        }

If I replace states(config.entity) with a number, it works. Is there some trick to getting states(config.entity) working?

          background:
            {% if states(‘config.entity’) |int <22 %}
              green;
            {% else %}
              blue;
            {% endif %}
        }

A simple matter of quotes and you’re there.

Thanks for the quick response @eggman, but that doesn’t seem to be the answer. All of the examples I have seen are without quotes. In any case - trying it in my cases didn’t make any difference.

Ah, yes - usually that parameter is a string value of an entity id, I hadn’t realised it could also be a variable referring to the current entity in a card.

Css prioritization is weird.
Try margin-bottom: 8px !important;etc.

The glance card has no entity property. The things in the glance card do, though. Try applying the styles to them instead.

Awesome - thanks Thomas. CSS is weird


OK - I think I see what you mean - I think I’ve misunderstood the use of config.entity.

I had hoped it would allow me to set some dynamic CSS (eg set colour based on temperature) at the card level, which would be applied to each entity in turn at render time. But I think you are saying that I must do this at the entity level, which means reentering the same dynamic CSS code for each entity. A little verbose, but I guess it gets the job done.

You can avoid a lot of copy pasting with node anchors.

2 Likes

Ah Thomas - you’re a legend and a gentleman. Thanks - node anchors work beautifully.

Hi Thomas,

Since HA 110 changes the way it handles icons, the ‘old’ custom-ui way of customizing icon_color doesnt work anymore. Which is a major bummer, since custom-ui was able to customize entities globally, and every where in HA these entities are displayed with their customizations. Any card, be it custom or core, and, importantly, in the more-info.

Did file a feature request to please add a new way of customizing entities in Ha core Frontend, but that will be a long shot I fear.

So, trying my best to customize icons with what’s available right now, and using your card-mod Style of course. But, that only styles the entities in a Lovelace card, and not their more-info, as the quote above already indicates.

I’ve managed to template the icon color in an auto-entities card and would really have that functionality used in more-info. Which, without the color, in fact will be a Less-info from Ha 110 onward


Since your answer above was a long time ago (talking Ha development time), I was wondering if you know of a way yet to globally customize items, so the more-info on the entity is also customized?

If not, could you give me a pointer what to look for in the ‘old’ custom-ui, and what has been changed in the 110 HA icon handling, so I can try to adapt that script to that? I haven’t been able to find that in the GitHub.
thanks for having a look.