How to make sure the CSS 'body' tag is used?

Dash Python
1

Hi,

If I run the code below, my background does not turn red (nothing turns red). I am probably misusing the ‘body’ tag, but I do not know how to use it differently.

In an example I have seen that the CSS ‘body’ tag is used. The python code can be found here: dash-sample-apps/app.py at main · plotly/dash-sample-apps · GitHub

The CSS code here: dash-sample-apps/base.css at main · plotly/dash-sample-apps · GitHub

Nowhere in the Python code is referred to the ‘body’ tag. Can someone explain to me why my CSS ‘body’ styling is not applied while it is applied in the example? Also, I would like to know what I should do to make sure my app uses the styling in the defined CSS ‘body’ tag (in the case of the example below, the background should turn red).

import dash
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash()

body = {
‘background-color’:‘red’
}

app.layout = html.Div([
html.Div(‘Hello World’, id=‘div-search-input’)
])

if name == ‘main’:
app.run_server(debug=True, port=8888)

2

You have the right idea. In your example, bodyneeds to be the style property of the Div:

app.layout = html.Div([
  html.Div(
    ‘Hello World’,
    id=‘div-search-input’,
    style=body
  )
])
3

Thanks for you reply, russellthehippo. However, your answer is not exactly what I am looking for.

I understand how you can assign a certain styling to a certain Div HTML-element in the way you demonstrate. However, I am working together with a front-end developer that just knows HTML and CSS. She is wondering how to apply a general page styling as one would by using the ‘body’ tag in HTML/CSS.

To illustrate that I am definately missing something I use the following example CSS code in which the ‘body’ tag is used: https://github.com/plotly/dash-sample-apps/blob/master/apps/dash-multipage-report/assets/base.css

However, in the corresponding Python/Dash code there is no reference to the ‘body’-tag styling (I used CTRL+F to search for ‘body’): https://github.com/plotly/dash-sample-apps/blob/master/apps/dash-multipage-report/app.py

I hope this clarifies what I do not understand.

1 Like
4

When you assign your layout to app.layout, it gets injected into a simple HTML template by Dash. In particular, everything you define in your layout will end up in the <body> of this simple template, so you can still write some custom CSS to add styles to the body which will get applied to everything in your layout unless it’s overridden by a more specific selector.

See the section “Customizing Dash’s HTML Index Template” here for more details on what the template is by default, and how to change it if you like.

See the section “Adding Your Own CSS and JavaScript to Dash Apps” at the same link for details on how to link an external stylesheet.

5

Did anyone find an answer to this? Still cant seem to edit the body HTML tags of my app

6

I am encountering the same problem. I can’t edit the body tag and I haven’t found a solution yet. Was this solved at some point?

1 Like