Vehicle Status Custom Card

Hi to all, I’m not sure why but without any reason I lost vehicle custom card. I had Eco display graph when I was click that button, but now all that is saying is that custom card provided. And that’s the same for all other buttons. Any solution for this?


Hi @dcigir, this is the vehicle status card for the threads, for mb please use to mb component thread next time :sweat_smile: This card has different configurations. Back to your question, do you have the custom card option unchecked? You will have a default card, for the eco card, so the chart will be back

Thanks that worked. I don’t know why was this changed in the first place. :slight_smile:

That’s great

:ok_hand:

@VietNgoc Is there a thread for the MB Vehicle Info Custom Card ? Coz i have some questions.
Thanx

Hi @HarryBoo, vehicle info doesn’t have its own thread, but it’s linked to the component thread. If you have any questions, you can send me a message, or feel free to create an issue on the repo :+1: :wink:

Hello,

I am having difficulties accommodating the entities that my BMW provides.

  1. It outputs the status of individual doors or locks as attributes of higher-level entities (entity: “binary_sensor.bmw530d_lids”, whose attributes: “leftFront: CLOSED”, “leftRear: CLOSED”, “rightFront: CLOSED” etc.), but I cannot output attributes in a group of indicators. Or have I overlooked something?
  2. The BMW offers button entities that trigger immediate actions (“button.bmw530d_activate_air_conditioning”). Here, too, I have not succeeded in assigning this to the buttons on the button cards of this card.
    Regards and thanks for this card,
    Eckart

Hi, because it’s a binary sensor, you have to go through the template. You can easily find out the state for each attribute via template editor, but I think you will have on/off … something like this…

{{ iif(is_state_attr('sensor.6z1_2359_lock','doorstatusrearright', true), 'Locked', 'Closed') }}

{{ states['sensor.6z1_2359_lock'].attributes.doorstatusrearright }} 


For the button, each integration has a different design. I don’t know if you are using the official bmw integration, but according to the documentation I have no idea what the button is supposed to do. Some require script/automation for trigger service. Try to set tap action as toggle.

I would like to use the minimap, but my car integrations doesn’t create a device_tracker, instead I created a sensor. Is there any chance to use a sensor for the minimap (I added the latitude and longitude attributes to the sensor)?

why not create a device tracker manually using lat and lon from the sensor?

device_tracker:
  - platform: template
    devices:
      my_custom_tracker:
        source_type: gps
        latitude: "{{ states('sensor.my_latitude_sensor') | float }}"
        longitude: "{{ states('sensor.my_longitude_sensor') | float }}"
        gps_accuracy: "{{ states('sensor.my_gps_accuracy_sensor') | int }}"
        battery_level: "{{ states('sensor.my_battery_sensor') | int }}"

gps_accuracy and battery_level are optional

1 Like

Because I was pretty sure, it’s not possible the create a device with a template.

Solved it, by creating an automation and using the device_tracker.see action

Thank you so much for this amazing work, I love it!

Now … hear me out :laughing:

I know you intended this as a vehicle status card… but it’s an amazing card for pets too :laughing:

This is my cat. Indicators are the daily stats, the buttons are actions to clean litter box / add food / open cat door …

I’m using Tractive tracker, petkit feeder and automatic litter box, pet libro water fountain

(Map display is much better I just zoomed in to hide my address )

5 Likes

About the buttons…
Is it possible to have the entity picture of an entity in the icon part?
I would like to have a button to fuel the car, i already have an entity (from carbu) which holds the right picture of the tankstation…

Hi @skank yes I can add a template config to replace the icon. I will prepare it for the next release. :love_you_gesture:
update: done :tada:
picture_template

2 Likes

Perfect! Thank you so much

I’m coming here after spending days trying to find out the reason of my problem without sucess. Here is the thing:

Some days ago the vehicle status card has simply disappeared from my panel. I’m not aware to change anything from the configuration. When I say ‘has disappeared’ means that, even tough the yamel code is there, nothing show up. Does anyone experienced anything similar?

Only thing I remember was the upgrade to homeassitant 2024.12.x, but I restore a backup version of 2024.11 and didn’t fix it.

