Hey all,
This is my first time making a new thread so if its in the wrong section please can a mod move it…
I’m having issues getting the borders not to show around my entity outputs and also the sections not been transparent (as seen in screenshot)
Here is the code I’m using for my Tesla Intergration
type: custom:button-card
show_state: true
tap_action:
action: none
custom_fields:
tesla_image1:
card:
type: picture
image: /api/image/serve/74ff5bc4a7cc1cb53eb2f44433bcd6f1/512x512
card_mod:
style: |
ha-card {
background-color: transparent;
border: none;
}
tap_action:
action: call-service
service: input_number.set_value
target:
entity_id: input_number.tesla_card_height
data:
value: 500
tesla_image2:
card:
type: picture
image: /api/image/serve/7d773904eccceede4ad1a22ce4f2e460/512x512
card_mod:
style: |
ha-card {
background-color: transparent;
border: none;
}
tap_action:
action: call-service
service: input_number.set_value
target:
entity_id: input_number.tesla_card_height
data:
value: 260
tesla_doors:
card:
type: custom:mushroom-template-card
primary: null
secondary: "Doors: {{states('lock.kaylee_doors')}}"
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 10px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.secondary {
font-size: 10px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_trunk:
card:
type: custom:mushroom-template-card
primary: null
secondary: "Boot: {{states('cover.kaylee_trunk_2')}}"
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_frunk:
card:
type: custom:mushroom-template-card
primary: null
secondary: "Frunk: {{states('cover.kaylee_frunk_2')}}"
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_windows:
card:
type: custom:mushroom-template-card
primary: null
secondary: "Windows: {{states('cover.kaylee_windows')}}"
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_chargerdoor:
card:
type: custom:mushroom-template-card
primary: null
secondary: "Charge Door: {{states('cover.kaylee_charger_door')}}"
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_battery_percent:
card:
type: custom:mushroom-template-card
primary: null
secondary: "Charge Limit: {{states('number.kaylee_charge_limit_2')}}%"
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_battery_graph:
card:
type: gauge
name: ""
entity: sensor.kaylee_battery
needle: true
severity:
green: 30
yellow: 10
red: 0
min: 0
max: 100
card_mod:
style: |
ha-card {
border: none;
background-color: transparent;
}
.name {
font-size: 12px !important;
font-weight: 900;
font-style:italicl;
position: absolute;
bottom: 85px;
}
tesla_range:
card:
type: custom:mushroom-template-card
primary: null
secondary: "Range: {{states('sensor.kaylee_range')}} miles"
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_odo:
card:
type: custom:mushroom-template-card
primary: null
secondary: "Odometer: {{states('sensor.kaylee_odometer_2')}} miles"
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
divider1:
card:
type: custom:text-divider-row
text: information
align: center
text-divider-color: white
tesla_front_right_tire:
card:
type: custom:mushroom-template-card
primary: null
secondary: "{{states('sensor.kaylee_tpms_front_right') | round}} PSI"
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align: left;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align: left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_front_left_tire:
card:
type: custom:mushroom-template-card
primary: null
secondary: "{{states('sensor.kaylee_tpms_front_left') | round}} PSI"
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align: left;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align: left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_rear_left_tire:
card:
type: custom:mushroom-template-card
primary: null
secondary: "{{states('sensor.kaylee_tpms_rear_left') | round}} PSI"
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align: left;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align: left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_rear_right_tire:
card:
type: custom:mushroom-template-card
primary: null
secondary: "{{states('sensor.kaylee_tpms_rear_right') | round}} PSI"
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align: left;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align: left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_charging_rate:
card:
type: custom:mushroom-template-card
primary: null
secondary: "Charging Rate: {{states('sensor.kaylee_charging_rate')}} mi/h"
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_charging_power:
card:
type: custom:mushroom-template-card
primary: null
secondary: "Charging Power: {{states('sensor.kaylee_charger_power_2')}} amps"
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_outdoor_temp:
card:
type: custom:mushroom-template-card
primary: null
secondary: "Outdoor Temp: {{states('sensor.kaylee_temperature_outside')|round}}°c"
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_inside_temp:
card:
type: custom:mushroom-template-card
primary: null
secondary: "Cabin Temp: {{states('sensor.kaylee_temperature_inside')|round}}°c"
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_location:
card:
type: custom:mushroom-template-card
primary: null
secondary: "Location: {{states('device_tracker.kaylee_location_tracker')}}"
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_energy_added:
card:
type: custom:mushroom-template-card
primary: null
secondary: "Charge Added: {{states('sensor.kaylee_energy_added')}} Kwh"
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_range_added:
card:
type: custom:mushroom-template-card
primary: null
secondary: >-
Range Added: {{state_attr('sensor.kaylee_energy_added','added_range')}}
mi
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_status:
card:
type: custom:mushroom-template-card
primary: null
secondary: |
{% if is_state('sensor.kaylee_shift_state_2','P') %}
PARKED
{% elif is_state('sensor.kaylee_shift_state_2','D') %}
DRIVING
{% elif is_state('sensor.kaylee_shift_state_2','R') %}
REVERSE
{% elif is_state('sensor.kaylee_shift_state_2','N') %}
NEUTRAL
{% endif %}
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 14px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.secondary {
font-size: 14px !important;
position: relative;
overflow: visible !important;
text-align:right;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
styles:
card:
- align-self: start
- width: 500px
- height: 800px
- opacity: 1
- background-color: transparent
- border: none
custom_fields:
tesla_image1:
- position: absolute
- top: 0px
- left: 0px
- width: 500px
tesla_doors:
- position: absolute
- top: 220px
- left: 10px
- width: 150px
tesla_trunk:
- position: absolute
- top: 260px
- left: 170px
- width: 150px
tesla_frunk:
- position: absolute
- top: 220px
- left: 170px
- width: 150px
tesla_windows:
- position: absolute
- top: 260px
- left: 10px
- width: 150px
tesla_chargerdoor:
- position: absolute
- top: 740px
- left: 110px
- width: 150px
tesla_battery_percent:
- position: absolute
- top: 650px
- left: 10px
- width: 170px
tesla_battery_graph:
- position: absolute
- top: 205px
- left: 330px
- width: 170px
tesla_range:
- position: absolute
- top: 610px
- left: 10px
- width: 170px
tesla_odo:
- position: absolute
- top: 690px
- left: 10px
- width: 180px
divider1:
- position: absolute
- top: 290px
- left: 0px
- width: 500px
tesla_image2:
- position: absolute
- top: 310px
- left: 180px
- width: 350px
tesla_front_right_tire:
- position: absolute
- top: 395px
- left: 440px
- width: 70px
tesla_front_left_tire:
- position: absolute
- top: 395px
- left: 195px
- width: 70px
tesla_rear_left_tire:
- position: absolute
- top: 680px
- left: 195px
- width: 70px
tesla_rear_right_tire:
- position: absolute
- top: 680px
- left: 440px
- width: 70px
tesla_charging_rate:
- position: absolute
- top: 570px
- left: 10px
- width: 170px
tesla_charging_power:
- position: absolute
- top: 450px
- left: 10px
- width: 170px
tesla_outdoor_temp:
- position: absolute
- top: 410px
- left: 10px
- width: 170px
tesla_inside_temp:
- position: absolute
- top: 370px
- left: 10px
- width: 170px
tesla_location:
- position: absolute
- top: 330px
- left: 10px
- width: 170px
tesla_energy_added:
- position: absolute
- top: 490px
- left: 10px
- width: 170px
tesla_range_added:
- position: absolute
- top: 530px
- left: 10px
- width: 170px
tesla_status:
- position: absolute
- top: 40px
- left: 160px
- width: 170px
name:
- justify-self: start
- align-self: start
- font-size: 24px
- font-weight: 500
- color: white
state:
- min-height: 80px
- justify-self: start
- align-self: start
- font-size: 18px
- opacity: "0.7"
Can someone please help and tell me what I’ve done wrong.
Thank you