How to align logo with webapp header in dash?

Moo · February 15, 2022, 4:05pm

Hi!
I am new to dash and python in general. I am trying to add a logo to my WebApp so that the logo is on the top right of the page aligned with the webapp title which should be centered.

This is what I want to get

I am using this code:

app.layout =  html.Div(children=
                         [html.H1(children = ['Tweet Performance Dashboard'],
                                style = {'font-family':'Calibri', 'color':'#3A6BAC','textAlign':'center',
                                        'display':'inline-block'}),
                          html.Img(src="path/logo.png")])

But I get this view in which basically both title and logo move to the top left

I also tried the below, but still, didn’t work

app.layout =  html.Div(children=
                         [html.H1(children = ['Tweet Performance Dashboard'],
                                style = {'font-family':'Calibri', 'color':'#3A6BAC','textAlign':'center',
                                        'display':'inline-block'}),
                          html.Img(src="path/logo.png",style={'display':'inline-block'})])

Does anyone have an idea on what could be the reason?

Thanks

adamschroeder · February 15, 2022, 5:25pm

HI @Moo
welcome to Dash. I find that dash bootstrap components give a lot of layout flexibility. This code below worked for me. Make sure to put your image in the assets folder.

from dash import Dash, html
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout =  dbc.Container(children=[
    dbc.Row([
        dbc.Col(html.H1(children=['Tweet Performance Dashboard']), width=8),
        dbc.Col(html.Img(src="assets/plotly-logo.png"), width=4)
    ], justify='start')
])

if __name__=='__main__':
    app.run_server(port=8002)

Here is the layout documentation if you would like to make changes.

Moo · February 16, 2022, 9:48am

Thanks a lot @adamschroeder for your reply.
I tried the code below but I still don’t get them on the same line and they are left aligned.

app.layout =  html.Div(children=
                       [
                        dbc.Container(children=[
                                                dbc.Row([
                                                    dbc.Col(html.H1(children=['Tweet Performance Dashboard']), width=8),
                                                    dbc.Col(html.Img(src="path/logo.png"), width=4)
                                                        ], justify='start')
                                               ])
])

Do you have any idea what I am doing wrong here?

jlfsjunior · February 16, 2022, 9:58am

Have you added the Bootstrap stylesheet to the app?

Based on the picture, that seems to be the problem.

Moo · February 16, 2022, 10:47am

Hi @jlfsjunior
I am using DSS (Dataiku) dash webapp. So I’m not sure where to add this part.
When I added it before the app.Layout, I got an error. see below code and error

fig = go.Figure(
              go.Indicator(
                mode="delta",
                value=pop_chgrate,
                delta={"reference": 1, "relative": True},
                           )
              )
fig.update_layout(
                margin=dict(l=0, r=0, t=0, b=0)
                )

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
# Page Div 
app.layout =  html.Div(children=
                       [
                        dbc.Container(children=[
                                                dbc.Row([
                                                    dbc.Col(html.H1(children=['Tweet Performance Dashboard']), width=8),
                                                    dbc.Col(html.Img(src="/local/static/common/idealab-logo-black.png"), width=4)
                                                        ], justify='start')
                                               ])
])

jlfsjunior · February 16, 2022, 11:18am

Sorry, I have no experience with Dataiku. Maybe you can ask in a separate thread how to add external stylesheets to it.

Moo · February 16, 2022, 12:57pm

Hi @jlfsjunior
Thanks for your reply.
I managed to add the external stylesheets in Dataiku by using

app.config.external_stylesheets = [dbc.themes.BOOTSTRAP]
app.layout =  html.Div(children=...)

So it now works! Below image is the output:

However, I believe it needs a bit more formatting (size and color of the title) and logo position adjustment (to have the logo aligned right and the title center aligned). Can you advise how can I do so?

Thanks a lot.

jlfsjunior · February 16, 2022, 1:45pm

There are many ways to accomplish what you want, but if you want to stick with bootstrap, I would go with something like this:

dbc.Row(
    [
        dbc.Col(width=3), # A fake col to keep the title in center no matter what...
        dbc.Col(
              html.H1(children=['Tweet Performance Dashboard']), 
              width=6,
              style={
                  "textAlign": "center", 
                  # plus your style for the fonts, etc...
              }
        ),
        dbc.Col(
               html.Div(
                     html.Img(src="/local/static/common/idealab-logo-black.png"), 
                     style={"float": "right"} # one of many approaches...
               ),
               width=3, 
        )
    ]
)

GAURAV2689 · February 28, 2023, 9:22am

Hi @adamschroeder and @jlfsjunior,

I am new to dash and python in general. I am trying to add a logo to my WebApp so that the logo is on the Top left of the page aligned with the webapp title which should be centered.

I have followed the same as per your suggestion. But I am not able to see my logo. Image is showing encrypted.

Do you have an idea on what could be the reason? I have attached image error

Thanks & Regards,
Gaurav

Please find my code below,

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col(
               html.Div(
                     html.Img(src="desktop/Logo.png"), 
                     style={"float": "left"} 
               ),
               width={'size':3, 'offset':1}),
        dbc.Col(html.H1("Test Performance Dashboard",
                        style={'textAlign': 'center',
                               'fontFamily': 'arial',
                               'fontSize': 40,
                               'fontWeight': 'bold',
                               'color': 'rgb(130,230,0)'}, className='mb-1'), width={'size':4, 'offset':0}),
        dbc.Col(width=3)
        ]),

AIMPED · February 28, 2023, 9:51am

Hi @GAURAV2689,

you could store your image file in the assets folder and do something like this:

html.Img(src=app.get_asset_url('Logo.png'))

Topic		Replies	Views
How to center the logo? Dash Python	2	423	September 25, 2022
Dash Layout - Alignment/Positioning multiple items in the same row Dash Python	0	2893	April 23, 2020
Icon and HTML text on same line using DashIconify Dash Python	1	1468	October 19, 2022
Background image Dash Python	7	15842	February 27, 2021
Horizontally center image Dash Python	4	24901	March 24, 2021

How to align logo with webapp header in dash?

Related topics