Card-Mod / Welcome Card / Mushroom UI

Configuration Frontend
1

Trying to use Card-Mod to give me the Welcome Card from Minimalist UI
Minimalist Link

I have tried to use the Minimalist UI, but to no avail, so wanted to look at the custom CSS route.

Any help would be appreciated TIA.

cards:
  - type: custom:mushroom-template-card
    primary: |2-
                 {%- if now().hour < 12 -%}Morning
                 {%- elif now().hour < 18 -%}Afternoon
                 {%- else -%}Evening{%- endif -%}, {{user}}
    secondary: ''
    icon: mdi:home
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: action
            icon_color: red
            tap_action:
              action: navigate
              navigation_path: media-control
            icon: mdi:remote
            hold_action:
              action: none
            double_tap_action:
              action: none
          - type: action
            icon_color: blue
            tap_action:
              action: navigate
              navigation_path: audio
            icon: mdi:radio
          - type: action
            icon_color: blue-grey
            icon: ios:hifispeaker-fill
            tap_action:
              action: navigate
              navigation_path: media-settings
          - type: action
            icon_color: amber
            hold_action:
              action: none
            double_tap_action:
              action: none
            icon: mdi:lightbulb
            tap_action:
              action: navigate
              navigation_path: all-lights
          - type: action
            icon_color: green
            icon: mdi:timeline-clock
            hold_action:
              action: none
            double_tap_action:
              action: none
            tap_action:
              action: navigate
              navigation_path: automations
        alignment: justify```
2

I would put all cards in a vertical-stack card and replace the mushroom-template-card with a mushroom-title-card.

1 Like
3

Thanks so much,
That helped

4

Where I have mdi: clock - how would I add that to this subtitle line? Obvioulsy at the minute it isnā€™t showing.

cards:
- type: custom:mushroom-title-card
title: |2-
{%- if now().hour < 12 -%}Morning
{%- elif now().hour < 18 -%}Afternoon
{%- else -%}Evening{%- endif -%}, {{user}}
subtitle: >-
ā€œmdi:clockā€ {{state_attr(ā€˜calendar.binsā€™, ā€˜messageā€™)}} on {{
as_timestamp(state_attr(ā€œcalendar.binsā€,ā€œstart_timeā€) |
default(now(),true) )| timestamp_custom(ā€˜%-d %bā€™) }}

5

mdi icons are not possible yet, but emojis.

1 Like
6

did you manage to get it to work? can you share the code i copied the above code in mushroom title card/custom card only get error. Any help would be appreciated