i would also try and clear the cache, but yes different browsers are going to treat @media queries differently.
but also i would note when you say dark mode - do you mean dark mode set from the Homeassistant app or dark mode from the device itself?
@media will pull from the device itself usually.
The browser/app since they do not necessarily match the device and if not set to auto will override the device setting anyways. Is there a way to query the browser/app?
Does anyone know how to increase the size of the label name for a input_select.? Iâve tried using the browser inspect feature but havenât had any success.
if you are using a browser it should use whatever the browser is set to. so if your browser is set to light, but homeassistant on that browser is set to dark mode. @media will still treat that as being in light mode.
The app is slightly different, to my understanding @media will use what is set in the app. regardless of system mode. (but my knowledge is based on android, so might be different on IOS).
the theme set in the app. not to my knowledge no.
Processing dark mode was explained there:
1st post - link at the bottom - others - dark theme
Check examples and explanations about dark, light, automatic etc.
Similar to what Dimitri says.
Could someone please tell me what is wrong with this: (The coloring code works, the error is confusing me).
card_mod:
style: |
ha-card {
background:
{%- set sensor = states('binary_sensor.grid_status') %}
{%- if sensor == 'on' %} color-mix(in srgb, var(--white-color) 10%, var(--card-background-color));
{%- else %} color-mix(in srgb, var(--red-color) 50%, var(--card-background-color));
{%- endif %}
}
The following show up 1372 times in the past 2 days.
Template variable warning: âseâ is undefined when rendering âha-card { background-color: {%- set sensor = states(âbinary_sensor.grid_statusâ) %} {%- if sensor == âOnâ %} #ff0000 {%- elif se %} #ffffff {%- endif %} }â
Template variable warning: âsenâ is undefined when rendering âha-card { background-color: {%- set sensor = states(âbinary_sensor.grid_statusâ) %} {%- if sensor == âOnâ %} #ff0000 {%- elif sen %} #ffffff {%- endif %} }â
Template variable warning: âsensâ is undefined when rendering âha-card { background-color: {%- set sensor = states(âbinary_sensor.grid_statusâ) %} {%- if sensor == âOnâ %} #ff0000 {%- elif sens %} #ffffff {%- endif %} }â
Template variable warning: âsensoâ is undefined when rendering âha-card { background-color: {%- set sensor = states(âbinary_sensor.grid_statusâ) %} {%- if sensor == âOnâ %} #ff0000 {%- elif senso %} #ffffff {%- endif %} }â
Template variable warning: âdict objectâ has no attribute âvalueâ when rendering â{{ value_json.value }}â
The error do not belong to the code above. Search´, where you use the code, which produce the error. Compare e.g. background-color
It works, thank you very much
I had tried with float but without the (0).
The (0) is because the read value is in decimals with 0 at the beginning. so 0.100 ?
Itâs a default value. You should provide one.
How can I add the output of a sensor (temperature) to a default Home Assistant Button Card as secondary info?
With before or after. See examples from ildar in first post of this thread as always.
How to modify font size in the current date shown by standard calendar card. Original is too big, especially in mobile app.
Additionally: is possible to modify date format to numeric one (to e.g. 09/09/2023)?
No with card-mod.
Ok, clear, thx. What about font size?
Thanks for your reply, have been fighting pneumomia in the meantime so only just got to try it. It doesnât work sadly, itâs not being applied at all as far as I can see. Iâm not that good with styling, but maybe you see whatâs wrong if I send you a snippet of what Iâm after from the DevTools?
Since there is no ready example - guess you will have to do it by yourself. Use examples provided in the 1st post as a starting point; use Code Inspector to find out a proper path to elements to be styled.
Ok, clear, already done. In case, somebody else is interested:
card_mod:
style: |
ha-card {
background-color: ivory;
--ha-card-background: #f0f8e0 ;
--paper-font-headline_-_font-size: 1.5em
}
If you want to change the amount of space taken up by the four elements, thatâs not the html-element to target. The size of the four elements is defined by the flexbox at <div id="root" dir="ltr">, which is 9 rows higher up in your screenshot. The element that you have highlighted will change the distribution within the individual elements - my understanding is that thatâs not what you want, right?
I just tried to replicate your setup and noticed that for some reason the flexbox basically skips a hierarchy -but this should work (while youâre at it, maybe change to the new custom:stack-in-card):
type: custom:stack-in-card
cards:
- type: custom:mod-card
card_mod:
style:
hui-horizontal-stack-card $: |
div#root > :first-child > * {
width: 43%;
flex: auto;
}
div#root > :nth-child(2) > * {
width: 27%;
flex: auto;
}
div#root > :nth-child(3) > * {
width: 15%;
flex: auto;
}
div#root > :last-child > * {
width: 15%;
flex: auto;
display: flex;
justify-content: flex-end;
}
card:
cool car by the way!
This is exactly what I needed, thanks so much!!!
Never wouldâve figured out, nor do I understand why the extra â> *â is needed now. If you could elaborate on that part, Iâd appreciate it a lot.
P.s.: tried changing to the stack-in-card, but the vertical alignment is off when I do that. Need to look into that one as well, thanks for the hint.
Thatâs just standard CSS selectors - if you frequently style your cards it would definitely make sense to read up on this - w3 schools, mozilla, and css-tricks have some great resources on this (css tricks is a godsend if you want to style flexbox or grid).
letâs start with why itâs even the root element that I mentioned
You were on the right track with your dev tools - if you had highlighted the #root element, this will be highlighted on your webpage as well and you can see that this is what creates the flex elements - this is also indicated by the flex chip in the dev tools. And then basically the direct children of this element are the ones that get their sizing from the flexbox based on different criteria (again, see css-tricks on flexbox regarding how you can style these - other approaches would have worked as well, you could also define the sizes dynamically which might even make more sense in your appplication â then the browser defines the best sizes which makes it much more responsive).
How to select the correct element
In this case, for some reason, it skips a hierarchy (donât ask me why, I donât understand that, it seems hui-card isnât a real element) - you can see that be hovering over the children elements in the dev tools and see whatâs being selected. If you select the <mushroom-template-card> in your dev-tools youâll see that indicated on your webpage. Thatâs also where I found the flex: ruleset and realized that this was the item being styled. There you can also see the selector that using the asterisk because it skips a level.
Basically what that selector is doing is: find a div with id=root, of its immediate children (indicated by >) take the first child and of its immediate children take all (which is just the one element). So youâre doing root>hui-card>mushroom-template-card, which is the element you want to style.
itâs really just finding the element to target and then find the path to it from the element that youâve started from (which is the hui-horizontal-stack-card).
Usually you wouldnât need every single step, this is just because of your setup wanting to target very specific elements. If you wanted to target all four elements at once you could have done #root mushroom-template-card for example - this would have targeted all 4 of your items and you could e.g. change all of their font sizes.
regarding your mushroom-card element
You had <mushroom-card> selected, which is also a flex-box. There is certainly a way how you could have used that to change the size, but it would have been much more complicated to get the other element to react accordingly. Whenever you have a flexbox or a grid itâs easiest to work from the top down.
They are made to be responsive and change sizes dynamically, so itâs best not to target element too deep down in the hierarchy. As mentioned: even better than your fixed percentages would be to work with flex-grow and flex-shrink for example (not tested, but should be possible), as this helps the content to react to larger and smaller screen sizes. On a ultrawide monitor a width of 43% is way too much - scaling all elements accordingly would probably be the way to go. Flexbox and Grid take a lot of the manual rules out of the game and let the browser decide whatâs best - you just have to define some guidelines (such as min-width/max-width, flex-grow, flex-shrink, etc.)