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

I looked at that before I posted but didnā€™t see an example of what I want to do. Templating is still over my head.

If you simply copy and paste the example you will get this:

Hi everyone, I have been trying to create a fixed footer card at the bottom of the view, but simple css doesnā€™t work well.

I have tried this

- type: markdown
  content: test
  card_mod:
    style: |
      :host {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 999 !important;
      }

The example above gives the desired result when scrolling through pages with a lot of content. The card sticks to the bottom as expected. However, on views with little content, the card will be placed exactly below the last card.

- type: markdown
  content: test
  card_mod:
    style: |
      :host {
        position: absolute !important; /* or fixed, which gives the same result */
        bottom: 0 !important;
        z-index: 999 !important;
      }

The example above works as intended when there is little content on the screen, the card sits neatly at the bottom of the view. However when there is more content on the view, the card will be pushed down and will only be visible when scrolling down the entire view.

Basically what I want is a fixed footer at the bottom of the view, normally position: fixed or position: absolute with bottom: 0 would be sufficient to create such a thing. However with lovelace this doesnā€™t seem to work at all.

I have tried creating a class within the card-mod global theme, but that seems to give an even weirder effect where the card would not be fixed to the bottom, nor being placed just below the last card but somewhere in between. (not entirely sure on how to use classes, but this is what I have tried)

# Theme File /themes/test.yaml
  card-mod-theme: Test
  card-mod-card: |
      ha-card.myfooter {
        border-radius: 0px !important;
        position: fixed !important;
        height: 55px;
        bottom: 0;
      }
# Card
- type: markdown
  content: My Footer
  card_mod:
    class: myfooter

The above example will apply the border radius and the height as expected, but fixes the card somewhere in between the bottom and last card as mentioned above. I also tried position: absolute and sticky where sticky wouldnā€™t work at all when used in this way.

I have been trying to create a footer for months now but I just canā€™t seem to figure it out. Any help here would be highly appreciated.

Also another question: Is it possible to apply card-mod-theme to the default theme? For example I want the HA tabs bar to move to the bottom, but still be able to select colors via the color picker in the profile menu.

My apologies for the long question, this mod is awesome but sometimes a bit complicated for a novice like myself.

2 Likes

Maybe you have something set elsewhere to do that? Mine shows

UPDATE: Wowā€¦ in the morning after I was extremely surprisedā€¦ The Android Companion App was showing the colors !!! So (just guessing) there might be some caching in the data part of the app. Anyway, Iā€™m very happy to know that a) I didnā€™t make a mistake and b) itā€™s working as I would like to have it. Iā€™m leaving this post for users that might experience the same.

===================================================================

Just found out about lovelace-card-mod, because I wanted to have state-dependent colors on a state-icon. Iā€™ve got this working very nicely on chrome on my PC. On android in chrome itā€™s also working. However the Android Companion App refuses to show the configured colors.
Not sure if this is a bug or Iā€™m doing something wrong.
Iā€™ve tried changing themeā€™s within the app, removed/cleared the Apps cache, have set the state_color to either true and false.

Below is my bare minimum code. What can I do more/different before raising a bug?

type: picture-elements
image: /local/CV.png
style: |
  ha-card {
    --my-color-gas: {% if states('sensor.boiler_gas') == "on" %} orange {% else %} grey {% endif %};
  }
elements:
  - type: state-icon
    entity: sensor.boiler_gas
    style:
      top: 62%
      left: 37.5%
      '--paper-item-icon-color': var(--my-color-gas)

Yes, I have tried many things as well a long time ago. Nothing seemed to work. I believe it would work with flexbox, but that doesnā€™t work in Lovelace. I asked around on this community forum and came to a stop. I created a workaround back then for pages that were too short. I use gap-card (part of layout-card now) to add empty spaces at the bottom of my view, on the tabs that are shorter. Itā€™s not ideal (especially with different devices that have different heights and conditional cards), but it getā€™s the job done till a better solution comes.

This was my post: šŸ”¹ Card-mod - Add css styles to any lovelace card - #879 by ASNNetworks

And I got a response from TKBow: šŸ”¹ Card-mod - Add css styles to any lovelace card - #901 by ASNNetworks

