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

This is great and takes me almost all of the way…except to final questions…

I can get the top icon in the right colour now, but the selector icon doesnt go blue like the home and disarmed ones do for the respective colours. Also, anyway I can change the icon for night mode?

image
image

The above two are great but colour missing from button area for custom/night mode

image

code
card_mod:
  style:
    hui-tile-features$:
      hui-alarm-modes-tile-feature$:
        ha-control-select$: |
          #option-armed_home {
            --control-select-color: green;
          }
          #option-armed_away {
            --control-select-color: red;
          }
          #option-armed_vacation {
            --control-select-color: yellow;
          }
          #option-Night {
            --control-select-color: blue;
          }
          #option-disarmed {
            --control-select-color: white;
          }
    ha-tile-icon$: |
      ha-svg-icon {
        {% if states(config.entity) == 'armed_home' %}
          color: green !important;
        {% elif states(config.entity) == 'armed_away' %}
          color: red !important;
        {% elif states(config.entity) == 'armed_vacation' %}
          color: yellow !important;
        {% elif states(config.entity) == 'Night' %}
          color: blue !important;
        {% elif states(config.entity) == 'disarmed' %}
          color: white !important;
        {% endif %}
      }
      .shape::before {
        {% if states(config.entity) == 'armed_home' %}
          background-color: green !important;
        {% elif states(config.entity) == 'armed_away' %}
          background-color: red !important;
        {% elif states(config.entity) == 'armed_vacation' %}
          background-color: yellow !important;
        {% elif states(config.entity) == 'Night' %}
          background-color: blue !important;
        {% elif states(config.entity) == 'disarmed' %}
          background-color: white !important;
        {% endif %}
      }

Apols if I’m missing something obvious here.

GUess I just need CDD entry for the custom/night option but wasn’t sure…looking at the CSS post you referenced as well

Not entirely sure what you mean by this. Can you elaborate?

No, not that i am aware of. Like i said the tile cards tend to use svg icons which card mod cant change.

          #option-Night {
            --control-select-color: blue;
          }

Should probably be

          #option-armed_night {
            --control-select-color: blue;
          }

Or

          #option-custom_night {
            --control-select-color: blue;
          }

Not sure as i cant look at your states. If neither of these work try and drill down to the elements using inspect element and send me a screenshot.

‘’’ Not entirely sure what you mean by this. Can you elaborate?‘’’

As per my screengrabs, the armed home button has a green background when chosen, and disarmed white…but night doesn’t have a background colour at all

‘’ No, not that i am aware of. Like I said the tile cards tend to use svg icons which card mod can’tText change.‘’’

Sorry I seemed to completely ignore that part of your reply

My custom mode for night is just ‘Night’ The top icon colour is correct so that all good… It’s just the bottom button area part that doesn’t sync up

Hello

After reading all the posts and trying a lot of the solutions proposed here, I am still stuck on the fact of being able to change a text to green or red depending on its title.
I am using the flex-horseshoe-card and I would like to write the text “solar mode” in green and the text “EDF mode” in red. These values ​​come from a template which transforms an On and Off value into text.

Here is my current configuration:

type: custom:flex-horseshoe-card
entities:
  - entity: sensor.puissance_totale_pv
    decimals: 0
    unit: W
    name: AXPERT MAX
  - entity: sensor.production_totale_pv_daily
    decimals: 1
    unit: kWh
    name: Jour
  - entity: sensor.production_totale_pv_monthly
    decimals: 1
    unit: kWh
    name: Mois
  - entity: sensor.inverter_temperature
    decimals: 0
    unit: °C
    name: Température
  - entity: sensor.mode_solaire
    icon: mdi:sun-angle-outline
  - entity: sensor.onduleur_batt_volt
    decimals: 1
    unit: V
    name: Batt Voltage
show:
  horseshoe_style: colorstopgradient
