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

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.

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:

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).

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

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.

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!

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.

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