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

You should describe what you want. If you want it right aligned with minimum space or distributed over the whole line. Without this, this is too much trial and error.

Compare

with

is what I am after yes. Bigger problem seems to be I can not get mobile And desktop to behave like that with the same config.

I wrote ā€˜what I am looking forā€™ in that post, because I was indeed looking for the reason why the card didnt do what I expected it to do, fill from the right. (Iā€™ve edited that post)

As I have established now, that is caused by the card_mod styling on the .info

So, cut it short, I like an icon, no name, several icons spread evenly over the space next to the icon, and no closing state on the right.

Ill limit the number of entities to what can be displayed correctly on mobile, as that space seems more limited than 1 column on desktop, and doesnt get resized, but overflows.

But did you test this and leave everything what you had before.

yes, and that has come very close to being very nice:

  - type: entities
    card_mod:
      style: |
        .card-content {
          padding: 8px 16px 8px 0px;
        }
    entities:
      - entity: sun.sun
        type: custom:multiple-entity-row
        card_mod:
          style:
            hui-generic-entity-row $: |
              .info {
                display: none;
              }
            .: |
              .entities-row {
               width: 100%;
              }
        state_color: true
        show_state: false
#         name: false

I had to push the padding a bit, because otherwise too much space would be on the left.

changing the justify-content does not seem to make things better (I feel there is too much whitespace between the entities now on desktop (see above). Mobile is better but even there the justify could improveā€¦

so many optionsā€¦

update

had to add !important to overwrite the card option for justify-content:

            .: |
              .entities-row {
               width: 100%;
               justify-content: space-evenly !important;
              }

and, so you know this has not been in vain:

  - type: custom:mod-card
    card_mod:
      style: |
        :host {
          --stack-card-margin: 0px;
        }
    card:
      type: vertical-stack
      cards:
        - type: custom:sun-card
          card_mod:
            style: |
              .sun-card {
                --sun-card-lines: #d7d7d7 !important;
                padding: 0px !important;
              }
              .sun-card-header span {
                 display: none;
              }
              .sun-card-footer span {
                display: none;
              }
              .sun-card-footer-row {
                padding: 0px !important
              }

        - !include /config/dashboard/includes/include_zon_multiple_row.yaml
1 Like

Like your status and sharing of it. :+1: But I would suggest to place all this in card-mod theme thread, where you find more audience and where it better belongs to.

1 Like

Would appreciate any tips on right aligning a second entity value on a card.

If I use markup to put a span/div round the second value in the ā€˜secondary informationā€™ may I use card-mod to align that content to the right?

Mockup based on a Mushroom entity cardā€¦
dual_property_entity_card

Aside from ā€˜Multiple Entity Rowā€™, has anyone come across any other cards that support two parameter/entity values?

Thanks, I didnā€™t know there was that thread :+1:

Struggeling with fonts on iOS, on Android and Windows this works fine.

Does anyone have a few fonts that work well cross platform?

ha-card {
 ha-card-background: rgba(0, 0, 0, 0);
 box-shadow: none;
 margin: 20px 10px 0px -5px;
 font-size: 15px;
 font-family: 'Segoe UI Light";
 text-align: center

e.g.

1 Like

Care to share your YAML? Iā€™m playing around with it, but having zero luck using card-mod on the title card:

type: custom:expander-card
title: ''
cards:
  - type: entities
    entities:
      - entity: climate.first_floor_baseboards
        name: First Floor
        icon: mdi:radiator
      - entity: climate.second_floor_baseboards
        name: Second Floor
        icon: mdi:radiator
      - entity: climate.master_bedroom_baseboards
        name: Master Bedroom
        icon: mdi:radiator
      - entity: climate.basement_baseboards
        name: Basement
        icon: mdi:radiator
style:
  .: |
    ha-card {
      height: 4em;
      background: none;
      box-shadow: none;
    }
state_color: false
button-background: rgba(7, 103, 215, 0.24)
clear: false
padding: '0'
child-padding: '0'
gap: '0'
title-card:
  type: custom:mod-card
  card:
    type: custom:mushroom-title-card
    title: BASEBOARD HEATERS
  card-mod:
    style: |
      mushroom-title-card$: |
        .title {
          font-size: 35px!important;
          font-weight: 520!important;
        }
title-card-button-overlay: false

Hi,

how can I colourize the numbers unequal to ā€œ0ā€ ?

type: horizontal-stack
cards:
  - type: entity
    entity: sensor.number_lights_on
    name: Lichter an
  - type: entity
    entity: sensor.door_count
    name: Offene TĆ¼ren
    icon: mdi:door-sliding

I Just want to get an an idicator and change colour to red if Light is on (uneuqal 0) or Doors are open (uneuqal 0)

1st post ā†’ Bottom ā†’ Link from Ildar ā†’ Entity Card.

1 Like

Hi,
how can I add or modify badge in any Tile card like the climate or person entities features in
image

Thankā€™s a lot.

Anyway its static, is it possible to change a sensors color depending on state with css?

  - type: entity
    entity: sensor.number_lights_on
    state_color: false
    card_mod:
      style: |
        .info .measurement {
        {% if is_state(sensor.number_lights_on,'0') %}
          color: green;);
        {% else %}  
          color: red;);
        {% endif %}  
        }

