St.footer()

chris_klose · October 19, 2020, 9:12pm

Hello Fallas,

since I was amazed that my footer looks so neat,
I have been thinking about how to make it more general, so that others may benefit from it.
Also i wanted to make it reusable and easy to configure.
Therefore I have come up with the following code (python > 3.7):

import streamlit as st
from htbuilder import HtmlElement, div, ul, li, br, hr, a, p, img, styles, classes, fonts
from htbuilder.units import percent, px
from htbuilder.funcs import rgba, rgb


def image(src_as_string, **style):
    return img(src=src_as_string, style=styles(**style))


def link(link, text, **style):
    return a(_href=link, _target="_blank", style=styles(**style))(text)


def layout(*args):

    style = """
    <style>
      # MainMenu {visibility: hidden;}
      footer {visibility: hidden;}
     .stApp { bottom: 105px; }
    </style>
    """

    style_div = styles(
        position="fixed",
        left=0,
        bottom=0,
        margin=px(0, 0, 0, 0),
        width=percent(100),
        color="black",
        text_align="center",
        height="auto",
        opacity=1
    )

    style_hr = styles(
        display="block",
        margin=px(8, 8, "auto", "auto"),
        border_style="inset",
        border_width=px(2)
    )

    body = p()
    foot = div(
        style=style_div
    )(
        hr(
            style=style_hr
        ),
        body
    )

    st.markdown(style, unsafe_allow_html=True)

    for arg in args:
        if isinstance(arg, str):
            body(arg)

        elif isinstance(arg, HtmlElement):
            body(arg)

    st.markdown(str(foot), unsafe_allow_html=True)


def footer():
    myargs = [
        "Made in ",
        image('https://avatars3.githubusercontent.com/u/45109972?s=400&v=4',
              width=px(25), height=px(25)),
        " with ❤️ by ",
        link("https://twitter.com/ChristianKlose3", "@ChristianKlose3"),
        br(),
        link("https://buymeacoffee.com/chrischross", image('https://i.imgur.com/thJhzOO.png')),
    ]
    layout(*myargs)


if __name__ == "__main__":
    footer()

You can easily adjust the footer to your needs. You just have to pass the args in the appropriate order. Currently there are four types of args possible:

Text simply with " "
Images with source, styles
links with href, text and styles
HtmlElement (e.g. br() for line break)

In addition (without guarantee) all four components can be nested arbitrarily.
For the general layout of the footer you can adjust style_div and stlye_p respectively.

This is how it looks like:

Ofc, it is not perfect, but I guess a good start.
For all those who want it, feel free to reuse it and improve it.
Also it would be nice, if you guys @streamlit could include it in the library
so that I can use it easier next time too . Maybe st.footer() would be nice?

Cheers
Chris

thiago · October 19, 2020, 11:25pm

Nice! We’ve been considering adding something like that to Streamlit. Will bookmark this for when we have another discussion on this topic

It’s also cool that you’re using my htbuilder library

Charly_Wargnier · October 20, 2020, 7:43am

Great job on the footer Chris!

chris_klose · October 20, 2020, 9:17am

It is only possible due to the fact that i am

Standing on the shoulders of giants

htbuilder is a great library, once I understood how it works.
What i did not see was general style Class for the document so I had to do it with html.

<style>
  # MainMenu {visibility: hidden;}
  footer {visibility: hidden;}
</style>

or is there @thiago ?

Main props to @Charly_Wargnier for the idea of the footer!

sree369nidhi · October 20, 2020, 2:46pm

Hey @chris_klose, I tried executing the code but stuck at this error.

ImportError: cannot import name ‘div’

Traceback:

File "/usr/local/lib/python3.6/dist-packages/streamlit/script_runner.py", line 324, in _run_script
    exec(code, module.__dict__)File "/content/app.py", line 2, in <module>
    from htbuilder import HtmlElement, div, ul, li, br, hr, a, p, img, styles, classes, fonts

chris_klose · October 20, 2020, 2:52pm

did you install htbuilder ?
pip install htbuilder

sree369nidhi · October 20, 2020, 2:55pm

yes, I did install pip install htbuilder

Error:

ImportError Traceback (most recent call last)
in ()
----> 1 from htbuilder import div

ImportError: cannot import name ‘div’

chris_klose · October 20, 2020, 3:02pm

thiago · October 21, 2020, 12:39am

chris_klose:

What i did not see was general style Class for the document so I had to do it with html.
<style>
  # MainMenu {visibility: hidden;}
  footer {visibility: hidden;}
</style>
or is there @thiago ?

Not currently.

Although it should be easy to add that to htbuilder, with an API like:

style({
  '.foo > bar': styles(color='red', visibility='hidden'),
  '#baz': styles(position='absolute', top=px(10)),
})

If I have some time later this week I’ll look into this!

thiago · October 21, 2020, 12:40am

You should be able to replace p()() with just p()

Shivam_purbia · October 21, 2020, 1:08pm

Would you please provide a SS of how this footer would look like ?

chris_klose · October 21, 2020, 1:18pm

Ofc, here yo go.

You can easily adjust the footer to your needs. You just have to pass the args in the appropriate order. Currently there are four types of args possible:

Text simply with " "
Images with source, styles
links with href, text and styles
HtmlElement (e.g. br() for line break)

In addition (without guarantee) all four components can be nested arbitrarily.
For the general layout of the footer you can adjust style_div and stlye_p respectively.

myargs = [
    "Made in ",
    image('https://avatars3.githubusercontent.com/u/45109972?s=400&v=4',
          width=px(25), height=px(25)),
    " with ❤️ by ",
    link("https://twitter.com/ChristianKlose3", "@ChristianKlose3"),
    br(),
    link("https://buymeacoffee.com/chrischross", image('https://i.imgur.com/thJhzOO.png')),
]

rafisics · April 20, 2021, 6:47pm

I am looking forward to get a streamlit.footer() function.

rafisics · April 21, 2021, 3:28am

I wish to keep the style and position of the default footer ‘Made with Streamlit’. But I like to replace the footer text with something that you showed:

chris_klose:

        "Made in ",
        image('https://avatars3.githubusercontent.com/u/45109972?s=400&v=4',
              width=px(25), height=px(25)),
        " with ❤️ by ",
        link("https://twitter.com/ChristianKlose3", "@ChristianKlose3"),
        br(),
        link("https://buymeacoffee.com/chrischross", image('https://i.imgur.com/thJhzOO.png')),

How can I do that?

Heflin_Stephen_Raj_S · April 24, 2021, 8:44am

@rafisics Check out Streamlit footer

rafisics · April 24, 2021, 1:35pm

Thanks, @Heflin_Stephen_Raj_S
I will check it.

KevinAQM · May 13, 2021, 12:28am

Hi there, I collaborate with my code:

def image(src_as_string, **style):
    return img(src=src_as_string, style=styles(**style))

def link(link, text, **style):
    return a(_href=link, _target="_blank", style=styles(**style))(text)

def layout(*args):

    style = """
    <style>
      # MainMenu {visibility: hidden;}
      footer {visibility: hidden;}
    </style>
    """

    style_div = styles(
        left=0,
        bottom=0,
        margin=px(0, 0, 0, 0),
        width=percent(100),
        text_align="center",
        height="60px",
        opacity=0.6
    )

    style_hr = styles(
    )

    body = p()
    foot = div(style=style_div)(hr(style=style_hr), body)

    st.markdown(style, unsafe_allow_html=True)

    for arg in args:
        if isinstance(arg, str):
            body(arg)
        elif isinstance(arg, HtmlElement):
            body(arg)

    st.markdown(str(foot), unsafe_allow_html=True)

def footer():
    myargs = [
        "<b>Made with</b>: Python 3.8 ",
        link("https://www.python.org/", image('https://i.imgur.com/ml09ccU.png',
        	width=px(18), height=px(18), margin= "0em")),
        ", Streamlit ",
        link("https://streamlit.io/", image('https://docs.streamlit.io/en/stable/_static/favicon.png',
        	width=px(24), height=px(25), margin= "0em")),
        ", Docker ",
        link("https://www.docker.com/", image('https://www.docker.com/sites/default/files/d8/styles/role_icon/public/2019-07/Moby-logo.png?itok=sYH_JEaJ',
              width=px(20), height=px(18), margin= "0em")),
        " and Google APP Engine ",
        link("https://cloud.google.com/appengine", image('https://lh3.ggpht.com/_uP6bUdDOWGS6ICpMH7dBAy5LllYc_bBjjXI730L3FQ64uS1q4WltHnse7rgpKiInog2LYM1',
              width=px(19), height=px(19), margin= "0em", align="top")),
        br(),
    ]
    layout(*myargs)

if __name__ == "__main__":
    footer()

Wangnov · February 16, 2022, 7:46am

Hello Chris,

Thanks for the great work, I can also use the free style footer to add the registration number of my domain name (maybe necessary for legitimate domain use in China) and salute to Streamlit.
However, I found that the footer does not switch its font color following the theme of the main page. Maybe this is because st.markdown(arg, unsafe_allow_html=True) uses the way to embed the iframe to display the content.
So, as a novice in JavaScript, I used a little bit of JavaScript in the footer to monitor the class name change of the stApp div. When it changes, it will convert the color of the text to easy to use according to the RGB to gray value psychological formula in my code. A clear color (black or white).
I hope it helps someone using st.footer. And, thanks for the really cool htbuilder!

import streamlit as st
from streamlit.components.v1 import html
from htbuilder import HtmlElement, div, ul, li, br, hr, a, p, img, styles, classes, fonts
from htbuilder.units import percent, px
from htbuilder.funcs import rgba, rgb


def image(src_as_string, **style):
    return img(src=src_as_string, style=styles(**style))


def link(link, text, **style):
    return a(_href=link, _target="_blank", style=styles(**style))(text)


def layout(*args):
    style = """
    <style>
      # MainMenu {visibility: hidden;}
      footer {visibility: hidden;}
     .stApp { bottom: 80px; }
    </style>
    """

    style_div = styles(
        position="fixed",
        left=0,
        bottom=0,
        margin=px(0, 0, 0, 0),
        width=percent(100),
        color="black",
        text_align="center",
        height="auto",
        opacity=1
    )

    # 分割线
    style_hr = styles(
        display="block",
        margin=px(0, 0, 0, 0),
        border_style="inset",
        border_width=px(2)
    )

    # 修改p标签内文字的style
    body = p(
        id='myFooter',
        style=styles(
            margin=px(0, 0, 0, 0),
            # 通过调整padding自行调整上下边距以达到满意效果
            padding=px(5),
            # 调整字体大小
            font_size="0.8rem",
            color="rgb(51,51,51)"
        )
    )
    foot = div(
        style=style_div
    )(
        hr(
            style=style_hr
        ),
        body
    )

    st.markdown(style, unsafe_allow_html=True)

    for arg in args:
        if isinstance(arg, str):
            body(arg)

        elif isinstance(arg, HtmlElement):
            body(arg)

    st.markdown(str(foot), unsafe_allow_html=True)

    # js获取背景色 由于st.markdown的html实际上存在于iframe, 所以js检索的时候需要window.parent跳出到父页面
    # 使用getComputedStyle获取所有stApp的所有样式，从中选择bgcolor
    js_code = '''
    <script>
    function rgbReverse(rgb){
        var r = rgb[0]*0.299;
        var g = rgb[1]*0.587;
        var b = rgb[2]*0.114;
        
        if ((r + g + b)/255 > 0.5){
            return "rgb(49, 51, 63)"
        }else{
            return "rgb(250, 250, 250)"
        }
        
    };
    var stApp_css = window.parent.document.querySelector("#root > div:nth-child(1) > div > div > div");
    window.onload = function () {
        var mutationObserver = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    /************************当DOM元素发送改变时执行的函数体***********************/
                    var bgColor = window.getComputedStyle(stApp_css).backgroundColor.replace("rgb(", "").replace(")", "").split(", ");
                    var fontColor = rgbReverse(bgColor);
                    var pTag = window.parent.document.getElementById("myFooter");
                    pTag.style.color = fontColor;
                    /*********************函数体结束*****************************/
                });
            });
            
            /**Element**/
            mutationObserver.observe(stApp_css, {
                attributes: true,
                characterData: true,
                childList: true,
                subtree: true,
                attributeOldValue: true,
                characterDataOldValue: true
            });
    }
    

    </script>
    '''
    html(js_code)


def footer():
    # use relative path to show my png instead of url
    ######
    with open('footer_st_logo.png', 'rb') as f:
        img_logo = f.read()
    logo_cache = st.image(img_logo)
    logo_cache.empty()
    ######
    myargs = [
        "沪ICP备2077777777号-1	Made in ",
        image('media/ccb3c3657680f3d36265f4183c1cedde710d7242e401ab56e34bd1eb.png',
              width=px(25), height=px(25)),
        " with ❤️ by ",
        link("https://www.zhihu.com/people/Gu.meng.old-dream", "@wangnov"),
    ]
    layout(*myargs)


if __name__ == "__main__":
    footer()

SerendipityML · February 17, 2022, 8:17am

Like and encourage WeChat group friends

chris_klose · February 18, 2022, 8:35am

Hi @Wangnov,

that is a nice improvement.
I like it and thanks for your efforts to make the footer more appealing!

Best regards
Chris

Topic		Replies	Views
Streamlit footer Using Streamlit	3	16554	May 13, 2022
Can I wrap st.info or other elements inside custom HTML? Using Streamlit layout	2	4528	November 19, 2021
Streamlit markdown in function or in script Using Streamlit	4	1507	February 24, 2023
St.button() in a custom layout? Using Streamlit layout	2	10158	November 19, 2021
Streamlit formatting utilities Custom Components discussion , text	1	61	August 10, 2024

St.footer()

Related topics

Hello there 👋🏻

Cookie settings

Strictly necessary cookies

Performance cookies

Functional cookies

Targeting cookies