Thanks! Found a bunch of replies from Ildar in this thread with examples. Fixed some other problems iāve been working with as well.
Pretty certain this was the issue and have fixed now! Thanks!
Markdown with images:
type: markdown
content: |-
![Image](/local/images/test/blue.jpg)
xxx
![Image](/local/images/test/blue.jpg)
yyy
card_mod:
style:
ha-markdown $: |
img:nth-of-type(2) {
height: 100px;
filter: opacity(0.5);
}
Markdown with a table:
type: markdown
content: |
<div class="tg-wrap">
<table width=100%>
<tbody>
{%- for i in range(5) -%}
{{
'<tr>
<td>
<ha-icon icon="mdi:bell"></ha-icon>' +
'<span>' +
states("sun.sun") +
'</span>' +
'</td>
<td>' +
states("sun.sun") +
'</td>
</tr>'
}}
{%- endfor -%}
</tbody>
</table>
</div>
card_mod:
style:
ha-markdown $: |
tr td:nth-child(2) {
color: red;
text-align: right;
}
tr:nth-child(2n) {
background-color: rgba(33,33,33,0.2);
}
tr:nth-child(2) td:nth-child(1) {
color: magenta;
}
tr:nth-child(3) td:nth-child(1) ha-icon {
color: orange;
}
tr:nth-child(4) td:nth-child(1) span {
color: magenta;
}
I am hoping someone can give me some guidance. I am using the markdown card. I would like to change the default td vertical alignment so that in the screenshot, the mdi bell icon and the timestamp text are both vertically aligned to the top instead of the middle/center.
Iām not sure; but from what I can see in my web browserās Developer Tools, it shows that td{}
veritical alignment is being forced by the user agent stylesheet to inherit. I could be wrong.
In any case, I would like to know what is preventing me from changing this; and, the easiest way to change this.
Interesting, Ildar.
I wonder if my original method will now work again, because I did something similar to what you did here when that broke for me. In the end I had to go for another hack.
Iām more reporting my various solutions and attempts here to document it than asking for help. Sharing out of interest.
This was the original approach and the cleanest in my opinion.
(I only see now I posted it under the theme post for some reason. Oops.)
But then that broke, either due to something with card-modās compatibility with HA or a UI change in HA.
I then tried the HTML in markdown as you did here, but couldnāt get it working completely, so in the end I used the custom button card as an HTML container with some JS to build the table, with the styling applied by card-mod.
Can we extend the entity name space to the right to use the free/white area?
With longer names the text is usually cut off (and putting it in another line below is not nice either). Reducing the number field size/padding on the right unfortunately does not extend the entity name to make it expand and make use of the additional free space.
See red box area.
First, thank you for your ācontentā code.
I never used markdown for tables till yesterday/day before, so had ho idea how to draw tables in markdown.
Regarding card-mod.
Sometimes - very rarely - I see some instability for markdown.
What I noticed is (and told about it earlier) - using this
style:
ha-markdown:
$: |
is better than
style:
ha-markdown $: |
While playing with card-mod for tables in markdown, I created 3 similar cards (code will be posted later), all 3 cards seem to be have stable styles. So, cannot find a reason of instabilityā¦
As I said many times, I am not an expert in CSS, only deal with it for card-mod.
Mainly my CSS knowledge comes from ātry-fail-try-successā.
Regarding your code.
table {
border-spacing: 0;
width: 100%;
padding: 8px;
border-radius: var(--ha-card-border-radius);
}
This āborder-radiusā seems to be not working:
ā there is a āpaddingā defined;
ā āoverflowā is default (w/o clipping),
so it does not change borders.
Later I will post a method to define borders.
Next, for this:
th:first-child {
border-top-left-radius: var(--ha-card-border-radius);
}
th:last-child {
border-top-right-radius: var(--ha-card-border-radius);
}
This way to define āborder-radiusā is preferable if:
ā you need to define āborder-radiusā for the ātheadā only;
ā due to some reasons you cannot define āborder-radiusā for ātableā (in this case you will have to define āborder-radiusā for the last row as well).
Next, for this:
tr:nth-child(even) {
background-color: var(--table-row-background-color);
}
The ātrā element is inside ātheadā too.
So, use ātbody tr:nth-child(even)ā path.
BTW, your code for table may be a bit āoptimizedā:
content: >-
Domain | Count
:---|---:
{% for domain in (states | groupby('domain'))[:5] -%}
{%- set name = domain[0].replace('_', ' ') | title -%}
**{{ name }}** | {{ states[domain[0]] | count }} {{"\n"}}
{%- endfor %}
Some more examples for styling tables in Markdown
(the initial idea of @parautenbach)
Here only background defined for a ātheadā & ātbodyā:
type: markdown
content: >
Domain | Count
:---|---:
{% for domain in (states | groupby('domain'))[:5] %} {% set name =
domain[0].replace('_', ' ') | title %} **{{ name }}** | {{ states[domain[0]] |
count }} {# leave blank line below otherwise table won't render #}
{% endfor %}
card_mod:
style:
ha-markdown $: |
table {
width: 100%;
}
th {
background-color: orange;
}
tbody tr {
background-color: cyan;
}
More styles:
ā globally defined āborder-radiusā;
ā removed spacing between cells;
ā paddings for text;
ā colored header text;
ā odd & even rows have diff. background.
card_mod:
style:
ha-markdown $: |
table {
width: 100%;
border-radius: 6px;
border-spacing: 0;
overflow: hidden;
}
th {
background-color: orange;
color: white;
padding: 4px;
}
td {
padding: 4px;
}
tbody tr:nth-child(even) {
background-color: grey;
}
tbody tr:nth-child(odd) {
background-color: cyan;
}
Here how to define āborder-radiusā in a case when the āgloballyā defined āborder-radiusā does not work:
ā we need to keep spacings between cells;
ā have to define āborder-radiusā for ātheadā & last row.
card_mod:
style:
ha-markdown $: |
table {
width: 100%;
}
th {
background-color: orange;
color: white;
padding: 4px;
}
td {
padding: 4px;
}
tbody tr:nth-child(even) {
background-color: grey;
}
tbody tr:nth-child(odd) {
background-color: cyan;
}
th:first-child {
border-top-left-radius: 6px;
}
th:last-child {
border-top-right-radius: 6px;
}
tbody tr:last-child :first-child {
border-bottom-left-radius: 6px;
}
tbody tr:last-child :last-child {
border-bottom-right-radius: 6px;
}
Also more examples/ideas may be found here:
styling flex-table-card
Kind of this?
code
type: entities
entities:
- entity: input_number.number_float
name: some long long long long long
- entity: input_number.number_float
name: some long long long long long
card_mod:
style:
hui-generic-entity-row $: |
.info {
white-space: unset !important;
}
- entity: input_number.number_float
name: some long long long long long
card_mod:
style:
hui-generic-entity-row $: |
.info {
flex: 1 1 50% !important;
}
Ah, itās defined in my custom.js
. Itās from the time when HA didnāt have rounded corners on cards. They since introduced it, but with a larger radius, so Iāve kept mine.
Yes, thatās what I want in my case: only the top left and right corners of the head row must be rounded.
Thanks. Indeed. The whitespace control of Jinja can catch one out. Your version is a bit more maintainable and explicit.
Exactly. But how to apply this on this point (next to the existing
:host {
--ha-textfield-input-width: 50px;
#--text-field-padding: 0px;
}
inside auto-entities)?
Full code
type: grid
columns: 1
square: false
title: š§ Konfiguration
cards:
- type: custom:collapsable-cards
title: šāāļø Bewegungsmelder
defaultOpen: false
buttonStyle: 'font-size: x-large'
cards:
- type: entities
title: null
state_color: true
show_header_toggle: false
entities:
- type: custom:text-divider-row
text: Dauer (Trigger-/Aktiv-Zeit) *
align: center
style: |
:host {
#--text-divider-color: red;
--text-divider-font-size: 16px;
#--text-divider-line-size: 3px;
#--text-divider-margin: 1em 0;
#margin-bottom: 20px;
}
- type: custom:auto-entities
card:
type: entities
title: null
state_color: true
show_header_toggle: false
card_mod:
style:
.: |
ha-card {
border-width: 0px;
margin-bottom: -5px;
margin-top: -10px;
margin-left: -15px;
margin-right: -15px;
}
entities: null
filter:
include:
- entity_id: number.motion_*_duration
options:
secondary_info: last-changed
card_mod:
style: |
:host {
--ha-textfield-input-width: 50px;
#--text-field-padding: 0px;
}
exclude: []
show_empty: true
unique: true
sort:
method: name
reverse: false
In short: how to combine :host
with hui-generic-entity-row
in this case?
Unrelated to the issue: this is a wrong commentary style.
Should be:
/* --text-divider-color: red; */
1st post ā bla bla bla, you know the rest, and your point is:
Fantastic. Only took me 3 minutes this time - getting used to it and therefore hopefully faster - (very) slowlyā¦
This is my final working snippet
- entity_id: number.motion_*_duration
options:
secondary_info: last-changed
card_mod:
style:
.: |
:host {
--ha-textfield-input-width: 50px;
/* --text-field-padding: 0px; */
}
hui-generic-entity-row $: |
.info {
flex: 1 1 50% !important;
}
Since you provided no minimal code, I tested with this:
- type: markdown
content: |
<div class="tg-wrap">
<table width=100%>
<tbody>
<tr>
<td><ha-icon icon="mdi:bell"></ha-icon></td>
<td>long long long long long long long long long long long long long long long long long long long long</td>
<td>xxxxxxx</td>
</tr>
</tbody>
</table>
</div>
The āha-iconā & text elements need to be in different ātdā, otherwise with this
<td><ha-icon icon="mdi:bell"></ha-icon>long long long long long long long long long long long long long long long long long long long long</td>
you will see this:
With these examples I found a bit tricky to get stable results.
This was unstable:
card_mod:
style:
ha-markdown:
$: |
table tbody tr td {
vertical-align: top;
}
and this (contrary to my expectations) was stable:
card_mod:
style:
ha-markdown $: |
table tbody tr td {
vertical-align: top;
}
This one may be used as well:
card_mod:
style:
ha-markdown $: |
:first-child {
vertical-align: top !important;
}
Hi, I would like to change the title and sensor text color of this card, but already playing with it for hours and canāt find it, some css guru here that can help with this?
Thanks in advance!
Kind regards, D
Can you show your current yaml/card_mod, what you have tried and what is the status quo and what is not working as expected?
Iām new to Home Assistant and on a steep learning curve and in need of some help please.
I have this sensor card with large font setup but the header is cutting the text.
Here is the code-
graph: line
type: sensor
entity: sensor.heating_hot_water_tank_735
name: Hot Water Tank
style: |
ha-card
{
--accent-color: red;
}
.header .name {
color: #959595;
font-size: 12px;
font weight: bold
}
.header .icon {
color: #red;
--mdc-icon-size: 28px;
}
.info .value {
color: white;
font-size: 68px;
font-weight: light
}
.info .measurement {
color: white;
font-size: 12px;
}
detail: 2
Is there a way the free header space can be reduced?
Thanks Steve
(unrelated) this is wrong, use simply this
color: red;
or - if you need to comment:
/* color: red; */