I used MS Paint for making this mod)))
never tried so far.
1 Like
btw, we seem to not be able to customize the icon of the energy panel, not even using ha-svg-icon
a[data-panel='energy'] paper-icon-item ha-svg-icon {
--card-mod-icon: mdi:home-lightning-bolt-outline !important;
color: {{'saddlebrown' if netto else 'var(--power-color)'}};
}
let alone do what I wanted:
a[data-panel='energy'] paper-icon-item ha-svg-icon {
--card-mod-icon: {{'mdi:home-lightning-bolt-outline' if netto else 'mdi:home-lightning-bolt'}};
color: {{'saddlebrown' if netto else 'var(--power-color)'}};
}
(I (want to) use all home variant icons in my dashboards)
color works fine, so it must the the right element targeted
this works:
:host(:not([expanded])) .menu ha-icon-button:after {
content: "{%- set m_alerts = states('sensor.marquee_alerts')|int(0) %} {{m_alerts if m_alerts > 0 }}";
{{style_badge_not_expanded}}
display: block;
color: ivory;
background: var(--alert-color);
}
note the template needs to be on a single line, using my regular multiline notation breaks it in this spot.
btw, to make it all a bit more readable, I followed Elchininetās suggestion to write repeated yaml in a variable as follows:
{% set style_badge_generic %}
position: absolute;
min-width: 20px;
box-sizing: border-box;
border-radius: 24px;
font-weight: 400;
line-height: 20px;
text-align: center;
{% endset %}
{% set style_badge_expanded %}
{{style_badge_generic }}
left: calc(var(--app-drawer-width,248px) - 32px);
font-size: 14px;
padding: 0px 6px;
transform: translateX(-50%);
{% endset %}
{% set style_badge_not_expanded %}
{{style_badge_generic }}
left: 26px;
font-size: 0.65em;
bottom: 14px;
padding: 0px 2px;
transform: translateX(-25%);
{% endset %}
{% set style_secondary %}
font-size: 11px;
white-space: pre;
display: block;
line-height: 11px;
{% endset %}
As you see, we can even nest those. (and override in a specific place if so required)
Are there still devs contributing to this project? I would be happy to toss some coffee or beer money over to anyone who can address this grouping of issues related to slow loading of card-mod changes when a page loads.
The symptoms are card-mod changes take seconds (5-10 at times) to āpop inā, interacting with the dashboard (clicking/tapping on things) gets delayed until the pop in is over, and sometimes just a completely black (but still scrollable) page until the card-mod changes are loaded in. Itās caused HA to be ultimately unusable for me.
Hi All - Iām rather new to card_mod and am trying to animate an entity icon in the new heading card. Essentially, I have the main icon (donāt need to animate), the heading text, and then an entity with a fan icon. I want to animate that fan icon, but I canāt seem to find the correct path through the dom/css tree using card_mod. What am I doing wrong in the below example? Iāve tried several different elements, including ha-icon, ha-svg-icon, etcā¦ Nothing seems to work. Thoughts?
type: heading
heading_style: title
heading: Ceiling Fan
icon: mdi:ceiling-fan
badges:
- type: entity
show_state: true
show_icon: true
entity: fan.ceiling_fan
name: Ceiling Fan
color: blue
state_content:
- name
- percentage
tap_action:
action: toggle
card_mod:
style: |
:host {
@keyframes slow-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
ha-state-icon {
animation: {{ 'slow-rotate 2s linear infinite' is_state('fan.ceiling_fan', 'on') else '' }}
}
}
Ah. Found the solution. For reference for anyone else looking for it -
- This thread is for themes. Suggest to raise similar questions in the main card-mod thread.
- Cannot say for all open issues about āslow / unstable / ā¦ā. But here my observations for some long threads:
a) It is hard to explain why people have issues since they provide kind of 100+ lines code including custom cards which cannot be called a āMinimal working exampleā and thus these issues are hard to reproduce. Funny fact that these threads contain many similar posts like ā+1ā, āme tooā, sometimes even without a code.
b) Some users have issues with Mushrooms; and since they cannot complain about card-modding in a Mushroom repo - they come to card-mod repo.
Thanks for the feedback. And yes sorry this isnāt the correct post to have added in my comment.
This issue has honestly been hard to isolate. I guess itās time I set up a test instance of HA. 
considering this is not a card-mod quest for an individual card, but for a more generic styling, I am posting here in the theme thread
new challenge:
Since the calendar items are always of the same color inside the same calendar, I had hoped to do some modding here:
seems we need to target the fc-event-title-container and do so based on the contents of the fc-event-title
have to admit I cant believe this has never been on someones todo list (ā¦), I couldnt find any other references to what I am hoping to do
my titles have 4 different possible options, and Id need
{'plastic':'orange',
'gft':'green',
'papier':'blue',
'restafval':'gray'}
to be the template for the contents colorizing the container background.
please can anyone help me out here?
I fear the path itself wont do me any goodā¦:
//*[@id=ācalendarā]/div/div/table/tbody/tr/td/div/div/div/table/tbody/tr[6]/td[5]/div/div[2]/div[1]/a/div/div/div
so hope to be able to target those in a generic way of course. Hence the post here.Hello community,
maybe you could help me quickly.
I would like to remove the space above the first entity entry.
Thank you!
My current code is
type: entities
entities:
- entity: sensor.siegesplatz_first_departure
name: 26A (Siegesplatz)
secondary_info: none
- entity: sensor.aspern_zachgasse_first_departure
name: 92A (Zachgasse)
- entity: sensor.oberdorfstrasse_first_departure
name: 25 (OberdorfstraĆe)
show_header_toggle: false
card_mod:
style: |
ha-card {
--mdc-icon-size: 16px;
}
.card-content div {
margin-top: 0px !important;
margin-bottom: 0px !important;
margin-left: -15px !important;
height: 17px;
}
Your question is not related to the thread, ask in the main card-mod thread, this one is about themes.
it was a spacing issue probably, as I can also use
content: "{%- set m_alerts = states('sensor.marquee_alerts')|int(0) %}
{{- m_alerts if m_alerts > 0 }}";
taking out the leading white space.
I can no yet explain why that works, or why to broke without it, but here you goā¦
Bonjour,
Je voudrais rĆ©aliser le changement des icone dans la barre comme dans votre tuto mais je ne comprend pas bien le tuto. Ou est ce quāil faut mettre ses Ć©lĆ©ments ? dans le configuration.yaml ou dans le Yaml de la vue ?
merci pour ses explications.
Please use English.
To replace an icon - you need to change an svg path as it is described in the post.
ok but I donāt understand, when I write ācard-mod-root-yamlā I get an error and it tells me that it doesnāt exist. However, I am sure that I have the card-mod.js, that is why I am asking you where should I write this code? I donāt know if the translation is well done.
THANKS
I see, letās start from the beginning:
Go to the main card-mod thread ā 1st post of that thread titled āfantastic postā ā themes ā for beginners
anyone still using the card-mod themes to customize their sidebar with card-mod-sidebar-yaml:, please check out the amazing plugin @elchininet has developed, and is actively expanding at Release v6.7.0 Ā· elchininet/custom-sidebar Ā· GitHub.
It has dedicated config options for almost everything we need. Except for conditional animations, Iāve moved everything I had in my card-mod themes pertaining the sidebar to this new plugin.
main advantage is also that it provides all templates in javascript too, so the frontend wont bother the backend as much anymore,
if you want an example how to proceed, checkout my Sidebar gist, where Ive posted my current settings, and compare it with the card-mod theme settings I used up to recently on the card-mod-sidebar-yaml:
4 Likes
iāve successfully deployed some minor tweaks using card-mod inside of my theme.yaml file, but iām having trouble figuring out how to make tweaks to the pop up menu that appears when i click to edit a card ā i.e:
iām trying to make it take up the full width of window so the code editor part doesnāt spill over.
if i add the 2 css attributes below directly to my inspect panel in browser, it works as intended (until i refresh).
but i canāt seem to get it working when i try to add it into my theme file. after reading the post about ānavigating dom elementsā, i thought the below wouldāve workedā¦but no dice.
card-mod-root: |
ha-dialog$: |
.mdc-dialog .mdc-dialog__surface {
width: 90% !important;
}
.mdc-dialog .mdc-dialog__content {
width: 100% !important;
}
iāve also tried adding the above code under ācard-mod-more-info-yamlā in my theme file as fell. doesnāt do anything either.
any ideas what iām doing wrong?
and in case the additional context is needed, hereās the entire string i get when i select ācopy elementā (for the .mdc-dialog .mdc-dialog__content part) from the inspect panel in my browser:
<div class="mdc-dialog__surface"> <!--?lit$722544887$--><slot name="heading"> <!--?lit$722544887$--> <h2 id="title" class="mdc-dialog__title"><!--?lit$722544887$-->Vertical stack Card configuration</h2> </slot> <div id="content" class="mdc-dialog__content"> <slot id="contentSlot"></slot> </div> <footer id="actions" class=" mdc-dialog__actions "> <span> <slot name="secondaryAction"></slot> </span> <span> <slot name="primaryAction"></slot> </span> </footer> </div>
thank you!
As you are traversing shadow-roots in your code, I think in theory you need to put this under a card-mod-root-yaml: key.
Not saying this will work with your specific code, but worth a try.
