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

Thx, i’ve already tried (also transparent) but it doesn’t help :frowning:


style: |
  .card-header {
    background-color: var(--primary-background-color);

Seems background now is transparent, so now I need to figure how to remove the shadow

style: |
  .card-header {
    background-color: var(--primary-background-color);
    box-shadow: 0px 0px 0px 3px var(--primary-background-color);
1 Like

You’d have to make the entire card transparent, and then add a background to everything BUT the header.

1 Like


So now it is transparent :slight_smile: . There are two thins I would like to change:

  1. The top padding is much smaller than the bottom padding (red arrow)
  2. Can I have round corners?



- type: entities
  title: .....
  show_header_toggle: false
    .: |
      ha-card {
        background-color: transparent;
        box-shadow: none;
      .card-content {
        border-radius: 10px;
        padding: 16px;
        background-color: var(--paper-card-background-color);
        box-shadow: var(--ha-card-box-shadow, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2) );
    - entity: .....

who can help me out? I can’t install the “card-mod” I explain to you I followed all the discussions followed the tutorials but nothing, summary I install the “card-mod” through HACS then I add the resources as indicated but I get the following errors and the Styles do not apply:

Please show your card configuration too.

      - type: horizontal-stack
          - type: custom:canvas-gauge-card
            style: |
              ha-card {
                background-color: transparent; border: none; box-shadow: none;
            entity: sensor.livello_acqua
            card_height: 170
              type: "radial-gauge"
              title: Livello Acqua
              width: 180
              height: 180
              minValue: 0
              maxValue: 100
              startAngle: 80
              ticksAngle: 200
              valueBox: true
              units: "%"
              majorTicks: ["0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"]
              minorTicks: 1
              strokeTicks: true
              highlights: [{"from": 0, "to": 45,"color": "rgba(200, 50, 50, .75)"}]
              colorPlate: "transparent"
              borders: true
              needleType: "arrow"
              needleWidth: 2
              needleCircleSize: 7
              needleCircleOuter: true
              needleCircleInner: false
              animationDuration: 1500
              animationRule: "linear"

this is my configuration, but I want to add that the following error message is present even if I do not insert the style configuration on the card

Hi @thomasloven
I’ve encountered an issue with the card-mod plugin, probably related with your slider-entity-row.

I have added the slider-entity-row as custom-field of a custom button-card in order to control a light. I’m now trying to apply CSS rules to this slider using the card-mod. I figured it out BUT the slider won’t keep the CSS styling - after a few seconds (sounds random) or as soon as I’m shifting the slider, the custom CSS style disappears.

I have noticed that when I try to inspect the slider element with the Chrome (or Safari) dev tools, after a few seconds, I lost the focus on the HTML element being inspected.

It looks like a refresh, but the page is not refreshing at all…

Hopefully I’m clear, please let me know what you need from me to reproduce it.

edit. Making some troubleshooting - seems like it occurs only when embedded into a custom button-card (as custom-field). Is there any chance, you have an idea of what makes this happen ? Thanks again !

edit 2. I have opened a bug report on the button-card github (https://github.com/custom-cards/button-card/issues/268) as I’m pretty sure that the problem comes from it - but hopefully you’ll have a way to prevent the bug to occur from your side too.


It is possible to do something in this style.

    name: Select Border
      - None 
      - Small
      - Standard
      - Large


# beautifier 1
- alias: input select beautifier 1 border-radius
  initial_state: 'true'
  - platform: state
    entity_id: input_select.border_radius_selector
    to: None
  - service: input_select.select_option
      entity_id: input_select.border_radius
      option: 0px

# beautifier 2
- alias: input select beautifier 2 border-radius
  initial_state: 'true'
  - platform: state
    entity_id: input_select.border_radius_selector
    to: Small
  - service: input_select.select_option
      entity_id: input_select.border_radius
      option: 6px

card lovelace

      - type: "custom:atomic-calendar"
        title: Calendar
          - entity: calendar.holiday
        style: |
          ha-card {
            border: solid 1px rgba(100,100,100,0.3);
            background: rgba(50,50,50,0.3);
            background-image: url("/local/images/wallpapers/cardbackk.png");
            background-repeat: repeat-x;
            background-size: 100% 68px;
            border-radius: {{ states('input_select.border_radius') }} #here, it is possible to do something similar?

The point is to be able to change some styles according to the definition of the theme and styles.

border-radius: {{ states('input_select.border_radius') }}

That should work

1 Like

@thomasloven wondering if you want me to open an issue on your github ?

slider-entity-row isn’t stylable by itself. It’s not a card.


Thx for your support!! :+1: This is what I currently get with your configuration:

How can I control the divider color and length (I wan to make it shorter and in the center of the card) ?

The divider is --secondary-text-color, and if you changed the padding of the card, you’ll have to adjust the side margins https://github.com/home-assistant/home-assistant-polymer/blob/1a2ebabd22f4dfd9d308865ae630333bba7d96c4/src/panels/lovelace/special-rows/hui-section-row.ts#L55-L58

what I don’t understand then is why I successfully applied CSS style to it ? Only problem I’m encountering is when I embedded it into a custom button-card… ?

Also, I’m confused because you were recommanding card-mod to someone asking how to customize style of the slider here https://github.com/thomasloven/lovelace-slider-entity-row/issues/73 ?