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

[AhmadK (akasma74)]

open Inspector, in the opened pane you can see and add data

[klogg]

Well! I never knew you could do that!
Thanks.

[simonbjornes]

Can someone please help? I have been trying for days to find the right combo to remove the padding in the header from fold-entity-row

I found that it is this style i need to mod but what is the correct card-mod style?

Please help me anyone?

[AhmadK (akasma74)]

it would be great to see your card’s config and your styling.

[simonbjornes]

Is this what you want?

type: entities
style: |
  :host
    $: |
      .card-content {
        padding: 0px !important;
      }
entities:
  - type: 'custom:fold-entity-row'
    style: |
      :host
        $: |
          .card-content {
            padding: 0px !important;
          }
    head:
      type: 'custom:banner-card'
      color: '#5F9BEA'
      heading:
        - 'mdi:home'
        - Nomhus
    entities:
      - type: 'custom:layout-card'
        layout: vertical
        cards:
          - type: 'custom:layout-card'
            column_num: 6
            layout: horizontal
            cards:

# Theme based on Google app dark theme
# Creater: Juan - @juanmtech
# Website: https://www.juanmtech.com
# YouTube Channel: https://youtube.com/juanmtech
# My Home Assistant Config files: https://github.com/JuanMTech/Home_Assistant_files
#
#
Google Dark Theme:
  # Header:
  app-header-background-color: "#171717"
  app-header-text-color: "#BDC1C6"
  # Main Interface Colors
  primary-color: "#5F9BEA"
  light-primary-color: var(--primary-color)
  primary-background-color: "#171717"
  secondary-background-color: var(--primary-background-color)
  divider-color: var(--primary-background-color)
  
  # Text
  primary-text-color: "#BDC1C6"
  secondary-text-color: "#5F9BEA"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#717171"
  # Sidebar Menu
  sidebar-icon-color: var(--app-header-text-color)
  sidebar-text-color: '#BDC1C6'
  sidebar-background-color: "#202124"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#5F9BEA"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color))
  # States and Badges
  state-icon-color: "#5F6267"
  state-icon-active-color: "#5F9BEA"
  state-icon-unavailable-color: var(--disabled-text-color)
  # Sliders
  paper-slider-knob-color: "#5F9BEA"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  # Labels
  label-badge-background-color: "#202124"
  label-badge-text-color: "#BDC1C6"
  label-badge-red: "#D06568"
  label-badge-green: "#80C884"
  label-badge-blue: "#5F9BEA"
  label-badge-yellow: "#DFC271"
  label-badge-gray: "#5F6267"
  # Cards
  ha-card-border-radius: "15px"
  ha-card-box-shadow: 1px 1px 5px 0px rgb(12, 12, 14)
  paper-card-background-color: "#202124"
  paper-listbox-background-color: "#202124"
  # Switches
  switch-checked-button-color: "#5F9BEA"
  switch-checked-track-color: "#404D64"
  switch-unchecked-button-color: "#636466"
  switch-unchecked-track-color: "#636466"
  # Toggles
  paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
  paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
  paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
  # Table
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  data-table-background-color: var(--primary-background-color)

[ohipe]

Hi, can you please help me to add backgroud-color to slider-entity-row? .wrapper div should be enough. Then I’d like also to change colors of progress bar to make it the same all along the bar, regardless the position of the pin.
Thanks.

[thundergreen]

Dear all,

I was searching here in the forum but did not find any solution for this. I tried what the dev told me but my problem is that my Pop-up size will never apply no matter what i do:

This is my config if someone could give me a hand?

name: Vacuum
icon: mdi:robot-vacuum
template: rooms_child
show_state: false
tap_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    large: false
    title: Vacuum
    style: |
      ha-card {
        color: grey;
        opacity: 0.4;
        width: 50%
        background-color: var(--primary-background-color);
        border-radius: 15px;
      }
    card:
      # type: iframe
      # url: 'http://192.168.1.162'
      # aspect_ratio: 159%
      type: vertical-stack
      ....

I f i change width and height it won’t be taken into account somehow…

result:

[AhmadK (akasma74)]

no need for themes here…
how about this to start with (I removed fold-entity-row styling as I don’t quite understand why you need it - care to explain?)

type: entities
style: |
  .card-content {
    padding: 1px !important;
  }
entities:
  - type: 'custom:fold-entity-row'
    head:
      type: 'custom:banner-card'
      color: '#5F9BEA'
      heading:
        - 'mdi:home'
        - Nomhus
    entities:
      - type: 'custom:layout-card'
        layout: vertical
        cards:
          - type: 'custom:layout-card'
            column_num: 6
            layout: horizontal
            cards:

