Themes: add margin color

đź“Š Plotly Python
1

Hello,

I am using a bootswatch theme but want to add different color on its left and right side i.e. light theme applied in the middle 80% of the page and have black color on its left 10% and right 10%. I tried coloring the margins of the container but realized I can only have background color there and changing background color affects everything. So a bit confused now.

How can I do this please.

from dash import Dash, html
import dash_bootstrap_components as dbc

def create_layout(app:Dash):
return html.Div([
html.H1(app.title),
dbc.Tabs([
dbc.Tab(dbc.Card(dbc.CardBody([html.H1(“Coming soon…”)])), label=“Tab1”),
dbc.Tab(dbc.Card(dbc.CardBody([html.H1(“Coming soon…”)])), label=“Tab2”),
dbc.Tab(dbc.Card(dbc.CardBody([html.H1(“Coming soon…”)])), label=“Tab3”),
])
], className=“Container”, style={“marginLeft”:“10vw”, “marginRight”:“10vw”})

app = Dash(external_stylesheets=[dbc.themes.LUX])
app.title = “TITLE”
app.layout = create_layout(app)
app.run(debug=True)

2

If i’m understanding correctly, it sounds like you are trying to create a 3 column grid. The middle column containing your tabs and then 2 flanking columns with black backgrounds. If this is correct i’d use dbc’s layout component to help split up your layout. Example below.

from dash import Dash, html
import dash_bootstrap_components as dbc

def create_layout(app:Dash):
    return html.Div([
        html.H1(app.title),
        dbc.Row(
            [
                dbc.Col(html.Div("One of three columns"), width=2,
                        style={'background-color': 'black'}),
                dbc.Col([
                    dbc.Tabs([
                        dbc.Tab(dbc.Card(dbc.CardBody([html.H1("Coming soon…")])), label="Tab1"),
                        dbc.Tab(dbc.Card(dbc.CardBody([html.H1("Coming soon…")])), label="Tab2"),
                        dbc.Tab(dbc.Card(dbc.CardBody([html.H1("Coming soon…")])), label="Tab3"),
                    ])
                ], width=8),
                dbc.Col(html.Div("One of three columns"), width=2, 
                        style={'background-color': 'black'})
            ], className='g-0'),

        ], className="Container")

app = Dash(external_stylesheets=[dbc.themes.LUX])
app.title = "TITLE"
app.layout = create_layout(app)
app.run(debug=True)
2 Likes