I want to set notifications in my markdown which have a different background depending on the message it is displaying. This is possible with the <ha-alert> part, but the problem with this is that we are bound to the alert type colors and icons.
For example, I would love to have my markdown notify me when one of the garbage bins need to be put at the street and depending on the garbage bin, color the background of the message to the bin that needs to be put at the street (green background for compost, grey for residual waste, blue for paper/cardboard and orange for plastic/cans). This background color thing would increase not only visibility, but also let me know which one it is that needs to be put outside.
I do know that you can change font color, but isn’t there a way to also change background color of the message in a similar way?
I tried <div> and that is detected by markdown, but it doesn’t pick up on styles for this, tried <body> but that doesn’t work in markdown and any other css related term is also not working.
I was eventually thinking of creating a special tag similar to the ha-alert ones in the markdown template files, but I have no idea where to find those either…
can somebody guide me in the right direction?
also, I tried the button-text-card, but that shows a button instead of a full markdown card which makes it very limited to show more then 1 message inside.
after several hours of searching, reading and asking people I finally was able to fix this issue so for whoever is looking for a similar this, here is the solution and results
markdown code:
{% if is_state('sensor.hvc_hvc_afval_kalender_morgen', 'gft') %}
<div><ha-icon icon=mdi:compost></ha-icon> GFT moet aan de straat gezet worden</div>
{% elif is_state('sensor.hvc_hvc_afval_kalender_morgen', 'restafval') %}
<div><ha-icon icon=mdi:delete></ha-icon> Restafval moet aan de straat gezet worden</div>
{% elif is_state('sensor.hvc_hvc_afval_kalender_morgen', 'pmd') %}
<div><ha-icon icon=mdi:trash-can-outline></ha-icon> PMD moet aan de straat gezet worden</div>
{% elif is_state('sensor.hvc_hvc_afval_kalender_vandaag', 'papier') %}
<div><ha-icon icon=mdi:package-variant-closed></ha-icon> Papier moet aan de straat gezet worden</div>
{% endif %}
ha card mod code:
card_mod:
style:
ha-markdown $: |
ha-markdown-element div {
max-width: 350px;
height: auto;
padding: 5px;
background-color:
{%- set sensor = states('sensor.hvc_hvc_afval_kalender_morgen') %}
{%- set sensor2 = states('sensor.hvc_hvc_afval_kalender_vandaag') %}
{%- if sensor == 'gft' and sensor != 'restafval' and sensor != 'pmd' and sensor2 != 'papier' %} rgba(0,170,0,0.9);
{%- elif sensor == 'restafval' and sensor != 'gft' and sensor != 'pmd' and sensor2 != 'papier' %} rgba(94,94,94,0.7);
{%- elif sensor == 'pmd' and sensor != 'gft' and sensor != 'restafval' and sensor2 != 'papier' %} rgba(255,85,0,0.9);
{%- elif sensor2 == 'papier' and sensor != 'pmd' and sensor != 'restafval' and sensor != 'gft' %} rgba(0,0,255,0.7);
{%- else %}
{%- endif %}
border-radius: 7px;
}
.: |
ha-markdown {
padding-right: 4px !important;
}
ha-card{background: rgba(0,0,0,0.7); }
do you know how i can give the div and id or class so i can set the background of more than 1 div ?
reading this
tells us that it id and class etc are stripped out but it is configurable with sanitizeOptions
do you know how to set this within home assistant card ?
so for whoever is looking for a similar this, here is the solution and results 
