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

Thank you for your links, it gives a lot of new ideas. I was just wondering if you were able to use the layout card nested in a stack-in-card ?

Give me an example

In essence, I’m trying to create lights cards where I can change the colour without going to options. At the same time, I am trying to reduce the amount of space needed to control these lights.
The conclusion are after my research

  • the colour picker needs enough width but can be reduced in height.
  • “type : light” allows me to get the brightness and the icon type to change without me coding it.
  • second, I want the individual lights to be controlled but ideally also the light group

So in essence, I thought to have each of the 5 spots to be presented first in a light type and then have the light group next to the 2 colour pickers (colour, temperature) in a 25/75 ratio.

OK, create an example card and tell what you want to style in this card, may be we can help.

1 Like

I’m stuck trying to style a markdown-card and wonder if anyone has any pointers…
I have some text in the markdown card that I’d like to adjust font-weight and size of, I previously had this working via card-mod using;

              style:
                ha-markdown:
                  $: |
                    p {
                      font-size: 4em;
                      font-weight: 300;
                    }

however, I also need to disable box-shadow for the card… and this is where I come unstuck, as it is outside of shadow-root…

I try this;

              style: |
                ha-card {
                  box-shadow: none;
                }
                ha-markdown:                 
                  $: |
                    p {
                      font-size: 4em;
                      font-weight: 300;
                    } 

Which disables the box-shadow, but now the font size/weight are not set correctly…

Hello,

Here is where I’m at

cards:
  - type: vertical-stack
    cards:
      - type: "custom:stack-in-card"
        keep:
          background: true
          outer_padding: true
          margin: true
        modus: vertical
        triggers_update:
          - sun.sun
        cards:
          - type: vertical-stack
            cards:
              - type: horizontal-stack
                title: Master Colour Spots
                cards:
                  - type: light
                    entity: light.lamp_colour_l1_master
                    name: L1
                    icon: mdi:wall-sconce-flat
                    hold_action:
                      action: more-info
                    card_mod:
                      style: |
                        mwc-icon-button {
                            display: none;
                        }
                  - type: light
                    entity: light.lamp_colour_r1_master
                    name: R1
                    icon: mdi:wall-sconce-flat
                    hold_action:
                      action: more-info
                    card_mod:
                      style: |
                        mwc-icon-button {
                            display: none;
                        }
                  - type: light
                    entity: light.lamp_colour_l2_master
                    name: L2
                    icon: mdi:wall-sconce-flat
                    hold_action:
                      action: more-info
                    card_mod:
                      style: |
                        mwc-icon-button {
                            display: none;
                        }
                  - type: light
                    entity: light.lamp_colour_r2_master
                    name: R2
                    icon: mdi:wall-sconce-flat
                    hold_action:
                      action: more-info
                    card_mod:
                      style: |
                        mwc-icon-button {
                            display: none;
                        }
                  - type: light
                    entity: light.lamp_colour_r3_master
                    name: R3
                    icon: mdi:wall-sconce-flat
                    hold_action:
                      action: more-info
                    card_mod:
                      style: |
                        mwc-icon-button {
                            display: none;
                        }
              - type: entities
                entities:
                  - type: "custom:slider-entity-row"
                    entity: input_number.input_color
                    full_row: true
                    hide_state: true
                card_mod:
                  style: |
                    ha-card {
                      background: linear-gradient(to right, rgb(255,0,0) 0%, rgb(255,255,0) 16.6%, rgb(0,255,0) 33.2%, rgb(0,255,255) 49.8%, rgb(0,0,255) 66.4%, rgb(255,0,255) 83%, rgb(255,0,0) 100%);
                      height: 50px !important;
                    }
              - type: entities
                entities:
                  - type: "custom:slider-entity-row"
                    entity: input_number.input_color_temp
                    full_row: true
                    hide_state: true
                card_mod:
                  style: |
                    ha-card {
                      background: linear-gradient(to right, rgb(195, 209, 255) 0%, rgb(255,255,255) 50%, rgb(255, 169, 87) 100%);
                      height: 50px !important;
                    }

resulting

I would like to get the light buttons inside the stack like the rest of my buttons, example

image

code associated

            styles:
              card:
                - width: 120px
                - height: 100px
                - margin: 3px
                - padding: 5px
                - border-radius: 15px
                - background-color: var(--primary-background-color)
                - box-shadow: >
                    [[[
                      if (states['sun.sun'].state == "below_horizon")
                        return '-5px -5px 15px #2c2c2c, 5px 5px 15px #191919';
                      else if (states['sun.sun'].state == "above_horizon")
                        return '-5px -5px 15px #ffffff, 5px 5px 15px #ebebeb';
                    ]]]

which I can easy use with the custom:button-card but I have trouble getting it into the code above.
Finally, I would like to get the slider more in the middle so I can make the cards a bit smaller still.

HI Ildar, a huge post, and still I couldn’t find what I am looking for…

using

  - type: entities
    title: Tradfri hub switch
    card_mod:
      style: |
        .card-header {
          background-color: var(--primary-color);
          margin: 0px 0px -8px 0px;
        }
    show_header_toggle: false
    entities:
      - type: custom:toggle-lock-entity-row
        entity: script.reset_ikea_hub
        secondary_info: last-triggered
      - type: divider
      - type: custom:toggle-lock-entity-row
        entity: switch.ikea_hub

