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

[mwildrick (Matt W)]

OK – I’m really struggling to understand how to get this to work when the value i want is heavily nested and its content is in a div or a span.

I have this mushroom person card of my lovely wife… and I want to change the font color so i can actually read the status

Here’s what i get when i inspect this element.

Can someone provide me some guidance on how to get that “Home” value to be a different color?

I’ve tried so many permutations. I really dont think i understand this structure as much as i need to… no matter how many times I read the documentation i’m just not getting it.

Here’s my latest attempt, but it might be just as far off as my first.

card_mod:
  style:
    ha-card:
      $ mushroom-card:
        $ mushroom-state-item:
          $ mushroom-state-info: 
            .secondary span{
              color:green"
            }

I’m fairly certain if someone can help me figure out how to change the styles of this value i’ll be able to understand it enough to change any other kind of element by using inspect. Thank you for your help!!

Matt

[itsboo]

Hi can somone help me to change the location of the image
I want to push the background image(the equalizer) to right (as you could see in image that its overlapping over the artwork soo pushing it right side might make things look good)

my code

type: custom:mini-media-player
entity: media_player.alexa_device
info: scroll
background: /local/svg/equalizer.svg
hide:
  controls: true
  name: true
  power: true
  source: true
  volume: true
  progress: true
tap_action:
  action: navigate
  navigation_path: /lovelace/musica/
style: |
  :host 
  ha-card {
    box-shadow: none !important;
  }
  .entity__info {
  font-size: 1vw !important;

  }
  .entity__artwork {
    border-radius: 0 !important;
    box-shadow: 0px 0px 0px 0px white;
  }
  .mmp__bg {
    background: none !important;
    width: 160px; 
    height: 100px;
#    position: relative;
#    left: 1000px; 
#    top: 1000px;
  }

[mwildrick (Matt W)]

OK – well I think i figured this out! I still dont really know WTF i’m doing, but I was able to get this to work. I’ll paste the code below and how i got here, so if some kind soul wants to educate me on what these things are it would be greatly appreciated.

So… This code

  style: |
    :host{
      --secondary-text-color: white;
    }
     ha-card {
      --card-secondary-font-size: 20px;
    }

gave me what I was looking for… a more legible status on a black background

One of the things i learned is that, in addition to exploring the element there is this really helpful Styles modal on the right hand side of the page that provides the elements you want to change and has the details you need to update the yaml.

• This first part has the ha-card piece… (That 2nd one is what i added later to control the font-size)… And i knew (or i thought to try that) because --card-secondary-font-size: 20px; was listed under the :host that was inherited from #shadow-root (open).
• When you scroll down through this Styles modal you see this other block under host which has this color item: color: var(--primary-text-color);
• When I clicked on that, it took me to this section of the Styles modal I get taken to ths
  
  Changing secondary text color had the effect i was looking for, and since i linked to it from :host (with nothing inherited from shadowroot), using :host in the Yaml got me what i was looking for.

Now, I still dont know how to use the $, or the .: but I feel like i’m on the right track. If anyone finds this helpful, or if anyone wants to correct or add onto this to help my (and others journies) it would be much appreciated.

