CSS help with Streamlit widgets

Using Streamlit
1

Summary

I have an application and I want to update the color theme of it but I’m having some troubles.

https://sql-formatter.streamlit.app/

I’m trying to change the color of the stCodeBlock. I’ve tried the following but none of it works.

Code snippet:

[class='stCodeBlock'] {
  background-color: var(--Green) !important;
}

.stCodeBlock {
  background-color: var(--Green) !important;
}

How can I properly target items like stCodeBlock or stRadio to modify their appearance?

I’ve also always wanted to add a hover effect to the buttons but I’ve never been able to get it to work:

selected = option_menu(
    menu_title=None,
    options=["SQL Formatter", "JSON Formatter",
             "XML Formatter", "CRON Placeholder"],
    icons=["code", "braces", "bricks"],
    menu_icon="cast",
    default_index=0,
    orientation="horizontal",
    styles={
        "container": {"padding": "0px",
                      "display": "grid",
                      "margin": "0!important",
                      "background-color": "#212121"
                      },
        "icon": {"color": "#bd93f9", "font-size": "14px"},
        "nav-link": {
            "font-size": "14px",
            "text-align": "center",
            "margin": "auto",
            "background-color": "#262626",
            "height": "30px",
            "width": "13rem",
            "color": "#edff85",
            "border-radius": "5px"
        },
        "nav-link-selected": {
            "background-color": "#212121",
            "font-weight": "300",
            "color": "#f7f8f2",
            "border": "1px solid #e55381"
        }
    }
)

### Code in the CSS File
.nav-link:hover {
  background-color: #fff !important;
}
2

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