My CSS styles is not loading in the component. I may quit

Using Streamlit
1

I am trying to build my dashboard application, and I want to build a header component consisting of a background image and other CSS styles or fonts. I used the ad-hoc() st.markdown() but the CSS file could not render. So I turned to the standard streamlit components. It did not work as well.

Here is the script

import streamlit as st
import streamlit.components.v1 as components
from PIL import Image

def main():

  #Set page config
  st.set_page_config(
     page_title="Global Food Price Tracker and Explorer",
     layout="wide",
     initial_sidebar_state="expanded",
     page_icon=Image.open("assets/fruitbasket.png")
  )

  #render html components
  components.html(
    html="""
    <link rel="stylesheet" href="assets/mystyles.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed rel="stylesheet">
    <div class="header">
     <H1 class="title">Global Food Price Tracker and Explorer</H1>
    </div>
    """
  )
  
if __name__ == '__main__':
  main()

The image below is the output. As you can see, there is no background image or change in font, except for the text.
Opera Snapshot_2023-12-26_202204_localhost

At first, I thought I was at fault, so I checked. I pasted the assets folder on the desktop and created a test.html file to run the offline HTML script in my browser. Remarkably, it worked.

Opera Snapshot_2023-12-26_200556_test.html
Opera Snapshot_2023-12-26_200556_test.html852×303 74.6 KB

So what is wrong? I don’t know. So I changed strategy and decided to internalize the CSS script as you can see:

import streamlit as st
import streamlit.components.v1 as components
from PIL import Image

 #Set page config
  st.set_page_config(
     page_title="Global Food Price Tracker and Explorer",
     layout="wide",
     initial_sidebar_state="expanded",
     page_icon=Image.open("assets/fruitbasket.png")
  )

  #render html components
  components.html(
    html="""
    <style>
    .header {
    position: relative;
    text-align: center;
    color: white;
    height: 300px; 
    background-image: url("assets/wheatfarm.png");
    background-position: center;
  
    .title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 36px;
    font-weight: bold;
    }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed rel="stylesheet">
    <div class="header">
      <H1 class="title">Global Food Price Tracker and Explorer</H1>
    </div>
    """
  )

This was the strange output:

Opera Snapshot_2023-12-26_204454_localhost
Opera Snapshot_2023-12-26_204454_localhost712×144 687 Bytes

Can anyone interpret this? Why did the CSS script run well offline but could not run on the Streamlit server? I even put the CSS file to see if it would work but it did not. Someone should please help me out. I am about to quit and move the entire project to Plotly’s Dash.
Please note that I am doing this project in a non-base conda environment. And I am using Opera browser, JupyterLab IDE (notebook + console +
editor).

2

Ensure that your CSS selectors match the Streamlit-generated HTML structure by inspecting the rendered page using browser developer tools.

Also it is tricky to use CSS with Streamlit I suggest you play with the theme color using color pallets, here is a repo for some custom gui you use

3

I did. The elements were loaded as an iframe under the documents.

However, according to my Jupyter logs, the CSS styles are a bad gateway (perhaps because they come from a local directory) and would generate a 403 error. When I checked online forums, they said that it is a common problem the Jupyter server has with browsers like Chrome and Opera.

4

Hi @ASTRONOE

Instead of using the html components function, you’ll want to use st.markdown() together with unsafe_allow_html=True as the parameter.

I’ve created a demo app showing the importing of a custom font (along with a step by step tutorial) from the Google API in the following repo and demo app:

In a similar fashion you can add other custom CSS styles in a similar fashion using st.markdown() together with unsafe_allow_html=True.

Hope this helps!

5

st.markdown() was what I used first. It did not work, so I switched to components. I think the problem is from my JupyterLab IDE server config that is preventing the CSS from loading into the browser. I will find a way out, or change to a different IDE or browser.

6

I see the problem. It’s my amateurish fault.

component.html() is the same as component.iframe(). Servers do not allow using local media files (including local CSS) to be imported into iframes for security reasons. It didn’t matter what tool I use, it just is not allowed.

I guess I should use your design then

7

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