layout:
  hlines:
    - id: 0
      xpos: 51
      ypos: 43
      length: 70
      styles:
        - opacity: 0.2;
  vlines:
    - id: 0
      xpos: 50
      ypos: 59
      length: 30
      styles:
        - opacity: 0.2;
  states:
    - id: 0
      entity_index: 0
      xpos: 55
      ypos: 40
      styles:
        - font-size: 3em;
        - opacity: 0.9;
    - id: 1
      entity_index: 1
      xpos: 47
      ypos: 58
      styles:
        - font-size: 1.8em;
        - text-anchor: end;
    - id: 2
      entity_index: 2
      xpos: 52
      ypos: 58
      styles:
        - font-size: 1.8em;
        - text-anchor: start;
    - id: 3
      entity_index: 3
      xpos: 5
      ypos: 7
      styles:
        - font-size: 1.2em;
        - text-anchor: start;
    - id: 4
      entity_index: 4
      xpos: 70
      ypos: 19
      styles:
        - font-size: 1.03em;
        - text-anchor: end;
    - id: 5
      entity_index: 5
      xpos: 97
      ypos: 7
      styles:
        - font-size: 1.2em;
        - text-anchor: end;
  names:
    - id: 0
      entity_index: 0
      xpos: 50
      ypos: 95
    - id: 1
      entity_index: 1
      xpos: 46
      ypos: 68
      styles:
        - font-size: 0.9em;
        - text-anchor: end;
        - opacity: 0.7;
    - id: 2
      entity_index: 2
      xpos: 54
      ypos: 68
      styles:
        - font-size: 0.9em;
        - text-anchor: start;
        - opacity: 0.7;
  icons:
    - id: 4
      xpos: 23
      ypos: 32
      entity_index: 4
      icon_size: 2
horseshoe_scale:
  min: 0
  max: 3600
color_stops:
  '0': '#4567EF'
  '700': '#D82039'
  '1500': '#DBD037'
  '3000': '#17AC6B'

Thank you

Try and inspect element on that button and see what the option is called like this:

Try like this:

card_mod:
  style:
    .container:
      .card--filter-none:
        .datagroup: |
          text:nth-of-type(8) .state__value {
            fill: green !important;
          }

Then add your template sensors in like this to say if this state then green, else red.

card_mod:
  style:
    .container:
      .card--filter-none:
        .datagroup: |
          text:nth-of-type(8) .state__value {
            {% if states('binary_sensor.afternoon') == 'on' %}
              fill: green !important;
            {% else %}
              fill: red !important;
            {% endif %}
          }

of course you can also change the color to whatever you want like an RGB color or a Hex Color instead of a named color like i have done. just for illustration purposes.

1 Like

You are the best

I tried your solution on another card but I can’t get the color to change to red if the number is negative and green otherwise. Where is the subtlety?

type: custom:mod-card
card_mod:
  style:
    .container:
      .card--filter-none:
        .datagroup: |
          text:nth-of-type(8) .state__value {
            {% if states('sensor.balance_charge_decharge_batterie_jour') | float >= 0 %}
              fill: green !important;
            {% else %}
              fill: red !important;
            {% endif %}
          }
card:
  type: custom:flex-horseshoe-card
  entities:
    - entity: sensor.balance_charge_decharge_batterie_jour
      decimals: 0
      unit: W
      name: BATTERIE
    - entity: sensor.charge_batterie_jour
      decimals: 1
      unit: kWh
      name: Jour
    - entity: sensor.charge_batterie_mois
      decimals: 1
      unit: kWh
      name: Mois
    - entity: sensor.onduleur_batt_charge_watt
      decimals: 0
      unit: +W
      name: Charge batterie
    - entity: sensor.onduleur_batt_decharge_watt
      decimals: 0
      unit: '-W'
      name: Décharge batterie
  show:
    horseshoe_style: colorstopgradient
  layout:
    hlines:
      - id: 0
        xpos: 50
        ypos: 43
        length: 70
        styles:
          - opacity: 0.2;
    vlines:
      - id: 0
        xpos: 50
        ypos: 59
        length: 30
        styles:
          - opacity: 0.2;
    states:
      - id: 0
        entity_index: 0
        xpos: 50
        ypos: 35
        styles:
          - font-size: 3em;
          - opacity: 0.9;
      - id: 1
        entity_index: 1
        xpos: 46
        ypos: 58
        styles:
          - font-size: 1.8em;
          - text-anchor: end;
      - id: 2
        entity_index: 2
        xpos: 52
        ypos: 58
        styles:
          - font-size: 1.8em;
          - text-anchor: start;
      - id: 3
        entity_index: 3
        xpos: 5
        ypos: 7
        styles:
          - font-size: 0.8em;
          - text-anchor: start;
      - id: 4
        entity_index: 4
        xpos: 97
        ypos: 7
        styles:
          - font-size: 0.8em;
          - text-anchor: end;
    names:
      - id: 0
        entity_index: 0
        xpos: 50
        ypos: 95
      - id: 1
        entity_index: 1
        xpos: 46
        ypos: 68
        styles:
          - font-size: 0.9em;
          - text-anchor: end;
          - opacity: 0.7;
      - id: 2
        entity_index: 2
        xpos: 54
        ypos: 68
        styles:
          - font-size: 0.9em;
          - text-anchor: start;
          - opacity: 0.7;
  horseshoe_scale:
    min: -3000
    max: 3000
  color_stops:
    '-3000': '#f00020'
    '0': '#008000'

