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

Should be, but it may have some glitches…
Earlier I noticed an issue with custom:hui-element card where these 2 notations caused diffrent results, and Thomas gave us an explanation.

1 Like

Post your latest version.

I’ve only started trying to style my dashboard with Card mod and a bit lost on something perhaps very basic. I’ve been trying to style the button card so that it fits with the Mushroom theme.

I managed to style two buttons using the following code:

show_name: true
show_icon: true
type: button
entity: automation.google_assistant_notification_dinnertime
icon: mdi:chef-hat
name: Koken
show_state: false
theme: Mushroom
hold_action:
  action: none
tap_action:
  action: call-service
  service: notify.google_assistant_sdk
  data:
    message: Kom je helpen koken?
  target: {}
icon_height: 40px
card_mod:
  style:
    ha-state-icon $ ha-icon $: |
      ha-svg-icon {
        color: #2196f3;
        background-color: #1c3447;
        width: 25px;
        height: 25px;
        padding: 10px;
        border: 0px solid blue;
        border-radius: 100%;
      }

This looks as such:

This is based on the great post by @Ildar_Gabdullin :

What I cannot figure out is how to now style the rest of the card. I for example want to font-size to match the rest and not have “Koken” and “Etenstijd” to be that large. If I try and add a section like

ha-card {
      color: red;
    }

I do not see the text color change anymore (as it did before adding the css to change the button image).

What am I doing wrong?

show_name: true
show_icon: true
type: button
entity: sun.sun
card_mod:
  style: |
    span {
      font-size: 50px;
      color: orange;
    }

изображение

Styles should not be added “by a guess” - always use Code Editor.

Doesn’t work for me. Adding this without code to update the icon it works. My problem is once I start to combine it with the css to update the svg-icon it doesn’t. It’s probably really simple, but I just am not seeing it. Probably because everytone now falls under the ha-state-icon and ha-icon?

  style:
    ha-state-icon $ ha-icon $: |
      ha-svg-icon {
        color: #2196f3;
        background-color: #1c3447;
        width: 25px;
        height: 25px;
        padding: 10px;
        border: 0px solid blue;
        border-radius: 100%;
      }
      span {
        font-size: 50px;
        color: orange;
      }

Hope these schema will help you:

element_1:
  $: |
    element_1_1 {
      ...
    }
    element_1_2 {
      ...
    }
  .: |
     element_1 {
       ...
     }
     element_1 element_1_3 {
       ...
     }
     element_2 {
       ...
     }
     element_2 element_2_1 {
       ...
     }

Here:
– “element_1” & “element_2” are on the same level
– “element_1_3” is inside “element_1”
– “element_1_1” & “element_1_2” are inside shadowRoot of “element_1”
– “element_2_1” is inside “element_2”

Hi all.

In another topic I had a question to change the color of my media player icon. That worked fine thanks to the help of the community.

Now, I want to change the color of this item:

I cannot seem to find the correct element to change the color. Is there a tutorial on how to find the right elements? I have searched in this topic but without succes…

trying to mod the header (title) of a type: grid card

    - type: custom:mod-card
      card_mod:
        style: |
          .card-header {
            color: red;
          }
      card:
        type: grid
        title: Verlichting Cards
        columns: 4
  #       square: false
        cards:

without succes yet.

the DOM

Scherm­afbeelding 2023-03-07 om 15.53.17

and elements:

(nevermind the red there, Ive set the manually to check if its the correct element…)

nvm me either:

    - type: custom:mod-card
      card_mod:
        style:
          hui-grid-card $: |
           .card-header {
             color: red;
           }

the DOM was telling it, I just missed it…

Have you tried using the card-mod-helper?

Trying to combine things posted by 🔹 Card-mod - Add css styles to any lovelace card - #4280 by Ildar_Gabdullin to achieve a slightly better look to my tabs.

Here’ a picture:

I got the “Vivid” look but what I am trying to accomplish is coloring the “active” tabs so that it is easier to see the level of selected tabs that are active. The green underline and text is great but I want a slight tint to the active tabs to further stand out.

