Skip to content

Instantly share code, notes, and snippets.

@asehmi
Created October 7, 2022 01:18
Show Gist options
  • Select an option

  • Save asehmi/a7ad6025c727f0bb33300acc54aad95b to your computer and use it in GitHub Desktop.

Select an option

Save asehmi/a7ad6025c727f0bb33300acc54aad95b to your computer and use it in GitHub Desktop.
Adjusting Streamlit page container style
import streamlit as st
# --------------------------------------------------------------------------------
def v_space(n, level=None):
for _ in range(n):
header_marks = ''
if level:
header_marks = '#' * int(level)
st.write(f'{header_marks}  '.strip())
# --------------------------------------------------------------------------------
# Page style usage example:
#
# from style import set_page_container_style
# set_page_container_style(
# max_width=1200, max_width_100_percent=False,
# padding_top=2, padding_right=5, padding_left=5, padding_bottom=5,
# color='black', background_color='#B7D6D5',
# sidebar_color='white', sidebar_background_color='#74A9BE'
# )
#
# -----------------------------------------------------------------------------
# choose colours here: https://colorpalettes.net/
BACKGROUND_COLOR = 'white'
COLOR = 'black'
SIDEBAR_BACKGROUND_COLOR = 'white'
SIDEBAR_COLOR = 'black'
def set_page_container_style(
max_width: int = 1100, max_width_100_percent: bool = False,
padding_top: int = 5, padding_right: int = 5, padding_left: int = 5, padding_bottom: int = 5,
color: str = COLOR, background_color: str = BACKGROUND_COLOR,
sidebar_color: str = SIDEBAR_COLOR, sidebar_background_color: str = SIDEBAR_BACKGROUND_COLOR
):
if max_width_100_percent:
max_width_str = f'max-width: 100%;'
else:
max_width_str = f'max-width: {max_width}px;'
st.markdown(
f'''
<style>
header[data-testid="stHeader"] {{
background-color: {background_color} !important;
// visibility: hidden;
// height: 0%;
}}
section[data-testid="stSidebar"] > div:first-child > div:nth-child(2) {{
padding-top: {padding_top}rem;
color_HIDDEN: {sidebar_color};
}}
section[data-testid="stSidebar"] {{
background-color: {sidebar_background_color};
}}
div[data-testid="stAppViewContainer"] > .main > .block-container {{
{max_width_str}
padding-top: {padding_top}rem;
padding-right: {padding_right}rem;
padding-left: {padding_left}rem;
padding-bottom: {padding_bottom}rem;
}}
div[data-testid="stAppViewContainer"] {{
color: {color};
background-color: {background_color};
}}
</style>
''',
unsafe_allow_html=True,
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment