You got several ā}ā brackets missing.
1 Like
Thank you, that fixed the problem.
I think I donāt understand how to apply a card-mod.
I have a component that looks like this:
type: custom:mushroom-light-card
entity: light.guest_room_lights
name: Lights
fill_container: true(
show_brightness_control: true
layout: horizontal
and if I use the inspector, I find this div that I want to change:
<div class=" container ">
<div id="slider" class="slider" style="--value: 0.21; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<div class="slider-track-background"></div>
<!--?lit$960817067$--><div class="slider-track-active"></div>
<!--?lit$960817067$-->
</div>
</div>
if I manually add āmargin: 0 40px 0 0;ā to the .slider style via chrome inspector, it does what I want it to (shrink the slider so thereās a gap between the slider and the end of the tile).
but I canāt seem to get it to work with card mod:
card_mod:
style: |
.slider {
margin: 0 40px 0 0;
}
how should my card_mod look?
I would suggest the main Mushroom card threads here and here
try this
card_mod:
style:
mushroom-light-brightness-control$:
mushroom-slider$: |
.slider {
margin: 0 40px 0 0;
}
1 Like
Does anyone have any advice or examples for theming an auto-entities card with card-mod?
Iāve already successfully got my theme working with other card types, both with generic ha-card styling, and also targeting specific card type, but canāt get auto-entities to show as anything other than the non-card-mod colours, e.g. as an example Iāve got the following for other cards:
card-mod-card-yaml: |
.: |
ha-card {
--mdc-icon-size: 20px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
background-color: rgba(var(--rgb-primary-background-color),.33);
}
:host(.type-heading) ha-card {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background-color: transparent !important;
border-radius: 0 !important;
border-bottom: 1px solid var(--accent-color) !important;
}
:host(.type-heading) .title > p {
font-size: 1.25em !important;
}
:host(.type-heading) .title ha-icon {
--mdc-icon-size: 24px;
color: var(--accent-color) !important;
}
:host(.type-heading) .subtitle ha-icon {
color: var(--accent-color) !important;
}
(Note, I know I may not be doing it the best way, but it seems to work ok!)
That successfully themes other cards, and overrides heading cards, but I canāt find a working config/selector to do the same for auto-entities (I want it to have the default āha-cardā theming.
Any examples of what anyone else has successfully done would be appreciated, and I can then adapt to what Iāve got. Iām on current versions of HA, card-mod, and auto-entities.
Thanks.
you should still set the class to the card you use inside the auto-entities. or any other card_mod modification for that matter, they should simply work transparently.
(only not if you happen to be still using version card_mod 3.5.0 which is buggy in that respect. You are using the 3.5.0 class formatting style, so thatās why I am askingā¦)
for specific auto-entities questions, hop over to the dedicated thread in this community, there are many examples
So yes Iām using 3.5.0 (as thatās the current version on HACS).
I did have to redo the selectors a couple of weeks back, which after reading about the changes in 3.5.0 I now realise were down to the new class formatting style (previously I had a simpler āha-card.type-heading .title > pā style), but wasnāt trying to format the auto-entitles card then so donāt know if it worked then.
I did take look in the auto-entities thread, but there didnāt seem to be anyone trying to format via a theme, just via config on the individual cards themselves, and trying to translate over to a theme didnāt work so well!
From what you say I wonder if itās a 3.5.0 issue, and whether I need to manually go back to 3.4.4 and see if it works better thereā¦
No, it isnāt.
It was only there for some hours. Then it was pulled back and is neither on HACS nor on the repositiry anymore.
yes, itās a card-mod 3.5.0 issue to NOT modify the auto-entities correctly anymore.
If you can not rewrite those using other cards, you really should go back to 3.4.4, and use your former classes.
and then still, set that class on the entities cards in your auto-entities configuration.
before we land in the same trouble as the GitHub repo:
please first downgrade to 3.4.3, reload/refresh cache etc etc, and next update to 3.4.4ā¦
From my current and āup to dateā HA/HACS install.
Multiple refreshes & restarts of HA, and refreshes within HACS and it still shows v3.5.0 as current.
of course, as that is what you have installedā¦
no click Download again, and see 3.4.4 as latest.
Which Iāve now done.
I suspect that HACS is probably doing a simple version check to see if thereās a āhigherā version than whatās installed, hence not offering to ādowngradeā from 3.5.0 to 3.4.4, and it wasnāt obvious (to me at least) that I should downgrade.
Iāll try that and see how it goes, thanks.
please check with me, I need an extra pair of eyesā¦
using
card-mod-view-yaml: |
hui-sections-view:
$:
hui-view-badges:
$:
hui-entity-badge:
$: |
ha-state-icon {
--mdc-icon-size : 24px;
}
to set the icon size of the badges globally works fine.
Id love to add some box-shadow,
box-shadow: var(--box-shadow) !important;
but cant find the correct element to do so.
in my single badges (via a regular card_mod) I do this:
card_mod:
style:
ha-badge:
$: |
.badge {
border: 2px solid {{'var(--success-color)' if
is_state('binary_sensor.werkdag','off') else
'var(--warning-color)'}} !important;
box-shadow: var(--box-shadow) !important;
}
.: |
ha-state-icon {
--mdc-icon-size: 24px;
color: {{'var(--success-color)' if is_state('binary_sensor.werkdag','off') else
'var(--warning-color)'}};
}
however, the .badge wont get touched when I add that to the card_mod theme setting.
Could anyone please see where to put this?
(btw I am still using 3.5.0, but that shouldnt really matter for this particular mod, as before, we could set this via mod-card too)
Sorry for the question, Iām new to this. But where do I write the code for ācard-mod-sidebar-yamlā? Thanks a lot
I cant figure this stupid one outā¦
When I manually adjust the CSS within Chrome and add a ādisplay: noneā to these parts I get the result I desire.
However, when I try to add it with card-mod it does not work at all. I think Iām not targetting it right? Anybody who can help me with this one?
In a card-mod theme.
1 Like
Circling back to this, Iāve added this to my themes with some small modifications.
Note that this is only confirmed to be working with badges at the top of a masonry view (i.e. not for section views).
card-mod-view-yaml: |
:first-child $:
hui-view-badges $: |
/* mobile-specific styles */
@media (max-width: 768px) {
.badges {
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* Smooth scrolling */
scrollbar-width: none; /* For Firefox */
flex-wrap: nowrap !important;
justify-content: unset !important;
}
.badges > * {
min-width: fit-content;
}
}
Iām using flex-wrap: nowrap !important; instead of flex-wrap: unset !important; to make the wanted behaviour explicit. Iāve also added the @media media query, since I only want this behaviour when the width is narrow (like on mobile phones), so that the default behaviour applies otherwise (I donāt have that many badges).
The scrollbar is also hidden in all cases. It just looks better to me.
Iāve also considered always keeping the row centered, but didnāt like the look. For anybody that prefers that, replace justify-content: unset !important; with justify-content: center !important;.
Lastly, if youāre using the default HA theme, you just need to create a custom theme with the following to only override this one bit of behaviour. If you have HACS themes or other third-party ones, you will need to manually edit those and remember to reapply the changes, should there be an update for a theme.
custom-theme:
card-mod-theme: custom-theme
card-mod-view-yaml: |
:first-child $:
hui-view-badges $: |
/* mobile-specific styles */
@media (max-width: 768px) {
.badges {
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* Smooth scrolling */
scrollbar-width: none; /* For Firefox */
flex-wrap: nowrap !important;
justify-content: unset !important;
}
.badges > * {
min-width: fit-content;
}
}
4 Likes
that Is nice!
howeverā¦
I can not get it to work. I have already set this
card-mod-view-yaml: |
hui-sections-view:
$:
hui-view-badges:
$:
hui-entity-badge:
$: |
ha-state-icon {
--mdc-icon-size : 24px;
}
and combining that seems a challenge. But, even without what I have, and c&pāing it 100% doesnāt not change anything for my badges, other than sliding single line badges (that dont yet wrap to the second line) to the far left of the screen.
all others remains as is, meaning wrapping to next line if so required by number of size, and all centered
and no swiping at all