CODEWITHSUNDEEP
pythoncssplotlyplotly-dash
Mike_H
Mike_H

Reputation: 1455

Changing font style while keeping external stylesheet for plotly dashboard

I build up a dashboard using dash and plotly while using the reference to the external stylsheet that is used in every tutorial or documentation for dash and plotly.

Now I want to customize just the font for the whole dashboard (including text in figures) and "nothing else". I'm referencing to the external css source via: 

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

I have no CSS experience. Can I just overwrite the relevant variables from within the referenced source? If it is possible, how do I do it? Like:

font-family: "Garamond";

The CSS code is published on codepen and I tried to search there as well, but I wasn't helpful.

Thank you for your help!

Upvotes: 3

Views: 9523

Answers (1)

russellthehippo
russellthehippo

Reputation: 441

Use the universal CSS selector *.

Create /assets/custom.css in your app directory, or (what I do) create a CodePen with your custom CSS and include it first in the list of external_stylesheets in 

app = dash.Dash(
    __name__,
    external_stylesheets=external_stylesheets
)

In assets/custom.css or CodePen:

*{
  font-family: Garamond;
}

If you want to apply it to everything except certain classes element/component types, e.g. "everything except h2 and class myclass"

*:not(h2):not(.myclass){
  font-family: Garamond;
}

Upvotes: 5

Related Questions