Maybe you can get this working with his answer. Though I have a feeling itā€™s not going to work as how you and I want it to work.

I hope HA will just create a core option to sticky cards to top and bottom of the page. This will solve all issues and remove the need to resort to hacky solutions.

Keep me updated! :grinning:

1 Like

Well that is what I thought, I remember I have tried it in the past. But I thought this might had changed. Unfortunately not possible. I use card mod to modify the default header to be as a footer, but the options are quite limited.

Thanks for the info though, I will stop giving myself headaches then. Haha

not sure if this was posted before, but helping out on discord today and thought Iā€™d share here too:
nice if you dont need the link, or find it lacking. simply hide it.

    card-mod-more-info-yaml: |

      $: |
        .mdc-dialog {
          backdrop-filter: blur(17px);
          -webkit-backdrop-filter: blur(17px);
        }
/* hide the 'Show more' on the modern more-info cards */
      ha-more-info-history:
        $: |
          .header > a, a:visited {
            display: none;
          }

But how to do this on second tab?

image

mm, not sure yetā€¦ seems to return the same path in inspectorā€¦
/html/body/home-assistant//ha-more-info-dialog//ha-dialog/div[2]/ha-more-info-history//div/a

also, the other mod is not very sticky when used in the card-mod-theme. Ive seen that with other mods, and decided to add those to love cards directly.

eg

  - type: custom:fold-entity-row
    head:
      type: section
      label: Label
      card_mod:
        style: |
          .label {
            margin-left: 0px;
          }

which works very reliably like that.

more-info ofc can not be done that way, so I fear weā€™re on our own here. Maybe Ildar would know of a way, or Kendell.

I think the second tab it is loaded asynchronously and then the mod is not re-applied. Something like this.

could you check please:

      ha-more-info-history:
        $: |
          .header > a {
            display: none;
          }

seems to do the same? hide show more on first tab, not hide on History tab.

also for the logbook on more-info:

      ha-more-info-logbook:
        $: |
          .header > a {
            display: none;
          }

And, if it does the same, its less code, so less can go wrong :wink:
added some frontend control: Custom header theme Ā· GitHub

Hm. Where is the difference to your first try? I used the same for some months (not to hide, but for other colors). But unfortunately it works only on first tab.

a:visited

I am using the Compact header code from the cookbook for my custom theme. However, thereā€™s an issue when I enable Edit Dashboard in Lovelace. I am not able to click on the + icon at the top/left of the screen to exit Edit Dashboard mode.

See below screenshot, I am hoping someone who knows CSS much better than me could help modify the CSS Compact Header code from the Cookbook so I can exit Dashboard mode again.

This is my mod for custom header. I donā€™t have your issue.

  # CUSTOM-HEADER MODS
  card-mod-theme: ios-dark-mode-blue-red-mod
  card-mod-root: |
    .edit-mode, app-header, app-toolbar {
      background: url('/hacsfiles/themes/ios-themes-mod/homekit-bg-blue-red.jpg') !important;
    }
  header-height: 48px 

Just tried to take a screenshot but Iā€™m on beta and it looks like the new frontend has changed it to a done button now

Thank you. That fixed the issue. However, when I enter ā€œEdit Dashboardā€ mode, it wastes a lot of empty space. Do you (or anyone else) know how to make the ā€œEdit Dashboardā€ header also compact?

This is what it looks like now:

I guess so.
Here my test:

  1. Create a theme:
  card-mod-more-info-yaml: |
    ha-more-info-history $: |
      .header {
        color: red;
      }
    .: |
      ha-more-info-history {
        --secondary-text-color: orange;
      }

2.Open more-info popup, switch to the 2nd tab - the color: red is not applied, the scale is orange:
image
3. Update the theme - run service: frontend.reload_themes.
4. Check that the header now is red:
image
5. Switch to the 1st tab, next back to the 2nd tab - the header is again of standard color.

itā€™s only while you are editing so whatā€™s the problem? i donā€™t think you can fix that

Yes, itā€™s only while Iā€™m editing; which sometimes I use a lot. I thought it would be possible via card-mod since I saw CSS code referencing edit mode in the Cookbook link I posted. I just wasnā€™t sure what to change.