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

No, RotateX gives glitches in my tests on iOS & Mac.

I’d like to affect the alignment (e.g. center, justify, start/left, end/right) of the Mushroom Template Cards in the bottom horizontal mode stack-in-card within this stack-in-card.

image

I’ve tried a few things, but here is the one I’m currently trying:

            - type: custom:stack-in-card
              mode: horizontal
              card_mod: 
                style: |
                  ha-card {
                    align-items: justify;
                  }

Any suggestions?

I’m trying to change the font size of the value in a simple entity card, but I just can’t get it to work.
Setting the font-size only changes the padding, the text stays the same.

type: entity
entity: sensor.cpu_load
card_mod:
  style: |
    ha-card {
      color: red;
      font-size: 1000px;
    }

kép

Tried it this way as well, but nothing.

type: entity
entity: sensor.cpu_load
card_mod:
  style: |
    ha-card {
      color: red;
    }
    .value {
      color: teal;
      font-size: 1000px;
    }

kép

What am I missing here?

You are missing 1st post → link at the bottom

1 Like

Not sure if that was also meant for me, but I have tried to place it in the template card as suggested here

            - type: custom:stack-in-card
              mode: horizontal
              cards:
                  # Lights
                - type: custom:mushroom-template-card
                  entity: light.chair
                  card_mod: 
                    style: |
                      ha-card {
                        align-items: justify;
                      }

The alignment of the bottom row remains as pictured above.

I would like to grow slider of input_number-entity in entities card a bit.
Found the right object but no setting of width oder max-width have any effect.

  - entity: input_number.climater_temp
    name: Temperatur
    card_mod:
      style:
        hui-generic-entity-row: |
          .flex ha-slider {
            max-width: unset !important;
          }

Can someone help?

1st post → link at the bottom!!!

I know your posts and use them every time i do something with card-mod. Obviously I missed that part with sliders width. But know I found it.

Any way to grow it without setting width in px?
I use more devices with different resolutions, so percentage would be fine. But it was already set to width: 100% before using card-mod.

You are welcome, I added an example with width for you yesterday)

You may specify different cases fir different resolutions (google for mediaquery) - or probably by using a calc function dependingly on a viewport’s sizes. As I heard it is always a headache for web-masters.

Thanks for adding. I’m happy that I didn’t miss that.
Setting width in px works, but does not match my case because of different resolutions. Mediaquery is a bit too much - so I will ask another thing.

ha-slider is at 100% and show with aprox. 100px (for example). The name div beside the slider ist far wider even using a short name. It is about 300px. Why is the slider div so small or the name div so wide. I can’t figure out the properties for that.

Did you ever find a solution to this? I’m having the same problem and can’t seem to track down what’s causing it:

Wondering if someone could assist me with traversing through these shadow roots so that I can style the svg? I’ve tried a few things but not having any luck, the below is what I have so far, which is working, just this one last element is being a little tricky.

          style: |
            ::-webkit-scrollbar {
                display: none;
            }
            ha-card{
                height:663px !important;
                border-radius: 10px;
                font-weight: 300;
            }
            ha-card .event-leftCurrentDay {
                color: #A8C7FA;
            }          
            ha-card .daywrap {
                border-top-color: #737373;
            }
            ha-card .cal-eventContainer {
                font-size: 18px;
            }
            ha-card .eventBar .event-circle{
              margin-left: -20px;
              color: white !important;
            }
            ha-card .eventBar .event{
              margin: -12px -6px 6px;
            }

I am trying to center a popup card on the companion app for iOS horizontally and vertically, It seems like the card popup card sits on the bottom of the screen by default,

type: custom:mushroom-entity-card
entity: switch.group_air
secondary_info: none
name: Air
icon_color: green
layout: vertical
primary_info: name
tap_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    title: Air
    card:
      type: entities
      entities:
        - switch.fan
        - switch.purifier
    style: |
      ha-dialog {
        --mdc-dialog-min-width: 300px !important;
        --mdc-dialog-max-width: 300px !important;
        --mdc-dialog-min-height: 200px !important;
        --mdc-dialog-max-height: 200px !important;
      }
      .container {
        position: relative;
      }
      .center {
        position: absolute;
        top: 50%;
        left: 10vw;
        right: 10vw;
        height: 50vh;
        margin-top: -25vh;
      }
      .content {
        width: auto !important;
        height: auto !important 
      }
  target: {}

Hello. I have been using this for my kids lamps in their rooms so I know if they are not going to sleep at night:

type: grid
cards:
  - type: entity
    entity: sensor.kid1_lamp_power
    state_color: true
    name: Kid1
    card_mod:
      style: |
        ha-card { 
          background-color: {{ '#00' if is_state('sensor.kid1_lamp_power', '0.0') else '#D0342C' }};
            }
        }
  - type: entity
    entity: sensor.kid2_lamp_power
    state_color: true
    name: Kid2
    card_mod:
      style: |
        ha-card { 
          background-color: {{ '#00' if is_state('sensor.kid2_lamp_power', '0.0') else '#D0342C' }};
            }
        }
square: true
columns: 2
title: Girl's Lamp Status

Is there a way I can change the background image rather than color? I have tried a few things and nothing is working for me.

The current setup shows the default color is the lamp power registers at 0.0 and turns red if anything else.

I would love to have a photo of a light turn on when they turn it on, just becasue it would look cool haha.

I tried variations of this:

background-image: {{ url('/local/icons/girls/lamp_off.jpg') if is_state('sensor.khaleesis_lamp_power', '0.0') else url('/local/icons/girls/lamp_on.jpg') }};

I may have missed it, but don’t know how to change the “inactive” part of a regular Gauge card to something other than white:

Gauge

type: gauge
title: Basement
entity: sensor.basement_baseboards_temperature
name: Basement
min: 55
max: 85
background_color: rgba(7, 103, 215, 0.4)
segments:
  - from: 55
    color: rgb(50,100,255)
  - from: 60
    color: rgb(50,200,200)
  - from: 66
    color: rgb(0,200,0)
  - from: 73
    color: rgb(255,100,0)
  - from: 75
    color: rgb(255,0,0)
style: |
  ha-card {
  --primary-text-color: #FFFFFF;
  --secondary-text-color: #FFFFFF;
  background: rgba(7, 103, 215, 0.24);
  }

Everything else works fine. Any ideas?

Check the updated post.
First apply static styles (w/o if … else), see if it works.

Thank you. One simple question: where to put that decluttering template section code at?

Details may be read here.

  1. In Storage mode:
    Open “Raw configuration editor”, place this on the top:
decluttering_templates:
  decl_XXXXX:
    card:
      ....
  1. In yaml mode:
    Declare a folder with templates in a dashboard file:
decluttering_templates: !include_dir_merge_named templates-decluttering/
views:
  - !include page_1.yaml
  - !include page_2.yaml

Place your templates in separate files (or all templates in one file, or several templates in one file, other templates in own files) in that “templates-decluttering” folder (paths must be specified properly):
изображение
An example of some yaml file for a decluttering template (contains 3 templates in this example):

decl_template_1:
  default:
    ...
  card:
    ...

decl_template_2:
  default:
    ...
  card:
    ...

decl_template_3:
  default:
    ...
  card:
    ...

Whenever a decluttering template is edited - reload it by editing the dashboard file (edit/undo/save) + refreshing the page.

Yeah the images work, if I set a static image it shows, so its not an issue with that.

The easiest way is to set the variable in host. With that you don’t have to go into the shadow roots

type: gauge
entity: sensor.thermometer_ausen_maximum
card_mod:
  style: |
    :host { --primary-background-color: red; }
1 Like