This one isnā€™t working

Always put your templates in dev tools templates and see what is the output and where is the error.

Here there are missing ā€˜ā€™ around the entitiy and not needed ); which you added for whatever reasons?

I am using it in a horizontal-stack-card which require a type: entity.

type: horizontal-stack
cards:
  - type: entity
    entity: sensor.number_lights_on
    state_color: false
    card_mod:
      style: |
        .info .measurement {
        {% if is_state('sensor.number_lights_on', '0') %}
          color: green;);
        {% else %}  
          color: red;);
        {% endif %}  
        }

Dev-Template is giving me: UndefinedError: ā€˜sensorā€™ is undefined

:smiley:

it need to be like this:

type: horizontal-stack
cards:
  - type: entity
    entity: sensor.number_lights_on
    state_color: false
    card_mod:
      style: |
        ha-card {
        {% if is_state('sensor.number_lights_on', '0') %}
        color: green;);
        {% else %}  
        color: red;);
        {% endif %}  
        }

ha-card insead of .info .measurement donā€™t know where i got it from :smiley:

HƤh?

What I wrote. Missing ā€œā€ in your first post.

For the rest: OK then donā€™t do what I write and use your faulty css.

In a markdown card, or any card really, is it possible to specify separate font style for the title and another font style for the rest of the text?

If so, how would that be done?

I am also a fan of the multiple-entity-row. For me the fun is to get more information in less space. Removing the icon(badge) en clearing the info-pointer space are always the first things I do. But now I have a problem. In this specific example I canā€™t do it without also losing the content info.

Can you help me out?

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sun.sun
    icon: mdi:blank
    name: false
    tap_action: none
    show_state: false
    entities:
      - entity: sensor.co2xxx
        name: CO2
        unit: false
        styles:
          width: 50px
          text-align: left;
          color: var(--my-font31-color)
      - entity: sensor.gradient
        name: GraD
        format: precision03
        styles:
          width: 70px
          text-align: left;
          color: var(--my-font34-color)
      - entity: sensor.average_xxx
        unit: false
        format: precision01
        name: AvG
        styles:
          width: 55px
          text-align: left;
          color: var(--my-font35-color)
    style: |
      hui-generic-entity-row .entities-row div.entity:nth-child(1) div::after
      {
        color: var(--my-font01-color);
        font-size: 0.8rem;
        content: "\A {{states['sensor.multiplied_sensor'].state}}";
        white-space:;
      }
      hui-generic-entity-row .entities-row div.entity:nth-child(2) div::after
      {
        color: var(--my-font04-color);
        font-size: 0.8rem;
        content: "\A {{states['sensor.average_temp_02_trend'].state}}";
        white-space: ;
      } 
      hui-generic-entity-row .entities-row div.entity:nth-child(3) div::after
      {
        color: var(--my-font05-color);
        font-size: 0.8rem;
           content: "\A {{ states('sensor.ewe_th_08_slaapkamer_humidity') | float | round(0) }} ";
        white-space: ;
      }       
      
style: |
  ha-card { 
    --my-font01-color: red; 
    --my-font04-color: red; 
    --my-font05-color: red; 
    --my-font31-color: red;
    --my-font34-color: red; 
    --my-font35-color: red; 
  }