Issues with Borders and transparent text

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)

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

I don’t see borders, but I do see backgrounds. Can you point out what you consider a border in you pic?

Screenshot_2

I’ve circled the parts I mean, as you can see there is a colour difference so it looks like a ‘border’ if that makes it clearer.

It does, I avoid using card_mod with button cards if possible. I’ll tackle a solution.

1 Like