Right now, I have this for tabs snipped to the important piece:

            tabs:
              - attributes:
                    label: NHL
                    icon: mdi:ballot
                card:
                    type: custom:mod-card
                    card_mod:
                        style:
                            tabbed-card $: |
                                mwc-tab {
                                  background: var(--ha-card-background, var(--card-background-color, white) );
                                  border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0) );
                                  border-width: 2px;
                                  border-top-left-radius: 20px;
                                  border-top-right-radius: 20px;
                                  border-style: solid;
                                  overflow: hidden;
                                }

And cannot figure out how to combine this with the example for the active tab background sample:

card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $: |
          .mdc-tab--active {
            background: lightgreen !important;
          }

Any help is appreciated!

Hmm, try these recommendations:
one
two
What you are asking is a thing which you have to face very often. So it is better to learn it.
If you experience any troubles with navigation - ping me.

What I was missing I got now. I just wanted to modify the “active” ones and all I needed was:

mwc-tab[active] {
     background: #EBFFD8 !important;
}

If you want to hide the scrollbar, but keep a section scrollable, add this:

card_mod:
  style: |
    ::-webkit-scrollbar {
        display: none;
    }
1 Like

Trying to mod a core entities card Title content so we can add dynamic templating, I could not find a way to completely set it via card_mod (and replace the title field in the card config itself)

I did find a way to add an ‘after’ section though like:

type: entities
title: Air quality dashboard
card_mod:
  class: class-header-no-margin-no-color
  style: |
    .card-header .name::after {
          content:"{{': ' + states('sensor.u_s_air_pollution_level')}}";
     }

    .card-header {
      background: {% set aqi = states('sensor.u_s_air_quality_index')|int(0) %}
                  {% if aqi <= 50 %} seagreen
                  {% elif aqi <= 100 %} gold
                  {% elif aqi <= 150 %} orange
                  {% elif aqi <= 200 %} crimson
                  {% elif aqi <= 300 %} purple
                  {% else %} maroon
                  {% endif %};
      color: {{'var(--text-color-off)' if 51 < states('sensor.u_s_air_quality_index')|int(0) < 101
                else 'ivory'}};
    }

Note the class only sets some other card/font specifics.

Normally I restructure these entities cards to vertical-stacks and have a default button title card do that trick, but this ofc is kind of nice too.

As you can see the colon is preceded by a space, which my eyes don’t like, I want it to be

Airquality dashboard: Good

or, as it would be with the button card:

  - type: custom:button-card
    template: button_default_title
    name: >
      [[[ return 'Airquality dashboard: '
          + states['sensor.u_s_air_pollution_level'].state; ]]]
    styles:
      card:
        - background: seagreen

So, the question for now: can we remove the empty space in the card_mod on the entities card title?

1 Like

I have a list of battery entities like this:
image
And I would like to make the font red if any of the values are under 20%
I know this is to be added to the card which makes all red for example.

card_mod:
  style: |
    ha-card {
      color: red;
    }

And there is a way to add to each entities but I have a lot more than 3 entities so what is the way to only add it once per card? Not sure sure how to set it if any state is < 20% then make it red.

You are aware that current Frontend does just that by itself? Wel, the icon that is

Just set the card to use state_color: true and you’re set. No need for card_mod at all

Current battery level thresholds are weird - smth like 20% & 70% instead of usual 33% & 66%.
That is why I do not use default colors.

agreed they could use some more granularity… I’ve asked for that some time ago, but no response. still, what we can do core is better than using extra system resources in the Frontend.

Especially since this core option also changes the more-info.
trying to cut down on any customization possible…

1 Like
  1. Created a PR to change thresholds to 33 & 66 - was refused by Paul ))). Reason was like “we use x10 values to change an icon - that is why we use same x10 values for thresholds”, no comments.
  2. Your Custom UI allows to override colors in more-info too.

Yes I have seen it and enabled it in the past but I would like to set my own % values and colors.