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:
3 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.
is this supposed to work with the release 3.4.3 card-mod (and not the hacked version)?
doesnt seem to do anything in my themingâŚ
ofc, I dd change it to hui-sections-view, but all of my other mods that use that are fine.
hmm Dom path seems different
HI,
Yes it is working with the stock card-mod v3.4.3.
The only thing I can think of is I also have kiosk mode installed and that is only so I can modify the viewâs header to replace the edit icon with the time, reduce the height and remove some of the clutter.
It works in my setup
testing my sections views are without succes just yet. even a spare masonry doesnt seem to be targeted,
how odd
Floow up from card-mod thread for Ildar.
O.k. Only already did it coming from the view-level (see my lines of code) and not from badge as you did above. And because
card-mod-badge-yaml: |
.: |
ha-state-icon {
--mdc-icon-size : 124px;
}
ha-badge:
$: |
.content {
font-size: 14px !important;
font-weight: 400;
}
ddnât work here, but
card-mod-view-yaml: |
hui-sections-view:
$:
hui-view-badges:
$:
hui-entity-badge:
$:
.: |
ha-state-icon {
--mdc-icon-size : 24px;
}
ha-badge:
$: |
.content {
font-size: 14px !important;
font-weight: 400;
}
Correct, because âcard-mod-badgeâ only works with a hacked card-mod. Actually, see no issues with my hack so far ))). But - honestly - I manage to spend only a few days at home a month, i.e. not a huge testing periodâŚ
?
On my question in other thread, from where it is, you anwered
O.k. Then itâs clear why it is not wokring here and above other users will find a themes styling without the hack as well.
card-mod-badge is a STANDARD thing for card-mod themes.
But it does not work since 2024.8 - for old & new badges.
To restore this functionality for NEW badges - the hack is needed.
1 Like
O.k. I see. But as it is working directly with card-mod-view-yaml as above, I currently see no need for it. At least for my requirements. Beside it would be shorter to declare.
thanks for the idea! that didnât work, unfortunately. oh well. i can live with it! appreciate the thought.
can confirm that to work. very nice
except for badges that have their own (extra) detail, like a border. apparently, if the custom:mod-card has been set on an individual badge the theming no longer applies.
or have any other theme set in the main config options that contains card-mod theming
had hoped I could set
.badge {
border: 2px red solid;
}
under the .content, but that too does not set. or with !important
mysterious.
wait, too soon, they kicked in after all:
only now, my background isnt showing anymoreâŚ
weather-background:
card-mod-theme: weather-background
card-mod-view: &cam_background
|
vertical-layout {
{% if is_state('input_boolean.weer_view_background','on') %}
background: repeat url({{state_attr('camera.buienradar','entity_picture')}}) fixed;
{% endif %}
}
hui-sections-view {
{% if is_state('input_boolean.weer_view_background','on') %}
background: repeat url({{state_attr('camera.buienradar','entity_picture')}}) fixed;
{% endif %}
}
itâs one or the other