Daniel, this is a wrong thread.
Ask in the card-mod thread instead.
1 Like
itās all in the docs: Theme cookbook Ā· thomasloven/lovelace-card-mod Wiki Ā· GitHub
if you need some inspiration, you can check out my Gist for the card-mod-theme I use
There are quite a few really cool ideas in your gist that I will need to test 
I see that you are using a few animations, including marquee and are also using conditions.
I saw in the cookbook that some conditions can be checked using e.g. [data-state=xx].
So is it also possible to check if the text in a textfield overflows? Maybe using a calc() of the width or maybe something more elegan?
I am trying to scroll text if it is too long for the textfield.
Problems right now
- It scrolls independent of the text length ā missing if condition
- The text remains visible when it scrolls out of the field
ā not sure but maybe selection of the text-field rather than the text? - It does not actually scroll the text but rather the field, it seems, i.e. the text is still cut-off ā maybe linked to problem 2?
card-mod-row-yaml: |
ha-textfield $: |
.mdc-text-field {
animation: scroll-left 10s linear infinite;
}
@keyframes scroll-left {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
Partially solved but still missing some vital parts.
a) how do I selectively scroll only when the text exceeds the field.
b) why is the text not being scrolled properly, i.e. why is the text still being cut-off.
ha-textfield $: |
.mdc-text-field {
height: 3em !important;
overflow: hidden !important;
}
.mdc-text-field__input {
align-self: center !important;
caret-color: var(--primary-color) !important;
animation: scroll-left 10s linear infinite !important;
white-space: nowrap;
overflow: hidden;
}
@keyframes scroll-left {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
I also tried placing the animation inside .state but that then resulted in no animation at all.
So I fixed the moving outside of the card but I think it is still moving the text as a āfieldā rather than as individual letters.
EDIT:
So the if condition would look something like this
{% if states(config.entity)|length > var(--ha-textfield-input-width)|length -%}
font-size: smaller !important;
{% endif -%}
but the var() is seemingly not the correct one or it is not defined or something. It only works if I set a value manually. If I set if states(config.entity)|length > 44, the correct line scrolls.
But I need a dynamic value, otherwise it will only work for that particular card 
Iām trying to get my header to the bottom of the sceen.
I think it should work with this code added to my theme but it doesnt somehow.
Google Light Theme:
# Card mod stuff
card-mod-root-yaml: |
.: |
ha-tabs {
height: var(--header-height);
--paper-tabs-selection-bar-color: var(--primary-color) !important;
color: var(--app-header-text-color) !important;
}
paper-tab[aria-selected=true] > ha-icon, paper-tab[aria-selected=true] {
color: var(--primary-color) !important;
}
/* This hides the help button, menu button and title */
.action-items {
display: none !important;
}
.header {
top: calc(100vh - 48px) !important;
bottom: 0 !important;
transform: unset !important;
}
#view {
padding-top: 0px !important;
padding-bottom: 48px !important;
}
# End card-mod, back to the original theme:
Tried restarting/clearing cache but no luck
Any idea?
Iām trying to style a more info dialog on nested shadow roots but I cannot reach the class I wanted: my goal is to style the current class of a more-info-climate inside a ha-dialog. Iāve set up the card-mod theme and it works for top level more-info styles, but the selector for the class I want is not working. I can see the class I want is down two shadow roots (ha-more-info-info and more-info-climate) but my syntax seems to lead to nothing:
my-custom-theme:
card-mod-theme: my-custom-theme
card-mod-more-info: |
ha-more-info-info $ more-info-climate $: |
.content {
background-color: blue;
}
.content {
background-color: red;
}
[...]
What am I doing wrong? I placed a red background to the content class of the top element just to be sure card-mod is loaded and working and I can see the red background indeedā¦
I know nothing about more-info window for climate - but this code is definitely wrong, this structure is wrong:
xxx $: |
xxx {
...
}
xxx {
...
}
Check card-mod examples in a huge ānormalā card-mod thread with combined āshadowrootā & ānon-shadowrootā paths.
Already did that and tried this:
card-mod-more-info: |
.: |
.content {
background-color: red;
}
ha-more-info-info $ more-info-climate $: |
.content {
background-color: blue;
}
taken from the airy.yaml example:
card-mod-badge-yaml: |
.: |
:host {
display: inline-block;
[...]
margin-bottom: 24px;
}
# Make badges have transparent background
ha-state-label-badge $ ha-label-badge $: |
.label-badge {
background: none !important;
}
If done this way I canāt even see the red background on div marked with content class on top shadow rootā¦
In addition to what Ildar advises, you should know that whenever you want to use shadow roots in a theme class, it has to be under a <thing-you-want-to-theme>-yaml key.
Maybe try card-mod-more-info-yaml as the key?
2 Likes
Good catch 
That was it, thanks!
1 Like
Is there a way to add a space between each card in a dashboard?
I do not mean cards inside cards. Only the āoutsideā cards. To put it differently: around each card that has an Edit button
Okay, then maybe a different approach:
Does anybody know how to modify every first card?
I tried a *first-child example of Ildarās, but I was not able to use that in themes to modify every first card e.g. in card-mod-row-yaml.
Does anybody have a working example for me?
Hi
scroll_lock:
card-mod-theme: scroll_lock
card-mod-root-yaml: |
.: |
:host {
position: fixed; # disable scrolling
}
app-header {
display: none; # disable header
}
This works, but how i disable scrolling in bubble card popup
Please post your code using the back tick ` located usually here
learn something every day.
had been looking for a way to set dark maps (without using dark mode on a device) by means of my themes, and never found it till yesterday as there was a PR in draft mode pointing to that optionā¦ @piitaya pointed to the solutionā¦ how could we have missed that at all. Add:
map-filter: "invert(.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) saturate(.3)"
to your theme and the map will get the same style as the maps when used with dark_mode: true which is perfect.
ofc, this brought on more, and given the fact I use several dynamic backgrounds in views, I wanted to set these Map background with the same filter if possible.
So, I screenshotted a relevant section of the map in light mode, set the filter, and added that to the card-theme-mod:
map-background:
card-mod-theme: map-background
card-mod-view: |
vertical-layout {
background: "center/cover no-repeat url('/local/wallpapers/map.png') fixed";
{% set dark = states('input_select.theme') is search('ight|Dark|Matrix', ignorecase=True)%}
{% set map-filter = "invert(.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) saturate(.3)" %};
filter: {{map-filter if dark else 'none'}};
}
but that filter does Not work, and I tried a few other options in css, all of them failed to have an effect.
Probably the element to set the filter on, or the naming of the filter in css itself. Iāve also tried my default test filters grayscale() or blur(), and neither of those were set either.
resorted to a simpler template (and shotted a ādarkā Map) to use:
map-background:
card-mod-theme: map-background
card-mod-view: |
vertical-layout {
background:
{% set dark = states('input_select.theme') is search('ight|Dark|Matrix',ignorecase=True)%}
{% set extension = '_dark' if dark else '' %}
{{"center/cover no-repeat url('/local/wallpapers/map"~extension~".png') fixed"}};
}
of course this works nicely, and might eve be more efficient, as the system does not need to calculate anything, well it does need to calculate the template in backendā¦ maybe not as efficient at all
The fact I cant get the filter to work keeps nagging because if that, and I would appreciate any hint you might have to get it done like that.
thx for having a look
edit
this does work (changed the filter variable name, figured it might have been a reserved system key name):
vertical-layout {
background: center/cover no-repeat url('/local/wallpapers/map.png') fixed;
{% set dark = states('input_select.theme') is search('ight|Dark|Matrix', ignorecase=True)%}
{% set flt = "invert(.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) saturate(.3)" %};
filter: {{flt if not dark else 'none'}};
}
but it is not what I wantā¦ it filters the complete view, including any cards I have in that viewā¦
so, need a better target for the filter
Iām sure, this is resulting in an error in dev tools template editor. have a look at āmap-filterā.
As always: Test your jinja2 in dev tools.
yesā¦ that too, my apologies for posting an incorrect yaml, should have corrected that.
the edit was made though and that still does not have the desired effect:
only filter the background picture, not the entire view and all of its contents
Not an expert on css filter. Though that is only for images before in general.
Iām using this for adjusting the colors of my maps for long time, here in map card:
card_mod:
style:
ha-map$: |
#map {
--map-filter: invert(0.9) hue-rotate(170deg) grayscale(1) brightness(2) contrast(1.3) !important;
position: unset !important;
}
1 Like
yes, thx.
as said, I learned about that filter option yesterday too. And use it in my theme, all maps now get conditionally darkened very nicely.
however, in the case of applying that filter to a background image, I believe we are stuck. there is no css property for background-filter, as is also worked around here Apply a Filter to a Background Image | CSS-Tricks - CSS-Tricks
the proposed solution there for the pseudo class ::before seems not feasible here, and the blend mode they mention isnt the exact filter, so I wont even start experimenting there.