Most probably easy one question but I stuck. I have no problem to style with card-mod until multiple-entity-row.
ha-card do not works, nor multiple-entity-row, neither :host
e.g.
style: |
:host {
background-color: hsla(60,15%,60%,0.4);
}
Found it…!
style:
ha-card > text-divider-row:
$: |
h2.text-divider::before {
background: red;
}
h2.text-divider::after {
background: red;
}
I’m trying to simplify my configuration but am struggling with css as I’m a real beginner 
So this is how it looks like currently:
I’d like to get the color coding from the mini-graph-card embedded in the markdown like I tried with the “Schlafzimmer” entry already.
Formatting everything as h1 cannot really be the solution, so the question is which tags do I need to use to get the four lines coloured differently?
Currently the code looks like this:
- content: |
# Schlafzimmer:
Emma:
Jakob:
Badezimmer:
type: markdown
style:
.: |
ha-card {
margin: 0px 0px 0px 0px;
box-shadow: none;
}
ha-markdown:
$: |
h1 {
font-size: 15px !important;
font-weight: normal !important;
padding: 0px 0px 0px 8px !important;
border-left: 3px solid #fc5c65;
color: var(--card-header-text-color);
}
Any help is appreciated
I’m sure this has been asked, but I’ve searched for a while and can’t find it.
I’m want my badge to change color based on a binary_sensor state, but I want it to happen instantly. Right now it only updates if I refresh the app. Is it possible to force it to update immediately the way the status icon does?
Here’s an example of what I have:
- entity: binary_sensor.house
style: |
:host {
--label-badge-blue: {% if is_state('binary_sensor.house', 'on') %} red {% else %} green {% endif %};
}
Is it possible to style the border of a table on a ha-card? I am visualizing a table on a markdown card and I want to set the border.
I noticed instant color changes work on www and not in the app, so I’m assuming it’s just a limitation of the app.
I have tried many things, but I am unable to get it work. Could someone help me, how to set the border of a table on a markdown card?
My config:
- type: markdown
content: |
| Time | Cost | Energy |
|------|------|--------|
| Actual month | {{ states.sensor.indego_relay_cost_1_month_ago.state }} | bla |
debug_cardmod: true
style: |
table, th, td {
border: 1px solid black;
}
The console ouput:
Applied styles to:
<ha-card>
#shadow-root (open)
<!---->
<slot>
↪ <ha-markdown> reveal
↪ <card-mod> reveal
</slot>
<!---->
<ha-markdown breaks class="no-header">
#shadow-root (open)
<!---->
<ha-markdown-element>
<table>
<thead>
<tr>
<th>Time</th>
<th>Cost</th>
<th>Energy</th>
</tr>
</thead>
<tbody>
<tr>
<td>Actual month</td>
<td>June 32</td>
<td>bla</td>
</tr>
</tbody>
</table>
</ha-markdown-element>
<!---->
</ha-markdown>
<card-mod>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</card-mod>
</ha-card>
The result:
I’m having a hard time applying a style to both #head and inside the shadow-root of #head hui-section-row (inside of #head).
style:
'#states div':
fold-entity-row:
$: |
#head {
margin-bottom: -15px;
font-size: 18px;
}
ha-icon {
margin-top: 10px;
}
'#head':
hui-section-row:
$: |
div.label {
color: var(--primary-text-color) !important;
}
The ha-icon and #head styles work, but the .label style does not.
If anyone can help me out here, I’d really appreciate it. TIA
Try this
style:
ha-markdown:
$: |
table, th, td {
border: 1px solid black;
}
Hi All, This is probably a simple question and I apologise in advance but I just can’t seem to figure its out.
I am trying to reduce the space between each of the entities and everything i have tried has not worked. I was also trying to resize the icons (just in case the larger versions were also preventing the spce from being reduced)
Code is below.
type: entities
style: |
ha-card {
font-size: 11px;
padding: 0px 0px 5px 0px;
line-height: 10px;
line-spacing: 1px;
border: 0px;
margin: 0px;
--iron-icon-width: 5px;
--iron-icon-height: 5px;
}
entities:
- entity: sensor.bom_last_forecast_update
icon: 'mdi:satellite-variant'
name: 'Last Forecast:'
- entity: sensor.bom_station_name
icon: 'mdi:transmission-tower'
name: 'BOM Station:'
- entity: sensor.bom_last_observation_update
icon: 'mdi:update'
name: 'Latest Observations:'
Would appreciate any assistance.
Thanks
I don’t think you can. That spacing is standard for an entities card so far as I know
For anyone looking to reduce the spaces between entities, this is how I did it - hope it helps
code is as follows:
type: entities
style:
.: |
#states > * {
font-size: 11px;
margin: -28px 210px -30px -60px !important;
entities:
- entity: sensor.bom_station_name
icon: nothing
name: 'BOM Station:'
- entity: sensor.bom_last_observation_update
icon: nothing
name: 'Latest Observations:'
- entity: sensor.bom_next_forecast_update
icon: nothing
name: 'Next Forecast:'
If anyone knows how to left align the values please let me know!
That did the trick. Thank you.
I’ve used card-mod to style other cards successfully, but I’ve now read (and re-read) the readme extensively and have tried to read any other relevant post in this thread, and I’m still not sure how to do the following:
I want the text of an entity in a Glance card to wrap rather than be clipped by ellipses, such that this:
becomes this:
You can see from the chrome developer tools style dialog in the second picture that I’ve manually disabled “white-space: nowrap;” to achieve a visual of what I want.
I just cannot wrap (no pun intended 
) my head around how to tell card-mod to do the same thing. Any suggestions welcome at this point!
I’m having an issue, or maybe found a bug. I can set the styles I’d like, but some styles don’t persist through a page refresh.
Maybe there’s an easier/better way to set these styles?
style:
'#states div:last-child fold-entity-row':
$: |
#head {
margin-bottom: 0px;
font-size: 18px;
}
'#states div':
fold-entity-row:
$: |
#head {
margin-bottom: -15px;
font-size: 18px;
}
ha-icon {
margin-top: 10px;
}
'#states div fold-entity-row':
$:
'#head hui-section-row':
$: |
.label {
color: var(--primary-text-color) !important;
}
After saving, the card appears how I’d like it to look
With debug mode I can see ‘Applied styles to’ and the shadow-root element
But when I refresh the page, the .label style is no longer applied
And ‘Applied styles to’ and the shadow-root element for the .label style are missing from the debug console.
This is the card html I’m trying to edit
Any thoughts or suggestions?
Thanks, that wasn’t quite it, but was enough of a clue that after a good night’s sleep and a fresh start this morning, I solved it. The glance card, as I have it configured, didn’t have a .name class anywhere in it (I have show_name: false in the settings). But I was able to get what I wanted to work with the white-space style applied directly to the div of the entity in question:
- entity: sensor.dark_sky_summary
name: Condition
style: |
div {
white-space: normal;
}
Hi, I can’t seem to find a solution to my problem and was hoping any of you could help. Kinda new to css so bear with me.
I’m using a multiple entity row to display multiple buttons alongside an entity.
Now I want to colour the first entity icon like this:
But when I try this with the code below, all three icons get coloured:
Lovelace YAML:
- type: entities
title: test
entities:
- entity: input_number.turflijst_duikboot_pils
type: custom:multiple-entity-row
name: test
secondary_info: last-changed
show_state: false
icon: mdi:cart
debug_cardmod: true
style:
.: |
"state-badge":
$: |
ha-icon {
color: green;
}
entities:
- icon: mdi:plus
tap_action:
action: call-service
service: input_number.increment
service_data:
entity_id: input_number.turflijst_duikboot_pils
- entity: input_number.turflijst_duikboot_pils
name: ""
- icon: mdi:minus
tap_action:
action: call-service
service: input_number.decrement
service_data:
entity_id: input_number.turflijst_duikboot_pils
HTML (simplified)
<multiple-entity-row>
#shadow-root
<state-badge icon>
#shadow-root
<ha-icon data-state="-5.0" style>
#shadow-root
<ha-svg-icon>...</ha-svg-icon> ###### this icon
</ha-icon>
</state-badge>
<div class="flex">
<div class="info">...</div>
<div class="entity">
<span></span>
<div>
<state-badge class="icon-small" icon="">
#shadow-root
<ha-icon data-state="-5.0" style>
#shadow-root
<ha-svg-icon>...</ha-svg-icon> ###### not this icon
</ha-icon>
</state-badge>
</div>
</div>
<div class="entity">...</div>
<div class="entity">
<span></span>
<div>
<state-badge class="icon-small" icon="">
#shadow-root
<ha-icon data-state="-5.0" style>
#shadow-root
<ha-svg-icon>...</ha-svg-icon> ###### not this icon
</ha-icon>
</state-badge>
</div>
</div>
</div>
</multiple-entity-row>
The console tells me it looks for state-badge, so I tried both using
style:
.: |
"state-badge:not([icon-small])":
$: |
ha-icon {
color: green;
}
and
style:
.: |
"state-badge:nth-of-type(1)":
$: |
ha-icon {
color: green;
}
but both result in it finding and selecting all three state-badges,do you guys have any idea how to accomplish only selecting the most left icon?
Thanks!
Great but you forgot to tell us your problem.
yeah my bad, hit ctrl enter by accident, I fixed it!