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.
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
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! 
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?
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 
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:
- 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.
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.