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

Im stupid… (as usual)

fixed it myself

cards:
  - type: custom:vertical-stack-in-card
    style: |
      ha-card {
       {% if states("sensor.temp_error_state") == "Online" %}
          border: solid 1px gray; 
          box-shadow: 5px 10px 10px  rgba(0,0,0,.4);
          background-image: url("/local/icons/cyan/online.png");
          background-position: center;
          background-size: cover; 
          background-repeat: no-repeat;
       {% elif states("sensor.temp_error_state") == "Offline" %}
          border: solid 1px red; 
          box-shadow: 5px 10px 10px  rgba(200,0,1);
          background-image: url("/local/icons/cyan/offline.png");
          background-position: center;
          background-size: cover; 
          background-repeat: no-repeat;
       {% endif %}
      }                            

missing )) and no need for the .state

Hello, someone knows how I can delete the part of the title, it’s directly the name of the entity, but I can’t hide it on the card :confused:

Have a look in the dom on the right side. It is inside shadow root and not directly in ha-card. So you have to go one level deeper. Search for card-header in this thread. Asked and answered a lot of times.

1 Like

Does custom:canvas-gauge-card belong to the list of cards that can’t be modified with card-mod? I’m using it within a picture_elements card so I can see <ha-card class="type-picture-elements"> when I inspect the card, but not within this for the gauge itself. The line before </canvas-gauge-card> is <card-mod slot='none'> and I am able to get things inserted into this section but they have no effect on the card size (I’m trying to adjust its height in response to the pc or phone’s screen size, either by explicitly re-stating the gauge’s size or by scaling it).
My experimental card (much simplified) yaml:

type: picture-elements
image: /local/images/grid1280x1000.jpg
title: tide
elements:
  - type: custom:canvas-gauge-card
    entity: sensor.tide_high
    gauge:
      type: linear-gauge
      width: 150px
      height: 360px
      colorPlate: '#ffffff00'
      colorBar: '#fdf6ccff'
      colorBarProgress: '#c2e1b7ff'
      borderShadowWidth: 0
      colorBorderOuter: black
      colorBorderMiddle: '#ffffff00'
      colorBorderInner: '#ffffff00'
      colorBorderOuterEnd: '#ffffff00'
      colorBorderMiddleEnd: '#ffffff00'
      colorBorderInnerEnd: '#ffffff00'
      majorTicks: none
      strokeTicks: false
      animate: false
      barStrokeWidth: 0
      barBeginCircle: false
      valueBox: false
    style:
      left: 5%
      bottom: 0%
      transform: translate(0%,0%)
    card_mod:
      style: |
        :host { height: 625px; }
  - type: state-label
    entity: sensor.t_avg
    name: t avg
    style:
      left: 50%
    card_mod:
      style: |
        @media  (min-height: 700px)  {
          :host { top: 50%; color: red;}

        @media  (min-height: 800px)  {
          :host { top: 25%; color: blue;}
        }

The last entity is there just to prove that card-mod is installed & working and capable of responding to @media statements.

Has anyone been able to extend their mobile background image up to the top of the phone where bat% and time is?

Here is my current setup and would like to extend the background up to the very top:

I’ve tried messing with the current code but wasn’t able to achieve my goal.

  card-mod-root: |
    .header {
      display: none;
    }
    #view {
      padding: 0 !important;
      height: 100vh !important;
    }

Thanks for the help in advance

EDIT: Ive found this site that fix the problem but I’m not sure how to implement it with card mod.

Hi its been a little bit, but since i am working on a guide for styling the tile card with card mod i figured i would give you a response.

it is unfortunately not possible to change the icons for most of the tile cards (any that have a feature) as they all use svg icons. card mod cant change these as far as i know @Ildar_Gabdullin may be able to confirm, or provide some insight on this. i have certainly been unable to do this.

you can however change the colors of the states like this (of coure pick your own colors :slight_smile: )

Untitled video - Made with Clipchamp - 2023-09-11T120506.697

Code
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-svg-icon {
        {% if states(config.entity) == 'armed_home' %}
          color: blue !important;
        {% elif states(config.entity) == 'armed_away' %}
          color: red !important;
        {% elif states(config.entity) == 'armed_night' %}
          color: lightblue !important;
        {% elif states(config.entity) == 'armed_vacation' %}
          color: yellow !important;
        {% elif states(config.entity) == 'armed_custom_bypass' %}
          color: orange !important;
        {% elif states(config.entity) == 'disarmed' %}
          color: black !important;
        {% 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 %}
      }

I have only shown the 3 states because that is all my alarm panel supports right now, but all are included in the code :slight_smile:

in the meantime if you are interested you can check out my mushroom card mod guide here. there are some overlaps on how things are styled in those and in the tile card. below :point_down:

1 Like

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.

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;
      }