Hi, when I click a button I want to open the energy dashboard in an iframe. but it opens the settings page of the energy dashboard. maybe anyone could help me to find the right direction…
and www/community/lovelace-card-mod/card-mod.js is there.
How can I test if its working? I’ve tried changing the font-size: under h1 { multiple times and nothing is changing on my computer or phone after reloading the frontend theme in dev tools and refreshing the page.
EDIT:
When I change button-card-font-size: 1.0vw in my themes.yaml the font on the buttons does change. That would mean that card-mod is working, correct? I still cant get the card header fonts to change though.
You can see if card-mod is installed and working by checking out the chrome console, where it will report the installed version.
Although you can add it as a resource, it is recommended to add it as a frontend module. That’s also how it’s added in the original files.
For certain edits to work, I’ve had to do full restarts in HA. I’ve tried the update theme service, and the new reload yaml “restart”, but changes wouldn’t take effect until a real restart. So, I’d recommend doing that to test out edits at first, and once you can confirm that’s working, you can try alternatives.
The card-mod bits are later in the theme file, starting at line 140 in tablet.yaml
The fact that you’ve changed font-size: under h1 { and it hasn’t worked, leads me to believe either card-mod isn’t working correctly, or you need a full restart to see the changes.
I believe that message is shown even if it’s applied as recommended.
Ct.some((t=>t.endsWith("card-mod.js"))) || console.info("You may not be getting optimal performance out of card-mod.\nSee https://github.com/thomasloven/lovelace-card-mod#performance-improvements");
As for it still not working, you might have to inspect the element and look at the CSS.
In that screenshot, the card-mod h1 element styles override the .card-header styles. You should take a look to see if the card mod styles are even present, and if they are, if they’re being overridden. You might want to try adding a style in tablet.yaml h1 section that is not defined like background-color: hotpink; just to see if that shows up. If that still doesn’t work, share your tablet.yaml file, or at least the code starting from
I’m using pirate weather which gives you the attributes a little differently.
How do you write out the attribute when it’s this way?
there is no .forcast[0].templow but a - datetime: ‘2023-04-25T08:00:00+00:00’
How do I access that since the date changes every day.
Or… what do people use for weather these days? since Dark Sky is gone and Openweather doesn’t do temple and high.
Thanks
temperature: 13.5
temperature_unit: °C
humidity: 93
ozone: 323.18
pressure: 1011.7
pressure_unit: hPa
wind_bearing: 187.13
wind_speed: 3.64
wind_speed_unit: km/h
visibility: 12.6
visibility_unit: km
precipitation_unit: mm
forecast:
Pirate weather is pretty much a drop-in replacement for dark sky. .attributes.forecast[0].templow is correct. The forecast attribute is actually an array, and you’re referencing the first dataset in the array “[0]” and the templow within that dataset.
But binary sensors with a set device class still display as ‘on’ or ‘off’ (or in your case ‘An’ and ‘Aus’) correct? I’m not looking forward to having to template every binary sensor in my set up. Or is that not the case?
you need to add !important to override the .card-header styles. So for instance font-size: 2em !important;
Notice how they’re set up in the original tablet.yaml theme file.
This is what I have in my edited “tablet yaml”. And the above screenshot of devtools is what it looks like. I even have the unedited tablet.yaml to switch to and it doesnt look any different.
