Schriftfarbe in einer Trash Card

Dashboard/Cards/Frontend
1

Hallo,

wie bekomme ich die Farbe geändert in der Trash Card?

Screenshot 2025-01-01 153651
Screenshot 2025-01-01 1536511203×246 61.9 KB

event_grouping: true
drop_todayevents_from: "12:00:00"
next_days: 25
pattern:
  - icon: mdi:flower
    color: var(--color-white)
    type: organic
    pattern: bio
    picture: /local/muell/Bio.png
  - icon: mdi:newspaper
    color: white
    type: paper
    pattern: papi
    picture: /local/muell/Papier.png
  - icon: mdi:recycle-variant
    color: white
    type: recycle
    pattern: grü
    picture: /local/muell/Bio-1.png
  - icon: mdi:delete-empty
    color: white
    type: waste
    pattern: Grau
    picture: /local/muell/Rest.png
  - icon: mdi:dump-truck
    color: white
    type: others
  - label: Tannenbaum
    icon: mdi:whitealendar
    color: white
    type: custom
    pattern: Tanne
    picture: /local/muell/weih.png
  - label: Sperrmüll
    icon: mdi:calendar
    color: white
    type: custom
    pattern: Sperr
    picture: /local/muell/sperr.png
day_style: counter
day_style_format: yyyy.MM.dd
card_style: card
alignment_style: center
color_mode: icon
items_per_row: 2
refresh_rate: 60
with_label: true
layout: default
type: custom:trash-card
entities:
  - calendar.ics_2
use_summary: false
filter_events: true
hide_time_range: false
full_size: false
only_all_day_events: false
grid_options:
  columns: full
card_mod:
  style: |
    :host {
     color: white; 
    }  
    ha-card.tomorrow { margin: 0% 0% 0;
      animation-name: blink;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
    ha-card.today { margin: 0% 0% 0;
      animation-name: blink1;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    } 
    @keyframes blink1  {
       0%,10% {filter: drop-shadow(0px 0px 14px #F00000) drop-shadow(0px 0px 4px #FF0000) drop-shadow(0px 0px 14px #FF0000); }
      91% {filter: none;}
    } 
    @keyframes blink  {
       0%,10% {filter: drop-shadow(0px 0px 14px #FFFF00) drop-shadow(0px 0px 4px #FFFF00) drop-shadow(0px 0px 14px #FFFF00); }
      0% {filter: none;}
    }
2

Ich habe ein ähnliches Problem……würde gerne die Textgrösse ändern


event_grouping: true
drop_todayevents_from: "23:00:00"
next_days: 30
pattern:
  - icon: mdi:flower
    color: lime
    type: organic
  - icon: mdi:newspaper
    color: blue
    type: paper
  - icon: mdi:recycle-variant
    color: amber
    type: recycle
  - icon: mdi:trash-can-outline
    color: grey
    type: waste
  - icon: mdi:cake
    color: purple
    type: others
day_style: custom
day_style_format: dd.MM
alignment_style: left
items_per_row: 1
refresh_rate: 720
with_label: true
type: custom:trash-card
entities:
  - calendar.gebtage
hide_time_range: false
full_size: false
use_summary: false
style: |
  ha-card {
  font-size: 30px !important;
  text-align: center;
  }

Aber leider funktioniert NICHT. Hat jemand eine Lösung dafür?

3

Bei dir fehlt
card_mod:
Das muss vorher auch installiert werden.

4

Danke, klar…habe auch schon bemerkt……aber das Problem wird mit dem Code auch nicht gelöst.


event_grouping: false
drop_todayevents_from: "23:00:00"
next_days: 30
pattern:
  - icon: mdi:flower
    color: lime
    type: organic
  - icon: mdi:newspaper
    color: blue
    type: paper
  - icon: mdi:recycle-variant
    color: amber
    type: recycle
  - icon: mdi:trash-can-outline
    color: grey
    type: waste
  - icon: mdi:flower-tulip-outline
    color: purple
    type: others
day_style: custom
day_style_format: dd.MM.
card_style: card
alignment_style: left
color_mode: background
items_per_row: 1
refresh_rate: 360
with_label: true
type: custom:trash-card
entities:
  - calendar.gebtage
hide_time_range: true
full_size: true
use_summary: false
card_mod: null
style: |
  ha-card {
  font-size: 30px !important;
  text-align: center;
  }
5

Wenn dann so

card_mod:
  style: |
    ha-card {
    font-size: 30px !important;
    text-align: center;
    }

Ist denn card_mod installiert?

6

Das stimmt so nicht, da die Einrückungen nicht simmen

card_mod:
  style: |
    ha-card {
      font-size: 30px !important;
      text-align: center;
    }
7

Card_mod ist installiert….
Ich habe mir Hilfe chatGPT verschiedene Codes versucht, aber leider kein Erfolg… Ich wollte die Textgrösse für ein Dashboard….Wandboard…größer haben….bessere Lesbarkeit.

8

Hi,

habt ihr zufällig eine Lösung gefunden. Leider gehen alle CSS versuche mit card-mod nicht, außer zoom geht beim icon, aber nicht im text

Das geht

card_mod:
  style: |
    ha-card {
      zoom: 168%; 
    }
9

Ja, genau so ist es……die Textgrösse scheint nicht veränderbar zu sein. Schade!

10

Habe noch vieles versucht,
die Farbe lässt sich so verändern:

card_mod:
  style: |
    ha-card {
      --primary-text-color: white !important; /* Standard-Textfarbe */
    }
1 „Gefällt mir“