šŸ”¹ Card-mod - Add css styles to any lovelace card

Forgive me my novice question. Is it possible with card-mod to completely hide the sidebar? Iā€™m trying to substitute the CH somehow. There is a div named "contentContainer" outside <partial-panel-resolver> which should be hidden.

Custom Header doesnā€™t do anything with sidebars. It might be possible if you know more about :host than me.

I think top should be changed to bottom

1 Like

I feel so stupid. I tried that a while ago, figured use logic. But that didnā€™t work. Now I tried it again and had the genious idea to actually put the card on the bottom in lovelace as well (tried before with the one at the top :man_facepalming:)

Works! This is great, opens up lots of possibilities :)!

edit: @KTibow is it possible to force the card to be at the bottom of the display (perhaps something with 100vh). Right now, itā€™s at the bottom, but then the lovelace view has few items, the card is the final card, but is not at the bottom of the screen. I try to sticky it at the bottom of the display.

I would love to have something like that. I am using a couple of icons with popup card connected to them for things I always want to have in sight.

This is my current layout wit CH:

My CSS skills are lacking, so I Googled a bit. So it turns out this is the standard behaviour of sticky items: https://css-tricks.com/couple-takes-sticky-footer/

However, there are ways to go around this by using flexbox. See this: https://stackoverflow.com/questions/4575826/how-to-push-a-footer-to-the-bottom-of-page-when-content-is-short-or-missing

I copied some code mentioned there and applied it, but that didnā€™t work. I think other things need to be set up first in order for the css code to work. I have no idea if this is even supported with card mod.

@thomasloven care to chime in your thoughts/experience on this, if you have the time?

In trying to put a border around a badge-card, I think Iā€™ve lost my mind.
I see that if I open the editor and add
border: solid 1px #DEDEDE;
to #badges, I get the desired effect. So, I am trying to inject this code where the red line is in the picture below.

image

- type: custom:badge-card
  badges:
    -entity....
  style:
    $: |
      "#badges div":
        #badges {
          border: solid 1px #DEDEDE;
        }

Iā€™m lost. Thanks for any help.

Badge-card doesnā€™t have a ha-card element, and thus canā€™t be styled without mod-card.

Thank you for the reply and the awesome tools you provide. Iā€™ll try using mod-card.

Can anyone tell me why the black color of the icon is displayed in lovelance?

image

image

Looks like the template isnā€™t evaluating, I think you need to put quotes around the entityā€™s name:
states(sensor.heating_activated)
states('sensor.heating_activated')
When in doubt, check the template section of HA dev tools.

The side bar can also be disabled in the user settings / profile. No need for card mod.

Thanks for the suggestion.
I am trying the following configuration but the icon is always yellow (active), even though the condition is not met. Do I have invalid syntax?

  - entity: sensor.heating_activated
    style: |
      :host {
        --paper-item-icon-color:
          {% if states(config.entity) , 'on' %}
            var(--state-icon-active-color)
          {% else %}
            var(--state-icon-color)
          {% endif %}
          ;
      }

{% if states(ā€˜config.entityā€™, ā€˜onā€™) %}

Iā€™ve tried it before too, but in this form I have a black icon

image

Check the state in dev-tools when it in on. It is case sensitive. Might be On not on. Also check what happens in the template editor using the real entity.

I see an error in the console.

State is on/off

{% if states(ā€˜config.entityā€™) == ā€˜onā€™ %}

Change states to is_state

Yeah either will workā€¦