Hey June! Wait & See ... maybe enabling CSS parsing for backgroundColor in the config file for theming could already help. I think this is the kind of feature that needs activity in this issue (github.com/streamlit/streamlit/issues/2725 ) to be considered
😆 Aren't my videos too "exciting" to get you to sleep?! Thanks for the support as always, very appreciated :) also there's a new one coming tomorrow eheh
@@lucasfescina From memory anything stored in the Github repo is available in the deployed app. As long as the pickle is not too big and stored in Github it should be fine. You can also download it from some remote Google drive location and cache it after deserializing.
Funny presentation and amazing content. A bit too fast for me with all the code in the background (but need to learn to use the k key) Anyways, one thing I have not understood. So, normally one needs to put the image in the correct static folder. Seems normal and easy. You say you want to use a markdown as text (image -> text encoding). Fair enoug, but where do you put the image file? I did not get it.
Hello! As per the source code ( github.com/andfanilo/social-media-tutorials/blob/master/20220817-streamlit_css_background/streamlit_app.py ) you can put the image wherever you want, since you are going to read the image in your Python code and encode it as base64 programmatically ( with the `get_img_as_base64("image.jpg")` line, if you put the image in an "assets' folder it will be `get_img_as_base64("assets/image.jpg")`) This video being a little old, there is now a better way to do with static file serving ( docs.streamlit.io/library/advanced-features/static-file-serving ). 1. You enable static file serving through `.streamlit/config.toml` adding: ``` [server] enableStaticServing = true ``` 2. you put your image in `static` folder at the root of your project, it should now be served at the `localhost:8501/app/static/image.jpg` link 3. In your st.markdown code, you can point directly to the image url instead of using the base64 representation: ``` import streamlit as st page_bg_img = f""" [data-testid="stAppViewContainer"] > .main {{ background-image: url("app/static/image.jpg"); }} """ st.markdown(page_bg_img, unsafe_allow_html=True) ``` Good luck!
hi sensei, first things first thk for the video so i can learn how to customize background on streamlit using css, but i got 1 tiny problem, which is the photo form url is not in the streamlit background, how to fix it sensei🙏🙏
thanks for the video. I want to change the background color of only one column/container and tried the code below but it changes the color of all of the columns/containers. How can I handle it? columns(2) with cols [0]: page_bg_img = """ [data-testid="column"] { background-color: black; } """ st.markdown(page_bg_img,unsafe_allow_html=True)
Hey! It's a bit of a pain but discuss.streamlit.io/t/changing-color-of-a-column/10175/3 or ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-SLyS0v8br20.html should help I haven't tried but extras.streamlit.app/Styleable%20Container on a specific column css may do the trick too Hope this help quickstart something! Fanilo
tks for the video, I have a problem, when I try to add a local background image with the base64 method, the "No such file or directory: 'image.jpg' " error appears. I have the image in the same folder where I have the .py file, that is correct? I really appreciate your help
Hello Vladimir! It will depend on the working directory, which is from where you are running the streamlit command. If you are running from a different folder than where the script is, then the relative path will start from the initial folder, not the script's one. Same issue if you are running a multipage app, the folder for the relative pathing would not be your script but the root main script. Don't hesitate to run "st.write(os.getcwd())" to see where you are running this from, and "st.write(os.listdir("./"))" to see if your image.jpg is in this list, and if that's not the case you may need to change "image.jpg" to "../image.jpg" or "folder/image.jpg" to traverse your directory. Or not totally tested but the __file__ variable returns the location of the file so using pathlib you could do "(Path(__file__).resolve().parent / "image.jpg"" to go from your script to the script's folder to the image.jpg next to the script. Hope this helps Fanilo
@@andfanilo Hey Fanilo ! I ran " st.write(os.listdir("./")) " and found my image in the list. But still couldn't find my background image in my website. Could You please help ? Thank You Sahitya
I mean, I could still capture the live video/audio feed with OBS for example, so even if you can prevent it at browser-level, I can capture the live feed. But I think I understand, there are ways to make it harder from stackoverflow.com/questions/9756837/prevent-html5-video-from-being-downloaded-right-click-saved . Apparently by adding 'oncontextmenu="return false;"' to any video element it would be doable. Using the technique described here (ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-SLyS0v8br20.html) to leave the component , target all video elements and apply that contextmenu, yeah it could work. I haven't tried since I'm actually on a summer break :) but let me know if that helps a bit
Bro when you are explaining , please say it completely and clearly please. Most of people in streamlit community wants colour-gradient i their code , and you just said do this ....etc. Everything is in a big hurry. Please bro , youtube time limit is 10 or 12 mins right? So please , say things slowly and clearly . So that any beginner who watches your video can learn. Clearly I am confused. Your gradient method isnt working in my code. I wrote the complete argument too. See? this is what i meant by not understanding bro. I'm not hating on you. But people came to see your video , watching yo thumbnail about some basic css styling and you explained everything in a jiffy.
Hey Fanilo, This is not working for me when I test on my local machine. Can you advise? @st.cache_data def get_img_as_base64(file): with open(file, "rb") as f: data = f.read() return base64.b64encode(data).decode() img = get_img_as_base64("./images/DeltaPacific_Logo.jpg") [data-testid="stSidebar"] > div:first-child {{ background-image: url("data:image/jpg;base64,{img}"); background-size: 200px; background-repeat: no-repeat; background-position: center; }} Thank you in advance
