āwrongā - because it does not work (although a similar syntax does work in some places), check issues about markdown in card-mod Github. A bug probablyā¦
referring to this ? (only open on markdown) Styles in Shadow-DOM are applied inconsistent Ā· Issue #226 Ā· thomasloven/lovelace-card-mod Ā· GitHub
my card-mod Did work, so thats why I asked for a syntax check only here. I wasnt experiencing an issue at allā¦
anyways, if this is the better syntax, Ill leave it like that.
thanks again
there were at least 2-3 similar issues with the same syntax.
Some of them closed after a fix I proposed to you.
Try like this:
type: picture-elements
image: /hacsfiles/customassets/floorplan.svg
elements:
- type: state-icon
entity: switch.living_room_heater
icon: mdi:fan
tap_action:
action: more-info
double_tap_action:
action: toggle
style:
top: 37%
left: 15%
'--mdc-icon-size': 40px
'--paper-item-icon-active-color': '#f92aad'
card_mod:
style: |
state-badge {
{% if is_state(config.entity, 'on') %}
animation: rotation 2s linear infinite;
{% endif %}
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
1 Like
1st post - link at the bottom
1 Like
Hi, anyone can help me out here?
This works:
style:
hui-horizontal-stack-card $: |
div#root > :first-child {
width: 75%;
flex: auto;
}
div#root > :last-child {
width: 25%;
flex: auto;
}
This works too:
style: |
ha-card {
border-width: 0px;
}
But how to I combine both?
Perfect, thank you so much
1 Like
Thank you!! I had overlooked this link and this should answer the vast majority of any other syntax issues I might come across, this is exactly what I need for future ideas
Hereās an abbreviated example from my own, combining two mods. Should put you on the right path. There might be other or better ways.
card_mod:
style:
.: |
:host {
--label-badge-text-color:
...
ha-state-label-badge $ ha-label-badge $: |
...
1 Like
struggling with something I havent modded before: use an auto-entities, but set the display to a fixed height (and add a scrollbar), so it doesnāt keep moving the frontend up and down, depending on the entities displayed.
- type: custom:auto-entities
card:
type: entities
card_mod: &mod
style: |
ha-card {
box-shadow: none;
margin: -16px -16px 0px -16px;
}
.card-content {
max-height: 100px;
overflow-y: scroll;
}
does create the scrollbar when needed. However, I can not set a fixed height and get the scrollbar.
1 Like
This is what I brewed, works as expected. Thank you!
style:
.: |
ha-card {
border-width: 0px;
}
hui-horizontal-stack-card $: |
div#root > :first-child {
width: 75%;
flex: auto;
}
div#root > :last-child {
width: 25%;
flex: auto;
}
1 Like
Hi, is there a way to color the icon based on the status in the scheduler card? I tried that, but it doesnāt work. The icon is always red.
type: custom:scheduler-card
include:
- climate
exclude: []
title: false
display_options:
primary_info:
- Prog. {entity}
secondary_info:
- ā {days}
- '{action} - {relative-time}'
icon: entity
card_mod:
style: |
:host {
--card-mod-icon-color: green;
--card-mod-icon-active-color: red;
}
Hello guys,
Iād like to configure the new tile card.
I want to colorize the background of the icon.
I did a specific post with everything I tried but there is no answer so Iām back here.
Can someone have a look at this post please?
And when there is a solution, it would be great if @Ildar_Gabdullin can include it into his/her bible post Ildar_Gabdullinās bible for card-mod
Thank you in advance
Hello Guys,
Can someone tell me what Im doing wrong here, The styling is applying to the card as expected but I canāt get my H1 and H3 headings to style:
- type: markdown
style: |
ha-card {
border: 0px;
}
h1 {
text-align: center;
font-size: 14px;
padding: 0px;
color: #fff;
text-transform: uppercase;
line-height: 0px;
font-weight: bold;
}
h3 {
text-align: center;
font-size: 11px;
padding-top: 8px;
text-transform: uppercase;
line-height: 0px;
font-weight: normal;
padding-bottom: 0px;
margin-bottom: -25px;
}
content: >
<h1>Dualit 2 Slot Classic</h1>
<h3>Kitchen</h3>
fixed this using, in case anyway is interested:
- type: markdown
style:
.: |
ha-card {
border: 0px;
}
ha-markdown:
$: |
h1 {
text-align: center;
font-size: 14px;
padding: 0px;
color: #fff;
text-transform: uppercase;
line-height: 0px;
font-weight: bold;
}
h3 {
text-align: center;
font-size: 11px;
padding-top: 8px;
text-transform: uppercase;
line-height: 0px;
font-weight: normal;
padding-bottom: 0px;
margin-bottom: -25px;
}
Noobie question: is it possible to change entity info card size? (Not sure what the correct term is, the popup window that shows entityās history curve in the lovelace dashboard.)
In web browserās debug I can change ha-dialog --mdc-dialog-min-width --mdc-dialog-max-width and those change the size. But I canāt make it work with the card mod. Is this even possible or do I need some other addon for this?
Hi all.
I have insert a tile card in my dashboard
- type: tile
entity: person.marco
icon: mdi:account
show_entity_picture: true
style: |
ha-card {
background-color: #383838;
border: 1px solid;
border-color: #000000;
border-radius: 5px;
}
ha-tile-info {
background: red;
}
.badge {
background: green;
}
.icon-container {
background: aliceblue;
}
.info {
background: black!Important;
}
.primary {
font-size: 20px!Important;
}
This is the structure
I am able to change style for ha-card, .badge, .icon-container, ha-tile-info, but NOT for .info and .primary.
Hallo, maybe I missed it somewhere, when a tooltip falls across the bottom border of the screen (graph at the bootm), the scrollbar appears on the right and very unpleasant blinking effect occurs at the same moment, making the whole page unreadableā¦
(could be better described in a short videoā¦but I canāt upload it here unfortunately)
Is this please solved here somehow?
Thank you.
Willy
PS: the history_explorer_card, what I am playing with a bit, has a tooltip changing its position depending where it should ocur, (and if on bottom, it apears above the graph not below), so it doesnāt destroy the screen leyout and this effect is not occuring.
This is because .info and even more .primary are not at the top level of the DOM query.
And Iād love someone to explain how this works because it is 6 days that Iām struggling with almost the same issue with the same card but for .shape under ha-tile-icon of icon-container.
Same as for all other shadow roots most probably. As in every other example with shadow root in this thread. Didnāt use this card, but without test:
card_mod:
style:
ha-tile-info$: |
.primary { font-size: 20px !important; }
1 Like