Add a css file to a page in Multipage app

Dash Python
1

I have a multipage app , with a sidebar
In My sidebar I have report page

I Want to add a css file to rappot.py (ONLY TO THIS PAGE )
not to all pages in My app .

How can I do this ? , I tried many things but it doesnt work

rapport
rapport856×618 23.1 KB

rapport2
rapport2742×316 26.2 KB

2

Tried this but doesnt work

 elif pathname == "/rapports/rapport":
        return [
                html.Div([
                    html.Div([
                        dcc.Location(id='url', refresh=False),
                        html.Link(
                            rel='stylesheet',
                            href='/base.css'
                        ),

                    ]),
                    rapport.layout,

                ])
            ]
3

CSS isn’t really designed such that you can scope the contents of different CSS files to different parts of an HTML document. All CSS selectors are combined into the same one global scope regardless of which file they came from.

The way you achieve the kind of scoping you’re after is through appropriately specified CSS selectors. The most straightforward way to achieve what you’re after is to scope all the CSS selectors in that file to the specific part of the HTML DOM that you want them applied to.

One way you could do this in your situation is to wrap each layout of your different pages (ie rapport.layout and cards.layout) in a parent html.Div with a unique id attribute, and then prefix each CSS rule with that id.

So for example, .alert {color: red} would become #rapport .alert {color: ref}

4

thank you @nedned But it doesnt work for me
my code css like this

html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
...


I tried

#rapport html{
…
}

5

The problem is that the css selector html {} is targeting the top level element of the entire DOM, but the element with ID rapport sits underneath that element. Your selector #rapport html {} is equivalent to saying "find all html elements that are descendants of the element with ID rapport". But there is only one html element, and that is above #rapport.

You might want CSS selectors that apply to #rapport directly, or perhaps to elements with specific classes beneath #rapport, as in my original example. You may find it helpful going through a CSS tutorial to get some practice with these :slight_smile:

6

yes I got you @nedned
the problem is that Html targeted all the entire Dom , I think that if I put #rapport html or just html its the same thing

soo there is no solution ! , all css files in folder assets targeted all pages !!

7

oh no I’m pretty sure you can get the outcome that you want, but you may still be thinking about doing it an a way that is not possible.

you’re right, that you cantuse CSS selectors to apply different styles to the html element based on which Dash page you’re on.

As I was describing above, you can readily use CSS sectors apply styles to the container that you’re swapping the content in and out of as part of your multipage.

But if you do want to dynamically change styles for elements above that container, there are still options. One is to have your callback also target other elements and change their className attribute dynamically (eg add a rapport class). Alternatively you can refactor your layout so that your container each’s pages content is being injected into is the top-most element in your Dash app.

2 Likes
8

Hey @sanae

@nedned has some great suggestions on how to do this.

Here is one more detailed example:

Given this project structure:

  • app.py
  • assets
    |-- page1.css
    |-- page2.css
  • pages
    |-- init.py
    |-- page1.py
    |-- page2.py

You can add classes to the selectors in each css file. Fore example:

page1.css

.page1 h1 {
    color: blue
}

.page1 h2 {
   color: green
}

page2.css

.page2 h1 {
    color: red
}

.page2 h2 {
   color: yellow
}

Then add the class name to the outer container of the page.

page1.py


layout = html.Div(
    [
      html.H1("This is an h1 header"),
      html.H2("This is an h2 header")
    ], className="page1"
)

page2.py


layout = html.Div(
    [
      html.H1("This is an h1 header"),
      html.H2("This is an h2 header")
    ], className="page2"
)
4 Likes
9

Thank you @AnnMarieW ITS WORKING !!

1 Like
10

hey @nedned Thank you soo much , your solution is working ! , I used className .rapport with My file css

1 Like
11

It is a nice way of managing various css per page but how if you want to change the style of the body and not of individual sections ?

page1 with red background
page2 with yellow backhround

how can this be achieved ?

Thanks