Adding ClassName to body tag

Dash Python
,
1

Hello community. How does someone add ClassName property to <body> tag in dash?

2

Hi @Gaylord what exactly are you refering to?

3

Hello @Gaylord,

The only way to do this is via a JavaScript function, a clientside callback can handle it.

If you use pages:

app.clientside_callback(
“””function (n) {
    document.body.classList.add(‘mycustomclass’)
return window.dash_clientside.no_update
}”””,
Output(‘_pages_content’,’id’),
Input(‘_pages_content’,’id’)
)

Or… you could mess with the template. Though I wouldn’t recommend this.

4

I wish Dash would just easily let you add attributes to the body. It’s not an uncommon thing.

I played with this a little bit and I found the most straightforward way is to just replace the '<body>' string in app.index_string. Little hacky but works:

mybody = '<body class="customclass1 customclass2">'
app.index_string = app.index_string.replace('<body>', mybody)

print(app.index_string)

<!DOCTYPE html>
<html>
    <head>
        {%metas%}
        <title>{%title%}</title>
        {%favicon%}
        {%css%}
    </head>
    <body class="customclass1 customclass2">
        <!--[if IE]><script>
        alert("Dash v2.7+ does not support Internet Explorer. Please use a newer browser.");
        </script><![endif]-->
        {%app_entry%}
        <footer>
            {%config%}
            {%scripts%}
            {%renderer%}
        </footer>
    </body>
</html>
3 Likes