`

[CDRX2]

I’m not exactly an expert, but in your case I’d try something along these lines:

card_mod:
  style:
    ha-card:{
      --rgb-state-person-home: green;
    }

I haven’t tested this, but my experience with card-mod is enough that I know you should try to set the --rgb-state-person-home color to what you want it to be. Try it at the first level (ha-card), and if it doesn’t work, start going into shadow-roots from there.

You might also want to check out card-mod helper it can help you find the correct path.

Edit: should have read the whole thread, I’d have seen that you managed to change the font color. The variable above and the card-mod helper are also avenues for you to explore if you plan on working with card-mod some more in the future

[sycor]

If someone could help me out with this so I can stop banging my head against my desk that would be great. I’m using Calendarific integration through HACS to create a custom sensor which shows the days until a selected holiday. I’ve had to modify a theme to get the colors to change. But I cannot for the life of me figure out how to get the font size to change.

hours_to_show: 24
graph: none
type: sensor
detail: 1
entity: sensor.halloween
theme: Google Orange Theme
card_mod:
  style: |
    ha-card {
      --mdc-icon-size: 40px;
      font-family: "Jim Nightshade";
      font-size: 0px;
    }

Using card_mod I was able to change the icon size and the font style. But the size of the font will not change. (I know in my code it’s set to 0px but even when I change it to 500px it only creates weird spacing between everything:

[itsboo]

Try font-size: 50px !important; sometimes this works for me.
The !important rule in CSS is used to add more importance to a property/value than normal.

In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element!

[sycor]

Didn’t work. All it does is increase the weird spacing like in the picture. The font itself doesn’t change.

[Ildar_Gabdullin]

1st post → link at the bottom → styles for “sensor” card

[sycor]

I didn’t see anything for Styles for “sensor” card in the 1st post. But after clicking around randomly I found your post here: https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/3241 and that did the trick. Thanks!

[Ildar_Gabdullin]

@sycor

I didn’t see anything for Styles for “sensor” card in the 1st post.

link at the bottom

[chou (Jay)]

Hello, configuring the sensor type in this way does not take effect. I hope to get your help. Thank you

type: entities
card_mod:
  style:
    .: |
      #states > div {
          margin: -15px 0px !important;
      }
    .card-content hui-text-entity-row:
      $:
        hui-generic-entity-row:
          $: |
            .info {
              margin-left: 0px !important;
            }
entities:
  - sun.sun
  - binary_sensor.pixel_5_is_charging
  - sensor.cpu_speed
  - sensor.cpu_speed

[OmeAnne]

Hello, newby here in card customizing.
I am trying to change the color of an icon based on the on or off state of an boolean. I can change the color fixed by doing this:

  ha-card { 
    --card-mod-icon-color: red;
  }

But when I try to add the state of the boolean it doesn’t work:

show_name: false
show_icon: true
style: |
  ha-card { 
    --card-mod-icon-color: {% if is_state(input_boolean.wintermode, 'on') %} red {% else %} green {% endif %};
  }
type: button
tap_action:
  action: more-info
entity: input_boolean.wintermode
icon: mdi:snowflake-thermometer
hold_action:
  action: call-service
  service: script.toggle_winter_zomer
  data: {}
  target: {}
show_state: false

What is this newby missing?

[Ildar_Gabdullin]

@OmeAnne

is_state(input_boolean.wintermode, 'on')

is_state('input_boolean.wintermode', 'on')

[OmeAnne]

Seriously, that was it?? Thanx!

[Fdeleij]

Hi guys,

hope anyone can help me out, banging my head why it doesn’t work. I found a beautiful card-mod with code and copied it in an .yaml file for !include purposes. no error, but it didn’t work. Therefore copied the code in the lovelace ui file and that gave an error:

bad indentation of a mapping entry at line 25, column 43:
… background-color: rgba(120, 200, 255,.1);

what am i doing wrong?

[Ildar_Gabdullin]

missing a whitespace before “|”

[Fdeleij]

thanks a million! that removed the bad indentation error! but cards are still plain white…

any idea what i can do to solve this?

[itsboo]

HI can somone help me to control the size of icon font in custom:mushroom-template-card
trying for few hours but no progress. would be great if someone vouch me…i have share one custom:mushroom-template-card which are vertically stacked under cardmode card

code:

             type: custom:mushroom-template-card
              card_mod:
                style: |
                  .secondary {
                    color: var(--secondary-text-color);
                    font-size: 0.1px ;
                   }
              primary: >-
                {% if is_state('sensor.oneplus_6t_ringer_mode', 'normal') %}
                Ring

                {% elif is_state('sensor.oneplus_6t_ringer_mode', 'silent') %}
                Silent

                {% elif is_state('sensor.oneplus_6t_ringer_mode', 'vibrate') %}
                Vibrate 

                {% endif %}
              secondary: >-
                {% if is_state('sensor.oneplus_6t_phone_state', 'offhook') %} In
                call

                {% elif is_state('sensor.oneplus_6t_phone_state', 'ringing') %}
                Ringing

                {% endif %}
              icon: >-
                {% if is_state('sensor.oneplus_6t_ringer_mode', 'normal') %}
                mdi:phone

                {% elif is_state('sensor.oneplus_6t_ringer_mode', 'silent') %}
                mdi:phone-cancel

                {% elif is_state('sensor.oneplus_6t_ringer_mode', 'vibrate') %}
                mdi:phone-alert 

                {% endif %}   
              icon_color: >-
                {% if is_state('sensor.oneplus_6t_ringer_mode', 'normal') %}
                green

                {% elif is_state('sensor.oneplus_6t_ringer_mode', 'silent') %}
                red

                {% elif is_state('sensor.oneplus_6t_ringer_mode', 'vibrate') %}
                orange 

                {% endif %}
              layout: null
              fill_container: false
              tap_action:
                action: more-info
              entity: sensor.oneplus_6t_ringer_mode
            - type: custom:mushroom-template-card
              primary: >-
                {% if is_state('sensor.oneplus_6t_wifi_connection', '<not
                connected>') %} 
                  Disconnected 
                {% else %}
                  Connected
                {% endif %}
              secondary: ''
              icon: >-
                {% if is_state('sensor.oneplus_6t_wifi_connection', '<not
                connected>') %} mdi:wifi-cancel {% else %} mdi:wifi {% endif %}
              icon_color: >-
                {% if is_state('sensor.oneplus_6t_wifi_connection', '<not
                connected>') %} red {% else %} green {% endif %}
              layout: null
              fill_container: false
              tap_action:
                action: more-info
              entity: sensor.oneplus_6t_wifi_connection

[image969 (James Scialdone)]

Is there an easy way to hide the lock with Card-Mod? I jsut dont like liek looking at it on the card.

[chou (Jay)]

This paragraph uses the card_mod plugin to modify the card row height and the distance between entity names and icons

type: entities
card_mod:
  style:
    .: |
      #states > div {
          margin: -15px 0px !important;
      }
    .card-content hui-sensor-entity-row:
      $:
        hui-generic-entity-row:
          $: |
            .info {
              margin-left: 0px !important;
            }
entities:
  - sensor.cpu_speed
  - sensor.cpu_speed

This section modifies the size of the icon

type: entities
card_mod:
  style:
    .card-content hui-sensor-entity-row:
      $:
        hui-generic-entity-row:
          $:
            state-badge:
              $:
                ha-state-icon:
                  $:
                    ha-icon:
                      $:
                        ha-svg-icon:
                          $: |
                            :host {
                                width: 15px!important;
                                height: 15px !important;
                            }
entities:
  - sensor.cpu_speed
  - sensor.cpu_speed

How can I modify the isolation between the entity id and the icon, and also modify the size of the icon. I have never learned CSS and do not know how to write this format. I can modify both properties at the same time