How to use a templated title in an Markdown Card?

Configuration Frontend
1

Here is my question : I try to put a title to a horizontal stack. Maybe a picture would be clearer :

Capture d’écran du 2023-10-22 20-32-39

So I tried this code (But, as you can see, the result is not what I expected) :

title: " {{ area_name('sensor.temp_hum_1_temperature') }} "
cards:
  - type: custom:mini-graph-card
    entities:
      - sensor.temp_hum_1_temperature
    line_color: '#e16366'
    icon: mdi:tree
    line_width: 8
    font_size: 75
    unit: °C
    name: Température
  - type: custom:mini-graph-card
    entities:
      - sensor.temp_hum_1_humidity
    line_color: '#4e93dd'
    icon: mdi:wave
    line_width: 8
    font_size: 75
    unit: °C
    name: Humiditée

I asked in the mini-graph github and thanks to ildar170975 I understood my issue is using a templated title in an horizontal-stack card.

My first research leads me to this post :https://community.home-assistant.io/t/templates-for-horizontal-stack/153854

I hadn’t the time to try this solution. If someone could confirm I’m going the right direction, you’re welcome :slight_smile:

2

you can use Custom:mushroom-card, available in HACS

type: custom:mushroom-title-card
title: Hello, {{ user }} !!!

How ever your biggest challenge is to learn to write a template :slight_smile: , have you tested your “template” in the Template-Editor ?

Here is another example for mushroom-title-card

type: custom:mushroom-title-card
title: 'The Sun is {{ states(''sun.sun'') }}'

PS: Various cards have “some twists” in how they want/interpret templates

1 Like
3

The thread’s title “template in mini-graph-card” is wrong, you admitted yourself that this a stack card’s title.
A possible solution could be using a standard Markdown card placed in a vertical stack with your horizontal stack. Markdown supports templates and may be styled (font size) to mimic a card’s title.

4

No, this is about defining cards inside a stack. You need to define a title only.

5

Thanks a lot for all the answers.

First : I modified the title of my post, to be clearer.
Then, as I come from Domoticz and am a total beginner in HA, I carefully read your messages and tried to make all the pieces match.

And hopefully, it worked as I wanted:

Capture d’écran du 2023-10-23 19-21-12

cards:
 - type: markdown
   content: |
     {{ area_name('sensor.temp_hum_1_temperature') }}
 - type: horizontal-stack
   cards:
     - type: custom:mini-graph-card
       entities:
         - sensor.temp_hum_1_temperature
       line_color: '#e16366'
       icon: mdi:tree
       line_width: 8
       font_size: 75
       unit: °C
       name: Température
     - type: custom:mini-graph-card
       entities:
         - sensor.temp_hum_1_humidity
       line_color: '#4e93dd'
       icon: mdi:wave
       line_width: 8
       font_size: 75
       unit: '%'
       name: Humiditée

Thanks to you, I think I now understand what is a card, how to mix them and what are markdown cards. I’m still struggling to perfectly understand how to write templates, but I hope to be in the right direction.

1 Like
6

So am i, and it doesn’t help with all “variations” i.e mushroom-cards and custom-button-cards, beside card-mod :slight_smile:

Btw, in markdown-card you Center the Text with these “tags”

`content: <center>{{ area_name('sensor.temp_hum_1_temperature') }}</center>`

And you are right in your approach of using i.e nested-stacks , i.e a vertical for the entities/cards “belonging to each other” , then you can have horizontal/vertical stacks/cards inside the initial vertical stack etc.

7

Uses JS.

Uses jinja w/o any issues. Means - same results in “Dev tools - Template” and in a card.

1 Like
8

Yes, i knew very little JS when i started with HA, and never heard about jinja Nor Yaml :slight_smile:
My best(but old) knowledge was html, css

9

You are welcome, I am from QNX + C + Fortran + asm from 1995, never dealt with css & html )

1 Like