St.footer()

Custom Components
21

Hi @thiago I tried to deploy an example using footer to cloud , it throws this error

File "/app/streamlitapp/demos/demo_concept.py", line 33, in <module>

    from htbuilder import HtmlElement, div, ul, li, br, hr, a, p, img, styles, classes, fonts

ModuleNotFoundError: No module named 'htbuilder'

htbuilder is specified in requirements.txt, Any suggestion? Thank you

22

Hi @wgong27514 :wave:

Would you mind deleting your app on Streamlit Cloud and redeploying it? I was able to fork your repo and deploy demo_concept.py without issues. :thinking:

image
image1649×1402 452 KB

Best,
Snehan

1 Like
23

Thank you @snehankekre ! Your fix of deleting app and re-deploy worked

1 Like
24

Hi Team,

How can insert the image at bottom of the page?

Thanks,
praveen

25

Hello there.

I would like to collaborate with my code, it may not be as pleasing to the eye as the one provided by @chris_klose but mine doesn´t need to import from htbuilder:

ft = """
<style>
a:link , a:visited{
color: #BFBFBF;  /* theme's text color hex code at 75 percent brightness*/
background-color: transparent;
text-decoration: none;
}

a:hover,  a:active {
color: #0283C3; /* theme's primary color*/
background-color: transparent;
text-decoration: underline;
}

#page-container {
  position: relative;
  min-height: 10vh;
}

footer{
    visibility:hidden;
}

.footer {
position: relative;
left: 0;
top:230px;
bottom: 0;
width: 100%;
background-color: transparent;
color: #808080; /* theme's text color hex code at 50 percent brightness*/
text-align: left; /* you can replace 'left' with 'center' or 'right' if you want*/
}
</style>

<div id="page-container">

<div class="footer">
<p style='font-size: 0.875em;'>Made with <a style='display: inline; text-align: left;' href="https://streamlit.io/" target="_blank">Streamlit</a><br 'style= top:3px;'>
with <img src="https://em-content.zobj.net/source/skype/289/red-heart_2764-fe0f.png" alt="heart" height= "10"/><a style='display: inline; text-align: left;' href="https://github.com/sape94" target="_blank"> by sape94</a></p>
</div>

</div>
"""
st.write(ft, unsafe_allow_html=True)

streamlit_footer
streamlit_footer3103×121 10.2 KB

2 Likes
26

This works well but unfortunately doesn’t work with the new st.chat_input widget.

Any ideas?

27

Chris, thanks for sharing the code. When I replace the streamlit image with mine (local) in myargs list, I get an invalid picture that is never rendered properly.
invalid

Can you please suggest changes to your code so that this is fixed? I am fairly new on Javascript.

myargs = [
“reserved.”,
image(“./assets/footer.jpg”,
width=px(25), height=px(25))
]

Thank you.

28

HI @chris_klose ,
thanks for the component, I’m new to streamlit.
I’m facing some challenges with this :

  1. how to read an image from prjet directory(image/logo.png)
  2. how can i controll the height of the footer
  3. when I remove marg i see this gap between the footer and the sidebar :
    image
    image958×206 4.44 KB

do you have any solution to this please ?
thanks

29

@sape94 ,
is there a way please to set an image from the project directory using your code ?
thanks