Possible probably, try smth like this:
ācss flex break lineā - google it
1 Like
Hi, wondering if youāve worked this one out, itās a little annoying seeing the transition on my navigation bar each time a new views being loaded.
Iāve come up with an issue on one of my minimalistic area cards since updating card mod to a new version. Wondering if anyone can tell what I am doing wrong.
On my card I had a line of buttons and sensors which are set to show transparent red when active/on.
Under buttons and sensors below I haveā¦
āha-picture-icon-button-on-color: rgba(240, 0, 0, 0.6)!important;
This was working perfectly fine until a recent update. Now the active/on color is the default which is yellow.
type: custom:minimalistic-area-card
card_mod:
style: |
ha-card {
height: 100px!important;
}
.box .card-header {
padding: 5px 0px!important;
font-weight: bold;
font-size: 1.2em;
}
img {
filter: brightness(0.6)!important;
object-fit: !important;
}
.sensors {
--ha-picture-icon-button-on-color: rgba(240, 0, 0, 0.6)!important;
--ha-picture-icon-button-color: rgba(170, 170, 170, 0.7)!important;
--mdc-icon-size: 30px;
}
.buttons {
--ha-picture-icon-button-on-color: rgba(240, 0, 0, 0.6)!important;
--ha-picture-icon-button-color: rgba(170, 170, 170, 0.7)!important;
--mdc-icon-size: 25px;
position: absolute;
left: 5px;
bottom: -5px;
}
.box .sensors .state {
margin-left: -5px!important;
}
.box .buttons {
text-align: left!important;
}
found a fun fact today:
having had this template-entity-row for some time:
card_mod:
style:
div#wrapper: |
state-badge {
animation: {% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% set base = 'rotation infinite linear, colorize 5s linear forwards 1' %}
{% if perc <= 15 %} 4s {{base}};
{%- elif perc <= 33 %} 3s {{base}};
{%- elif perc <= 67 %} 1.5s {{ base}};
{%- else %} 0.75s {{base}};
{% endif %}
{% else %} none;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
background: steelblue;
}
100% {
background: lightseagreen;
}
animates the icons when on:
since those are always a bit off-center, and also showing on my custom:button-cards, I had a bit of an exchange with RomRider today, who is heavily developing his custom card to be even more amazing than it already is) and we ended up adding:
@keyframes rotation {
0% {
transform: rotate(0deg);
--ha-icon-display: inline;
}
100% {
transform: rotate(360deg);
--ha-icon-display: inline;
}
which results in:
and is kind of cool, as it centers the icon much better, and, because of its size draws a bit more attentionā¦
made me wonder if we couldnāt use that in static icons too:
card_mod:
style:
div#wrapper: |
state-badge {
--ha-icon-display: inline;
animation: {% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% set base = 'rotation infinite linear, colorize 5s linear forwards 1' %}
{% if perc <= 15 %} 4s {{base}};
{%- elif perc <= 33 %} 3s {{base}};
{%- elif perc <= 67 %} 1.5s {{ base}};
{%- else %} 0.75s {{base}};
{% endif %}
{% else %} none;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
and the answer is yesā¦:
3 Likes
@Ildar_Gabdullin
How can the below be applied to the new version of the Horizon card?
Thanks
card_mod:
style: |
ha-card {
--ha-card-background: transparent;
box-shadow: none;
}
Hi! I am very far from any PC now, will answer you here or in GitHub in a week!
I donāt want to be presumptuousā¦
Post your code for the entire card and maybe others will try to help (sooner/quicker?).
MrGrey.
otoh, why use that card in the first place, there seems to be no development at all(sorry), and the original card still worksā¦
hereās the link to the identical question in the repo: Horizon-card customize with card-mod. Ā· Issue #30 Ā· rejuvenate/lovelace-horizon-card Ā· GitHub
makes that easier to compare with some background.
@Mariusthvdb
Why do you say that thereās no development? I mentioned in my post that thereās a new version of the card. The author was working on it for the last few months. And now it supports card_mod and many other improvements.
Latest v1.0.0
I need to apologize
I have this card in my updating system, and it hasnāt alerted ever since the original repo creation ā¦
Because of that I had gone back to the original card, and modded that to my needs, never looked back.
With you words of ānew versionā, without reading anything further, I erroneously supposed you meant the original card forkā¦
Again, My apologies for being too quick in response.
No need to apologize. The same thing happened to me. There was no update notification, and I accidentally bumped into it, although I was waiting for it for a long time, since in my particular dashboard it was the only card that wasnāt accepting CSS.
I had solved the problem with the non transparent background by using the custom:stack-in-card, but it is not stable, and some times it doesnāt render right.
nice view!
Ive just adapted that new card into my own config shown above., because really dislike the placement of those details attributes in the original. It renders it so out of context in HA imho.
Btw, since the core moon integration doesnt provide all of those moon details, I wonder where it gets its data, need to read up on that.
Personally I use a dedicated integration for Moon data:
# https://ipgeolocation.io/astronomy-api.html
rest:
- resource: https://api.ipgeolocation.io/astronomy
scan_interval: 1200
params:
apiKey: !secret ipgeolocation_api
city: your city
this is what I ended up doing for now (knowing the data now is calculated twice in my system for moon,which is not a good thingā¦)
btw if you need the most amazing site for all of these details to check: Sun & moon times today, Roosendaal, Provincie Noord-Brabant, Netherlands
it even holds these graphs
not sure if the horizon card can show that graph for moon?
@Ildar_Gabdullin Thanks for your great work. I have one more question. I like to combine two things: style: | and style:
If i use just one of this, its works. But not both together.
title: Garten
type: entities
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0,255,0,0.05);
}
style:
tabbed-card $:
.: |
mwc-tab {
right: -15px;
}
mwc-tab:
$: |
.mdc-tab {
min-width: var(--mdc-icon-size) !important;
background: rgba(100,100,100,0.20) !important;
}
.mdc-tab--active {
background: rgba(0,255,0,0.05) !important;
}
.: |
tabbed-card {
--mdc-tab-horizontal-padding: 0px;
}
entities:
- type: custom:tabbed-card
ā¦ā¦
Donāt ping users in this community please (see community rules=
For your question just scroll randomnly thorugh this thread and you would find lots of examples for this combinations. But for now:
card_mod:
style:
.: |
ha-card {
--ha-card-background: rgba(0,255,0,0.05);
}
tabbed-card $:
And now I saw, that you are already doing this in your second style. Just go ahead with this and move your ha-card to the same level and position as your tabbed-card under .: | and remove the whole first style part.
And without looking deeper, the .: below tabbed-card $ seems to be wrong or missplaced as well.
sorry about the user ping. I was afraid no one else would answer. But great, you took care of my problem.
unfortunately it doesnāt work with your code example. probably because Iām nesting that as an entities-card. Actually, Iām trying to display this (with a different background color):
Cannot be a reason. Tagging is something like obliging a particular person to answer.
Very far from any PC, cannot look at your code.
Will check it in a week.
As it was already advised - check other examples here of combining shadowRoot and not-shadow styles. Explicitly it is listed in the consolidation post (link at the bottom of the 1st post) - check āother stuffā section.
Also, (unrelated to card mod) I see no reason of placing tabbed card inside Entities.
Each tab then will have a bigger padding (less useful area).
If you need to display entity rows below tabbed card - consider using something like stack-in-card (tabbed card, Entities inside a stack). Surely tabbed card should be placed inside mod-card (imho better than navigating from a stackās level).
Could someone please help with styling a title in a grid card?
I have tried the examples I have found in this topic, but I canāt get it working, and would appreciate some help.
I want to turn the text of the title white. Here is what I have so far:
- type: custom:mod-card
card_mod:
style:
hui-grid-card:
$: |
.card-header {
color: white !important;
}
card:
type: custom:auto-entities
card:
type: grid
columns: 3
square: false
title: ā ļø Low Batteries!
card_param: cards
filter:
include:
- entity_id: '*battery'
state: <15
options:
type: custom:mushroom-entity-card
vertical: false
icon_color: red
- entity_id: '*battery_level'
state: <20
options:
type: custom:mushroom-entity-card
vertical: false
icon_color: red
- entity_id: '*battery_charge_remaining_percentage'
state: <30
options:
type: custom:mushroom-entity-card
vertical: false
icon_color: red
icon: mdi:battery-alert-variant-outline
sort:
method: state
numeric: true
reverse: false
ignore_case: false
show_empty: false
Thank you very much
Hi there,
Iām doing my first steps with card_mod and having troubles with this code:
show_name: false
type: glance
entities:
- entity: binary_sensor.zugaengeeg
icon: mdi:home-lock
style: |
:host div:not(.name)::after {
content: "{%- set time = (as_timestamp(now()) - as_timestamp(states.binary_sensor.zugaengeeg.last_changed)) | int %}
{%- set minutes = ((time % 3600) // 60) %}{%- set minutes = '{}m'.format(minutes) if minutes > 0 else '0m' %}
{%- set hours = ((time % 86400) // 3600) %}{%- set hours = '{}h: '.format(hours) if hours > 0 else '00h:' %}
{%- set days = (time // 86400) %}{%- set days = '{}d: '.format(days) if days > 0 else '00d:' %}
{{ 'Weniger als 1 Minute' if time < 60 else days + hours + minutes }}";
font-size: var(--mdc-typography-body1-font-size, 1rem);
}
:host div:not(.name) {
font-size: 0px;
}
- entity: binary_sensor.bewegungvormhaus
style: |
:host div:not(.name)::after {
content: "{% if is_state(config.entity,'on') -%}
Offen
{%- else -%}
Zu
{%- endif %}";
font-size: var(--mdc-typography-body1-font-size, 1rem);
}
:host div:not(.name) {
font-size: 0px;
}
- entity: binary_sensor.bewegungeg
- entity: binary_sensor.bewegunggarage
- entity: binary_sensor.bewegungog
What I try to achieve is to have the value of time passed since the last change as days:hours:minutes for the first entity. I was changig teh code from entity two, that works, but the card only shows empty name for first entity:
Can anyone help me with a hint, what I am doing wrong?
Thx,
zavjah
content: "{%- set time = (as_timestamp(now()) - as_timestamp(states.binary_sensor.zugaengeeg.last_changed)) | int %}
{%- set minutes = ((time % 3600) // 60) %}{%- set minutes = '{}m'.format(minutes) if minutes > 0 else '0m' %}
{%- set hours = ((time % 86400) // 3600) %}{%- set hours = '{}h: '.format(hours) if hours > 0 else '00h:' %}
{%- set days = (time // 86400) %}{%- set days = '{}d: '.format(days) if days > 0 else '00d:' %}
{{ 'Weniger als 1 Minute' if time < 60 else days + hours + minutes }}";
- Try the output in developer tools first before using it in the card.
- If it is related to empty lines, use -%} in your code as well to remove line breaks, esp. here in this pseudo-elements.
- use card_mod in level above style as well. Not required but recommended and sometimes with less problems. See most of the other examples in this thread.
Hello @arganto ,
As I stated in my question, Iāve of course tested the code in the developer tools and it works there:
But your 2nd hint was right 
Iāve added the -% to the end of each line but last and it works now. Thx