šŸ”¹ Card-mod - Super-charge your themes!

trying my first CH replacement now for the overflow option, Id like to see this back happening:

      content: "{{time}} - <div style='display:inline-block; height:32px; width:32px; vertical-align:middle;'><ha-icon icon='{{states('sensor.weather_icon')}}';></ha-icon></div> - {{states('sensor.temp_current')}}Ā°";

to have it show like:

Schermafbeelding 2020-11-19 om 23.17.25

but so far I am out of luck. would this in any way be possible?

this seems to work:

    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;
    }

but the icon is still out of my css /html knowledge, returning:

Schermafbeelding 2020-11-19 om 23.27.45
thanks for having a look

HTML isnā€™t supported in CSS, and it shouldnā€™t. CSS is for styling, HTML is for layout. You could try using a special ligature font.

not sure how that would work? you mean trying to replace a weather icon with a ligature font somehow? seems not possible, since I simply want to show an mdi icon in the header, following this template:

      weather_icon_backend:
        value_template: >
          {% 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'} %}
          {% set icon = states('sensor.dark_sky_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
                           dark if dark in
                             ['sunny','rainy','snowy','snowy-rainy','windy','fog','cloudy','hail','lightning']
                           else 'sunny-alert' %}
            mdi:weather-{{weather}}

:wink: guess will have to do without that beautiful CH feature, yet again.

This might help:


Youā€™ll have to settle on having the weather icon on the left or right side, not in the middle, and donā€™t try your fancy CSS inline styling.

that would be no problem at allā€¦

yeah, I thought as much, so already tried that, but since that was with the template sensor in place, had no luck yet.

not sure I grasp the direction the link you posted sends me, so I need some study time hereā€¦

Go download this:
https://github.com/google/material-design-icons/blob/96206ade0e8325ac4c4ce9d49dc4ef85241689e1/font/MaterialIcons-Regular.ttf?raw=true
Then see this:

Then test out this theme file:

slate:
  card-mod-theme: slate
  card-mod-root-yaml: |
    .: |
        mwc-icon-button[slot="trigger"]::after {
            font-size: 22px;
            height: 20px;
            width: 200px;
            margin-left: 0px;
            margin-right: 0px;
            content: "oldhere";
            position: absolute !important;
            top: 14px;
            right: 0px;
        }
        mwc-icon-button[slot="trigger"]::before {
            content: "done";
            font-size: 22px;
            height: 20px;
            width: 200px;
            margin-left: 0px;
            margin-right: 25px;
            position: absolute !important;
            top: 14px;
            right: 0px;
            font-family: Material Icons;
        }

Increase the last margin-right if you need to.

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:
image

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 :wink:

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.

image
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:

Schermafbeelding 2020-11-22 om 00.55.33

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

Schermafbeelding 2020-11-22 om 01.04.16

It needs to be included as a stylesheet, not a JS module.

is that like

frontend:
  extra_module_url: 
    - /local/material/materialdesignicons.min.css