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

Hi, anyone knows how change the division lines color of a history graph card?
Thanks and regards

I believe itā€™s always aligned to the left.
Anyway, this config centers title of Entities card for me

type: entities
title: Test
style: 'div.card-header {justify-content: center}'
entities:

what is it? imho a screenshot would be really helpful.

the lines that form the grid, the perpendicular, vertical and horizontal lines


The blue and red line not, only the grid and maybe numbers too
Thanks again

Iā€™m pretty sure itā€™s not possible using card-mod as it uses canvas element to create a drawing and everything happens inside charts-render-monitor script.

Wtf, thanks again bro

hi there, sorry for this very noob questionā€¦

iā€™m trying to get an icon to change color based on its state, but Iā€™m a bit confused with some of the variables at play here. What do I need for config.entity and --state-icon-active-color?

eg.

I have an input_boolean.fan_control entity that iā€™d like its icon to change color, how should i go about doing it?

Iā€™ve been reading up and trying my hand at it for 2 days and canā€™t seem to get it to work.

- entity: input_boolean.fan_control
  name: Cooker On/Off
  icon: mdi:stove
  style: |
     :host {
         --paper-item-icon-color: 
            var{% if is_state(input_boolean.fan_control), "on") %} 
                yellow 
            {% else %} 
                 blue 
            {% endif %})
             ;
        }

@Albert_Lin

- entity: input_boolean.fan_control
  name: Cooker On/Off
  state_color: true
  icon: mdi:stove
  style: |
    :host {
      --paper-item-icon-active-color: yellow;
      --paper-item-icon-color: blue;
    }
4 Likes

that didnā€™t work

@Albert_Lin
Did you add state_color: true ?

that worked now thank you!!!`

Hi. Could you please help me out with this code? Iā€™m trying to add style to a slider-entity-row (knob and progress bar)

- type: custom:mod-card
  debug_cardmod: true
  style:                              
      slider-entity-row:
        $: 
          ha-slider:
            $: |
              .slider-knob {
                background-color: rgb(255,255,255);
              }
            $: 
              paper-progress:
                $: |
                  div#progressContainer {
                    background-color: rgb(255,0,0);
                  }
                  div#primaryProgress {
                    background-color: rgb(0,255,0);
                  }

Itā€™s working separately (or the knob or the bar) but not at the same time. Thank you for your help.

I could use a litle help. Iā€™m trying to change font-color of floated-label-placeholder in paper-input.vacuum floated-label-placeholder

Hi @thomasloven,

First of all thank you so much for this great work! Iā€™ve been using card-mod for a while and itā€™s awesome :+1: I recently wanted to try the new theme styling feature from release 13. I have the latest release (13) installed from HACS and running Home Assistant 0.108.3 The styling in the theme does not at all reflect in my cards. Is this feature broken for now? Is anyone else having this issue?

Thanks again!

Interesting, it refers to card-mod-themes.yaml but there is no such fileā€¦

because you have 2 identical $ keys under ha-slider.
this works for me

style:
  hui-entities-card:
    $:
      slider-entity-row:
        $:
          ha-slider:
            $:
              '#sliderContainer': |
                .slider-knob {background-color: rgb(255,255,255)}
              paper-progress:
                $: >
                  #progressContainer {background-color: rgb(255,0,0)}
                  #primaryProgress {background-color: rgb(0,255,0)}

should be paper-input-container.

Thank you @AhmadK. I didnā€™t know how to put the second $ selector into work. You saved my day. Thanks! :slight_smile:

1 Like

how about this (untested)?

ha-card:
  hui-input-select-entity-row:
    $: 
      ha-paper-dropdown-menu:
        $:
          paper-menu-button:
            paper-input:
              $:
                paper-input-container:
                  $: |
                    .floated-label-placeholder {
                      font-size: 16px !important;
                      --primary-text-color: black !important;
                    }

btw, no need to use quotes around keys unless they have . or #

youā€™re welcome. I didnā€™t know, too. Now I do :wink:
actually, it was more about how to ā€œbranchā€ the map at a certain level.

Thank You AhmadK for pointing me in right direction. The trick was to style just the input_select not the card. The right way to do it was:

        - type: entities
            image: '/local/custom-lovelace/custom_ui/vacuum.png'
            style: |
              ha-card {
                background-image: url("/local/custom-lovelace/custom_ui/vacuumlist.png");
               }
            entities:
              - entity: input_select.vacuum_room
                image: '/local/custom-lovelace/images/vacuumicon.png'
                style:
                  ha-paper-dropdown-menu:
                     $:
                       paper-input:
                         $:
                          paper-input-container: |
                             label {
                               font-size: 16px;
                               color: white;
                             }
1 Like

actually, there was at least one more problem - you tried to style labelā€™s placeholder instead of the label :wink:
when you do styling, try adding a styling bit in your browser first to see if it works, make it look as you want and only then use the styling in card-mod.

2 Likes

Can you elaborate please?
How do you add styling in the browser?