Skip to content

CSS template to modify and enhance the appearance of Streamlit applications

Notifications You must be signed in to change notification settings

microsoft/Streamlit_UI_Template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Streamlit UI Template (CSS)

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 camerjackson@microsoft.com.

Navigate to:

Prerequisites

  • Installed a code editor such as Visual Studio Code or an equivalent.
  • Installed Python on your machine. Python installation by running python --version in the command line. This project was created with Python 3.11.

Embed CSS to Streamlit site

To embed css file to streamlit follow these steps:

  1. Create CSS file in project directory. Use style_example.css as template.

  2. 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)
  1. 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
  1. Call the function in your code:
   if __name__ == '__main__':
        global_page_style()

Run the Demo App Locally

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 the /app directory

cd app

Run the streamlit application

streamlit run Page_One.py

Templates

Template #1

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.

Template #1 - Image

Template #1 - Demo Video

Template #1 - Tutorial

Template #1 - CSS

Template #1 - Python

Template #2

Key modifications include styling the chat input class and streamlit menu class, in a streamlit application.

Template #2 - Image

Template #2 - Demo Video

Template #2 - Tutorial

Template #2 - CSS

Template #2 - Python

About

CSS template to modify and enhance the appearance of Streamlit applications

Resources

Code of conduct

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published