3 Likes

Well you shouldnt need the mod card. You place the card mod under the flex horseshoe card.

Also check that the nth-of-type(8) is correct. If you have more values or less values on display there may be less text fields so try and play with the number until it works on the right text field.

Probably nth-of-type(4) if i were to guess without checking based on your entities in the card.

1 Like

I understand better now how it works thank you.
Are the units of the values ​​also managed by card mod so that they agree in color with its value?

Yes you can.

Use .state__uom like this:

card_mod:
  style:
    .container:
      .card--filter-none:
        .datagroup: |
          text:nth-of-type(4) .state__value, text:nth-of-type(4) .state__uom {
            {% if states('binary_sensor.afternoon') == 'on' %}
              fill: green;
            {% else %}
              fill: red;
            {% endif %}
          }

Also figured out you dont actually need !important. So probably best to remove it :slight_smile:

1 Like

:+1:
It’s done

1 Like

I really like this! Mushroom should make it a 2nd layout option for the official input select card

After updating to 2023.9 the styling of my customized tile card brightness slider is broken. I’ve been digging around the DOM to find a root cause but not having any luck.

In short: Before the update, the slider element filled the surrounding container. After the update, it shrank back down to the default height. I can’t seem to make it budge. Any ideas?

Not a dev, so be gentle :smiley: card config is pasted below

image

features:
  - type: light-brightness
type: tile
entity: light.main_lights
show_entity_picture: false
tap_action:
  action: none
color: white
vertical: false
icon_tap_action:
  action: toggle
view_layout:
  grid-area: a2
card_mod:
  style:
    hui-light-brightness-tile-feature$: |
      ha-control-slider {
        border-radius: 16px !important;
        --control-slider-border-radius: 10px !important;
        --control-slider-background-opacity: 0 !important;
        --control-slider-thickness: 75px !important;
      }
      .container {
        height: 100% !important;
        margin: 0px !important;
        padding: 4px !important;
        border: 0px solid var(--background-color) !important;
        border-radius: 16px !important;
      }
      .hui-tile-card {
        display: none;
      }
    .: |
      ha-card {
        height: 100% !important;
        border: 3px solid var(--text-color) !important;
        border-radius: 16px !important;
        background: var(--card-background-color) !important;
        overflow: visible !important;
        padding: 0px !important;
        margin: 0px !important;
        --card-margin: 0px !important;
        --layout-card-margin: 0px !important;
        --masonry-view-card-margin: 0px !important;
      }
      ha-card .tile {
        display: none;
      }
      ha-card .container {
        display: none;
      }

Does this help you get any closer?

card_mod:
  style:
    hui-tile-features$:
      hui-light-brightness-tile-feature$:
        ha-control-slider$: |
          .slider {
            border-radius: 16px !important;
            --control-slider-border-radius: 16px !important;
            --control-slider-background-opacity: 0 !important;
            --control-slider-thickness: 75px !important;
          }
        .container: |
          :host {
            height: 40px !important;
            padding: 0px !important;
            border: 0px solid var(--background-color) !important;
            border-radius: 16px !important;
          }
    .: |
      ha-card .tile {
        display: none;
      }
      ha-card .container {
        display: none;
      }
      ha-card {
        height: 100% !important;
        border: 3px solid var(--text-color) !important;
        border-radius: 16px !important;
        background: var(--card-background-color) !important;
        overflow: visible !important;
        padding: 0px !important;
        margin: 0px !important;
        --card-margin: 0px !important;
        --layout-card-margin: 0px !important;
        --masonry-view-card-margin: 0px !important;
      }

I figured out a way to change the main icon!

Change the icon in the card itself. Then it is a ha-icon rather than an ha-svg-icon and you can then change it like this with card mod for each state.

type: tile
features:
  - type: alarm-modes
    modes:
      - armed_home
      - armed_away
      - armed_night
      - armed_vacation
      - armed_custom_bypass
      - disarmed