Here is the code, just in case anyone can also try to get your feedback.

Thanks.

type: sections
path: ""
max_columns: 4
sections:
  - type: grid
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: Status
            secondary: >-
              {% if is_state('binary_sensor.lsjwh4099pn211136_vehicle_running',
              'on')  %}
                On
              {% elif
              is_state('binary_sensor.lsjwh4099pn211136_vehicle_running', 'off')
              %}
                Off
              {% else %}
                n/a
              {% endif %}
            icon: >-
              {% if is_state('binary_sensor.lsjwh4099pn211136_vehicle_running',
              'on')  %}
                mdi:car
              {% elif
              is_state('binary_sensor.lsjwh4099pn211136_vehicle_running', 'off')
              %}
                mdi:car-off
              {% else %}
                mdi:car-info
              {% endif %}
            entity: binary_sensor.lsjwh4099pn211136_vehicle_running
            icon_color: >-
              {% if is_state('binary_sensor.lsjwh4099pn211136_vehicle_running',
              'on')  %}
                green
              {% elif
              is_state('binary_sensor.lsjwh4099pn211136_vehicle_running', 'off')
              %}
                red
              {% else %}
                n/a
              {% endif %}
            badge_color: ""
            badge_icon: ""
          - type: custom:mushroom-template-card
            primary: Connector
            secondary: >-
              {% if
              is_state('binary_sensor.lsjwh4099pn211136_charger_connected',
              'on')  %}
                Plugged
              {% elif
              is_state('binary_sensor.lsjwh4099pn211136_charger_connected',
              'off') %}
                Unplugged
              {% else %}
                n/a
              {% endif %}
            icon: mdi:ev-plug-type2
            entity: binary_sensor.lsjwh4099pn211136_vehicle_running
            icon_color: >-
              {% if
              is_state('binary_sensor.lsjwh4099pn211136_charger_connected',
              'on')  %}
                blue
              {% elif
              is_state('binary_sensor.lsjwh4099pn211136_charger_connected',
              'off') %}
                grey
              {% else %}
                grey
              {% endif %}
            badge_color: ""
            badge_icon: ""
          - type: custom:mushroom-template-card
            primary: Charge
            secondary: >-
              {% if is_state('binary_sensor.lsjwh4099pn211136_battery_charging',
              'on')  %}
                Charging
              {% elif
              is_state('binary_sensor.lsjwh4099pn211136_battery_charging',
              'off') %}
                Not Charging
              {% else %}
                n/a
              {% endif %}
            icon: mdi:battery-charging-50
            entity: binary_sensor.lsjwh4099pn211136_battery_charging
            icon_color: >-
              {% if is_state('binary_sensor.lsjwh4099pn211136_battery_charging',
              'on')  %}
                green
              {% elif
              is_state('binary_sensor.lsjwh4099pn211136_battery_charging',
              'off') %}
                blue
              {% else %}
                grey
              {% endif %}
            badge_color: ""
            badge_icon: ""
      - type: custom:vehicle-status-card
        button_card:
          - button:
              notify: false
              primary: Vehicle Status
              secondary: This is a new button
              icon: mdi:car-cog
            button_type: default
            card_type: default
            custom_card:
              - entities:
                  - sensor.sun_next_dawn
                  - sensor.sun_next_midnight
                  - sensor.sun_next_noon
                title: Custom Card
                type: entities
            default_card:
              - title: Doors Status
                collapsed_items: false
                items:
                  - entity: binary_sensor.lsjwh4099pn211136_door_driver
                    name: Driver
                    icon: mdi:car-door-lock
                  - entity: binary_sensor.lsjwh4099pn211136_door_passenger
                    name: Passenger
                    icon: mdi:car-door-lock
                  - entity: binary_sensor.lsjwh4099pn211136_door_rear_left
                    name: Rear Left
                    icon: mdi:car-door-lock
                  - entity: binary_sensor.lsjwh4099pn211136_door_rear_right
                    name: Rear Right
                    icon: mdi:car-door-lock
                  - entity: lock.lsjwh4099pn211136_boot_lock
                    name: Boot (Maletero)
                    icon: mdi:lock-outline
                  - entity: binary_sensor.lsjwh4099pn211136_bonnet
                    name: Bonnet (Capo)
                    icon: mdi:lock-outline
              - title: Windows Status
                collapsed_items: false
                items:
                  - entity: switch.lsjwh4099pn211136_window_driver
                    name: Driver
                    icon: mdi:blinds
                  - entity: switch.lsjwh4099pn211136_window_passenger
                    name: Passenger
                    icon: mdi:blinds
                  - entity: switch.lsjwh4099pn211136_window_rear_left
                    name: Rear Left
                    icon: mdi:blinds
                  - entity: switch.lsjwh4099pn211136_window_rear_right
                    name: Rear Right
                    icon: mdi:blinds
            hide_button: false
            button_action: {}
          - button:
              notify: false
              primary: Energy Status
              secondary: This is a new button
              icon: mdi:lightning-bolt
            button_type: default
            card_type: default
            custom_card: []
            default_card:
              - title: Battery
                collapsed_items: false
                items:
                  - entity: sensor.lsjwh4099pn211136_auxiliary_battery_voltage
                    icon: mdi:car-battery
                    name: 12V Battery
                  - entity: sensor.lsjwh4099pn211136_voltage
                    name: HV Battery Voltage
                    icon: mdi:current-dc
                  - entity: binary_sensor.lsjwh4099pn211136_battery_heating
                    name: Battery heating
                  - entity: input_number.mg4_soc_kwh_last_value
                    name: SoC Kwh
                    icon: mdi:battery-charging-40
                  - entity: input_number.mg4_soc_last_value
                    name: SoC
                    icon: mdi:battery-charging-40
                  - entity: sensor.lsjwh4099pn211136_current
                    name: Current
              - collapsed_items: false
                items:
                  - entity: binary_sensor.lsjwh4099pn211136_charger_connected
                    name: Cable Connected
                  - entity: binary_sensor.lsjwh4099pn211136_battery_charging
                    name: Charging
                  - entity: number.lsjwh4099pn211136_target_soc
                    name: Charge limit
                  - entity: sensor.lsjwh4099pn211136_last_charge_start_time
                    name: Last Charge Start
                  - entity: sensor.lsjwh4099pn211136_remaining_charging_time
                    name: Charge Time Remaining
                  - entity: sensor.lsjwh4099pn211136_charging_finished
                    name: End Charge Estimated
                  - entity: sensor.lsjwh4099pn211136_last_charge_end_time
                    name: Last Charge End
                  - entity: sensor.lsjwh4099pn211136_last_charge_soc_kwh
                    name: Last Charge SoC KWh
                title: Charging Status
            hide_button: false
            button_action: {}
          - button:
              primary: Mytyres
              secondary:
                - entity: ""
                  attribute: ""
                  state_template: ""
              notify: ""
              icon: mdi:car-tire-alert
            button_type: default
            hide_button: false
            card_type: tire
            default_card: []
            custom_card: []
            button_action:
              entity: ""
              tap_action:
                action: more-info
              hold_action:
                action: none
              double_tap_action:
                action: none
            tire_card:
              front_left:
                entity: sensor.lsjwh4099pn211136_tyres_front_left_pressure
              front_right:
                entity: sensor.lsjwh4099pn211136_tyres_front_right_pressure
              rear_left:
                entity: sensor.lsjwh4099pn211136_tyres_rear_left_pressure
              rear_right:
                entity: sensor.lsjwh4099pn211136_tyres_rear_right_pressure
          - button:
              icon: mdi:new-box
              notify: false
              primary: New Button
              secondary: This is a new button
            button_type: default
            card_type: default
            custom_card: []
            default_card:
              - collapsed_items: false
                items:
                  - entity: sun.sun
                  - entity: ensor.sun_next_dawn
                  - entity: sensor.sun_next_midnight
                  - entity: sensor.sun_next_noon
                title: Default Card
            hide_button: true
          - button:
              icon: mdi:new-box
              notify: false
              primary: New Button
              secondary: This is a new button
            card_type: custom
            custom_card:
              - entities:
                  - sensor.sun_next_dawn
                  - sensor.sun_next_midnight
                  - sensor.sun_next_noon
                title: Custom Card
                type: entities
            default_card: []
            hide_button: false
            button_action: {}
        images:
          - url: /api/image/serve/3a499658d06fa3d1db3d1850add05c7c/original
            title: FRONT.PNG
          - url: /api/image/serve/5d7f93d891dba34464cba78afa960606/original
            title: FRONT_RIGHT.PNG
          - url: /api/image/serve/e23447c8fb9dc8ffa4f3a4cc7e6e400f/original
            title: RIGHT.PNG
          - url: /api/image/serve/a925ec23785aa19f333e6ec2bc941ee6/original
            title: REAR_RIGHT.PNG
          - url: /api/image/serve/04c2a2fdb2e7c7b4d8ad2d65b4c1f38b/original
            title: REAR.PNG
          - url: /api/image/serve/b59d0628194c6022ea381fa0577bcb7b/original
            title: REAR_LEFT.PNG
          - url: /api/image/serve/dde95b7e1dfc15ffb037dae6d13762b6/original
            title: LEFT.PNG
          - url: /api/image/serve/cb8715dbfcb201e42d739e93923c99ef/original
            title: LEFT_FRONT.PNG
        indicators:
          group:
            - name: Battery
              visibility: ""
              items:
                - entity: input_number.mg4_soc_last_value
                  name: ""
                  icon: ""
                  attribute: ""
                - entity: binary_sensor.lsjwh4099pn211136_charger_connected
                  name: ""
                  icon: ""
                  attribute: ""
                - entity: binary_sensor.lsjwh4099pn211136_battery_charging
                  name: ""
                  icon: ""
                  attribute: ""
              icon: mdi:car-electric
              color: >-
                {% if
                is_state('binary_sensor.lsjwh4099pn211136_battery_charging',
                'on')  %}
                  green
                {% elif
                is_state('binary_sensor.lsjwh4099pn211136_charger_connected',
                'on')  %}
                  blue
                {% else %}
                  grey
                {% endif %}
            - name: Temp
              visibility: ""
              items:
                - entity: sensor.lsjwh4099pn211136_exterior_temperature
                  name: External
                  icon: mdi:thermometer
                  attribute: ""
                - entity: sensor.lsjwh4099pn211136_interior_temperature
                  name: Internal
                  icon: mdi:thermometer-high
                  attribute: ""
              icon: mdi:thermometer
          single:
            - entity: lock.lsjwh4099pn211136_doors_lock
              icon: car
              attribute: ""
              state_template: >-
                {% if is_state('lock.lsjwh4099pn211136_doors_lock',
                'unavailable')  %}
                  n/a
                {% elif is_state('lock.lsjwh4099pn211136_doors_lock', 'open') %}
                  open
                {% elif is_state('lock.lsjwh4099pn211136_doors_lock', 'locked')
                %}
                  locked
                {% else %}
                  n/a
                {% endif %}
              icon_template: >-
                {% if is_state('lock.lsjwh4099pn211136_doors_lock',
                'unavailable')  %}
                  mdi:car-door
                {% elif is_state('lock.lsjwh4099pn211136_doors_lock', 'open') %}
                  mdi:car-door
                {% elif is_state('lock.lsjwh4099pn211136_doors_lock', 'locked')
                %}
                  mdi:car-door-lock
                {% else %}
                  mdi:car-door
                {% endif %}
              color: >-
                {% if is_state('lock.lsjwh4099pn211136_doors_lock',
                'unavailable')  %}
                  grey
                {% elif is_state('lock.lsjwh4099pn211136_doors_lock', 'open') %}
                  green
                {% elif is_state('lock.lsjwh4099pn211136_doors_lock', 'locked')
                %}
                  red
                {% else %}
                  n/a
                {% endif %}
            - entity: binary_sensor.lsjwh4099pn211136_vehicle_running
              attribute: ""
              icon_template: >-
                {% if
                is_state('binary_sensor.lsjwh4099pn211136_vehicle_running',
                'unavailable')  %}
                  mdi:car-outline
                {% elif
                is_state('binary_sensor.lsjwh4099pn211136_vehicle_running',
                'on') %}
                  mdi:car
                {% elif
                is_state('binary_sensor.lsjwh4099pn211136_vehicle_running',
                'off') %}
                  mdi:car-off
                {% else %}
                  mdi:car-outline
                {% endif %}
              state_template: >-
                {% if
                is_state('binary_sensor.lsjwh4099pn211136_vehicle_running',
                'unavailable')  %}
                  n/a
                {% elif
                is_state('binary_sensor.lsjwh4099pn211136_vehicle_running',
                'on') %}
                  on
                {% elif
                is_state('binary_sensor.lsjwh4099pn211136_vehicle_running',
                'off') %}
                  off
                {% else %}
                  n/a
                {% endif %}
              icon: car-out
              color: >-
                {% if
                is_state('binary_sensor.lsjwh4099pn211136_vehicle_running',
                'unavailable')  %}
                  grey
                {% elif
                is_state('binary_sensor.lsjwh4099pn211136_vehicle_running',
                'on') %}
                  green
                {% elif
                is_state('binary_sensor.lsjwh4099pn211136_vehicle_running',
                'off') %}
                  blue
                {% else %}
                  grey
                {% endif %}
            - entity: sensor.lsjwh4099pn211136_mileage
              icon: ""
              attribute: ""
              state_template: >-
                {% if is_state('sensor.lsjwh4099pn211136_mileage',
                'unavailable')  %}
                  n/a
                {% else %}
                  {{ states ('sensor.lsjwh4099pn211136_mileage')}}
                {% endif %}
        layout_config:
          button_grid:
            rows: 2
            swipe: true
          hide:
            button_notify: false
            buttons: false
            images: false
            indicators: false
            mini_map: false
            range_info: false
          theme_config:
            mode: auto
            theme: default
          images_swipe:
            max_height: 150
            max_width: 450
            autoplay: true
            speed: 1300
            delay: 1950
        mini_map:
          enable_popup: true
          hours_to_show: 24
          device_tracker: device_tracker.lsjwh4099pn211136_vehicle_position
        name: MG4 Status
        range_info:
          - energy_level:
              - icon: mdi:battery-charging
                entity: input_number.mg4_soc_last_value
            range_level:
              - entity: sensor.lsjwh4099pn211136_range
            progress_color: "#00cc00"
          - energy_level:
              - entity: ""
                attribute: ""
                icon: ""
            range_level:
              - entity: ""
                attribute: ""
            progress_color: ""
        tire_preview: null
        btn_preview: null
        card_preview: null
        default_card_preview: null
