This repository contains guides and templates for embedding CSS into Streamlit applications. It provides step-by-step instructions on how to create and implement a CSS file in your Streamlit project. Ideal for those looking to customize their Streamlit UI appearance.
If interested in a specific template, please reach out to Cameron Jackson (MS Fed Civ - Cloud Solution Architect) at [email protected].
Navigate to:
- Installed a code editor such as Visual Studio Code or an equivalent.
- Installed Python on your machine. Python installation by running
python --versionin the command line. This project was created with Python 3.11.
To embed css file to streamlit follow these steps:
-
Create CSS file in the app's directory. Example for css file
style_example.css. -
Create a standalone python file to open the css file. Example for python file
styling_example.py:
import streamlit as st
def global_page_style():
with open('style_example.css') as f:
css = f.read()
st.markdown(f'<style>{css}</style>', unsafe_allow_html=True)- Call the file from step 2 into the streamlit app code file (Note: If multipage app, call on each page.)
from styling import global_page_style- Call the function in your code:
if __name__ == '__main__':
global_page_style()Clone this repository
git clone https://github.com/microsoft/Streamlit_UI_Template
Create .venv environment in code interpretor
- Steps reflect creating .venv in VsCode
1. Open the command palette: CTRL + SHIFT + P
2. Search: Python: Create Environment
3. Select: Venv
4. Select the latest version of Python installed on your device.
5. .venv environment created
Install the necessary libraries
pip install -r requirements.txt
Navigate to either the /app_1 or /app_2 directory
Navigation to /app_1:
cd apps/app_1
Navigation to /app_2:
cd apps/app_2
Run the streamlit application
Command for app_1:
streamlit run Page_One.py
Command for app_2:
streamlit run app.py
Key modifications include styling the main app container, form elements, sidebar, navigation bar, success messages, titles, buttons, text inputs, and select boxes in a streamlit application.
Key modifications include styling the chat input class and streamlit menu class, in a streamlit application.
App 2 is dedicated to developing a Streamlit application, integrating the Streamlit navigation bar for enhanced user interaction. This methodology is particularly suited for scenarios requiring the construction of single or multi-page applications utilizing navigation bars for seamless navigation and user experience.
