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.

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.