CSS hacks

Using Streamlit
3

CSS hacking tut

  • Your most important tool in this will be the Web Inspector. It’s usually F12 on Windows (I don’t know on Mac) otherwise you should find it inside the settings of your web browser (for Firefox it will be More tools > Web Developer tools). You should then see the HTML page of your Streamlit app.

image
image1345×554 215 KB

Let’s suppose you want to edit the slider color with the CSS hack. Then you’ll need to find a way to select this slider using CSS Selection. You can try and use the inspector to hover the slider and find it’s corresponding HTML block.

image
image1357×546 285 KB

See this HTML block selected corresponds to the container containing the slider? It has CSS classes associated, here it’s stSlider. So in your CSS file related to the CSS hack with Markdown, when you write

.stSlider {
    background-color: blue;
}

it will change the background color for any HTML block which has a stSlider CSS class (that’s the meaning of .stSlider).

You can also test your CSS selection live by editing the CSS attributes in the element part of the CSS rules in the bottom pane. Let’s add background-color:blue for example (this will be temporary, if you reload the page the edit is lost, which is why we use the Streamlit Markdown CSS hack to preserve those edits):

image
image1347×561 287 KB

See that the background-color is applied to the whole container, not only the slider. If you want to change the color of the slider only, we need to take the div inside the HTML block, should be something like .stSlider > div > div for example.

There, with CSS Selection + web inspector you are all equipped to select the exact HTML elements you need. Try to look for example in the HTML where the .reportview-container .main .block-container HTML element is located, and try to edit the padding attributes in the element block like we did before to understand what is happening.

  • A tutorial about CSS Selection I like is https://flukeout.github.io/ . Master this first before considering trying to select subset of widgets inside rows.

About your problem

I did not test but the .stHorizontalBlock selector should help :wink: . I’ll let you try for yourself, good luck, CSS hacking is not an easy task, especially because you’re at risk of the Streamlit dev team changing every CSS class name between 2 versions.

Cheers,
Fanilo

6 Likes