🔹 Card-mod - Super-charge your themes!

jimz011 · January 21, 2022, 11:00pm

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.

jwelvaert · January 21, 2022, 11:34pm

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

RoBoHome · January 22, 2022, 1:45pm

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)

ASNNetworks · January 23, 2022, 12:47pm

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!

jimz011 · January 23, 2022, 6:08pm

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

Mariusthvdb · January 27, 2022, 10:45am

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

arganto · January 27, 2022, 3:06pm

But how to do this on second tab?

Mariusthvdb · January 27, 2022, 3:26pm

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.

arganto · January 27, 2022, 3:43pm

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

Mariusthvdb · January 27, 2022, 3:59pm

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
added some frontend control: Custom header theme · GitHub

arganto · January 27, 2022, 8:19pm

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.

Mariusthvdb · January 27, 2022, 9:21pm

a:visited

mkanet · January 27, 2022, 9:46pm

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.

DavidFW1960 · January 27, 2022, 10:41pm

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

mkanet · January 27, 2022, 11:05pm

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:

Ildar_Gabdullin · January 27, 2022, 11:45pm

I guess so.
Here my test:

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:

3. Update the theme - run service: frontend.reload_themes.
4. Check that the header now is red:

5. Switch to the 1st tab, next back to the 2nd tab - the header is again of standard color.

DavidFW1960 · January 27, 2022, 11:52pm

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

mkanet · January 28, 2022, 12:27am

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.

arganto · January 28, 2022, 7:52am

Really a pity. If you can ever find a solution, I would be more than interested.

Mariusthvdb · January 28, 2022, 8:12am

yes, check Fix Lovelace view edit mode "Done" button styling by spacegaier · Pull Request #11449 · home-assistant/frontend · GitHub