Iām getting some weird aliasing artifacts on the .bar class sitting on top of the .path class, where the grey path is showing through the anti-alias shading of the bar.
I attempted to fix this by widening the stroke on .bar, but I canāt seem to target it. Hereās the structure, and below that are some of the various ways Iāve tried targeting .bar with no luck.
The shadow DOM still confuses the crap out of me, and Iām not a real web developer. Iāve learned everything via trial and error, so any patient help would be appreciated.
Iām very bad with CSS and I tried my best to adapt the airy theme provided in GitHub but nothing is working as Iād like.
What I want are the #badges section at the bottom of the page and I canāt figure how to do it.
I deleted everything I tried and now here is my theme (at least the beginning of the file, ready to try whatever could possibly work.
and it is a column on the left.
What Iāve tried so far to push it to the bottom of the screen (not changing anything else):
Change column to row and center, that does work:
flex-direction: row
justify-content: center;
Put it down, that doesnāt work
position: absolute; /* fixed is not working */
bottom: 15px;
This is not working either
align-items: end;
Iām very sure that someone will find a very easy solution but as my CSS knowledge is very limited, Iām about to give up. Please help me.
Custom CSS on the sidebar and header bar is not loading unless a dashboard has loaded first. For instance, if I refresh on the Settings or Apps page, no custom CSS loads. I have to navigate to a dashboard and back to see the CSS load. Is this a known issue? I think I took it for granted, but someone logged a bug on my theme and figured I should do the due diligence. Iāve not seen this in the documentation or the issue tracker for card-mod.
Team,
I would like to increase the size of lovelace view ICONS.
In HTML I can make a change that does exactly what I want but the question is: (how) can this be done in the theme YAML?
/* Set the color of the currently selected tab indicator.
Set size of the currently selected tab icon*/
paper-tab[aria-selected=true] {
color: gold;
background-color: rgba(var(--primary),0.3);
--mdc-icon-size: {{states('input_number.active_icon_size')}}px;
}
and that works really nice and makes the current tab stand out just that bit
This question should be asked in a card-mod thread. This thread is about card-mod theme, a bit different thing.
This code is wrong.:
Instead of āstates(config.entity), āModerateāā you should use āis_state(config.entity,āsome_valueā)ā, where āsome_valueā is an exact value corresponding to āModerateā (could be āModerateā, āmoderateā - check it with Dev tools).
Alternatively - use āif states(config.entity) == āsome_valueāā.
Also, conditions should be rewritten. What you have now is (warning: this is not jinjia, this is a pseudo code to demonstrate a logic):
color:
if A then color_1
elif B then color_2
;
and what will you get if none of conditions is true?
You will get ācolor: ;ā - which will cause an error.
Use something like this:
color:
if A then color_1
elif B then color_2
else - color_3
;
I myself use this construction:
if A then color: color_1
elif B then color: color_2
else - color: color_3
For themes that contain light and dark modes, does the ācard-mod-theme:ā go in the dict for the main theme or under each mode? If it goes under each mode, whatās the proper way to modify the theme name (āMy Themeā in my example) for each?
My Theme:
card-mod-theme: My Theme /*here...*/
modes:
light:
/*...or here...*/
dark:
/*...and here?*/
OK, thatās how I had it. So, now Iām taking a step back and trying to get card-mod working with just a simple (no modes) theme. From the cookbook, this is all I have in my theme:
If I change the header-height, I can see the header height change, so I know the theme is active, but the Header Bar does not move to the bottom even after cleaning my browser cache and refreshing. Any ideas why this first step isnāt working? @Ildar_Gabdullin, is the code in the cookbook still correct for doing this?