title: MG4 Status
cards:
  - null
  - type: custom:vehicle-status-card
    button_card:
      - button:
          notify: false
          primary: Vehicle Status
          secondary:
            state_template: This is a new button
          icon: mdi:car-cog
        button_type: default
        card_type: default
        custom_card:
          - entities:
              - sensor.sun_next_dawn
              - sensor.sun_next_midnight
              - sensor.sun_next_noon
            title: Custom Card
            type: entities
        default_card:
          - title: Doors Status
            collapsed_items: false
            items:
              - entity: binary_sensor.lsjwh4099pn211136_door_driver
                name: Driver
                icon: mdi:car-door-lock
              - entity: binary_sensor.lsjwh4099pn211136_door_passenger
                name: Passenger
                icon: mdi:car-door-lock
              - entity: binary_sensor.lsjwh4099pn211136_door_rear_left
                name: Rear Left
                icon: mdi:car-door-lock
              - entity: binary_sensor.lsjwh4099pn211136_door_rear_right
                name: Rear Right
                icon: mdi:car-door-lock
              - entity: lock.lsjwh4099pn211136_boot_lock
                name: Boot (Maletero)
                icon: mdi:lock-outline
              - entity: binary_sensor.lsjwh4099pn211136_bonnet
                name: Bonnet (Capo)
                icon: mdi:lock-outline
          - title: Windows Status
            collapsed_items: false
            items:
              - entity: switch.lsjwh4099pn211136_window_driver
                name: Driver
                icon: mdi:blinds
              - entity: switch.lsjwh4099pn211136_window_passenger
                name: Passenger
                icon: mdi:blinds
              - entity: switch.lsjwh4099pn211136_window_rear_left
                name: Rear Left
                icon: mdi:blinds
              - entity: switch.lsjwh4099pn211136_window_rear_right
                name: Rear Right
                icon: mdi:blinds
        hide_button: false
        button_action: {}
      - button:
          notify: false
          primary: Energy Status
          secondary:
            state_template: This is a new button
          icon: mdi:lightning-bolt
        button_type: default
        card_type: default
        custom_card: []
        default_card:
          - title: Battery
            collapsed_items: false
            items:
              - entity: sensor.lsjwh4099pn211136_auxiliary_battery_voltage
                icon: mdi:car-battery
                name: 12V Battery
              - entity: sensor.lsjwh4099pn211136_voltage
                name: HV Battery Voltage
                icon: mdi:current-dc
              - entity: binary_sensor.lsjwh4099pn211136_battery_heating
                name: Battery heating
              - entity: input_number.mg4_soc_kwh_last_value
                name: SoC Kwh
                icon: mdi:battery-charging-40
              - entity: input_number.mg4_soc_last_value
                name: SoC
                icon: mdi:battery-charging-40
              - entity: sensor.lsjwh4099pn211136_current
                name: Current
          - collapsed_items: false
            items:
              - entity: binary_sensor.lsjwh4099pn211136_charger_connected
                name: Cable Connected
              - entity: binary_sensor.lsjwh4099pn211136_battery_charging
                name: Charging
              - entity: number.lsjwh4099pn211136_target_soc
                name: Charge limit
              - entity: sensor.lsjwh4099pn211136_last_charge_start_time
                name: Last Charge Start
              - entity: sensor.lsjwh4099pn211136_remaining_charging_time
                name: Charge Time Remaining
              - entity: sensor.lsjwh4099pn211136_charging_finished
                name: End Charge Estimated
              - entity: sensor.lsjwh4099pn211136_last_charge_end_time
                name: Last Charge End
              - entity: sensor.lsjwh4099pn211136_last_charge_soc_kwh
                name: Last Charge SoC KWh
            title: Charging Status
        hide_button: false
        button_action: {}
      - button:
          primary: Mytyres
          secondary:
            entity: ""
            attribute: ""
            state_template: ""
          notify: ""
          icon: mdi:car-tire-alert
        button_type: default
        hide_button: false
        card_type: tire
        default_card: []
        custom_card: []
        button_action:
          entity: ""
          tap_action:
            action: more-info
          hold_action:
            action: none
          double_tap_action:
            action: none
        tire_card:
          front_left:
            entity: sensor.lsjwh4099pn211136_tyres_front_left_pressure
          front_right:
            entity: sensor.lsjwh4099pn211136_tyres_front_right_pressure
          rear_left:
            entity: sensor.lsjwh4099pn211136_tyres_rear_left_pressure
          rear_right:
            entity: sensor.lsjwh4099pn211136_tyres_rear_right_pressure
      - button:
          icon: mdi:new-box
          notify: false
          primary: New Button
          secondary:
            state_template: This is a new button
        button_type: default
        card_type: default
        custom_card: []
        default_card:
          - collapsed_items: false
            items:
              - entity: sun.sun
              - entity: ensor.sun_next_dawn
              - entity: sensor.sun_next_midnight
              - entity: sensor.sun_next_noon
            title: Default Card
        hide_button: true
      - button:
          icon: mdi:new-box
          notify: false
          primary: New Button
          secondary:
            state_template: This is a new button
        card_type: custom
        custom_card:
          - entities:
              - sensor.sun_next_dawn
              - sensor.sun_next_midnight
              - sensor.sun_next_noon
            title: Custom Card
            type: entities
        default_card: []
        hide_button: false
        button_action: {}
    images:
      - url: /api/image/serve/3a499658d06fa3d1db3d1850add05c7c/original
        title: FRONT.PNG
      - url: /api/image/serve/5d7f93d891dba34464cba78afa960606/original
        title: FRONT_RIGHT.PNG
      - url: /api/image/serve/e23447c8fb9dc8ffa4f3a4cc7e6e400f/original
        title: RIGHT.PNG
      - url: /api/image/serve/a925ec23785aa19f333e6ec2bc941ee6/original
        title: REAR_RIGHT.PNG
      - url: /api/image/serve/04c2a2fdb2e7c7b4d8ad2d65b4c1f38b/original
        title: REAR.PNG
      - url: /api/image/serve/b59d0628194c6022ea381fa0577bcb7b/original
        title: REAR_LEFT.PNG
      - url: /api/image/serve/dde95b7e1dfc15ffb037dae6d13762b6/original
        title: LEFT.PNG
      - url: /api/image/serve/cb8715dbfcb201e42d739e93923c99ef/original
        title: LEFT_FRONT.PNG
    indicators:
      group:
        - name: Battery
          visibility: ""
          items:
            - entity: input_number.mg4_soc_last_value
              name: ""
              icon: ""
              attribute: ""
            - entity: binary_sensor.lsjwh4099pn211136_charger_connected
              name: ""
              icon: ""
              attribute: ""
            - entity: binary_sensor.lsjwh4099pn211136_battery_charging
              name: ""
              icon: ""
              attribute: ""
          icon: mdi:car-electric
          color: >-
            {% if is_state('binary_sensor.lsjwh4099pn211136_battery_charging',
            'on')  %}
              green
            {% elif
            is_state('binary_sensor.lsjwh4099pn211136_charger_connected', 'on') 
            %}
              blue
            {% else %}
              grey
            {% endif %}
        - name: Temp
          visibility: ""
          items:
            - entity: sensor.lsjwh4099pn211136_exterior_temperature
              name: External
              icon: mdi:thermometer
              attribute: ""
            - entity: sensor.lsjwh4099pn211136_interior_temperature
              name: Internal
              icon: mdi:thermometer-high
              attribute: ""
          icon: mdi:thermometer
      single:
        - entity: lock.lsjwh4099pn211136_doors_lock
          icon: car
          attribute: ""
          state_template: >-
            {% if is_state('lock.lsjwh4099pn211136_doors_lock', 'unavailable') 
            %}
              n/a
            {% elif is_state('lock.lsjwh4099pn211136_doors_lock', 'open') %}
              open
            {% elif is_state('lock.lsjwh4099pn211136_doors_lock', 'locked') %}
              locked
            {% else %}
              n/a
            {% endif %}
          icon_template: >-
            {% if is_state('lock.lsjwh4099pn211136_doors_lock', 'unavailable') 
            %}
              mdi:car-door
            {% elif is_state('lock.lsjwh4099pn211136_doors_lock', 'open') %}
              mdi:car-door
            {% elif is_state('lock.lsjwh4099pn211136_doors_lock', 'locked') %}
              mdi:car-door-lock
            {% else %}
              mdi:car-door
            {% endif %}
          color: >-
            {% if is_state('lock.lsjwh4099pn211136_doors_lock', 'unavailable') 
            %}
              grey
            {% elif is_state('lock.lsjwh4099pn211136_doors_lock', 'open') %}
              green
            {% elif is_state('lock.lsjwh4099pn211136_doors_lock', 'locked') %}
              red
            {% else %}
              n/a
            {% endif %}
        - entity: binary_sensor.lsjwh4099pn211136_vehicle_running
          attribute: ""
          icon_template: >-
            {% if is_state('binary_sensor.lsjwh4099pn211136_vehicle_running',
            'unavailable')  %}
              mdi:car-outline
            {% elif is_state('binary_sensor.lsjwh4099pn211136_vehicle_running',
            'on') %}
              mdi:car
            {% elif is_state('binary_sensor.lsjwh4099pn211136_vehicle_running',
            'off') %}
              mdi:car-off
            {% else %}
              mdi:car-outline
            {% endif %}
          state_template: >-
            {% if is_state('binary_sensor.lsjwh4099pn211136_vehicle_running',
            'unavailable')  %}
              n/a
            {% elif is_state('binary_sensor.lsjwh4099pn211136_vehicle_running',
            'on') %}
              on
            {% elif is_state('binary_sensor.lsjwh4099pn211136_vehicle_running',
            'off') %}
              off
            {% else %}
              n/a
            {% endif %}
          icon: car-out
          color: >-
            {% if is_state('binary_sensor.lsjwh4099pn211136_vehicle_running',
            'unavailable')  %}
              grey
            {% elif is_state('binary_sensor.lsjwh4099pn211136_vehicle_running',
            'on') %}
              green
            {% elif is_state('binary_sensor.lsjwh4099pn211136_vehicle_running',
            'off') %}
              blue
            {% else %}
              grey
            {% endif %}
        - entity: sensor.lsjwh4099pn211136_mileage
          icon: ""
          attribute: ""
          state_template: >-
            {% if is_state('sensor.lsjwh4099pn211136_mileage', 'unavailable') 
            %}
              n/a
            {% else %}
              {{ states ('sensor.lsjwh4099pn211136_mileage')}}
            {% endif %}
    layout_config:
      button_grid:
        rows: 2
        swipe: true
      hide:
        button_notify: false
        buttons: false
        images: false
        indicators: false
        mini_map: false
        range_info: false
      theme_config:
        mode: auto
        theme: default
      images_swipe:
        max_height: 150
        max_width: 450
        autoplay: true
        speed: 1300
        delay: 1950
    mini_map:
      enable_popup: true
      hours_to_show: 24
      device_tracker: device_tracker.lsjwh4099pn211136_vehicle_position
    name: MG4 Status
    range_info:
      - energy_level:
          - icon: mdi:battery-charging
            entity: input_number.mg4_soc_last_value
        range_level:
          - entity: sensor.lsjwh4099pn211136_range
        progress_color: "#00cc00"
      - energy_level:
          - entity: ""
            attribute: ""
            icon: ""
        range_level:
          - entity: ""
            attribute: ""
        progress_color: ""
    tire_preview: null
    btn_preview: null
    card_preview: null
    default_card_preview: null
    card_id: vsc-cqoqd5t

