I am trying to display colorized text in Markdown card. However, color is being ignored for some reason. I’d expect color text to be a fundamental feature… maybe I’m doing something wrong?
type: markdown
title: "Color Test"
content: |
<span style="color: red;">This is red text.</span>
<br>
<span style="color: blue;">This is blue text.</span>
<br>
<span style="color: green;">This is green text.</span>
<br>
<span style="color: yellow;">This is yellow text.</span>
You may be want to take a look at the HACS integration GitHub - PiotrMachowski/Home-Assistant-Lovelace-HTML-Jinja2-Template-card: This card displays provided Jinja2 template as an HTML content of a card. It uses exactly the same engine as Home Assistant in Developer tools.
Does anyone know a WORKING way to colorize a text?
This does not work (as was already said):
type: markdown
title: "Color Test"
content: |
<span style="color: red;">This is red text.</span>
This does work:
content: |
<font color=red>This is red text.</font>
but “font” is considered as deprecated; also it does not process CSS color vars properly - see this issue (had to close it since “font” is deprecated):
content: |
<font color=var(--red-color)>This is red text.</font>
Internet is full of copy/pasted “solutions” which in fact may not work.
P.S. Please do not suggest card-mod.
most reliable is using hex colors:
<h3><font color=#152b81>Lange termijn</font></h3>
theme colors are not used in the markdown.
not aware font is deprecated though, I use it all over, and no issue. even set a fat color on mdi icons…
will try and find the deprecation
oops thats ancient indeed…
well, replace it with
<h3 style="color=#152b81">Lange termijn</h3>
seems to work just as fine…
strike that… even though it is the advised way to do as stated all over the Stackoverflow posts, it does not work in HA markdown.
a plain example I took:
<span style="color:blue">some *This is Blue italic.* text</span>
renders the text alright, but without the color. Same with a hex color.
so we are indeed left to do stuff like:
ha-markdown $: |
h3 { font-family: “Helvetica, sans-serif”; font-size: 24px; color: #152b81; }
h4 { color: #152b81; }
but a Header to a text makes it move to its own line:
so for my card here, that is no good,
and I am left with the one option of the font tag…
or…wait… this works too 
ha-markdown $: |
h3 { color: #152b81; }
b {color: #152b81; }
apparently we can use the b from the <b> tag there too, probably any tag then?
type: entities
title: Vooruitzichten
card_mod:
class: class-header-margin-no-color
style: |
.card-header {
background: rgb(226,239,248);
color: rgb(21,43,129);
}
entities:
#buienradar dark color #152b81 rgb(21,43,129)
#buienradar light color #e2eff8 rgb(226,239,248)
- type: custom:hui-element
card_type: markdown
<<: &style
card_mod:
style:
.: |
ha-card.type-markdown {
margin: 0 -16px;
box-shadow: none;
}
ha-markdown $: |
h3 {color: #152b81;}
b {color: #152b81;}
# things like h4 { font-family: “Helvetica, sans-serif”; font-size: 24px; color: #152b81; }
content: >
<h3>Korte termijn</h3>
<p>{{state_attr('sensor.buienradar_korte_termijn','forecast')}}</p>
{% from 'easy_time.jinja' import month %}
{% set kort = 'sensor.buienradar_korte_termijn' %}
{% set van = state_attr(kort,'startdate')|as_datetime %}
{% set tot = state_attr(kort,'enddate')|as_datetime %}
Geldig van <b>{{van.day}} {{month(van)}}</b> tot <b>{{tot.day}} {{month(tot)}}</b>
- type: divider
- type: custom:hui-element
card_type: markdown
<<: *style
content: >
<h3>Lange termijn</h3>
<p>{{state_attr('sensor.buienradar_lange_termijn','forecast')}}</p>
{% from 'easy_time.jinja' import month %}
{% set lang = 'sensor.buienradar_lange_termijn' %}
{% set van = state_attr(lang,'startdate')|as_datetime %}
{% set tot = state_attr(lang,'enddate')|as_datetime %}
Geldig van <b>{{van.day}} {{month(van)}}</b> tot <b>{{tot.day}} {{month(tot)}}</font>
- type: divider
- type: custom:hui-element
card_type: markdown
<<: *style
content: >
{% set datum =
state_attr('sensor.buienradar_weerbericht','published')|as_datetime %}
{% from 'easy_time.jinja' import weekday, month %}
{% set gepubliceerd =
weekday(datum) ~' '~datum.day~' '~month(datum)~' om '~datum.strftime('%H:%M') %}
<h3>Vooruitzicht van {{gepubliceerd}}</h3>
<h3>Samenvatting:</h3>
<p>{{state_attr('sensor.buienradar_weerbericht','summary')}}</p>
- type: custom:fold-entity-row
card_mod: !include /config/dashboard/card_mods/scroll_fold.yaml
head:
type: section
label: Uitgebreid
card_mod: #mimic html font <h3>
style: |
.label {
color: rgb(21,43,129) !important;
font-size: 1.17em;
font-weight: 700 !important;
margin-left: 0px !important;
}
entities:
- type: custom:hui-element
card_type: markdown
<<: *style
content: >
{% set datum =
state_attr('sensor.buienradar_weerbericht','published')|as_datetime %}
{% from 'easy_time.jinja' import weekday, month %}
{% set gepubliceerd =
weekday(datum) ~' '~datum.day~' '~month(datum)~' om '~datum.strftime('%H:%M') %}
<!--- <h3>Uitgebreid:</h3> -->
<p>{{state_attr('sensor.buienradar_weerbericht','text')}}</p>
Gepubliceerd op: <b>{{gepubliceerd}}</b>
Marius, thanks for investigation.
Ofc we can use card-mod… But it may be mainly used for separate DOM elements - i.e. we can apply a style for “h3” or “b” text etc, but we cannot colorize a particular word “of same type”, I mean:
content: |-
<h3>xxx this_one_must_be_colored xxx</h3>
nope.
well, we can, with <font> but no modern css way that I could think of.
btw, I changed the above to
ha-markdown $: |
{% set kleur = states('sensor.buienradar_contrast_kleur') %}
h3 {color: {{kleur}};}
b {color: {{kleur}};}
which is kind of a nice touch, so templates work there also
the colors needed to be adjusted to the theme, so I figured I make a template
template:
- trigger: #needs fix
trigger: state
entity_id: input_select.theme
sensor:
- unique_id: buienradar_contrast_kleur
state: >
{% set dark = states('input_select.theme') is search('ight|Dark|Matrix',ignorecase=True) %}
{{'#e2eff8' if dark else '#152b81'}}
#buienradar dark color #152b81 rgb(21,43,129)
#buienradar light color #e2eff8 rgb(226,239,248)
and have that take care of it
Why not use a span for inline styling?
This is <span>inline</span> text
See above about font color, it is considered as deprecated and does not support variables. Although it works with named colors…
Dear Ildar_Gabdullin i think that your are more expert for about css and thomasloven cards. I need help if you help me i will be very happy.
I am using panel view with three js home object i have button overlay the panel with css and z index (card mod). button open overlay cards that have card mod (css index etc.)
ex. (horizontal stack card) i put the card mod code at the beginning of the hor.st.card i lost visiual editor interface because of the first code custom card.
Question;
How can i add mod card (z index position very impotant for my overlay desing) without losing visiual editor interface which is important for me because of no coding experience.(new update of ha more visiual for adding new users like me)
Thank you
Hello! I am far away from a PC, cannot help you.
Suggest to create a SEPARATE thread for your question since here it is an off topic.
I will try to think about it.
Also, please add pictures of what you got and what you want, and a properly formatted code.
Yes, this can work. If you just use spans you can use nth-child to pick each. You will need to count for any newlines <br /> or other elements between your spans.
type: markdown
content: |-
<span>I am text span 1 and will be red</span>
<span>I am text span 2 and will be green</span>
card_mod:
style:
ha-markdown $: |
ha-markdown-element > p > span:nth-child(1) {
color: red;
}
ha-markdown-element > p > span:nth-child(3) {
color: green;
}
Of course card-mod can be used if a text is wrapped into html tags. But native markdown methods are preferable. Unfortunately, they either do not work or have limitations… not to mention that working methods are declared as “deprecated” in various internet places.
it’s not just several places, it’s in the official MDN Web docs:
spans is about as close as it gets to official methods, as is described in the available guides on Markdown like 5.1 Font color | R Markdown Cookbook or Hacks | Markdown Guide even though the latter mentions that to be a hack
I believe I still use that deprecated method however… but, considering this is so widely used, I somehow have faith it wont break for some time.
this is an option
card_mod:
style:
.: |
ha-card {
margin: 0px 0px -8px 0px;
}
ha-markdown $: |
{% set kleur = states('sensor.buienradar_contrast_kleur') %}
h3 {color: {{kleur}};}h2 {color: {{kleur}};}
b {color: {{kleur}};}
but only for the tags, was that already mentioned above?
ah yes, sorry, repeating myself.
never mind me.