@ohipe

I’d like also to change colors of progress bar

check some messages earlier, there was a case with slider-entity-row.

@thundergreen

I tried what the dev told

and what did he tell you?
to style service_data? did you read this?
you need to put your style inside card.

[simonbjornes]

First thanks for helping
With the extra styling i was just grasping at straws.

That style did not work.

[thundergreen]

Thanks figured it out

[hentes]

I have a card and I can not figure it out how to style the slider-entity-row inside in it. Here is my code but it’s not working. Could you please help me out?

- type: entities
  entities:
    - type: custom:layout-card
      layout: horizontal
      cards:
        - type: custom:slider-entity-row
          entity: cover.szoba_1_fuggony_1
          name: Függöny pozició
          hide_state: true
          full_row: true
          style: 
            ha-slider:
              $:
                '#sliderContainer': |
                  .slider-knob {
                    background-color: rgba(255,0,0,0);
                  }
                paper-progress:
                  $: >
                    #progressContainer {
                      background-color: rgb(0,255,0);
                    }
                      
        - type: custom:slider-entity-row
          entity: cover.szoba_1_fuggony_2
          name: Függöny pozició
          hide_state: true
          full_row: true
          style: 
            ha-slider:
              $:
                '#sliderContainer': |
                  .slider-knob {
                    background-color: rgba(255,0,0,0);
                  }
                paper-progress:
                  $: >
                    #progressContainer {
                      background-color: rgb(0,255,0);
                    }

[thomasloven (Thomas Lovén)]

Slider-entity-rows can only be styled when they are used like they are supposed to - inside an entities card.

If you really want to do it this way, this is one of the very few cases where mod-card could make sense.

[hentes]

Thank you @thomasloven. After your answer and after reading the card-mod instructions (once again) I’ve changed my mind and I’ll rebuild my card’s structure to omit the use of mod-card.
I have another question to you to make it clear something. I don’t know if it’s a completely foolish idea so please let me contact you in PM on discord if it’s possible? (I don’t want to make myself an idiot in public )

[N-l1]

Hi @thomasloven,

Can you please confirm that the theme styling feature is still working?

Card-mod - Add css styles to any lovelace card

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 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!

Thanks again!

[maurizio53 (Maurizio Fabiani)]

I am having difficults to stylish light card… is it possible or not?

[fastender]

Really great work. There’s just one thing I need your help with. When a popup opens, I want to display it in fullscreen view on my desktop (similar to the mobile view). What am I doing wrong? Can you help me?

                  - entity: sensor.plex_tower
                    name: Plex
                    style: |
                      :host {
                        width: 100% !important;
                        border-radius: 0px;
                        position: fixed !important;
                        margin: 0;
                      }

[thomasloven (Thomas Lovén)]

- entity: sensor.plex_tower makes this look like you are adding style to a row in an entities card. That applies to the row in the entities card.

[j3mu5]

Hi @thomasloven,

thank you for you great work! I’m trying to change the height of an input select card, since it uses too much space. Sadly, my skills are not advanced enough to do so. I played around and am able to change the text color, but the height is not changed in any case:

type: entities
style: |
  ha-card {
    color: red;
    height: 200%;
  }
entities:
  - entity: light.hyperion
  - entity: light.fm_shelly_bathroom_7704
    style: |
      :host {
        color: green;
        height: 200%;
      }
  - entity: input_select.settings
    style: |
      :host {
        color: blue;
        height: 200%;
      }

[Olivier1974 (Olivier Toussaint)]

Hello,

Is there a way to invert binary sensor colors?
i.e.: my binary_sensor.rpi_throttled is either ‘on’ or ‘off’. As the sensor is about the rpi throttling, ‘off’ is good and ‘on’ is bad for the RPi.

So, today, in the history, I’ve red for ‘off’ and green for ‘on’ where I’d like to have the exact opposite.

Is it possible with card-mod?

[au190 (Kallós Róbert)]

type: custom:mod-card
style: |
ha-card {
border: 1px solid green;
}
card:
type: vertical-stack
cards:
- type: light
entity: light.bed_light
- type: light
entity: light.kitchen_lights

I found this example on the doc: https://github.com/thomasloven/lovelace-card-mod#mod-card

Is that possibile to remove the space between the 2 cards ?

How could I change this ?
#root > * {
margin: 4px 0 4px 0;
}