I try to decrease the height of the header, but it only shifts the entities upward, and doesnt affect the coloring, resulting in:

Schermafbeelding 2021-07-21 om 22.50.07

normally I shift the entities down, to create a little gap,

  - type: entities
    title: Tradfri hub switch
    card_mod:
      style: |
        .card-header {
          background-color: var(--primary-color);
          margin: 0px 0px 16px 0px;
        }

resulting in

Schermafbeelding 2021-07-21 om 22.59.08
but I would rather decrease the header 8px

Can we do that with the same .card-header,albeit another option?

What is this?
These are not options for stack-in-card.

I still do not understand.
You gave two different cards - stack with light controls & button-card.
What exactly do you want to change?
Better to create a picture with MS Paint to explain your needs.

Hi Marius, check this:

type: horizontal-stack
cards:
  - type: entities
    title: Title
    entities:
      - sun.sun
      - sun.sun
    card_mod:
      style: |
        .card-header {
          background-color: red;
          color: white;
        }
  - type: entities
    title: Title
    entities:
      - sun.sun
      - sun.sun
    card_mod:
      style:
        div:nth-child(1):
          hui-text-entity-row:
            $: |
              hui-generic-entity-row {
                margin-top: 10px;
              }
        .: |
          .card-header {
            background-color: red;
            color: white;
          }
  - type: entities
    title: Title
    entities:
      - sun.sun
      - sun.sun
    card_mod:
      style:
        div:nth-child(1):
          hui-text-entity-row:
            $: |
              hui-generic-entity-row {
                margin-top: 10px;
              }
        .: |
          .card-header {
            background-color: red;
            color: white;
            padding-top: 0px;
            padding-bottom: 0px;
          }

изображение

1 Like

perfect!

Schermafbeelding 2021-07-21 om 23.04.55

    card_mod: &header
      style: |
        .card-header {
          background-color: var(--primary-color);
          padding-top: 0px;
          padding-bottom: 0px;
          margin: 0px 0px 16px 0px;
        }

is my new default :wink: anchor created

Great, better than my solution))

Unfortunately, only one yaml file-wide(((

1 Like

I moved on. Got an other way of getting what I wanted. Thank you.
Another question. I want to use one button card template for my lights but I would like to have for some lights a different icon. I’ve been trying to use variables without success. Any idea how I can do it ?

I think this is not a card-mod issue.
Probably it may be solved by card-mod, but I think it is better to use button-card-template + use variables.

Trying to play around, the name is very overlapping, how can I set the font size?

Tried this entry but not having luck

You may want to check you’re indentation. I haven’t checked of your style will actually work but it definitely won’t if your indentation is incorrect.

card_mod:
  style: |
    .name {
      font-size: 50%;
    }

for the weather card, you could maybe better fix that in the stylesheet css of the resource itself
or, maybe even better fix the card, so it shows the name on a dedicated line, because it will almost always be to narrow…

change to:

  renderCurrent(stateObj) {
    this.numberElements++;

    return html`
      <div class="current ${this.numberElements > 1 ? "spacer" : ""}">
        <span
          class="icon bigger"
          style="background: none, url('${this.getWeatherIcon(
            stateObj.state.toLowerCase(),
            this.hass.states["sun.sun"]
          )}') no-repeat; background-size: contain;"
          >${stateObj.state}
        </span>

        <span class="temp"
          >${this.getUnit("temperature") == "°F"
            ? Math.round(stateObj.attributes.temperature)
            : stateObj.attributes.temperature}</span
        >
        <span class="tempc"> ${this.getUnit("temperature")}</span>
      </div>
      <div class="current ${this.numberElements > 1 ? "spacer" : ""}">

        ${this._config.name
          ? html` <span class="title"> ${this._config.name} </span> `
          : ""}

      </div>
    `;
  }

  renderDetails(stateObj) {
    return html`
        ${this._config.name
          ? html` <span class="title"> ${this._config.name} </span> `
          : ""}
    `;
  }

and a bit of fiddling with the position in the cards css for title:

      .title {
        position: absolute;
        left: 0.5em;
        font-weight: 300;
        font-size: 3em;
        color: var(--primary-text-color);
      }

1 Like

Awesome work! Is there anyway I can make sure the text is always aligned to the left? When using smaller screen width the name is more to the center (if you have short city name is more obvious). I tried playing around with the position, but it kept staying the same way.

should do exactly that, and I can not report any other behavior, no matter how I scale the window, it stays nicely aligned. Maybe try a px value?

note though this is an ugly hack of Bram’s card, and when not using the name: field in the card config, it leaves an empty line…

Ive asked Bram to have a look, but he’s very busy, though he might have a look when things calm down a bit…

Apologies, I thought that piece was meant for card_mod. I then noticed leaving it out didn’t even matter. So then I figured it was also meant for the weather-card.js. Works great!

I need some help with something that is probably simple, I want to hide the header of the sensor card.
The sensor card is a hui-custom-card in a picture elements card.

I’ve tried this:

  - type: custom:hui-element
    card_type: sensor
    detail: 2
    entity: sensor.pool_temperature
    graph: line
    card_mod:
      style: |
        ha-card {
          --ha-card-background: "rgba(0, 0, 0, 0.3)";
          box-shadow: none;
          color: var(--primary-color);
          .header: {display:none!important};
        };

But it still shows the header:

image

If I enter the display:none manually in the css then it works:


So I guess it’s me fumbling with the addressing of it?