Using CARD MOD card to format the TEAMTRACKER CARD

The way the ha-teamtracker-card is displayed can be altered using the lovelace-card-mod card.

Examples include the following:

Change the size of the card

type: custom:teamtracker-card
entity: sensor.tt_sensor
card_mod:
  style: |
    ha-card {
        font-size: .7em; 
        line-height: .7em;
    }

• Changing the font and line size will also change the size of the images
• Size greater than 1 will increase size, size less than 1 will decrease size

Change color of fonts

type: custom:teamtracker-card
entity: sensor.tt_sensor
card_mod:
  style: |
    ha-card {
        color: red;
    }

• This will change the color of all fonts to red

Hide specific components on the card

type: custom:teamtracker-card
entity: sensor.tt_sensor
card_mod:
  style: |
    .odds {
        display: none;
    }
    .bar-wrapper {
        display: none;
    }

• This will hide the bottom status bar from displaying on the IN card and Odds from displaying on the PRE card

Hide full rows on specific cards

type: custom:teamtracker-card
entity: sensor.tt_sensor
card_mod:
  style: |
    .pre-row2 {
         display: none;
    }

• This will hide the second row on the PRE card (which shows the Venue)

Replace a specific component with another sensor attribute

type: custom:teamtracker-card
entity: sensor.tt_sensor
card_mod:
  style: |
    .odds {
        visibility: hidden;
    }
    .odds::after {
        visibility: visible;
        content: "{{ state_attr('sensor.tt_sensor', 'league') }}";
    }

• This will replace the odds attribute on the card with the league attribute.

Disable action on single or double-click events

type: custom:teamtracker-card
entity: sensor.tt_sensor
card_mod:
  style: |
    ha-card {
      pointer-events: none;
    }

• This will disable URLs and more-info from displaying on single and double-click events.