I made a solution that’s a single file and a couple of lines added to the light button yaml. It’s been working really well for me.
I am trying to change a few things on a couple of my cards and I’m not having any luck.
Regarding the grid card header:
- move the header to the far left (no indention)
- increase the font weight
This is what I have for grid fonts in my themes.yaml. I have changed the font- size and font-weight, reloading the themes through the dev tools and using the new quick reload without success.
grid-layout$:
hui-grid-card:
$: |
/* default */
h1 {
font-size: 7.4vw !important;
line-height: 0 !important;
font-weight: 800 !important;
color: rgba(255, 255, 255, 0.8) !important;
padding: 1vw 0 2vw 0 !important;
letter-spacing: 0.006vw !important;
}
/* portrait */
@media screen and (max-width: 1200px) {
h1 {
font-size: 7.4vw !important;
line-height: 1.1vw !important;
}
}
/* phone */
@media screen and (max-width: 800px) {
h1 {
font-size: 7.4vw !important; #5.5
font-weight: 800 !important;
line-height: 6vw !important;
margin: 2vw 0 0 0 !important;
}
}
#custom variables
ha-card-background-color: rgba(34,38,39,0.9)
ha-card-header-background-color: rgba(48,52,52,0.8)
custom-layout-card-padding: 1.0vw #distance around edge of gird card
custom-button-card-border-radius: 8% #9.5
sidebar-time-font-size: 5.2vw
sidebar-time-line-height: 4.3vw
sidebar-font-size: 1.42vw
button-card-font-size: 2.00vw #Font size 1.45
button-card-font-weight: 500
sidebar-line-height: 2vw
card-content-padding: 1.4em 2.2em 1.6em 1.5em
bar-card-color: "#303435"
I would also like to wrap the text in the “body” of the card so that its on two lines if it doesnt fit on the width of the card.
Hi, thx for awesome card. I dont have initial time on my electrolux washer but trying to figure out how i could make it. Some template like:
When sensor.remain_time goes from 0 to XXX, take a “snapshot” of that value and save in to a “input_number” sensor? Is that possible? Sorry im not so good at this but just brainstorming 
Thanks! was looking for icons.yaml file, found it within button_card_templates.yaml
my grid card heading (Office) has no indent and is thicker, but I don’t think iv done anything custom to it
As for wrapping the body text (Door) that will brake some things, however, look for - text-overflow: unset in the base .yaml template and remove that, that will let the text overflow (again I don’t recommend it)
Do you have a state like “running” on your washer? you could look at using the last_changed of the state
see this post for details
Ye, that could work. I can template “last_changed” to minutes, but when the washer is running, last_changed incrases im minutes while time_left decrases. Can figure out the math to make it in percent lol.
edit: figured out the math lol, now the hard part : code.
So i take left time + last changed time = total cycle time
(left time / total cycle time) * 100 will give me time in percent…
edit 2:
got it, in laundry.yaml
initial_time: > {{ ((as_timestamp(now()) - as_timestamp(states.sensor.electrolux_tvattis_wm1_appliancestate.last_changed)) / 60) | round(0) }}
and in ui-lovelace.yaml:
circle_input: > [[[ if (entity) { let initial_time = entity.attributes.initial_time, remain_time = entity.attributes.remain_time, total_time = remain_time + initial_time, percent = (remain_time / total_time) * 100, result = Math.round(percent); return [ 'Washing', 'Rinsing', 'Draining', 'Spinning'].includes(entity.state) ? result : 'NA'; } ]]]
Thx for help!
2 Likes
I dont have - text-overflow: in my base.yaml, but I can put that on the back burner for now. I am more focused on getting my font to look like yours.
While searching for the - text-overflow: I did find text-align: left !important; I wonder if I could place that somewhere to remove my indent.
This is what I have in my themes.yaml under grid card headings.
#################################################
# #
# GRID CARD HEADINGS #
# #
#################################################
grid-layout$:
hui-grid-card:
$: |
/* default */
h1 {
font-size: 7.4vw !important;
line-height: 0 !important;
font-weight: 800 !important;
color: rgba(255, 255, 255, 0.8) !important;
padding: 1vw 0 2vw 0 !important;
letter-spacing: 0.006vw !important;
}
/* portrait */
@media screen and (max-width: 1200px) {
h1 {
font-size: 7.4vw !important;
line-height: 1.1vw !important;
}
}
/* phone */
@media screen and (max-width: 800px) {
h1 {
font-size: 7.4vw !important;
font-weight: 800 !important;
line-height: 6vw !important;
margin: 2vw 0 0 0 !important;
}
}
Changing font-weight: 800 !important; does nothing.
How did you manage to implement these sensors? can you please explain
I replace what I have in my themes.yaml with what you posted, reloaded the theme and refreshed the page, the changes worked as expected, way over sized but they did take effect, I still did not have an indent.
by
are you calling the Home Assistant Frontend: Reload themes service?
no text-overflow
that’s correct, looking at the most recent version from @Mattias_Persson there is no - text-overflow:, I might have added that myself at some point, my bad.
to have the text wrap add - white-space: unset under styles: name: in base.yaml
I was using Quick reload.
I have changed font-size: from the 7.4 I posted earlier to 2.4 and reloaded themes through dev tools and nothing is changing.
grid-layout$:
hui-grid-card:
$: |
/* default */
h1 {
font-size: 2.4vw !important;
line-height: 0 !important;
font-weight: 800 !important;
color: rgba(255, 255, 255, 0.8) !important;
padding: 1vw 0 2vw 0 !important;
letter-spacing: 0.006vw !important;
you can create them as a template from your weather entity attribute or you use it directly in your button-card template like i do. Here an example
label: >
[[[
return `
<ha-icon icon="mdi:water-percent" style="width: 1em; height: 1em; margin-right: -0.3em;"></ha-icon>
<span> ${states[entity.entity_id].attributes.humidity}°</span>
<ha-icon icon="mdi:arrow-up-thin" style="width: 1.1em; height: 1.1em; margin-right: -0.3em;"></ha-icon>
<span> ${states[entity.entity_id].attributes.forecast[0].temperature}°</span>
<ha-icon icon="mdi:arrow-down-thin" style="width: 1.1em; height: 1.1em; margin-right: -0.3em;"></ha-icon>
<span> ${states[entity.entity_id].attributes.forecast[0].templow}°</span>
`
]]]
1 Like
thanks a lot for the answer.
1 Like
Can you confirm that card-mod is installed and working correctly?
Hi, when I click a button I want to open the energy dashboard in an iframe. but it opens the settings page of the energy dashboard. maybe anyone could help me to find the right direction…
energy_iframe:
ap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: ' '
size: fullscreen
content:
type: iframe
aspect_ratio: 16x9.15
url: >
[[[ return `/${hass.panels.config.url_path}/energy` ]]]
template: icon_name
I can confirm that it is installed.
This is in my config.yaml
lovelace:
mode: yaml
resources:
[
{ url: /hacsfiles/apexcharts-card/apexcharts-card.js, type: module },
{ url: /hacsfiles/bar-card/bar-card.js, type: module },
{ url: /hacsfiles/button-card/button-card.js, type: module },
{ url: /hacsfiles/light-entity-card/light-entity-card.js, type: module },
{ url: /hacsfiles/light-popup-card/light-popup-card.js, type: module },
{ url: /hacsfiles/lovelace-layout-card/layout-card.js, type: module },
{ url: /hacsfiles/lovelace-card-mod/card-mod.js, type: module },
and www/community/lovelace-card-mod/card-mod.js is there.
How can I test if its working? I’ve tried changing the font-size: under h1 { multiple times and nothing is changing on my computer or phone after reloading the frontend theme in dev tools and refreshing the page.
EDIT:
When I change button-card-font-size: 1.0vw in my themes.yaml the font on the buttons does change. That would mean that card-mod is working, correct? I still cant get the card header fonts to change though.
Your url path says something about config:
[[[ return `/${hass.panels.config.url_path}/energy` ]]]
I don’t know if it works, but you could try it without specifying config in your path.
[[[ return `/${hass.panels.url_path}/energy` ]]]
1 Like
You can see if card-mod is installed and working by checking out the chrome console, where it will report the installed version.
Although you can add it as a resource, it is recommended to add it as a frontend module. That’s also how it’s added in the original files.
For certain edits to work, I’ve had to do full restarts in HA. I’ve tried the update theme service, and the new reload yaml “restart”, but changes wouldn’t take effect until a real restart. So, I’d recommend doing that to test out edits at first, and once you can confirm that’s working, you can try alternatives.
The card-mod bits are later in the theme file, starting at line 140 in tablet.yaml
The fact that you’ve changed font-size: under h1 { and it hasn’t worked, leads me to believe either card-mod isn’t working correctly, or you need a full restart to see the changes.
Shows that card-mod is installed. Im getting a suboptimal performance warning, even after moving it to my config.yaml and restarted HA.
Still nothing changes when I alter things.
I believe that message is shown even if it’s applied as recommended.
Ct.some((t=>t.endsWith("card-mod.js"))) || console.info("You may not be getting optimal performance out of card-mod.\nSee https://github.com/thomasloven/lovelace-card-mod#performance-improvements");
As for it still not working, you might have to inspect the element and look at the CSS.
In that screenshot, the card-mod h1 element styles override the .card-header styles. You should take a look to see if the card mod styles are even present, and if they are, if they’re being overridden. You might want to try adding a style in tablet.yaml h1 section that is not defined like background-color: hotpink; just to see if that shows up. If that still doesn’t work, share your tablet.yaml file, or at least the code starting from
####################################################
# #
# CARD-MOD #
# #
####################################################
until the SWIPE CARD MARGIN section.