Mushroom Template fonts

Configuration Frontend
1

Hi,

I am new with Home Assistsant. Now I am struggling with font sizes and colors for the primary and secondary name with this part of the code. This is a snippit of it:

  - type: custom:mushroom-template-card
    icon: mdi:alarm-light
    entity: input_text.alarmstatus
    secondary: "{{ states('input_text.alarmstatus') }}"
    icon_color: >-
      {% if 'ingeschakeld' in states('input_text.alarmstatus') | lower | trim %}
        yellow
      {% elif 'geeft alarm' in states('input_text.alarmstatus') | lower | trim
      %}
        red
      {% else %}
        green
      {% endif %}
    primary: >-
      {% if 'ingeschakeld' in states('input_text.alarmstatus') | lower | trim %}
        Ingeschakeld
      {% elif 'geeft alarm' in states('input_text.alarmstatus') | lower | trim
      %}
        Alarm
      {% else %}
       Uitgeschakeld
      {% endif %}
    card_mod:
      style: |
        ha-card {
         font-variant: normal;
         }

The ha-card part; i placed as an example, because this part works OK. But according to this wiki: Mushroom Cards Card Mod Styling/Config Guide - Community Guides - Home Assistant Community I need to add this in order to change the primary and secondary fonts:

card_mod:
  style:
    mushroom-state-info$: |
      .container {
       --card-secondary-font-size: 20px;
       --card-primary-font-size: 20px;
      }

So this makes my code that I try like this:

    card_mod:
      style: |
        mushroom-state-info$: |
          .container {
           --card-secondary-font-size: 20px;
           --card-primary-font-size: 20px;
          }
        ha-card {
         font-variant: normal;
         }

But nothing happens; so I a am doing something wrong; but I don’t know what it is. Somewhere maybe in the syntax or something else.
I also want allign the icon to the left and the text to the right; but that is the next problem.
Anyone knows how I can do this with a Mushroom template card?

2

Try out this

type: custom:mushroom-template-card
icon: mdi:alarm-light
entity: input_text.alarmstatus
secondary: "{{ states('input_text.alarmstatus') }}"
primary: |-
  {% if 'ingeschakeld' in states('input_text.alarmstatus') | lower | trim %}
    Ingeschakeld
  {% elif 'geeft alarm' in states('input_text.alarmstatus') | lower | trim %}
    Alarm
  {% else %}
   Uitgeschakeld
  {% endif %}
color: |-
  {% if 'ingeschakeld' in states('input_text.alarmstatus') | lower | trim %}
    yellow
  {% elif 'geeft alarm' in states('input_text.alarmstatus') | lower | trim %}
    red
  {% else %}
    green
  {% endif %}
features_position: bottom
card_mod:
   style: |
     #info {
       --tile-info-secondary-font-size: 40px;
       --tile-info-primary-font-size: 50px; 
      }
1 Like
3

Ow my god; busy for hours and you solve it in like 2 minutes … Thanks :smile: Do you by chance also know the font colors command? Tried some; but I haven’t found it yet.

4 
card_mod:
  style: |
    #info {
      --tile-info-secondary-font-size: 20px;
      --tile-info-primary-font-size: 20px; 
      --tile-info-primary-color: orange;
      --tile-info-secondary-color: blue;
      }

Check out these main Mushroom threads here and here

2 Likes
6

Thanks for the help. I think I have my card setup now. Need to test it further ofcourse; but it seems to work OK. Styling is the most difficult thing with this; I would never found it without you’re help.