Blog

Styling dashboard with HTML and CSS

A Streamlit application typically has a standard look-and-feel designed for simplicity and usability. However, to align the application with your business’s unique branding or personal vibe, HTML, CSS, and even JavaScript can be used to create a more customized and engaging user experience.

Key Techniques for Customization

  1. Styling with CSS:
    CSS allows you to adjust colors, fonts, spacing, and layout, helping create a polished and professional look. For example:
    • Use custom colors to match your brand palette.
    • Change font styles to reflect your business’s identity.
    • Adjust spacing and alignment for a cleaner layout.

  3. Targeting Specific Elements:
    By using the browser’s “Inspect” tool, you can identify the class or ID of specific Streamlit elements and target them in your custom CSS file. This is particularly useful for modifying elements like buttons, containers, and headers.

    
.stButton > button {
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
    border-radius: 10px;
}

3. Incorporating HTML for Advanced Layouts:
HTML can be used to create complex layouts or add interactive features that are not natively supported by Streamlit. You can include HTML elements directly in your app using the st.markdown function.

4. Embedding JavaScript:
For additional interactivity, JavaScript can be embedded to add animations or event-based functionalities, although this requires more care to ensure compatibility and performance.

Practical Examples

1. Customizing Headers and Footers:

You can create a custom header or footer to display your logo, navigation links, or copyright information.

    
.main-header {
    background-color: #1e3d58;
    color: white;
    padding: 20px;
    text-align: center;
}

2. Dynamic CSS Adjustments:


style = "background-color: green;" if value > threshold else "background-color: red;"
st.markdown(f"""


    Current Value: {value}


""", unsafe_allow_html=True)

Benefits of Customization

  • Enhanced Branding: A custom design ensures that your Streamlit app reflects your business identity.
  • Improved User Experience: Tailored styles make your app visually appealing and user-friendly.
  • Increased Flexibility: Customization opens the door to a wide range of design possibilities, from minimalist to highly interactive layouts.

With these techniques, Streamlit can be transformed into a highly personalized platform that not only delivers insights but also resonates with your business’s unique style.