I’m struggling to get card_mod to work with this card, with the objective of customising the icon color; outline and background depending on state.
Here is my code, but it’s not having any changes…:frowning:
I would appreciate if anyone can help resolve this…thanks in advance

type: custom:vehicle-status-card
button_card:
  - button:
      primary: Lock
      secondary:
        state_template: ""
        entity: lock.sportage_door_lock
      picture_template: ""
      icon: mdi:lock
      card_mod:
        style: |
          :host {
            --icon-color: 
              {% if is_state('lock.sportage_door_lock', 'unlocked') %}
              red
              {% else %}
              green
              {% endif %};
            outline: 
              {% if is_state('lock.sportage_door_lock', 'unlocked') %}
              1.5px solid red
              {% else %}
              1.5px solid green
              {% endif %};
            background-color: white; /* Static background color */
          }
    button_type: action
    custom_card: []
    default_card: []
    hide_button: false
    button_action:
      entity: lock.sportage_door_lock
      tap_action:
        action: perform-action
        perform_action: kia_uvo.lock
        target: {}
        data:
          device_id: <<id_here>>
      hold_action:
        action: none
btn_preview: null
default_card_preview: null
card_preview: null
tire_preview: null
layout_config:
  theme_config:
    theme: default
  hide:
    mini_map: true
name: ""

New release v1.5.0 is out! :rocket:

What’s Changed

This release introduces exciting new features, including section order customization, enhanced map functionality with address display.

If you find this card helpful, please consider giving the repository a :star:!

New Features :tada:



benz-map-anim

:hammer_and_wrench: Improvements

Hi @KingFisher, sorry for late reply… for buttons icon color and its shape background, you can modify in color template… like this…

and for button background you can use card_mod to customize styles, each button has its own id with its index… for example change background for buttons… and another styles for first button…

card_mod:
  style:
    vehicle-buttons-grid$:
      vsc-button-single$: |
        .grid-item { 
          background: midnightblue !important;
        }
      vsc-button-single#button-id-0 $: |
        .grid-item { 
          background: green !important;
        }

Hi, yes, I made a small change in the range_info part. :smiling_face_with_tear: Please download the new version and delete the existing config, just for range_info part and create a new one… :pray: