Problems: Overlapping and Adding an icon to footer

Hello, I wonder that how can we change default streamlit footer with our link and writing and small LinkedIn icon . I tried something but it doesn’t seems to like default . I could set footer bottom of page (bottom:0) but it overlaps with other sections. Could you please share an example code for this?` or How can I fix my code?

my wrong code (overlapping):
import numpy as np
import streamlit as st
import pickle
import time

loaded_model=pickle.load(open(“C:/Users/Desktop/car_price_prediction/car_price_trained_model.sav”,“rb”))

def main():
with st.container():

    # giving a title as html
    
    st.markdown("<h1  style='text-align:center; color:white; background-color:red; padding: 10px; border-radius: 6px;  font-size:275%;  font-family:bernard mt condensed;'>Car Price Prediction Web Application</h1>"
                
                 , unsafe_allow_html=True)

    
    # getting the input data from the user
    st.text(" ")
    mileage=st.text_input("Mileage:")
    tax0=st.text_input("Tax:")
    tax=tax0.replace(",",".")
        
    mpg0=st.text_input("Mpg:")
    mpg=mpg0.replace(",",".")
        
    engineSize0=st.text_input("Please type engine size:")
    engineSize=engineSize0.replace(",",".")
        
      
    no_year0=st.text_input("Please type car's year:")
    no_year=no_year0.replace(",",".")
        
    
    transmission=st.multiselect('Transmission type:', ['Manual', 'Other','Semi Auto'])
    
    
    if transmission !=[] :  
             
        if transmission[0] == 'Manual':
                    
                    transmission_Manual =1
                    transmission_Other=0
                    transmission_Semi_Auto=0
                                 
        elif transmission[0]  == 'Other':   
                           
                    transmission_Manual =0
                    transmission_Other=1
                    transmission_Semi_Auto=0
                   
                
        elif transmission[0]  == 'Semi Auto':   
                           
                     transmission_Manual =0
                     transmission_Other=0
                     transmission_Semi_Auto=1
    
    
    fuelType=st.multiselect('Please type fuelType', ['Electric', 'Hybrid','Other','Petrol']) 
       
    
    if fuelType !=[] :  
             
        if fuelType[0] == 'Electric':
                    
                    fuelType_Electric=1
                    fuelType_Hybrid=0
                    fuelType_Other=0
                    fuelType_Petrol=0
                                
        elif fuelType[0]  == 'Hybrid':   
                           
                       fuelType_Electric=0
                       fuelType_Hybrid=1
                       fuelType_Other=0
                       fuelType_Petrol=0
                
        elif fuelType[0]  == 'Other' :   
                           
                           fuelType_Electric=0
                           fuelType_Hybrid=0
                           fuelType_Other=1
                           fuelType_Petrol=0
                           
        elif fuelType[0]  == 'Petrol':    
                           
                       fuelType_Electric=0
                       fuelType_Hybrid=0
                       fuelType_Other=0
                       fuelType_Petrol=1
            
      
  
    #creating a button for prediction
    if st.button('Car Price Prediction'):    
        
        #code for prediction
             
        diagnosis=''
        
        
        input=[mileage,tax,mpg,engineSize,no_year,transmission_Manual,transmission_Other,transmission_Semi_Auto,fuelType_Electric,fuelType_Hybrid,fuelType_Other,fuelType_Petrol]
        
      
         
         # changing the input_data to numpy array
        input_data_as_numpy_array = np.asarray(input)
        
         # reshape the array as we are predicting for one instance
        input_data_reshaped = input_data_as_numpy_array.reshape(1,-1)
         
        prediction =loaded_model.predict(input_data_reshaped)
        print("prediction",prediction)
        
        diagnosis=prediction[0]
        
         
        if diagnosis!="":
        
             with st.spinner('Please wait for evaluation...'):
                  time.sleep(3) 
                  st.success(diagnosis) #print the result
        
 
     # ---- CONTACT ----
    with st.container():
         st.write("----")
         st.header("Get In Touch With Me!")

         footer="""
         <style>
         a:link , a:visited{
         color: blue;
         background-color: transparent;
         text-decoration: underline;
         }
         
         a:hover,  a:active {
         color: red;
         background-color: transparent;
         text-decoration: underline;
         }
         
         .footer {
         position: fixed;
         left: 0;
         bottom:0;
         width: 100%;
         background-color: yellow;
         color: black;
         text-align: center;
         overflow:auto;

       
         }
         </style>
         <div class="footer">
         <p><b>Developed with Python</b><a style='display: block; text-align: center;'  href="https://www.linkedin.com" target="_blank">Click</a></p>
         </div>
         
         """
         
         st.markdown(footer, unsafe_allow_html=True)

if name==‘main’:

main()

Hi @murat_tasci , see if the following code works for you. You can modify it thereafter as required.

I have included the screenshot of the code, just in case the copy-paste eats some code.

footer = """
            
                .footer {
                position: fixed;
                left: 0;
                bottom: 0;
                width: 100%;
                background-color: white;
                color: black;
                text-align: center;
                }
            
        <div class="footer">
            <a href="https://www.goodreads.com/quotes/tag/reading/" target="_blank">Quotes</a> about reading
        </div>
    """

st.markdown(footer,unsafe_allow_html=True)

Cheers

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.