was this for me Kendell? if so, where does my icon template come in to play?
Yeah it was for you, can you post your current theme file?
this was what I did to use the card-mod -theme for CH
darkblue:
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%
and ended up here
custom-header-option:
card-mod-theme: custom-header-option
card-mod-root: |
mwc-icon-button[slot="trigger"] > ha-svg-icon {
display: none;
}
mwc-icon-button[slot="trigger"]::after {
font-size: 22px;
height: 20px;
width: 200px;
margin-left: 0px;
margin-right: 0px;
content: "{{states('sensor.time')}} - <ha-icon icon={{states('sensor.weather_icon')}}></ha-icon>{{states('sensor.temp_current')}}°";
position: absolute;
top: 14px;
right: 0px;
}
which of course doesnt work yet, but gives you an idea of what Id like. Taking out the middle <ha-icon icon={{states('sensor.weather_icon')}}></ha-icon> works fine.
Go to Lovelace Resources tab. Add this URL as a stylesheet:
https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css
You wonât be able to use text in your sensor, youâll need to convert air-conditioner to \F001B for example. Look at the stylesheet for the whole map:
https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.css
And hereâs the theme file:
custom-header-option:
card-mod-theme: custom-header-option
card-mod-root: |
mwc-icon-button[slot="trigger"] > ha-svg-icon {
display: none;
}
mwc-icon-button[slot="trigger"]::after {
font-size: 22px;
height: 20px;
width: 200px;
margin-left: 0px;
margin-right: 0px;
content: " - {{states('sensor.time')}} - {{states('sensor.temp_current')}}°";
position: absolute;
top: 14px;
right: 0px;
}
mwc-icon-button[slot="trigger"]::before {
content: "{{states('sensor.weather_icon')}}";
font-size: 22px;
height: 20px;
width: 200px;
margin-left: 0px;
margin-right: 25px;
position: absolute !important;
top: 14px;
right: 0px;
font-family: Material Design Icons;
}
Screenshot of it:
1 Like
wow, this nice!
let me ask please: instead of adding that huge file as resource, cant I simply create a jinja template using these translations directly?
replacing the icons with their respective code like
.mdi-weather-cloudy::before {
content: "\F0590";
}
seems way shorter and more economical?
{% set mapper_icon =
{'partly-cloudy-night':'night-partly-cloudy'} %}
{% set mapper_br =
{'pouring':'pouring',
'lightning-rainy':'lightning-rainy',
'snowy-rainy':'snowy-rainy'} %}
{% set mapper_ds =
{'clear-night':'night',
'partlycloudy':'partly-cloudy'} %}
becoming:
{% set mapper_icon =
{'partly-cloudy-night':'\F0F31'} %}
{% set mapper_br =
{'pouring':'\F0596',
'lightning-rainy':'\F067E',
'snowy-rainy':'\F067F'} %}
{% set mapper_ds =
{'clear-night':'\F0594',
'partlycloudy':'\F0595'} %}
Or is this what youâre telling me to do in the first place, after adding the resource 
Your mapper should work with the codes, you might need to make the \ into \\. You do need the CSS to load material design icons, but you could try to just grab out the part you need from that file and host in in \config\www:
@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;
}
Did it work or not?
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?
theme file:
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:
#2:
#2 is under browserâs menu > more tools > developer tools. Go to network and refresh the page while itâs open and recording. Then filter by fonts, and see if it gets loaded.
