Hi Kendell, this solution caught my attention for a different issue.
Do you think it’s possible to change the stylesheet of markdown card with your method? Regarding the new markdown style change since HA117 you are also aware of. I’m curious if it’s possible this way to have the stylesheet a height of 0, which eliminates the changes from HA117+.
What does that mean?
With HA 117 markdown cards are rendered/styled differently. I use card-mod to alter the height of the card which worked excellent. However, there is a new variable with HA 117, a constructed stylesheet . This is set to height: 100% by default and works globally I noticed.
Using inspect element and changing the height of the stylesheet to 0, eliminates it and thus doesn’t override the card-height of markdown below it anymore.
I have tried !important with markdown btw. Yes it works, but is not practical. First stylesheet is applied and thén card mod. Which happens at each reload of a tab (also when opening the app after a time). Since I use my UI on mobile with 7 tabs, this breaks the whole practical usage because the height jumps of each markdown text for a split second.
So was hoping there is a way to completely remove the constructed stylesheet introduced with HA117.
How do you find the stylesheet to change the height of?
In the image I posted. You see what I highlighted red right? That one overrides all markdown cards. When I set it to 0 within inspector element, all markdown cards use the height set in the cards itself. So it does work, but I have no idea how to apply that as default. That’s why I hoped it’s possible through either resources or theme.yaml
Btw I created a ticket about this when HA117 released. Unfortunately there is no response and the person who made the PR for this change for HA117 doesn’t respond there anymore. So I want to find other solutions.
not yet:
I dl the complete file, and use this for the resources:
- url: /local/material/materialdesignicons.min.css
type: module
the sensor is created alright (though still with the 1 ), \\ results in
It needs to be included as a stylesheet, not a JS module.
is that like
frontend:
extra_module_url:
- /local/material/materialdesignicons.min.css
I believe CSS support has been deprecated for YAML mode, you really should be using the UI.
given Toms post Use TTF in Lovelace I think it should be doable. Seems yaml mode would be the most suitable mode to be able to do all of these customized things.
I mean, I have the css file (no need to convert?). I could try to create that loadfonts.js file, maybe like this:
function loadcss() {
let css = '/local/material/materialdesignicons.min.css'
let link = document.createElement('link');
let head = document.getElementsByTagName('head')[0];
let tmp;
link.rel = 'stylesheet';
link.type = 'text/css';
tmp = link.cloneNode(true);
tmp.href = css;
head.appendChild(tmp);
console.info('%c Font Style sheet loaded', 'color: white; background: #000; font-weight: 700;');
}
loadcss();
edit:
forget the above, cleaned things up and
created fonts.css:
@font-face {
font-family: "Material Design Icons";
src: url("https://cdn.jsdelivr.net/npm/@mdi/[email protected]/fonts/materialdesignicons-webfont.eot?v=5.8.55");
src: url("https://cdn.jsdelivr.net/npm/@mdi/[email protected]/fonts/materialdesignicons-webfont.eot?#iefix&v=5.8.55") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@mdi/[email protected]/fonts/materialdesignicons-webfont.woff2?v=5.8.55") format("woff2"), url("https://cdn.jsdelivr.net/npm/@mdi/[email protected]/fonts/materialdesignicons-webfont.woff?v=5.8.55") format("woff"), url("https://cdn.jsdelivr.net/npm/@mdi/[email protected]/fonts/materialdesignicons-webfont.ttf?v=5.8.55") format("truetype");
font-weight: normal;
font-style: normal;
}
and loadfonts.js:
function loadcss() {
let css = '/local/material/fonts.css?v=0.005'
let link = document.createElement('link');
let head = document.getElementsByTagName('head')[0];
let tmp;
link.rel = 'stylesheet';
link.type = 'text/css';
tmp = link.cloneNode(true);
tmp.href = css;
head.appendChild(tmp);
console.info('%c Font Style sheet loaded', 'color: white; background: #000; font-weight: 700;');
}
loadcss();
and added to resources.yaml:
- url: /local/material/loadfonts.js
type: module
which is, I believe following your remarks here and Toms post to the letter.
loaded alright:
this is the icon_template:
ch_weather_icon:
value_template: >
{% set mapper_icon =
{'partly-cloudy-night':'F31'} %}
{% set mapper_br =
{'pouring':'596',
'lightning-rainy':'67E',
'snowy-rainy':'67F'} %}
{% set mapper_ds =
{'sunny':'599',
'clear-night':'594',
'partlycloudy':'595',
'rainy':'597',
'snowy':'598',
'snowy-rainy':'67F',
'windy':'59D',
'fog':'591',
'cloudy':'590',
'hail':'AC1',
'lightning':'593'}%}
{% set icon = states('sensor.dark_sky_forecast_icon') %}
{% set buienradar = states('weather.buienradar') %}
{% set dark = states('weather.dark_sky') %}
{% set weather = mapper_icon[icon] if icon in mapper_icon else
mapper_br[buienradar] if buienradar in mapper_br else
mapper_ds[dark] if dark in mapper_ds
else 'F37' %}
\\F0{{weather}}
Still no such luck yet:
Can you go into the network tab of devtools and see if there are any errors? Can you also post your whole theme file including the mapper? And don’t use double-slash.
really sorry but I don’t have that using Home Assistant OS
wait, you mean in inspector probably, which is all ok as it seems?
custom_header:
name: Custom header
card-mod-theme: custom-header-option
background-color-on: var(--primary-color)
background-color-off: var(--card-background-color)
text-color-on: var(--card-background-color)
text-color-off: var(--primary-color)
icon-color-on: var(--card-background-color)
icon-color-off: var(--primary-color)
active-color: var(--paper-item-icon-active-color)
ha-card-border-radius: 0px
ha-card-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)
restriction-lock-row-margin-left: 95%
tried that, but then it gave me the small square with the x in it.
there are two devtools:
#1:
What about filtering by CSS? Is fonts.css loaded?
When you click on it and go to the response tab, what shows up?
Huh. I’d recommend next downloading the ttf and woff2 files and hosting them yourself, and then updating fonts.css to use them and remove everything else.
Hi, did you happen to have an idea about this?