entity: alarm_control_panel.security
icon: mdi:account
card_mod:
  style:
    hui-tile-features$:
      hui-alarm-modes-tile-feature$:
        ha-control-select$: |
          #option-armed_home {
            --control-select-color: blue;
          }
          #option-armed_away {
            --control-select-color: red;
          }
          #option-armed_night {
            --control-select-color: lightblue;
          }
          #option-armed_vacation {
            --control-select-color: yellow;
          }
          #option-armed_custom_bypass {
            --control-select-color: orange;
          }
          #option-disarmed {
            --control-select-color: black;
          }
    ha-tile-icon$: |
      ha-icon {
        {% if states(config.entity) == 'armed_home' %}
          color: blue !important;
          --card-mod-icon: mdi:shield;
        {% elif states(config.entity) == 'armed_away' %}
          color: red !important;
          --card-mod-icon: mdi:shield-account;
        {% elif states(config.entity) == 'armed_night' %}
          color: lightblue !important;
          --card-mod-icon: mdi:moon-waning-crescent;
        {% elif states(config.entity) == 'armed_vacation' %}
          color: yellow !important;
          --card-mod-icon: mdi:shield-airplane
        {% elif states(config.entity) == 'armed_custom_bypass' %}
          color: orange !important;
          --card-mod-icon: mdi:mushroom;
        {% elif states(config.entity) == 'disarmed' %}
          color: black !important;
          --card-mod-icon: mdi:lock-off-outline;
        {% endif %}
      }
      .shape::before {
        {% if states(config.entity) == 'armed_home' %}
          background-color: blue !important;
        {% elif states(config.entity) == 'armed_away' %}
          background-color: red !important;
        {% elif states(config.entity) == 'armed_night' %}
          background-color: lightblue !important;
        {% elif states(config.entity) == 'armed_vacation' %}
          background-color: yellow !important;
        {% elif states(config.entity) == 'armed_custom_bypass' %}
          background-color: orange !important;
        {% elif states(config.entity) == 'disarmed' %}
          background-color: black !important;
        {% endif %}
      }
2 Likes

Some minor thing I thought. Solvable in a few minutes. Unfortunately did not happen in my case.

I would like to have the same card height for several cards. For most I managed, unfortunately for the entities card (in combination with the custom slider) it does’t work out as hoped.

I would like to vertically align the one single custom slider in the entities card. Now I get something like this:
image
But I prefer to have the slider vertically centered (in the entities card).

What I tried (among lots of other stuff):

type: entities
entities:
  - type: custom:slider-entity-row
    entity: light.chillroom_light
    full_row: true
    hide_state: true
card_mod:
  style: |
    ha-card {
      height: 50px !important;
      vertical-align: center !important;
      }

Is it possible what I would like to achive? What do I need instead of “vertical-align: center”

took me a long time to get back to it, but thank you very much for helping me change the colour of titles in my grid cards, it works perfectly

Example of using card-mod to display values on a Map card:
link
изображение

Update 15.10.23: this mod is not needed since 2023.10 - a possibility of displaying states was added (discussion, PR)

2 Likes

Use the browser tools to see what other paddings and margins there are. That slider is probably vertically aligned within it’s own bounding box, but the box itself may not be.

Hi, I have the follow HTML.
I’ve been trying to modify it to remove the box-shadow inside .color-circle but no luck. I’m very new to card-mod.

image

I’ve tried so many things though mostly blindly. I’ve been able to use card-mod to modify other stuff but not to remove this darn shadow.
For context, this is an entities card containing custom rgb card which by default adds these shadows.
The entities card is inside a stack-in card but I don’t know if that matters.

      - type: entities
        show_header_toggle: false
      #showing all the random stuff I've tried, mostly throwing stuff at the wall admittedly
        style: |
          rgb-light-card {
            box-shadow: 0 0px 0px 0 rgba(0,0,0,0);
          }
          type-custom-rgb-light-card {
            box-shadow: 0 0px 0px 0 rgba(0,0,0,0);
          }
          .color-circle {
            transition: none;
            box-shadow: 0 0px 0px 0px rgba(0,0,0,0);
          }
          ha-card {
            border: none; #this bit works great and I need it
            margin-top: -15px; #this also works great 
          } 
          rgb-light-card:
            $: |
              .color-circle {
                color: green;
                border-radius: 10%;
              }
        entities:
          - type: custom:rgb-light-card
            entity: light.bath_1
            justify: between
            size: 30
            colors:
              - type: call-service
                service: scene.turn_on
                service_data:
                  entity_id: scene.living_room_natural_light
                icon_color: ... etc

Not sure if this will help for context